/* * Lo que el diseño de referencia no trae. * * Su CSS se descargó tal cual y no se toca: cuando el sitio de referencia * cambie, se vuelve a bajar y se reemplaza entero. Lo que se agrega acá es solo * lo que este sitio necesita y aquél no tiene, por dos motivos: * * - Cosas que allá hace Vue y acá se resuelven con una clase: el menú de * teléfono abierto, un desplegable desplegado, la foto en grande. * - Páginas que este sitio tiene y aquél no —el concejo, la documentación, el * COSOC— y que usan moldes de otras secciones. */ /* ------------------------------------------------------------------ Menú de teléfono ------------------------------------------------------------------ */ @media (max-width: 992px) { /* En teléfono manda el cajón: la barra de secciones de escritorio no se muestra, igual que en el diseño original. */ .header__nav { display: none; } .has-dropdown .dropdown { display: none; } .has-dropdown--abierto .dropdown { display: block; } } /* ------------------------------------------------------------------ Cajón de menú en teléfono Portado del sitio original (sus reglas, sin los atributos de ámbito de Vue que allá generaba el compilador). Es un cajón que entra desde la derecha sobre un velo oscuro, con las secciones apiladas y sus desplegables dentro. Antes esto lo resolvía Vue con un «v-if»; acá se muestra con una clase. ------------------------------------------------------------------ */ @media(max-width:767px) { .mobile-menu { transition:top .3s ease } .mobile-menu--scrolled { top:0!important } } .mobile-menu__overlay { background:#00000080;inset:0;position:fixed;z-index:9998 } .mobile-menu { display: none; background:#f8f9fa;bottom:0;box-shadow:-5px 0 30px #0003;max-width:400px;overflow:hidden;position:fixed;right:0;top:0;width:85%;z-index:9999 } .mobile-menu__content { display:flex;flex-direction:column;height:100%;padding:1rem } .mobile-menu__nav { display:flex;flex:1;flex-direction:column;gap:.35rem;overflow-y:auto;padding-bottom:1rem } .mobile-menu__nav a { background:#fff;border-radius:10px;box-shadow:0 1px 3px #0000000d;color:#1a1a1a;font-size:.95rem;font-weight:600;padding:.85rem 1rem;text-decoration:none;transition:all .2s } .mobile-menu__nav a:active,.mobile-menu__nav a:hover { background:#0a4952;color:#fff } .mobile-menu__dropdown { display:flex;flex-direction:column } .mobile-menu__dropdown-toggle { align-items:center;background:#fff;border:none;border-radius:10px;box-shadow:0 1px 3px #0000000d;color:#1a1a1a;cursor:pointer;display:flex;font-size:.95rem;font-weight:600;justify-content:space-between;padding:.85rem 1rem;text-align:left;transition:all .2s;width:100% } .mobile-menu__dropdown-toggle svg { color:#666;transition:transform .3s ease } .mobile-menu__dropdown-toggle--open svg { transform:rotate(180deg) } .mobile-menu__dropdown-toggle--open,.mobile-menu__dropdown-toggle:hover { background:#0a4952;color:#fff } .mobile-menu__dropdown-toggle--open svg,.mobile-menu__dropdown-toggle:hover svg { color:#fff } .mobile-menu__dropdown-content { background:#0a49520d;border-radius:10px;display:flex;flex-direction:column;gap:.25rem;margin-top:.25rem;overflow:hidden;padding:.5rem 0 .5rem 1rem } .mobile-menu__dropdown-content a { background:transparent;border-radius:8px;box-shadow:none;font-size:.85rem;font-weight:500;padding:.65rem 1rem } .mobile-menu__dropdown-content a:hover { background:#0a4952;color:#fff } .mobile-menu__item--disabled { align-items:center;background:#00000008;border-radius:8px;color:#999;cursor:not-allowed;display:flex;font-size:.85rem;font-weight:500;justify-content:space-between;padding:.65rem 1rem } .mobile-menu__soon { background:#f59e0b;border-radius:3px;color:#000;font-size:.55rem;font-weight:800;letter-spacing:.3px;padding:2px 6px;text-transform:uppercase } .mobile-menu__subdropdown { display:flex;flex-direction:column } .mobile-menu__subdropdown-toggle { align-items:center;background:#0a495214;border:none;border-radius:8px;color:#333;cursor:pointer;display:flex;font-size:.8rem;font-weight:600;justify-content:space-between;margin-left:.5rem;padding:.65rem 1rem;text-align:left;transition:all .2s;width:calc(100% - .5rem) } .mobile-menu__subdropdown-toggle svg { color:#666;transition:transform .3s ease } .mobile-menu__subdropdown-toggle--open svg { transform:rotate(180deg) } .mobile-menu__subdropdown-toggle--open,.mobile-menu__subdropdown-toggle:hover { background:#0a495226;color:#0a4952 } .mobile-menu__subdropdown-toggle--open svg,.mobile-menu__subdropdown-toggle:hover svg { color:#0a4952 } .mobile-menu__subdropdown-content { border-left:2px solid rgba(10,73,82,.15);display:flex;flex-direction:column;gap:.2rem;margin-left:.5rem;margin-top:.25rem;padding:.4rem 0 .4rem 1.5rem } .mobile-menu__subdropdown-content a { background:transparent;border-radius:6px;box-shadow:none;font-size:.8rem;font-weight:500;padding:.55rem .85rem } .mobile-menu__subdropdown-content a:hover { background:#0a49521a;color:#0a4952 } .mobile-menu__subdropdown-content .mobile-menu__item--disabled { font-size:.8rem;padding:.55rem .85rem } .mobile-menu__subsubdropdown { display:flex;flex-direction:column } .mobile-menu__subsubdropdown-toggle { align-items:center;background:#0a49520f;border:none;border-radius:6px;color:#555;cursor:pointer;display:flex;font-size:.75rem;font-weight:600;justify-content:space-between;margin-left:.5rem;padding:.55rem .85rem;text-align:left;transition:all .2s;width:calc(100% - .5rem) } .mobile-menu__subsubdropdown-toggle svg { color:#999;transition:transform .3s ease } .mobile-menu__subsubdropdown-toggle--open svg { transform:rotate(180deg) } .mobile-menu__subsubdropdown-toggle--open,.mobile-menu__subsubdropdown-toggle:hover { background:#0a49521f;color:#0a4952 } .mobile-menu__subsubdropdown-toggle--open svg,.mobile-menu__subsubdropdown-toggle:hover svg { color:#0a4952 } .mobile-menu__subsubdropdown-content { border-left:2px solid rgba(10,73,82,.1);display:flex;flex-direction:column;gap:.15rem;margin-left:.5rem;margin-top:.2rem;padding:.3rem 0 .3rem 2rem } .mobile-menu__subsubdropdown-content a { background:transparent;border-radius:5px;box-shadow:none;font-size:.75rem;font-weight:500;padding:.5rem .75rem } .mobile-menu__subsubdropdown-content a:hover { background:#0a495214;color:#0a4952 } .mobile-menu__subsubdropdown-content .mobile-menu__item--disabled { font-size:.75rem;padding:.5rem .75rem } .mobile-menu__buttons { border-top:1px solid rgba(0,0,0,.08);display:flex;flex-direction:column;gap:.5rem;padding-top:1rem } .mobile-menu__btn { align-items:center;border-radius:12px;display:flex;font-size:.9rem;font-weight:700;gap:.6rem;justify-content:center;padding:.9rem 1rem;text-decoration:none;transition:all .2s } .mobile-menu__btn--radio { background:linear-gradient(135deg,#6366f1,#4f46e5);color:#fff } .mobile-menu__btn--radio:hover { background:linear-gradient(135deg,#4f46e5,#4338ca) } .mobile-menu__btn--disabled { cursor:not-allowed;opacity:.7;overflow:hidden;position:relative } .mobile-menu__btn--disabled:hover { transform:none } .mobile-menu__btn-soon { background:#f59e0b;box-shadow:0 2px 8px #0000004d;color:#000;font-size:.6rem;font-weight:800;left:50%;letter-spacing:.5px;padding:4px 30px;position:absolute;text-transform:uppercase;top:50%;transform:translate(-50%,-50%) rotate(-20deg);white-space:nowrap;z-index:1 } .mobile-menu__btn--concejo { background:linear-gradient(135deg,#0a4952,#083d44);color:#fff } .mobile-menu__btn--concejo:hover { background:linear-gradient(135deg,#083d44,#062f35) } .mobile-menu__btn--active { background:linear-gradient(135deg,#dc2626,#b91c1c)!important } .mobile-menu__btn-live { background:#fff;border-radius:4px;color:#dc2626;font-size:.65rem;font-weight:800;letter-spacing:.5px;padding:2px 8px;text-transform:uppercase } .mobile-menu__btn-icon { height:20px;-o-object-fit:contain;object-fit:contain;width:20px } .mobile-menu__btn-badge { background:#fff;border-radius:4px;color:#dc2626;font-size:.6rem;font-weight:800;letter-spacing:.05em;margin-left:auto;padding:2px 6px } .mobile-menu-enter-active,.mobile-menu-leave-active { transition:transform .3s cubic-bezier(.4,0,.2,1) } .mobile-menu-enter-from,.mobile-menu-leave-to { transform:translate(100%) } @media(min-width:768px)and (max-width:1024px) { .mobile-menu { top:0!important } } @media(max-width:768px) { .mobile-menu { top:0 } .mobile-menu__content { padding:.75rem } .mobile-menu__dropdown-toggle,.mobile-menu__nav a { font-size:.9rem;padding:.75rem .9rem } .mobile-menu__dropdown-content a { font-size:.8rem;padding:.6rem .9rem } } @media(max-width:480px) { .mobile-menu { top:0 } .mobile-menu__content { padding:.6rem } .mobile-menu__nav { gap:.3rem } .mobile-menu__dropdown-toggle,.mobile-menu__nav a { border-radius:8px;font-size:.85rem;padding:.7rem .85rem } .mobile-menu__dropdown-content { border-radius:8px;padding:.4rem 0 .4rem .75rem } .mobile-menu__dropdown-content a { border-radius:6px;font-size:.8rem;padding:.55rem .85rem } .mobile-menu__buttons { gap:.4rem;padding-top:.75rem } .mobile-menu__btn { border-radius:10px;font-size:.85rem;padding:.75rem .9rem } } /* Los desplegables nacen cerrados. Va con el atributo en el selector a propósito: el «hidden» del navegador es un display:none de baja prioridad y cualquier display de autor —acá, el flex de arriba— lo pisa sin avisar. Se veía como un cajón con TODAS las secciones desplegadas de entrada. */ .mobile-menu__dropdown-content[hidden], .mobile-menu__subdropdown-content[hidden], .mobile-menu__subsubdropdown-content[hidden] { display: none; } /* El cajón recibe el foco al abrirse (para que el teclado entre ahí), pero es un contenedor, no algo que se pulse: el anillo de foco alrededor se veía como un borde dorado que el diseño original no tiene. Los enlaces de dentro conservan el suyo, que es el que hace falta. */ .mobile-menu:focus { outline: none; } /* Lo que allá hacía Vue y acá hace una clase. */ /* Se muestra como BLOQUE, no como flex: el original no le pone display al cajón, y convertirlo en contenedor flex hacía que su contenido se encogiera al ancho del texto —las tarjetas quedaban a 189 px dentro de un cajón de 332—. El interior ya es flex por su propia regla. */ .mobile-menu--abierto { display: block; } .mobile-menu__overlay { display: none; } .mobile-menu__overlay--visible { display: block; } /* De escritorio hacia arriba el cajón no existe: ahí está la barra de siempre. */ @media (min-width: 993px) { .mobile-menu, .mobile-menu--abierto, .mobile-menu__overlay { display: none !important; } } /* ------------------------------------------------------------------ La foto de la galería, en grande ------------------------------------------------------------------ */ .galeria__visor { display: none; position: fixed; inset: 0; z-index: 9999; background: rgba(0, 0, 0, .88); align-items: center; justify-content: center; padding: 2rem; } .galeria__visor--abierto { display: flex; } .galeria__visor img { max-width: 92vw; max-height: 88vh; object-fit: contain; border-radius: .5rem; } .galeria__visor button { position: absolute; background: rgba(255, 255, 255, .16); color: #fff; border: none; border-radius: 50%; cursor: pointer; /* Cuarenta y ocho píxeles: menos que eso y un dedo no acierta. */ width: 48px; height: 48px; font-size: 1.8rem; line-height: 1; display: flex; align-items: center; justify-content: center; transition: background .18s; } .galeria__visor button:hover, .galeria__visor button:focus-visible { background: rgba(255, 255, 255, .32); } .galeria__visor-cerrar { top: 1.2rem; right: 1.2rem; } .galeria__visor-prev { left: 1.2rem; } .galeria__visor-next { right: 1.2rem; } .galeria__item img { cursor: zoom-in; } /* ------------------------------------------------------------------ Páginas que este sitio tiene y el de referencia no ------------------------------------------------------------------ */ /* La lista de concejales usa las tarjetas de departamentos. */ .dept-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; padding: 2rem 0; } /* ------------------------------------------------------------------ Imágenes servidas en varios formatos ------------------------------------------------------------------ */ /* Las imágenes salen envueltas en «picture» para ofrecer AVIF y WebP. Ese envoltorio es un elemento en línea, y por serlo reserva el hueco de un renglón debajo de cada foto y se interpone entre el contenedor y la imagen: una regla como «.dept-card__image img» deja de aplicar. Con «display: contents» no genera caja propia y la imagen queda donde estaría sin él. */ picture { display: contents; } /* Y sus «source», que no se ven, dejan de contar como elementos: si no, en un contenedor con separación cada uno suma su hueco. */ picture > source { display: none; } /* En el diseño de referencia la tarjeta de departamento no lleva fotografía: su hueco de imagen muestra un icono, y por eso no hay regla para «img». Acá sí hay foto —del concejal, del encargado— y sin ajustarla al hueco se sale y tapa el nombre y el cargo. */ .dept-card__image img { width: 100%; height: 100%; object-fit: cover; /* Encuadre en el tercio superior: son retratos de cuerpo entero y en un hueco apaisado el centro cae a la altura del pecho, dejando la cara fuera. */ object-position: center 22%; display: block; } /* El diseño de referencia estiliza el título de la tarjeta por su etiqueta —«.dept-card__body h3»— y acá esos títulos son «h2», porque colgar del título de la página los pone en ese nivel y así quien navega con lector de pantalla no se encuentra un salto. Se repite la regla para el nivel correcto: el aspecto queda idéntico y el orden de los encabezados también. */ .dept-card__body h2 { color: #1a1a1a; font-size: 1.15rem; font-weight: 700; line-height: 1.3; margin: 0 0 .75rem; } .dept-card__nombre { font-size: 1.05rem; font-weight: 700; color: var(--color-primario, #0D5963); margin: 0 0 .2rem; line-height: 1.3; } .dept-card__encargado { font-size: .82rem; font-weight: 600; color: #5f6b73; text-transform: uppercase; letter-spacing: .04em; margin: 0; } .dept-card__desc { font-size: .86rem; color: #4a5560; line-height: 1.55; margin: .6rem 0 0; } .dept-card__tel, .dept-card__mail { display: block; font-size: .85rem; color: var(--color-primario, #0D5963); margin-top: .35rem; text-decoration: none; } .dept-card__tel:hover, .dept-card__mail:hover { text-decoration: underline; } .dept-card__partido { display: inline-block; font-size: .72rem; font-weight: 700; padding: .2rem .7rem; border-radius: 2rem; margin-top: .4rem; } /* Los grupos de la página de documentación. */ .obras__grupo-titulo { font-size: 1.1rem; font-weight: 700; margin: 2rem 0 1rem; color: var(--color-primario, #0D5963); } /* Cuando una sección todavía no tiene nada publicado. Se dice con palabras y no con un hueco en blanco, que se lee como que algo falló. */ .sin-contenido { grid-column: 1 / -1; text-align: center; color: #5f6b73; font-style: italic; padding: 3rem 1rem; } /* ------------------------------------------------------------------ El visor de la cuenta pública ------------------------------------------------------------------ */ .guia-servicios__anios { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin-bottom: 1.5rem; } .guia-servicios__anio { padding: .45rem 1.1rem; border-radius: 2rem; border: 2px solid var(--color-primario, #0D5963); color: var(--color-primario, #0D5963); font-weight: 600; font-size: .9rem; text-decoration: none; } .guia-servicios__anio--activo { background: var(--color-primario, #0D5963); color: #fff; } .guia-servicios__pdf { width: 100%; /* Se reserva sobre el ancho y no en «vh»: en teléfono una medida fija deja un hueco blanco debajo del documento. */ min-height: calc(100% * 1.294); aspect-ratio: 1 / 1.294; border: none; border-radius: .5rem; background: #fff; } .guia-servicios__descargar { display: inline-block; margin-top: 1.2rem; padding: .7rem 1.6rem; border-radius: 2rem; background: var(--color-primario, #0D5963); color: #fff; font-weight: 600; text-decoration: none; } /* ------------------------------------------------------------------ Los iconos de los valores institucionales ------------------------------------------------------------------ */ /* El diseño de referencia dibuja cada icono como un SVG escrito dentro del HTML, así que no carga ninguna tipografía de iconos. Los valores institucionales sí la necesitan: sus iconos los elige quien edita el controlador, por nombre. Traer la hoja entera de la librería serían ochenta y cuatro kilos de reglas —dos mil iconos— para dibujar seis. Se copian solo las seis que se usan; la tipografía la declara «iconos-partidos.css», que ya viene partida. Si mañana se cambia un valor en el controlador, hay que traer su regla acá. El test «los iconos de los valores existen» avisa si alguien se olvida: fue el que descubrió que «bi-balance-scale» no existía y que Equidad llevaba años saliendo sin icono. */ .mision-vision__card--valor .bi::before { font-family: "bootstrap-icons"; font-style: normal; font-weight: normal; display: inline-block; line-height: 1; } .bi-eye-fill::before { content: "\f33e"; } .bi-people-fill::before { content: "\f4cf"; } .bi-lightning-fill::before { content: "\f46e"; } .bi-shield-fill-check::before { content: "\f531"; } .bi-lightbulb-fill::before { content: "\f468"; } .bi-heart-fill::before { content: "\f415"; } /* Estas tarjetas solo llevan un icono y un nombre, y heredaban el alto de las de misión y visión, que llevan un párrafo largo cada una: quedaban seis cajas enormes con dos palabras perdidas en el medio. Se ajustan a su contenido y se ponen de a tres, que es como caben sin que sobre espacio. */ .mision-vision__card--valor { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: .75rem; padding: 1.75rem 1rem; min-height: 0; } .mision-vision__card--valor .mision-vision__card-icon { font-size: 1.75rem; color: var(--color-primario, #0D5963); /* El hueco del icono es el mismo que usan las tarjetas de arriba, para que las dos filas se lean como parte de la misma página. */ width: 3.25rem; height: 3.25rem; border-radius: 50%; background: rgba(13, 89, 99, .09); display: flex; align-items: center; justify-content: center; margin: 0; } .mision-vision__card--valor .mision-vision__card-title { font-size: 1.05rem; margin: 0; } /* Tres por fila y no «los que quepan»: son seis, y dejándolo al ancho salían cinco arriba y uno solo abajo. Dos filas de tres quedan parejas. */ .mision-vision__cards:has(.mision-vision__card--valor) { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } @media (max-width: 900px) { .mision-vision__cards:has(.mision-vision__card--valor) { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px) { .mision-vision__cards:has(.mision-vision__card--valor) { grid-template-columns: 1fr; } } /* ------------------------------------------------------------------ El buscador en la barra ------------------------------------------------------------------ */ /* Un icono y no una caja de texto: en la barra no cabe, y una caja que se encoge en teléfono termina midiendo tres centímetros y no sirve. El icono lleva a la página de búsqueda, donde el campo es del ancho que necesita. */ .header__buscar { display: flex; align-items: center; justify-content: center; /* Cuarenta y cuatro píxeles: menos que eso y un dedo no acierta. */ width: 44px; height: 44px; border-radius: 50%; color: inherit; text-decoration: none; transition: background .18s; } .header__buscar:hover, .header__buscar:focus-visible { background: rgba(255, 255, 255, .15); } /* ------------------------------------------------------------------ Los títulos del pie ------------------------------------------------------------------ */ /* Ya no hace falta repetir nada: los títulos de columna del pie y el nombre del alcalde son «h4» y «h3», que es lo que usa el diseño de referencia, así que sus propias reglas los alcanzan. Antes eran «h2» y había que reescribirles el tamaño acá, con un valor que además no coincidía con el del sitio en vivo. */ /* ------------------------------------------------------------------ El panel de accesibilidad ------------------------------------------------------------------ */ /* El botón flotante, su menú y los modos que enciende. Vienen de la hoja del diseño anterior, que es donde se escribieron: el diseño de referencia no trae nada de esto porque su sitio no tiene panel de accesibilidad. Se copian las reglas ENTERAS, con su selector completo. La primera vez se copiaron por trozos que empezaran en «.acc-», y eso convirtió «body.alto-contraste .acc-panel» en «.acc-panel»: el menú salía negro siempre, no solo en el modo de alto contraste, con el texto gris y los iconos apagados. Se veía roto sin estar roto. */ .acc-fab {position: fixed; right: 1.25rem; bottom: 1.5rem; z-index: 9990; display: flex; flex-direction: column; align-items: flex-end; gap: 0.6rem;} .acc-fab-btn {width: 54px; height: 54px; border-radius: 50%; background: var(--color-primario); color: #fff; border: none; cursor: pointer; font-size: 1.5rem; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 18px rgba(13,89,99,0.45); transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease; flex-shrink: 0;} .acc-fab-btn:hover {background: var(--color-primario-dark); transform: scale(1.08);} .acc-fab-btn:focus-visible {outline: 3px solid #fff; outline-offset: 3px;} .acc-panel {background: #fff; border: 1px solid #e2e8ed; border-radius: 14px; box-shadow: 0 10px 40px rgba(0,0,0,0.18); width: 252px; overflow: hidden; display: none; animation: accPanelIn 0.18s ease;} .acc-panel.is-open {display: block;} .acc-panel-header {display: flex; align-items: center; justify-content: space-between; padding: 0.8rem 1rem 0.65rem; border-bottom: 1px solid #f0f4f8; background: #f8fafc;} .acc-panel-header-title {font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-primario);} .acc-panel-close {background: none; border: none; cursor: pointer; color: #aab; font-size: 1rem; padding: 0 0.15rem; line-height: 1; transition: color 0.14s; font-family: var(--fuente);} .acc-panel-close:hover {color: #555;} .acc-panel-list {list-style: none; margin: 0; padding: 0.35rem 0 0.5rem;} .acc-panel-item {display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 1rem; cursor: pointer; font-size: 0.88rem; font-weight: 500; color: #2d2d2d; user-select: none; transition: background 0.12s; position: relative;} .acc-panel-item:hover {background: #f4f7f9;} .acc-panel-item.is-active {color: var(--color-primario); font-weight: 700; background: #edf6f7;} .acc-item-icon {width: 30px; height: 30px; border-radius: 7px; background: #eef2f5; color: #666; display: flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0; transition: background 0.14s, color 0.14s;} .acc-panel-item:hover .acc-item-icon {background: #d8eef1; color: var(--color-primario);} .acc-panel-item.is-active .acc-item-icon {background: var(--color-primario); color: #fff;} .acc-item-badge {margin-left: auto; font-size: 0.68rem; font-weight: 800; color: var(--color-primario); background: #daeef1; border-radius: 2rem; padding: 0.1rem 0.5rem; white-space: nowrap; display: none;} .acc-panel-item.is-active .acc-item-badge {display: inline-block;} .acc-panel-item--sep {border-top: 1px solid #f0f4f8; margin-top: 0.3rem; padding-top: 0.75rem; color: #6b6b6b;} .acc-panel-item--sep .acc-item-icon {background: #fce8ea; color: #c0392b;} .acc-panel-item--sep:hover {background: #fff5f5;} .acc-panel-item--sep:hover .acc-item-icon {background: #f9c0c5; color: #c0392b;} .acc-panel-item--sep {color: #c0392b;} .acc-popup-overlay {position: fixed; inset: 0; background: rgba(0,0,0,0.62); z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 1rem; opacity: 0; transition: opacity 0.28s ease;} .acc-popup-overlay.is-visible {opacity: 1;} .acc-popup {background: #fff; border-radius: 18px; padding: 2rem 2rem 1.75rem; max-width: 480px; width: 100%; box-shadow: 0 16px 48px rgba(0,0,0,0.28); text-align: center;} .acc-popup-icon {font-size: 3rem; color: var(--color-primario); margin-bottom: 0.75rem;} .acc-popup-title {font-size: 1.25rem; font-weight: 800; color: var(--color-texto); margin-bottom: 0.5rem; line-height: 1.3;} .acc-popup-desc {font-size: 0.9rem; color: var(--color-texto-suave); margin-bottom: 1.5rem; line-height: 1.6;} .acc-popup-actions {display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap;} .acc-popup-btn-si {background: var(--color-primario); color: #fff; border: none; border-radius: 10px; padding: 0.75rem 1.75rem; font-size: 1rem; font-weight: 700; cursor: pointer; transition: background 0.18s;} .acc-popup-btn-si:hover {background: var(--color-primario-dark);} .acc-popup-btn-no {background: #f0f0f0; color: var(--color-texto); border: 1px solid var(--color-borde); border-radius: 10px; padding: 0.75rem 1.5rem; font-size: 0.9rem; font-weight: 600; cursor: pointer; transition: background 0.18s;} .acc-popup-btn-no:hover {background: #e0e0e0;} #acc-banner-modo {background: #e6f4f7; border-bottom: 2px solid var(--color-primario); padding: 0.55rem 1.25rem; display: flex; align-items: center; justify-content: center; gap: 1rem; font-size: 0.82rem; color: var(--color-primario-dark); flex-wrap: wrap; text-align: center;} #acc-banner-modo strong {font-weight: 800;} #acc-banner-modo button {background: var(--color-primario); color: #fff; border: none; border-radius: 6px; padding: 0.32rem 0.9rem; font-size: 0.78rem; font-weight: 700; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 0.35rem; transition: background 0.15s; font-family: var(--fuente);} #acc-banner-modo button:hover {background: var(--color-primario-dark);} /* Y los modos que enciende el propio panel, con la condición que los activa. Sin ella se aplican siempre, que es exactamente lo que pasó. */ body.alto-contraste #modal-svc-caja, body.alto-contraste .acc-popup {background: #1e1e1e !important; color: #eee !important;} body.alto-contraste #modal-svc-titulo, body.alto-contraste .acc-popup h2 {color: #fff !important;} body.alto-contraste .acc-panel-title {color: #4dd0e1 !important; border-bottom-color: #333 !important;} body.alto-contraste .acc-panel-item:hover {background: #2a2a2a !important;} body.alto-contraste .acc-item-icon {background: #2a2a2a !important; color: #ccc !important;} /* ------------------------------------------------------------------ El buscador de la barra ------------------------------------------------------------------ */ /* Cerrado ocupa lo que un icono, y al tocarlo se abre en su sitio. Antes era un enlace que llevaba a otra página solo para escribir dos palabras: dos pasos para lo que debería ser uno, y el icono suelto además desentonaba entre dos botones con relleno. */ .buscador-barra { display: flex; align-items: center; background: rgba(255, 255, 255, .14); border-radius: 2rem; /* La transición es del ancho del campo, no del contenedor: animar el contenedor empuja los botones vecinos en cada apertura. */ padding: 0 .25rem 0 0; /* Sin esto, el texto de ayuda del campo se sale de su caja de ancho cero y queda escrito encima de la barra, en negro y partido en dos líneas. */ overflow: hidden; } .buscador-barra__campo { width: 0; /* «min-width: 0» además del ancho: un campo de formulario trae un ancho mínimo propio del navegador que ignora el «width: 0». */ min-width: 0; padding: 0; border: none; background: transparent; /* En blanco a la fuerza: la barra es verde oscuro y el color que hereda el campo es el negro del cuerpo, que ahí no se lee. */ color: #fff !important; font-size: .92rem; outline: none; transition: width .25s ease, padding .25s ease; } .buscador-barra__campo::placeholder { color: rgba(255, 255, 255, .7); } /* Se abre al enfocarlo y al pasar el ratón por encima. El «:focus-within» del contenedor es lo que lo mantiene abierto mientras se escribe. */ .buscador-barra:hover .buscador-barra__campo, .buscador-barra:focus-within .buscador-barra__campo { width: 190px; padding: .55rem .25rem .55rem 1rem; } .buscador-barra__boton { color: #fff; display: flex; align-items: center; justify-content: center; /* Cuarenta y cuatro píxeles: menos que eso y un dedo no acierta. */ width: 44px; height: 44px; border: none; border-radius: 50%; background: transparent; cursor: pointer; flex: 0 0 auto; } .buscador-barra__boton:hover, .buscador-barra__boton:focus-visible { background: rgba(255, 255, 255, .2); } /* En teléfono el campo va siempre abierto y del ancho que quede: el gesto de «pasar el ratón» no existe, y un campo que solo se abre al enfocarlo obliga a un toque a ciegas sobre algo que mide cero. */ @media (max-width: 992px) { .buscador-barra { width: 100%; margin: .5rem 0; } .buscador-barra__campo { width: 100%; padding: .6rem .25rem .6rem 1rem; } } /* ------------------------------------------------------------------ Texto solo para lectores de pantalla ------------------------------------------------------------------ */ /* Se usa en las etiquetas de los campos de búsqueda y en el enlace para saltar al contenido: cosas que quien ve la página no necesita leer, y quien navega con lector de pantalla sí. Ninguno de los dos diseños la traía, así que ese texto salía escrito encima de la barra, en negro sobre verde. Es un defecto silencioso de los peores: la clase existe en el HTML, nadie la define, y el resultado no da error —solo se ve mal, y solo si alguien mira. No se usa «display: none» ni «visibility: hidden»: eso lo esconde también del lector de pantalla, que es justo lo contrario de lo que se busca. */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* Salvo cuando se le da el foco con el teclado: el enlace para saltar al contenido tiene que verse justo en ese momento. */ .visually-hidden-focusable:not(:focus):not(:focus-within) { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* ------------------------------------------------------------------ El buscador flotante ------------------------------------------------------------------ */ /* Estuvo dentro de la barra de navegación y ahí no cabía: esa barra ya lleva diez enlaces, el teléfono y WhatsApp, y un campo que se abre la deformaba cada vez. Acá no estorba, se alcanza desde cualquier página sin subir, y queda simétrico con el de accesibilidad, que está en la esquina de enfrente. */ .buscador-flotante { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 900; display: flex; align-items: center; gap: .5rem; flex-direction: row-reverse; } .buscador-flotante__abrir { /* Del mismo tamaño y forma que el de accesibilidad: son los dos botones que flotan sobre la página, y que se parezcan los explica sin palabras. */ width: 54px; height: 54px; border-radius: 50%; border: none; background: var(--color-primario, #0D5963); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 4px 16px rgba(0, 0, 0, .28); transition: transform .18s, background .18s; } .buscador-flotante__abrir:hover, .buscador-flotante__abrir:focus-visible { transform: scale(1.08); } .buscador-flotante__abrir:focus-visible { outline: 3px solid #fff; outline-offset: 3px; } .buscador-flotante__caja { display: flex; align-items: center; gap: .4rem; background: #fff; border-radius: 2rem; padding: .35rem .35rem .35rem 1rem; box-shadow: 0 4px 20px rgba(0, 0, 0, .22); } .buscador-flotante__caja[hidden] { display: none; } .buscador-flotante__campo { width: 230px; max-width: 55vw; border: none; outline: none; font-size: .95rem; color: #1a1a1a; background: transparent; } .buscador-flotante__enviar { border: none; border-radius: 2rem; background: var(--color-primario, #0D5963); color: #fff; font-weight: 600; font-size: .88rem; /* Cuarenta y cuatro de alto: menos que eso y un dedo no acierta. */ padding: 0 1.1rem; height: 44px; cursor: pointer; } /* En teléfono la caja se despliega encima del botón, no al lado: al lado no cabe y empujaría el botón fuera de la pantalla. */ @media (max-width: 600px) { .buscador-flotante { flex-direction: column; align-items: flex-end; } .buscador-flotante__campo { width: 62vw; } } /* ------------------------------------------------------------------ Las tarjetas de «Ver más servicios» ------------------------------------------------------------------ */ /* En producción esta retícula es de cuadrados, porque las imágenes que subieron allá son cuadradas de origen (1080×1080) y la tarjeta se adapta a lo que le pongan dentro. Eso hace que la portada cambie de forma según lo que suba quien publica: con una imagen apaisada las tarjetas quedan de la mitad de alto y la sección se ve distinta a la de producción, que es lo que pasaba acá. Se fija el cuadrado en la tarjeta, no en la imagen: así la retícula es siempre la misma suba lo que suba, y la imagen se acomoda dentro sin recortarse. Lo que mejor se ve sigue siendo una imagen cuadrada. */ .boton-card { aspect-ratio: 1 / 1; } /* La imagen llena TODA la tarjeta (cover), así todos los banners —y los que se suban después, con cualquier proporción— quedan del mismo tamaño y estilo, sin franjas ni recuadros vacíos. Se estira también el y el que envuelven la imagen, o se quedan al alto natural de la imagen. El overflow del recuadro (con su radio) recorta las esquinas → bordes redondeados parejos. */ .boton-card > a, .boton-card picture { display: block; width: 100%; height: 100%; } .boton-card__img { width: 100%; height: 100%; object-fit: cover; } /* ------------------------------------------------------------------ Los colores que necesitan las reglas traídas del otro diseño ------------------------------------------------------------------ */ /* Las reglas del panel de accesibilidad vienen de la hoja del diseño anterior y están escritas contra sus variables. El diseño de referencia no define ninguna, así que sin esto el botón sale con fondo transparente: no da error, simplemente no se ve, que es lo peor que le puede pasar justo a ese botón. Los valores son los del diseño anterior, copiados y no inventados. */ :root { --color-borde: #dde3e0; --color-primario: #0D5963; --color-primario-dark: #094550; --color-texto: #1a1a1a; --color-texto-suave: #63696f; --fuente: 'Montserrat', sans-serif; } /* El icono del botón de accesibilidad, que es de la tipografía de iconos: sin su regla el botón sale vacío, y un botón redondo sin nada dentro no dice qué hace. */ .acc-fab-btn .bi::before { font-family: "bootstrap-icons"; font-style: normal; font-weight: normal; line-height: 1; } .bi-universal-access::before { content: "\f826"; } /* ------------------------------------------------------------------ Las flechas de los desplegables del menú ------------------------------------------------------------------ */ /* La hoja del diseño de referencia trae dos reglas que dimensionan estos SVG: «.header__nav svg» los deja en 14 píxeles y «a > svg:only-child» en 24. Las dos tienen la misma especificidad, así que decide cuál va después. Y no decide el orden sino la especificidad: «a > svg:only-child» pesa más que «.header__nav svg», así que gana la de 24 aunque venga antes. Por eso los cuatro menús con desplegable medían diez píxeles más cada uno —cuarenta en total, que es exactamente lo que separaba este menú del de producción— y por eso repetir la regla tal cual no arreglaba nada. Se escribe con un selector más específico que el que hay que ganar. */ .header__nav .has-dropdown > a > svg, .header__nav li > a > svg { width: 14px; height: 14px; } /* Los iconos del panel de accesibilidad. Se copian solo estos siete, sacados del propio guion del panel para no adivinar ninguno. La hoja completa de la librería son dos mil iconos en ochenta y cuatro kilos de reglas, y acá hacen falta siete. Sin ellos el panel se abre con siete cuadrados grises vacíos: se ve roto sin estarlo, que es como estaba. */ .acc-panel .bi::before, .acc-item-icon .bi::before { font-family: "bootstrap-icons"; font-style: normal; font-weight: normal; line-height: 1; } .bi-arrow-counterclockwise::before { content: "\f117"; } .bi-circle-half::before { content: "\f288"; } .bi-person-hearts::before { content: "\f77b"; } .bi-universal-access::before { content: "\f826"; } .bi-volume-up::before { content: "\f611"; } .bi-zoom-in::before { content: "\f62c"; } .bi-zoom-out::before { content: "\f62d"; } /* ------------------------------------------------------------------ Dónde va cada botón flotante ------------------------------------------------------------------ */ /* El de accesibilidad a la izquierda, como en producción; el buscador a la derecha. Las reglas que vienen de la hoja del otro diseño lo ponen a la derecha, y ahí los dos quedaban uno encima del otro. Esta regla ya se había escrito y se perdió al rehacer el bloque de accesibilidad completo: se pone al final, fuera de ese bloque, para que volver a traer aquellas reglas no se la lleve otra vez. */ .acc-fab { right: auto; left: 1.25rem; } /* ------------------------------------------------------------------ La imagen del aviso emergente ------------------------------------------------------------------ */ /* El aviso de la portada salía de 1080 × 760 donde producción lo tiene de 760 × 760, y por eso su botón de cerrar caía 160 píxeles a la derecha del borde. La causa no está en el aviso sino en las imágenes del sitio: este proyecto les añade los atributos «width» y «height» para que el navegador reserve su hueco antes de bajarlas y la página no dé un salto al cargar. Producción no lo hace. Con esos atributos, cuando «max-height» recorta el alto, el ancho se queda en el que dice el atributo y la caja deja de ser cuadrada. Basta con dejar el ancho en automático: el alto manda, el ancho lo sigue, y los atributos siguen sirviendo para reservar el hueco. */ .popup-content img { width: auto; height: auto; } /* ================================================================== ALTO CONTRASTE — copiado del sitio de referencia (municipalidadgraneros.cl). NO invierte a oscuro: realza el contraste del diseño CLARO con un filtro sobre . Así el header fijo sigue visible al hacer scroll (no se funde con un fondo negro) y se ve moderno. El enfoque oscuro anterior dejaba todo negro y el navbar invisible; se reemplaza por completo. ================================================================== */ html:has(body.alto-contraste) { filter: contrast(1.15); } /* ------------------------------------------------------------------ La versión simplificada ------------------------------------------------------------------ */ /* Lo que se enciende desde el panel de accesibilidad o desde el aviso de la portada: letras más grandes, más separación y menos cosas en pantalla. Está pensado para quien tiene dificultad visual o no se maneja con una página llena de columnas. El servidor lo lee de una cookie y le pone la clase «modo-mayor» al cuerpo; todo lo demás cuelga de esa clase. Las reglas vienen de la hoja del diseño anterior, copiadas enteras con su selector: el diseño de referencia no tiene nada parecido. */ #acc-banner-modo {background: #e6f4f7; border-bottom: 2px solid var(--color-primario); padding: 0.55rem 1.25rem; display: flex; align-items: center; justify-content: center; gap: 1rem; font-size: 0.82rem; color: var(--color-primario-dark); flex-wrap: wrap; text-align: center;} #acc-banner-modo strong {font-weight: 800;} #acc-banner-modo button {background: var(--color-primario); color: #fff; border: none; border-radius: 6px; padding: 0.32rem 0.9rem; font-size: 0.78rem; font-weight: 700; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 0.35rem; transition: background 0.15s; font-family: var(--fuente);} #acc-banner-modo button:hover {background: var(--color-primario-dark);} /* ------------------------------------------------------------------ Hacia dónde abre el panel de accesibilidad ------------------------------------------------------------------ */ /* El panel viene sin posicionar: se apila dentro del mismo contenedor que el botón, así que al abrirse el contenedor se ensancha a los 252 píxeles del panel y el botón salta de la esquina al otro extremo. Parece que el botón se mueve solo, y es lo primero que se nota al usarlo. En el diseño anterior no se veía porque el botón iba a la derecha: el contenedor crecía hacia la izquierda y el botón se quedaba en su sitio. Al moverlo a la izquierda —que es donde está en producción— el defecto aparece. Se ancla el contenedor al tamaño del botón y el panel se saca del flujo: entonces el botón no se mueve nunca y el panel se despliega hacia arriba y hacia la derecha, que es el lado donde hay sitio. */ .acc-fab { width: 54px; height: 54px; } .acc-fab .acc-panel { position: absolute; bottom: calc(100% + .75rem); left: 0; right: auto; } /* En teléfono se despliega desde el borde izquierdo y ocupa lo que quepa: un panel de 252 píxeles anclado al botón se sale por la derecha en pantallas angostas. */ @media (max-width: 380px) { .acc-fab .acc-panel { width: calc(100vw - 2.5rem); max-width: 252px; } } /* ------------------------------------------------------------------ Alto contraste ------------------------------------------------------------------ */ /* Lo que enciende esa opción del panel: fondo oscuro, texto claro y bordes marcados en todo el sitio, no solo en el propio panel. La primera vez se copiaron quince de las setenta y nueve reglas que tiene la hoja base, porque la expresión que las buscaba no entraba dentro de los bloques «@media», que es justo donde estaban casi todas. El resultado era un modo que cambiaba los colores de su propio recuadro y dejaba la página igual: se encendía y no servía de nada. */ /* (tema oscuro de alto contraste eliminado: reemplazado por el filtro de arriba) */ /* ------------------------------------------------------------------ La versión simplificada ------------------------------------------------------------------ */ /* Lo que hace no es agrandar la letra ni apilar todo en una columna —eso fue lo primero que probé y lo único que consigue es desordenar la portada—. Lo que hace es QUITAR OPCIONES: la barra superior pasa de cuatro enlaces a tres y el menú de diez a cuatro. La página se ve igual; lo que baja es la cantidad de decisiones que hay que tomar para encontrar algo. El banner de arriba es del diseño anterior, copiado tal cual. */ #acc-banner-modo {background: #e6f4f7; border-bottom: 2px solid var(--color-primario); padding: 0.55rem 1.25rem; display: flex; align-items: center; justify-content: center; gap: 1rem; font-size: 0.82rem; color: var(--color-primario-dark); flex-wrap: wrap; text-align: center;} #acc-banner-modo strong {font-weight: 800;} #acc-banner-modo button {background: var(--color-primario); color: #fff; border: none; border-radius: 6px; padding: 0.32rem 0.9rem; font-size: 0.78rem; font-weight: 700; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 0.35rem; transition: background 0.15s; font-family: var(--fuente);} #acc-banner-modo button:hover {background: var(--color-primario-dark);} /* El banner de la versión simplificada, encima de todo. La cabecera del diseño nuevo es fija y arranca en el borde superior, así que el banner quedaba debajo de ella: existía, medía sus 45 píxeles, y no se veía ni uno. En el diseño anterior no pasaba porque allá la cabecera no es fija. Se fija el banner también y se baja la cabecera lo que él mide, para que ninguno tape al otro. Solo en versión simplificada: en la normal el banner no existe y la cabecera tiene que seguir arriba del todo. */ body.modo-mayor #acc-banner-modo { position: fixed; top: 0; left: 0; right: 0; /* Por encima de la cabecera, que es lo que hay que ganar. */ z-index: 1100; } body.modo-mayor header { top: var(--acc-banner-h, 68px); } body.modo-mayor main { padding-top: var(--acc-banner-h, 68px); } /* Los iconos del banner de la versión simplificada. */ #acc-banner-modo .bi::before, #acc-desactivar-modo .bi::before { font-family: "bootstrap-icons"; font-style: normal; font-weight: normal; line-height: 1; } .bi-arrow-left-circle::before { content: "\f12a"; } /* ------------------------------------------------------------------ DIDECO: los filtros y las oficinas son enlaces, no botones En el sitio anterior eran