/* =========================================================================
   Tema IVAN sobre Bootstrap 5.3.8 — ivan-coachella.org (2026-08-02)

   El sitio venia de una plantilla de HTML5UP montada sobre skel. Aqui se
   reproduce ese aspecto con Bootstrap, para que el cambio de framework no se
   note: los valores NO son inventados, se midieron sobre el sitio en
   produccion leyendo los estilos calculados en el navegador.

       cuerpo    18.6667px / peso 300 / interlineado 32.6667px / #585858
       h1        51.3333px / peso 700 / tracking -1.79667px
       h2        20.5333px / peso 900 / tracking 7.18667px / VERSALITAS
       enlaces   #0099ff
       .inner    ancho maximo 1269.33px, relleno lateral 46.6667px

   Se carga DESPUES de bootstrap.min.css.
   ========================================================================= */

:root {
    /* --- Tokens medidos sobre el diseño anterior ------------------------- */
    --ivan-tinta: #585858;
    --ivan-enlace: #0099ff;
    --ivan-enlace-hover: #007acc;
    --ivan-borde: #e6e6e6;

    /* Los seis velos de color de los mosaicos de la portada, tal cual
       estaban en .tiles article.styleN > a */
    --ivan-mosaico-1: rgba(242, 132, 158, .75);   /* rosa      */
    --ivan-mosaico-2: rgba(123, 208, 193, .75);   /* verde agua*/
    --ivan-mosaico-3: rgba(126, 202, 246, .75);   /* azul      */
    --ivan-mosaico-4: rgba(199,  91, 155, .75);   /* magenta   */
    --ivan-mosaico-5: rgba(174, 133, 202, .75);   /* morado    */
    --ivan-mosaico-6: rgba(132, 153, 231, .75);   /* indigo    */
    --ivan-mosaico-hover: rgba(0, 0, 0, .45);

    /* --- Variables de Bootstrap ----------------------------------------- */
    /* Nunito Sans desde el 2026-08-02, autoalojada (css/vendor/nunito-sans).
       Antes era Source Sans 3 y el cuerpo iba en peso 300, que es lo que hacia
       que el sitio se leyera lavado. Se cambian las DOS cosas: fuente de
       terminaciones redondeadas, mas calida, y cuerpo en 400. */
    --bs-body-font-family: "Nunito Sans", Helvetica, Arial, sans-serif;
    --bs-body-font-size: 1.1667rem;      /* 18.6667px con la raiz en 16px */
    --bs-body-font-weight: 400;
    --bs-body-line-height: 1.75;         /* 32.6667 / 18.6667 */
    --bs-body-color: var(--ivan-tinta);
    --bs-body-bg: #fff;
    --bs-link-color: var(--ivan-enlace);
    --bs-link-hover-color: var(--ivan-enlace-hover);
    --bs-border-color: var(--ivan-borde);
    --bs-border-radius: 0;               /* el diseño anterior no redondeaba */
    --bs-emphasis-color: var(--ivan-tinta);
}

/* Bootstrap declara sus variables de enlace tambien en <a>; sin esto el color
   medido no se aplica a los enlaces dentro de parrafos. */
/* Bootstrap subraya los enlaces por defecto; el diseño anterior no lo hacia
   (textDecoration: none, medido en produccion). Se quita el subrayado y se
   deja al pasar el raton, que es lo que da la pista de que es pulsable. */
a {
    --bs-link-color-rgb: 0, 153, 255;
    --bs-link-hover-color-rgb: 0, 122, 204;
    /* ⚠️ Tiene que ser una declaracion, NO la variable --bs-link-decoration.
       En 5.3 el subrayado va compilado en Reboot como `text-decoration:
       underline` y esa variable no la lee nadie: definirla no hace nada.
       Esta hoja carga despues de bootstrap.min.css, asi que con la misma
       especificidad gana por orden. */
    text-decoration: none;
}
a:hover { text-decoration: underline; }
/* En los mosaicos nunca, ni al pasar: el titulo lleva mucho tracking y el
   subrayado lo parte. */
.ivan-mosaico:hover { text-decoration: none !important; }

/* --- Tipografia ---------------------------------------------------------
   Bootstrap usa una escala propia (h1 = 2.5rem). Aqui se fija la del diseño
   anterior para que los titulos no cambien de tamaño al migrar. */
h1, .h1 {
    font-size: 3.2083rem;          /* 51.3333px */
    font-weight: 700;
    letter-spacing: -0.035em;      /* -1.79667px sobre 51.3333 */
    line-height: 1.3;
    color: var(--ivan-tinta);
}

/* ⚠️ El h2 del diseño anterior no era un titulo normal: era la ETIQUETA DE
   SECCION, en versalitas muy espaciadas ("HOW IVAN WORKS"). Pero aplicarlo a
   todos los <h2> es falso y se vio enseguida en /report/list: los titulos de
   cada reporte —que tambien son h2— salian en mayusculas y con el tracking
   abierto, ilegibles en un listado.
   Se acota a los que son HIJOS DIRECTOS del contenedor, que es justo donde
   quedaron los titulos de seccion al quitar el <header> que los envolvia. Los
   h2 anidados (titulos de reporte, de monitor, de ficha) se quedan normales. */
h2, .h2 {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.01em;
    text-transform: none;
}

.ivan-banda > .container > h2 {
    font-size: 1.2833rem;          /* 20.5333px */
    font-weight: 900;
    letter-spacing: 0.35em;        /* 7.18667px sobre 20.5333 */
    text-transform: uppercase;
    line-height: 1.5;
}

h3, .h3 { font-size: 1.15rem; font-weight: 700; letter-spacing: .05em; }

/* Escala en pantallas pequeñas: 51px de titular en un movil de 375px ocupa
   tres lineas y empuja todo el contenido por debajo del pliegue. */
@media (max-width: 767.98px) {
    h1, .h1 { font-size: 2.35rem; letter-spacing: -0.025em; }
    :root { --bs-body-font-size: 1.0625rem; }
}
@media (max-width: 575.98px) {
    h1, .h1 { font-size: 2rem; }
    h2, .h2 { font-size: 1.3rem; }
    .ivan-banda > .container > h2 { font-size: 1.1rem; letter-spacing: .25em; }
}

/* --- Contenedor ---------------------------------------------------------
   El ancho y el relleno del `.inner` de antes. Se aplica al contenedor de
   Bootstrap para no tener que tocar cada vista. */
.container, .container-fluid, .container-lg, .container-xl {
    max-width: 1269px;
    padding-left: 2.9167rem;       /* 46.6667px */
    padding-right: 2.9167rem;
}
@media (max-width: 767.98px) {
    .container, .container-fluid, .container-lg, .container-xl {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }
}

/* =========================================================================
   Cabecera
   ========================================================================= */
.ivan-cabecera {
    padding: .75rem 0 0;
    background: transparent;
}
.ivan-logo {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    text-decoration: none !important;
    color: var(--ivan-tinta);
}
.ivan-logo img { height: 40px; width: auto; }
.ivan-logo-texto {
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .35em;
    font-size: 1.05rem;
}

/* =========================================================================
   Cabecera rediseñada (2026-08-02)

   Antes: 52px, transparente y con UN enlace visible; todo el menu escondido
   tras un boton "MENU" incluso en una pantalla de 1400px. Ahora la navegacion
   se ve en escritorio (>=992px), con desplegables en las secciones que tienen
   subpaginas, la accion principal destacada, y el cajon toma el relevo en
   tablet y movil.
   ========================================================================= */

/* Enlace de salto para teclado y lectores de pantalla. Invisible hasta que
   recibe el foco. */
.ivan-saltar {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 2000;
    background: var(--ivan-tinta);
    color: #fff;
    padding: .6rem 1rem;
    text-decoration: none;
}
.ivan-saltar:focus { left: 0; color: #fff; }

.ivan-cabecera {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: rgba(255, 255, 255, .96);
    -webkit-backdrop-filter: blur(6px);
            backdrop-filter: blur(6px);
    border-bottom: 1px solid var(--ivan-borde);
    padding: 0;
}
.ivan-cabecera-fila {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: 64px;
}

/* --- Navegacion de escritorio ------------------------------------------- */
.ivan-nav { display: none; margin-left: auto; }
/* ⚠️ Solo el ul de PRIMER nivel va en flex: `.ivan-nav ul` a secas alcanza
   tambien al submenu, y sus entradas salian en columnas una al lado de otra. */
.ivan-nav > ul { list-style: none; margin: 0; padding: 0; display: flex; }
.ivan-nav li { position: relative; }

.ivan-nav-enlace {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: 1.35rem .85rem;
    color: var(--ivan-tinta);
    font-weight: 700;
    font-size: .95rem;
    text-decoration: none !important;
    border-bottom: 3px solid transparent;
}
.ivan-nav-enlace:hover { color: var(--ivan-enlace); }
.ivan-nav-enlace.activa { border-bottom-color: var(--ivan-enlace); color: var(--ivan-enlace); }

.ivan-flecha {
    width: .5em;
    height: .5em;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
}

/* Desplegable: se abre con el raton Y con el teclado (:focus-within). */
.ivan-submenu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 15rem;
    list-style: none;
    margin: 0;
    padding: .5rem 0;
    background: #fff;
    border: 1px solid var(--ivan-borde);
    border-top: 3px solid var(--ivan-enlace);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .09);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
.ivan-nav li:hover > .ivan-submenu,
.ivan-nav li:focus-within > .ivan-submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.ivan-submenu a {
    display: block;
    padding: .5rem 1.1rem;
    color: var(--ivan-tinta);
    font-size: .95rem;
    text-decoration: none !important;
}
.ivan-submenu a:hover { background: #f2f7fd; color: var(--ivan-enlace); }

/* --- Accion principal ---------------------------------------------------- */
.ivan-boton-primario {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: #2f6f3e;
    color: #fff !important;
    font-weight: 700;
    font-size: .9rem;
    letter-spacing: .03em;
    padding: .6rem 1.1rem;
    border-radius: .25rem;
    text-decoration: none !important;
    white-space: nowrap;
}
.ivan-boton-primario:hover { background: #275c33; }

/* --- Boton del cajon (tablet y movil) ------------------------------------ */
.ivan-boton-menu {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    border: 1px solid #c9c9c9;
    border-radius: .25rem;
    background: transparent;
    color: var(--ivan-tinta);
    padding: .5rem .8rem;
    font-weight: 700;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    line-height: 1;
}
.ivan-boton-menu:hover { border-color: var(--ivan-enlace); color: var(--ivan-enlace); }

/* Hamburguesa dibujada con bordes: sin imagenes. */
.ivan-hamburguesa {
    display: block;
    width: 18px;
    height: 2px;
    background: currentColor;
    position: relative;
}
.ivan-hamburguesa::before,
.ivan-hamburguesa::after {
    content: "";
    position: absolute;
    left: 0;
    width: 18px;
    height: 2px;
    background: currentColor;
}
.ivan-hamburguesa::before { top: -6px; }
.ivan-hamburguesa::after  { top: 6px; }

/* --- El cajon ------------------------------------------------------------ */
.ivan-cajon .offcanvas-header { border-bottom: 1px solid var(--ivan-borde); }
.ivan-cajon-seccion + .ivan-cajon-seccion { margin-top: .25rem; }
.ivan-cajon-enlace {
    display: block;
    padding: .55rem 0;
    font-weight: 700;
    color: var(--ivan-tinta);
    text-decoration: none !important;
}
.ivan-cajon-enlace.activa { color: var(--ivan-enlace); }
.ivan-cajon-hijos { margin: 0 0 .35rem; padding-left: 1rem; }
.ivan-cajon-hijos a {
    display: block;
    padding: .4rem 0;
    color: var(--ivan-tinta-suave, #6b7378);
    text-decoration: none !important;
}
.ivan-cajon-hijos a:hover { color: var(--ivan-enlace); }

/* --- Reparto por tamaño --------------------------------------------------- */
@media (min-width: 992px) {
    .ivan-nav { display: block; }
    .ivan-boton-menu { display: none; }
}
@media (max-width: 991.98px) {
    /* Sin la navegacion en medio, el hueco lo absorbe el boton principal: el
       orden queda logo · (hueco) · Submit A Report · Menu. En movil (<576px)
       el boton principal ya lo oculta el d-none de Bootstrap y queda dentro
       del cajon. */
    .ivan-boton-primario { margin-left: auto; }
    .ivan-boton-primario.d-none ~ .ivan-boton-menu,
    .ivan-boton-menu { margin-left: 0; }
    .ivan-cabecera-fila { min-height: 58px; }
}
@media (max-width: 575.98px) {
    .ivan-boton-menu { margin-left: auto; }
}

/* =========================================================================
   Mosaicos de la portada
   Antes: <section class="tiles"><article class="styleN"><img><a>…
   El velo de color va sobre la imagen y el titulo encima, centrado.
   ========================================================================= */
.ivan-mosaicos { --ivan-mosaico-alto: 333px; }

.ivan-mosaico {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--ivan-mosaico-alto);
    overflow: hidden;
    text-decoration: none !important;
    color: #fff !important;
    text-align: center;
    padding: 1.5rem;
}

/* La imagen va de fondo y el velo encima; asi el titulo nunca queda tapado. */
.ivan-mosaico img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}
.ivan-mosaico::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: var(--velo, var(--ivan-mosaico-1));
    transition: background-color .2s ease-in-out;
}
.ivan-mosaico:hover::after { background: var(--ivan-mosaico-hover); }
.ivan-mosaico:focus-visible { outline: 3px solid var(--ivan-enlace); outline-offset: -3px; }

.ivan-mosaico-titulo {
    position: relative;
    z-index: 2;
    margin: 0;
    color: #fff;
    font-size: 1.2833rem;
    font-weight: 900;
    letter-spacing: .35em;
    text-transform: uppercase;
    /* El tracking empuja la ultima letra: se compensa para que quede centrado. */
    text-indent: .35em;
}

/* La descripcion de cada mosaico estaba oculta y se desplegaba al pasar el
   raton (max-height 0 -> auto, con opacidad). Se conserva ese comportamiento:
   el texto sigue en el HTML —lo lee un lector de pantalla y lo indexa un
   buscador— pero no se muestra hasta que hay interaccion, como antes. */
.ivan-mosaico-texto {
    position: relative;
    z-index: 2;
    width: 100%;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    margin-top: .35em;
    line-height: 1.5;
    font-size: .95rem;
    transition: max-height .5s ease, opacity .5s ease;
}
.ivan-mosaico:hover .ivan-mosaico-texto,
.ivan-mosaico:focus-visible .ivan-mosaico-texto { max-height: 12rem; opacity: 1; }
.ivan-mosaico-texto p { margin-bottom: 0; }

/* --- En pantalla tactil, la descripcion SIEMPRE a la vista (2026-08-02) ---
   El despliegue al pasar el raton venia del diseño original y en un ordenador
   esta bien. El problema es que en un telefono o una tableta no hay raton: el
   texto que explica cada mosaico —"Report an environmental issue in a few easy
   steps"— no habia forma de verlo, y la portada se quedaba en seis fotos con
   un rotulo. Justo donde mas ayuda saber a donde lleva cada una.

   Van las DOS condiciones. `hover: none` es la buena —distingue el
   dispositivo, no el ancho, y coge la tableta grande en horizontal, que
   tampoco tiene raton—, pero solo la cumple un aparato tactil de verdad. El
   ancho cubre el resto de casos estrechos, y ademas es lo unico comprobable
   desde un navegador de escritorio: sin el, este arreglo se despliega a ciegas. */
@media (hover: none), (max-width: 767.98px) {
    .ivan-mosaico-texto {
        max-height: none;
        opacity: 1;
        overflow: visible;
        transition: none;
    }
    /* Con el texto siempre puesto, el velo tiene que dejar leer: se oscurece
       un poco mas y el mosaico crece para que quepan las dos cosas. */
    .ivan-mosaico::after { background: color-mix(in srgb, var(--velo, var(--ivan-mosaico-1)) 78%, #000 22%); }
    .ivan-mosaicos { --ivan-mosaico-alto: 230px; }
    .ivan-mosaico-texto { text-shadow: 0 1px 2px rgba(0, 0, 0, .35); }
}

/* El contenido va apilado y centrado, como en el diseño anterior. */
.ivan-mosaico-cuerpo {
    position: relative;
    z-index: 2;
    width: 100%;
}

.ivan-mosaico--1 { --velo: var(--ivan-mosaico-1); }
.ivan-mosaico--2 { --velo: var(--ivan-mosaico-2); }
.ivan-mosaico--3 { --velo: var(--ivan-mosaico-3); }
.ivan-mosaico--4 { --velo: var(--ivan-mosaico-4); }
.ivan-mosaico--5 { --velo: var(--ivan-mosaico-5); }
.ivan-mosaico--6 { --velo: var(--ivan-mosaico-6); }

@media (max-width: 575.98px) {
    .ivan-mosaicos { --ivan-mosaico-alto: 200px; }
    .ivan-mosaico-titulo { font-size: 1.05rem; letter-spacing: .25em; text-indent: .25em; }
}

/* =========================================================================
   Bandas de contenido y pie
   ========================================================================= */
.ivan-banda { padding: 3rem 0; }
.ivan-banda--gris { background: #eaf0f3; }   /* el .rowColor de antes, exacto */

/* Dos bandas seguidas DEL MISMO color suman sus rellenos y dejan un hueco de
   6rem donde no hay nada que separar: en /air/alerts el titulo iba en una
   banda y su formulario en la siguiente, y entre ambos quedaban 96px en blanco.
   Cuando cambia el color el hueco si tiene sentido, asi que solo se colapsa
   entre bandas iguales. */
.ivan-banda:not(.ivan-banda--gris) + .ivan-banda:not(.ivan-banda--gris),
.ivan-banda--gris + .ivan-banda--gris { padding-top: 0; }

/* --- La entradilla de cada seccion (2026-08-02) --------------------------
   Todas las secciones publicas abren igual: un <h1> y debajo un parrafo que
   explica de que va la pagina. Ese parrafo se estiraba hasta los 1140px del
   contenedor, o sea lineas de mas de 150 caracteres en un portatil: para leer
   una linea entera hay que barrer la cabeza, y al saltar a la siguiente es
   facil repetir renglon. Se acota a la medida de lectura de siempre y se
   distingue del cuerpo con un tono algo mas suave.

   Va por selector de hermano —`h1 + p`— y no con una clase en cada vista: es
   exactamente el mismo patron en las ocho paginas y asi no hay que acordarse
   de ponerla en la novena. */
.ivan-banda h1 + p {
    max-width: 68ch;
    font-size: 1.15rem;
    line-height: 1.65;
    color: #4a5257;
}

/* El titulo de seccion y su entradilla, mas juntos: el margen por defecto de
   Bootstrap los dejaba como dos bloques sin relacion. */
.ivan-banda h1 { margin-bottom: .6rem; }

/* El texto corrido de las paginas largas —About, Air Monitoring, las Q&A—
   tambien a medida de lectura. En un portatil de 1440 esos parrafos hacian
   lineas de mas de 150 caracteres.

   ⚠️ Solo los parrafos y listas que cuelgan DIRECTAMENTE del contenedor, que
   son los de texto corrido. Los que van dentro de una tarjeta, un formulario o
   una tabla ya los acota su propio componente, y meterles un tope aqui los
   descolocaria. */
.ivan-banda > .container > p,
.ivan-banda > .container > ul,
.ivan-banda > .container > ol,
.ivan-banda > .container > address { max-width: 72ch; }

@media (max-width: 575.98px) {
    .ivan-banda { padding: 2rem 0; }
    .ivan-banda h1 + p { font-size: 1.05rem; }
}

.ivan-pie {
    text-align: center;
    padding: 2.5rem 0 1.5rem;
}
.ivan-pie p {
    font-size: small;
    padding: 0;
    margin-bottom: 0;
}

/* =========================================================================
   Formularios
   Las vistas ya traian marcado de Bootstrap 3 que no hacia nada. Con
   Bootstrap 5 cargado ya se ven; esto solo ajusta el tamaño para que no
   desentone con el cuerpo de 18.67px.
   ========================================================================= */
.form-label { font-weight: 700; font-size: .95rem; margin-bottom: .35rem; }
.form-control, .form-select { font-size: 1rem; }
.btn { letter-spacing: .05em; }

/* Sin animaciones para quien las tenga desactivadas en el sistema. */
@media (prefers-reduced-motion: reduce) {
    .ivan-mosaico::after, .ivan-mosaico-texto { transition: none; }
}

/* =========================================================================
   Indice de seccion (antes .downMenu)

   Era una barra fija al pie, oscura, con los enlaces en linea y un borde
   grueso bajo el activo. El CSS original venia con restos de la epoca de IE
   —`top: expression(...)`— y erratas que no hacian nada (`width=100%` con
   igual en vez de dos puntos, `height:30` sin unidad). Aqui va lo que si
   surtia efecto, sin la basura.
   ========================================================================= */
.ivan-indice {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1030;               /* por debajo del offcanvas de Bootstrap (1045) */
    background: #1b1b1b;
    padding: 0 .5rem;
}
/* ⚠️ `width: max-content` + `max-width: 100%` + `margin: 0 auto`, y NO
   `justify-content: center`. La tira se centra cuando cabe y se arrastra
   cuando no, empezando siempre por el primer enlace. Con `justify-content:
   center` sobre un contenedor con scroll pasa lo de siempre: el contenido que
   sobra por la IZQUIERDA queda fuera de alcance —a 768px, con siete enlaces,
   el primero salia cortado y no habia forma de llegar a el—. */
.ivan-indice ul {
    width: max-content;
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: nowrap;
    gap: 0 1.25rem;
    overflow-x: auto;
    scrollbar-width: none;                  /* la barra de scroll sobra: se arrastra */
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
}
.ivan-indice ul::-webkit-scrollbar { display: none; }
.ivan-indice li { scroll-snap-align: center; }
.ivan-indice a {
    display: block;
    padding: .55rem .25rem;
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.25;
    color: #fff;
    border-bottom: 4px solid transparent;   /* reserva el hueco del activo */
    text-decoration: none;
    white-space: nowrap;
}
.ivan-indice a:hover { opacity: .75; color: #fff; text-decoration: none; }
.ivan-indice a.activo { border-bottom-color: currentColor; }

/* Que la barra no tape el final del contenido. Con :has() no hace falta que
   cada vista se acuerde de poner una clase en el <body>: basta con que exista
   el indice en la pagina. */
body:has(.ivan-indice) { padding-bottom: 3.75rem; }

/* En movil, UNA sola fila que se arrastra de lado (2026-08-02).
   Estas paginas llevan de cinco a nueve enlaces y, envolviendo, la barra
   ocupaba dos y hasta tres filas: 96px de pantalla comidos de forma
   permanente, casi un octavo de un telefono, en las paginas mas largas del
   sitio. En una fila que se desliza cuesta 44px y se sigue llegando a todo.
   js/nav.js pone el activo a la vista al cargar. */
@media (max-width: 767.98px) {
    .ivan-indice { padding: 0; }
    .ivan-indice ul { gap: 0; padding: 0 .75rem; }
    .ivan-indice a {
        font-size: .9rem;
        padding: .6rem .7rem;
        border-bottom-width: 3px;
    }
    body:has(.ivan-indice) { padding-bottom: 3.25rem; }
}

/* =========================================================================
   Campos de formulario sin clase

   Yii genera los campos con `CActiveForm`: `$form->textField($model,'x')` sale
   como `<input type="text" name="...">`, sin `class`. Bootstrap 5 no estiliza
   los campos desnudos —solo los que llevan `.form-control`—, asi que quedaban
   como cajitas del navegador, de anchos distintos y con la etiqueta pegada al
   lado.

   Se resuelve aqui y no anadiendo `array('class'=>'form-control')` a cada
   llamada: son cientos repartidas por decenas de vistas, y cada una es una
   ocasion de romper algo. Las reglas se acotan a `.ivan-banda` para no tocar
   los formularios de terceros (reCAPTCHA, Google Translate) ni el panel, que
   tiene su propia hoja.
   ========================================================================= */
.ivan-banda input[type="text"],
.ivan-banda input[type="email"],
.ivan-banda input[type="tel"],
.ivan-banda input[type="url"],
.ivan-banda input[type="number"],
.ivan-banda input[type="password"],
.ivan-banda input[type="search"],
.ivan-banda input[type="date"],
.ivan-banda input[type="datetime-local"],
.ivan-banda select,
.ivan-banda textarea {
    display: block;
    width: 100%;
    max-width: 34rem;
    padding: .5rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--ivan-tinta);
    background-color: #fff;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    appearance: none;
}
.ivan-banda textarea { min-height: 8rem; max-width: 46rem; }

/* ⚠️ Hueco para la flecha del desplegable. La regla de arriba pone
   `padding: .5rem .75rem` a TODOS los campos, y en un <select> eso pisa el
   `padding-right: 2.25rem` con el que Bootstrap reserva sitio para su flecha
   —que la dibuja como imagen de fondo, no como elemento—. Resultado: la flecha
   se pintaba ENCIMA de la ultima palabra. Con opciones cortas no se notaba;
   con "Unhealthy for sensitive groups (101-150)" en el filtro de CAL de los
   monitores, el texto acababa debajo de la flecha. Afecta a todos los
   desplegables del sitio publico, no solo a ese. */
.ivan-banda select { padding-right: 2.25rem; }

.ivan-banda input:focus,
.ivan-banda select:focus,
.ivan-banda textarea:focus {
    outline: 0;
    border-color: #86b7fe;
    box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25);
}

/* Las etiquetas van encima del campo, no pegadas a su izquierda. */
.ivan-banda form label {
    display: block;
    margin-bottom: .35rem;
    font-weight: 700;
    font-size: .95rem;
}

/* Las casillas y radios si van en linea con su etiqueta.
   ⚠️ Se excluye .form-check-input: Bootstrap las dibuja con `appearance: none`
   y un `width: 1em` propio, asi que imponerles `width: auto` desde aqui —esta
   regla tiene mas especificidad— las colapsaba a cero y se veian como una
   rayita vertical delante de cada monitor. */
.ivan-banda input[type="checkbox"]:not(.form-check-input),
.ivan-banda input[type="radio"]:not(.form-check-input) {
    display: inline-block;
    width: auto;
    margin-right: .4rem;
}
.ivan-banda input[type="checkbox"]:not(.form-check-input) + label,
.ivan-banda input[type="radio"]:not(.form-check-input) + label {
    display: inline-block;
    margin-right: 1rem;
    font-weight: 400;
}

/* Separacion entre campos: las vistas ya traen .mb-3 tras la traduccion, pero
   varias agrupan sin contenedor. */
.ivan-banda form br + input,
.ivan-banda form > input,
.ivan-banda form > select,
.ivan-banda form > textarea { margin-bottom: 1rem; }

/* Botones de enviar sin clase. */
.ivan-banda input[type="submit"],
.ivan-banda button[type="submit"]:not([class*="btn"]) {
    display: inline-block;
    width: auto;
    padding: .5rem 1.25rem;
    border: 1px solid transparent;
    border-radius: .25rem;
    background-color: #2f6f3e;
    color: #fff;
    font-weight: 600;
    letter-spacing: .03em;
    cursor: pointer;
}
.ivan-banda input[type="submit"]:hover,
.ivan-banda button[type="submit"]:not([class*="btn"]):hover { background-color: #275c33; }

/* Los mensajes de error de Yii. */
.ivan-banda .errorMessage,
.ivan-banda .errorSummary {
    color: #842029;
    background: #f8d7da;
    border: 1px solid #f5c2c7;
    border-radius: .25rem;
    padding: .5rem .75rem;
    margin-bottom: .75rem;
    font-size: .95rem;
    max-width: 34rem;
}
.ivan-banda .errorSummary ul { margin: .25rem 0 0 1rem; }
/* ⚠️ Solo el ASTERISCO en rojo, no la etiqueta entera. `labelEx` de Yii pinta
   <label class="required">Texto <span class="required">*</span></label>, asi que
   una regla sobre `.required` a secas tiñe de rojo todos los nombres de campo y
   el formulario parece lleno de errores. Se vio en /air/alerts, que tiene once. */
.ivan-banda span.required { color: #b02a37; }
.ivan-banda label.required { color: inherit; }

/* Aviso destacado (el bloque amarillo del formulario de reporte). */
.ivan-banda .flash-success,
.ivan-banda .flash-notice {
    background: #e8f5ec;
    border: 1px solid #bcdcc6;
    border-radius: .25rem;
    padding: .75rem 1rem;
    margin-bottom: 1rem;
}

/* Selectores multiples nativos. select2 se retiro el 2026-08-02, asi que estos
   vuelven a ser <select multiple> del navegador: se les da altura para que se
   vean varias opciones sin scroll y el mismo ancho que el resto de campos. */
.ivan-banda select[multiple] {
    min-height: 11rem;
    padding: .35rem;
    max-width: 34rem;
}
.ivan-banda select[multiple] option {
    padding: .3rem .5rem;
    border-radius: 3px;
}
.ivan-banda select[multiple] option:checked {
    background: #2f6f3e linear-gradient(0deg, #2f6f3e 0%, #2f6f3e 100%);
    color: #fff;
}
/* Pista de uso: en un <select multiple> hay que saber que se elige con Ctrl. */
.ivan-banda select[multiple] + .ayuda-multiple {
    display: block;
    font-size: .85rem;
    color: #6b7378;
    margin-top: .3rem;
}

/* =========================================================================
   Listas de casillas (categorias de alertas, monitores de aire)

   Sustituyen a los <select multiple>, donde habia que acertar con Ctrl para
   elegir varias opciones y no se veia cuales quedaban marcadas. Los monitores
   ademas van agrupados por ciudad: antes eran 44 lineas con la ciudad repetida
   en todas ("Brawley: ...", "Brawley: ...").
   ========================================================================= */
.lista-casillas,
.monitores {
    max-width: 46rem;
    margin-top: .25rem;
}

.lista-casillas .form-check,
.monitores .form-check {
    padding-left: 1.75rem;
    margin-bottom: .3rem;
}
.lista-casillas .form-check-input,
.monitores .form-check-input {
    margin-left: -1.75rem;
    margin-top: .3rem;
}
.lista-casillas .form-check-label,
.monitores .form-check-label {
    font-weight: 400;
    font-size: 1rem;
    cursor: pointer;
}

/* Cada ciudad, con su nombre una sola vez. */
.monitores-ciudad {
    border: 1px solid var(--ivan-borde);
    border-radius: .25rem;
    padding: .5rem .9rem .7rem;
    margin: 0 0 .75rem;
}
.monitores-ciudad legend {
    float: none;                 /* Bootstrap pone los legend al 100%; aqui no */
    width: auto;
    padding: 0 .4rem;
    margin: 0;
    font-size: .9rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ivan-tinta-suave, #6b7378);
}

/* En pantallas anchas, las ciudades en dos columnas para no hacer una tira
   larguisima de 44 monitores. */
@media (min-width: 768px) {
    .monitores { columns: 2; column-gap: 1.25rem; }
    .monitores-ciudad { break-inside: avoid; }
}

/* =========================================================================
   Fichas del listado publico de reportes (2026-08-02)

   Antes cada reporte era un bloque azulado con "Description:" como etiqueta
   suelta, la fecha perdida a la derecha y sin categoria ni lugar. La ficha da
   ahora lo esencial de un vistazo y toda la fila de meta funciona igual en
   movil.
   ========================================================================= */
.ficha-reporte {
    background: #fff;
    border: 1px solid var(--ivan-borde);
    border-radius: .35rem;
    padding: 1.1rem 1.35rem 1rem;
    margin-bottom: 1rem;
    transition: border-color .12s ease, box-shadow .12s ease;
}
.ficha-reporte:hover {
    border-color: #c9dced;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .05);
}

.ficha-reporte-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .45rem .6rem;
    margin-bottom: .4rem;
}
/* El color de cada categoria (2026-08-02): la pastilla se tiñe con el color de
   SU categoria, el mismo que lleva su pin en el mapa. Llega en la variable
   --cat; sin ella se queda con el azul de siempre. `color-mix` da el fondo y
   el borde a partir de ese color, asi que basta un dato por categoria. */
.ficha-reporte-categoria {
    display: inline-block;
    --cat: #14567e;
    background: color-mix(in srgb, var(--cat) 12%, #fff);
    color: color-mix(in srgb, var(--cat) 78%, #000);
    border: 1px solid color-mix(in srgb, var(--cat) 32%, #fff);
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .03em;
    padding: .18rem .65rem;
}
.ficha-reporte-fecha {
    color: var(--ivan-tinta-suave, #6b7378);
    font-size: .88rem;
    margin-left: auto;
}

.ficha-reporte-titulo {
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    line-height: 1.3;
    margin: 0 0 .35rem;
}
.ficha-reporte-titulo a { color: var(--ivan-tinta); }
.ficha-reporte-titulo a:hover { color: var(--ivan-enlace); text-decoration: none; }

.ficha-reporte-resumen {
    margin: 0 0 .75rem;
    font-size: 1rem;
    line-height: 1.6;
    color: #4a5257;
}

.ficha-reporte-pie {
    display: flex;
    align-items: center;
    gap: 1rem;
    border-top: 1px solid #f1f3f4;
    padding-top: .65rem;
}
.ficha-reporte-lugar {
    color: var(--ivan-tinta-suave, #6b7378);
    font-size: .88rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ficha-reporte-mas {
    margin-left: auto;
    font-weight: 700;
    font-size: .9rem;
    white-space: nowrap;
}

@media (max-width: 575.98px) {
    .ficha-reporte { padding: .9rem 1rem .8rem; }
    .ficha-reporte-fecha { margin-left: 0; width: 100%; }
    .ficha-reporte-titulo { font-size: 1.15rem; }
}

/* El paginador del listado (CListView de Yii). */
.ivan-banda .pager,
.ivan-banda .yiiPager {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    list-style: none;
    padding: 0;
    margin: 1.25rem 0 0;
    justify-content: center;
}
.ivan-banda .yiiPager li a,
.ivan-banda .yiiPager li span {
    display: inline-block;
    padding: .4rem .8rem;
    border: 1px solid var(--ivan-borde);
    border-radius: .25rem;
    background: #fff;
    color: var(--ivan-tinta);
    text-decoration: none;
    font-size: .95rem;
}
.ivan-banda .yiiPager li.selected a {
    background: var(--ivan-enlace);
    border-color: var(--ivan-enlace);
    color: #fff;
}
.ivan-banda .yiiPager li.hidden a { opacity: .45; pointer-events: none; }
.ivan-banda .summary {
    color: var(--ivan-tinta-suave, #6b7378);
    font-size: .9rem;
    margin-bottom: .75rem;
}

/* =========================================================================
   Lista de monitores de aire (2026-08-02)

   El color de cada CAL es DATO —verde/amarillo/rojo segun el nivel de aire—
   asi que se conserva tal cual llega de Monitor::getColor(); lo que cambia es
   la presentacion: pastilla de ancho fijo en vez de una barra a todo lo ancho,
   tabla con respiracion, y fichas apiladas en movil.
   ========================================================================= */
.lista-aire-fecha { color: var(--ivan-tinta-suave, #6b7378); font-size: .9rem; }

.tabla-aire-marco {
    background: #fff;
    border: 1px solid var(--ivan-borde);
    border-radius: .35rem;
    overflow-x: auto;
    margin-top: .75rem;
}
.tabla-aire { width: 100%; border-collapse: collapse; }

.tabla-aire thead th {
    background: #2f3437;
    color: #fff;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    text-align: left;
    padding: .8rem 1rem;
    white-space: nowrap;
}
.tabla-aire-cal-cab { width: 300px; text-align: center !important; }

.tabla-aire tbody td {
    padding: .65rem 1rem;
    border-top: 1px solid #eef1f3;
    vertical-align: middle;
}
.tabla-aire tbody tr:hover { background: #f6fafd; }
.tabla-aire tbody a {
    color: var(--ivan-tinta);
    text-decoration: none;
}
.tabla-aire tbody a:hover { color: var(--ivan-enlace); }
.tabla-aire-ciudad { white-space: nowrap; font-weight: 700; }

.cal-pastilla {
    display: block;
    text-align: center;
    background: var(--cal-color, #9aa4a9);
    color: #000 !important;
    font-weight: 700;
    font-size: .95rem;
    border-radius: .3rem;
    padding: .3rem .75rem;
    min-width: 9rem;
}
.cal-pastilla:hover { filter: brightness(.94); text-decoration: none; }

/* En movil cada monitor es una ficha: ciudad arriba, ubicacion, y el CAL a lo
   ancho. Una tabla de 3 columnas con una pastilla de 300px no cabe en 375. */
@media (max-width: 575.98px) {
    .tabla-aire thead { display: none; }
    .tabla-aire, .tabla-aire tbody, .tabla-aire tr, .tabla-aire td { display: block; width: 100%; }
    .tabla-aire tr { border-top: 1px solid var(--ivan-borde); padding: .6rem 0; }
    .tabla-aire tr:first-child { border-top: 0; }
    .tabla-aire tbody td { border: 0; padding: .15rem 1rem; }
    .tabla-aire-cal { padding-top: .45rem !important; padding-bottom: .3rem !important; }
}

/* =========================================================================
   Ficha publica de un reporte (2026-08-02)
   ========================================================================= */
.ficha-volver { margin-bottom: .75rem; }
.ficha-volver a { font-size: .9rem; font-weight: 700; }

.ficha-titulo {
    font-size: 2.1rem;
    letter-spacing: -0.02em;
    margin-bottom: .35rem;
}
.ficha-lugar {
    color: var(--ivan-tinta-suave, #6b7378);
    margin-bottom: 1rem;
}
.ficha-seccion {
    font-size: 1.05rem !important;
    font-weight: 900;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ivan-tinta);
    border-bottom: 1px solid var(--ivan-borde);
    padding-bottom: .35rem;
    margin: 1.75rem 0 .9rem;
}
.ficha-descripcion {
    max-width: 52rem;
    font-size: 1.05rem;
    line-height: 1.7;
}

/* Galeria: miniaturas uniformes; el visor (js/visor.js) las abre a tamaño real. */
.ficha-galeria {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: .75rem;
    max-width: 52rem;
}
.ficha-miniatura {
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: .3rem;
    border: 1px solid var(--ivan-borde);
    background: #f2f4f6;
}
.ficha-miniatura img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .15s ease;
}
.ficha-miniatura:hover img { transform: scale(1.04); }

.ficha-video {
    width: 100%;
    max-width: 52rem;
    border-radius: .35rem;
    background: #000;
}

.ficha-documentos {
    list-style: none;
    margin: 0;
    padding: 0;
    max-width: 52rem;
}
.ficha-documentos li {
    display: flex;
    align-items: center;
    gap: 1rem;
    border: 1px solid var(--ivan-borde);
    border-radius: .3rem;
    padding: .6rem .9rem;
    margin-bottom: .5rem;
    background: #fff;
}
.ficha-doc-nombre {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ficha-doc-descarga { margin-left: auto; font-weight: 700; white-space: nowrap; }

@media (max-width: 575.98px) {
    .ficha-titulo { font-size: 1.5rem; }
    .ficha-galeria { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
}

/* La MISMA ficha dentro del modal del mapa (2026-08-02). Solo se ajusta lo que
   cambia por estar en una caja y no en una pagina: el titulo baja de tamaño y
   la cabecera se queda en una tira con la aspa, sin linea, porque el titulo ya
   viene dentro del cuerpo. */
.ficha-modal .modal-header {
    border-bottom: 0;
    padding: .6rem .75rem 0;
    min-height: 0;
}
.ficha-modal .modal-body { padding: 0 1.5rem 1.5rem; }
.ficha-modal .ficha-titulo { font-size: 1.55rem; }
.ficha-modal .ficha-seccion { margin-top: 1.4rem; }
.ficha-modal .ficha-descripcion { font-size: 1rem; }

.ficha-cargando {
    color: var(--ivan-tinta-suave, #6b7378);
    margin: 1.5rem 0 .5rem;
}

.ficha-completo { margin: 1.75rem 0 0; }
.ficha-completo-enlace { font-weight: 700; }

@media (max-width: 575.98px) {
    .ficha-modal .modal-body { padding: 0 1rem 1rem; }
    .ficha-modal .ficha-titulo { font-size: 1.3rem; }
}

/* =========================================================================
   Documentos del Task Force (2026-08-02)

   Pestañas de Bootstrap y un <details> nativo por año. Era la ultima pagina
   del sitio publico con jQuery UI.
   ========================================================================= */
.doc-pestanas .nav-link {
    color: var(--ivan-tinta);
    font-weight: 700;
    font-size: .95rem;
}
.doc-pestanas .nav-link.active { color: var(--ivan-enlace); }

.doc-contenido { padding-top: 1.25rem; }

.doc-anio {
    border: 1px solid var(--ivan-borde);
    border-radius: .35rem;
    margin-bottom: .6rem;
    background: #fff;
}
.doc-anio summary {
    cursor: pointer;
    padding: .7rem 1rem;
    font-weight: 700;
    list-style: none;               /* fuera el triangulo por defecto... */
    position: relative;
}
.doc-anio summary::-webkit-details-marker { display: none; }
.doc-anio summary::after {          /* ...y una flecha propia que gira */
    content: "";
    position: absolute;
    right: 1.1rem;
    top: 50%;
    width: .55em;
    height: .55em;
    border-right: 2px solid var(--ivan-tinta-suave, #6b7378);
    border-bottom: 2px solid var(--ivan-tinta-suave, #6b7378);
    transform: translateY(-70%) rotate(45deg);
    transition: transform .15s ease;
}
.doc-anio[open] summary::after { transform: translateY(-30%) rotate(225deg); }
.doc-anio[open] summary { border-bottom: 1px solid var(--ivan-borde); }

.doc-tabla-marco { overflow-x: auto; }
.doc-tabla { width: 100%; border-collapse: collapse; }
.doc-tabla th {
    text-align: left;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--ivan-tinta-suave, #6b7378);
    padding: .55rem 1rem;
    border-bottom: 1px solid var(--ivan-borde);
}
.doc-tabla td { padding: .55rem 1rem; border-top: 1px solid #f1f3f4; }
.doc-tabla tbody tr:hover { background: #f6fafd; }
.doc-fecha { white-space: nowrap; color: var(--ivan-tinta-suave, #6b7378); font-size: .92rem; }

/* En movil, cada documento es una fila de lista y no una celda de tabla
   (2026-08-02). Con dos columnas en 360px, la fecha larga —"Wednesday 9 June
   2021"— se partia en dos lineas y empujaba el titulo, que se partia a su vez
   y dejaba la flecha de descarga sola en una tercera. Ahora manda el titulo,
   que es lo que se busca, y la fecha va debajo como dato secundario. */
@media (max-width: 575.98px) {
    .doc-tabla, .doc-tabla tbody, .doc-tabla tr, .doc-tabla td { display: block; width: 100%; }
    .doc-tabla thead { display: none; }

    .doc-tabla tbody tr {
        display: flex;
        flex-direction: column-reverse;      /* el titulo va primero, y esta antes la fecha */
        align-items: flex-start;
        gap: .15rem;
        padding: .7rem .25rem;
        border-top: 1px solid #f1f3f4;
    }
    .doc-tabla tbody tr:first-child { border-top: 0; }
    .doc-tabla td { padding: 0; border: 0; }

    .doc-fecha {
        white-space: normal;
        font-size: .82rem;
    }
    .doc-tabla tbody tr > td:last-child { font-weight: 600; }   /* la celda del titulo */
}

/* Flecha de descarga junto a cada documento: el nombre abre el visor y esta
   flecha conserva la descarga para quien la quiera. */
.doc-descarga {
    display: inline-block;
    margin-left: .5rem;
    padding: 0 .45rem;
    border: 1px solid var(--ivan-borde);
    border-radius: .25rem;
    font-weight: 700;
    text-decoration: none !important;
}
.doc-descarga:hover { border-color: var(--ivan-enlace); }

/* =========================================================================
   Listado de reportes como tarjetas (2026-08-02)

   3 por fila en escritorio, 2 en tablet, 1 en movil. Si el reporte tiene foto
   se enseña la primera; si no, un marcador que lo dice claramente en vez de un
   hueco gris mudo.
   ========================================================================= */
.tarjeta-reporte {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border: 1px solid var(--ivan-borde);
    border-radius: .4rem;
    overflow: hidden;
    transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}
.tarjeta-reporte:hover {
    border-color: #c9dced;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .07);
    transform: translateY(-2px);
}

.tarjeta-reporte-foto {
    display: block;
    aspect-ratio: 16 / 10;
    background: #f2f4f6;
    overflow: hidden;
}
.tarjeta-reporte-foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.tarjeta-reporte-sinfoto {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    width: 100%;
    height: 100%;
    color: #9aa4a9;
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    background: repeating-linear-gradient(45deg, #f4f6f8 0 12px, #eef1f3 12px 24px);
}

.tarjeta-reporte-cuerpo {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: .9rem 1rem 1rem;
}
.tarjeta-reporte-titulo {
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    line-height: 1.35;
    margin: .45rem 0 .35rem;
}
.tarjeta-reporte-titulo a { color: var(--ivan-tinta); text-decoration: none; }
.tarjeta-reporte-titulo a:hover { color: var(--ivan-enlace); }

.tarjeta-reporte-resumen {
    font-size: .92rem;
    line-height: 1.55;
    color: #4a5257;
    margin: 0 0 .75rem;
}
.tarjeta-reporte-pie {
    margin-top: auto;                 /* pega el pie abajo: tarjetas parejas */
    display: flex;
    gap: .75rem;
    align-items: baseline;
    border-top: 1px solid #f1f3f4;
    padding-top: .55rem;
    font-size: .82rem;
    color: var(--ivan-tinta-suave, #6b7378);
}
/* La fecha, entera en una linea: al cambiar a Nunito Sans —algo mas ancha— el
   pie de algunas tarjetas partia "Mar 24, 2021" en dos. Quien cede es el lugar,
   que ya se recorta con puntos suspensivos. */
.tarjeta-reporte-pie > time { flex: none; white-space: nowrap; }
.tarjeta-reporte-lugar {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- Barra de filtros ---------------------------------------------------- */
.lista-filtros {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 1rem;
    align-items: end;
    background: #fff;
    border: 1px solid var(--ivan-borde);
    border-radius: .4rem;
    padding: .9rem 1rem;
    margin: 1rem 0 1.25rem;
}
.lista-filtro { display: flex; flex-direction: column; }
.lista-filtro label {
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--ivan-tinta-suave, #6b7378);
    margin-bottom: .3rem;
}
.lista-filtro--busqueda { flex: 1 1 220px; }
.lista-filtro--busqueda input {
    max-width: none;
    margin: 0;
}
/* ⚠️ `width: auto`, y no es un detalle: Bootstrap le pone `width: 100%` a
   `.form-select`, asi que el desplegable tomaba el ancho de su hueco en la
   barra en vez del de su opcion mas larga. En el filtro de CAL eso dejaba
   "Unhealthy for sensitive groups (101-150)" cortado a media palabra y con la
   flecha encima del texto. Con `auto` se dimensiona por su contenido, que es
   lo que hace un <select> por su cuenta. */
.lista-filtro select.form-select {
    width: auto;
    min-width: 12rem;
    max-width: 100%;
    font-size: 1rem;
}

/* Y ademas no se encogen: dentro de un flex se pueden aplastar por debajo de
   su ancho natural. Sin encogerse, si no caben se van a la linea siguiente,
   que para eso la barra envuelve. */
.lista-filtros > .lista-filtro { flex-shrink: 0; }
.lista-filtro--busqueda { flex-shrink: 1; }

/* Enviar y limpiar, uno al lado del otro y alineados con los campos.
   `.mapa-limpiar` se estilaba en css/map.css, que esta barra no carga fuera
   del mapa: por eso el enlace caia debajo del boton en el listado de
   monitores. */
.lista-filtro--enviar {
    flex-direction: row;
    align-items: center;
    gap: .75rem;
}
.mapa-limpiar { font-size: .9rem; white-space: nowrap; }

/* El campo unico del rango de fechas (flatpickr en modo range). */
.lista-filtro--fechas { position: relative; }
.rango-fechas-envoltura { position: relative; }
.rango-fechas-campo {
    background: #fff;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    padding: .5rem 2rem .5rem .75rem;   /* hueco a la derecha para la X */
    font-size: 1rem;
    color: var(--ivan-tinta);
    min-width: 15rem;
    cursor: pointer;
}
.rango-fechas-campo::placeholder { color: var(--ivan-tinta-suave, #6b7378); }
.rango-fechas-campo:focus-visible { outline: 2px solid #86b7fe; }

.rango-fechas-limpiar {
    position: absolute;
    right: .35rem;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    color: var(--ivan-tinta-suave, #6b7378);
    font-size: 1.2rem;
    line-height: 1;
    padding: .15rem .3rem;
    cursor: pointer;
    border-radius: .2rem;
}
.rango-fechas-limpiar:hover { color: #8a2020; background: #f8f0f0; }

/* El calendario de flatpickr, alineado con el tema. */
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
    background: var(--ivan-enlace);
    border-color: var(--ivan-enlace);
}
.flatpickr-day.inRange {
    background: #eaf4fd;
    border-color: #eaf4fd;
    box-shadow: -5px 0 0 #eaf4fd, 5px 0 0 #eaf4fd;
}

/* --- Estado de carga y paginador ----------------------------------------- */
#lista-reportes.cargando { opacity: .45; pointer-events: none; transition: opacity .15s ease; }

.lista-resumen { color: var(--ivan-tinta-suave, #6b7378); font-size: .9rem; margin-bottom: .75rem; }

.lista-vacia {
    background: #fff;
    border: 1px dashed var(--ivan-borde);
    border-radius: .4rem;
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--ivan-tinta-suave, #6b7378);
}

.lista-paginador {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    justify-content: center;
    margin-top: 1.5rem;
}
.lista-paginador a,
.lista-paginador .actual {
    display: inline-block;
    padding: .45rem .85rem;
    border: 1px solid var(--ivan-borde);
    border-radius: .25rem;
    background: #fff;
    color: var(--ivan-tinta);
    text-decoration: none !important;
    font-size: .95rem;
}
.lista-paginador a:hover { border-color: var(--ivan-enlace); color: var(--ivan-enlace); }
.lista-paginador .actual { background: var(--ivan-enlace); border-color: var(--ivan-enlace); color: #fff; font-weight: 700; }
.lista-paginador-puntos { align-self: center; color: var(--ivan-tinta-suave, #6b7378); }

@media (max-width: 575.98px) {
    .lista-filtro,
    .lista-filtro select.form-select,
    .rango-fechas-boton { width: 100%; min-width: 0; }
    .lista-filtro--enviar .btn { width: 100%; }
    .rango-fechas-panel { left: 0; right: 0; }
}

/* =========================================================================
   Formulario de alertas de aire, en pasos (2026-08-02)
   ========================================================================= */
.form-alerta {
    /* A todo el ancho del contenedor: con 52rem sobraba media pantalla en
       escritorio. Los campos sueltos (correo, nivel) conservan su ancho
       legible; lo que crece es la parrilla de monitores. */
    background: #fff;
    border: 1px solid var(--ivan-borde);
    border-radius: .4rem;
    padding: 1.5rem 1.75rem 1.75rem;
    margin-top: 1rem;
}
.form-paso { margin-bottom: 1.75rem; }
.form-paso-titulo {
    display: flex;
    align-items: baseline;
    gap: .6rem;
    font-size: 1.05rem !important;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    margin-bottom: .6rem;
}
.form-paso-numero {
    flex: none;
    width: 1.6rem;
    height: 1.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--ivan-enlace);
    color: #fff;
    border-radius: 50%;
    font-size: .9rem;
    align-self: center;
}
.form-alerta .monitores { columns: 2; column-gap: 1.25rem; max-width: none; }
@media (min-width: 1200px) {
    .form-alerta .monitores { columns: 3; }
}
@media (max-width: 767.98px) {
    .form-alerta { padding: 1.1rem 1rem 1.25rem; }
    .form-alerta .monitores { columns: 1; }
    /* El boton de enviar, a lo ancho: es la accion de la pagina y con el pulgar
       se agradece un objetivo de 44px de alto y todo el ancho. */
    .form-alerta input[type="submit"],
    .form-alerta button[type="submit"] { width: 100%; }
}

.form-consentimientos {
    border-top: 1px solid var(--ivan-borde);
    padding-top: 1.1rem;
    margin-bottom: 1rem;
}
.form-consentimiento { margin-bottom: .9rem; }
.form-consentimiento p {
    font-weight: 700;
    font-size: .92rem;
    margin-bottom: .3rem;
}
.form-privacidad {
    font-size: .85rem;
    color: var(--ivan-tinta-suave, #6b7378);
    margin-bottom: 1rem;
}

/* Casillas de categoria del alta de alertas de reportes, en columnas como los
   monitores de aire: en una sola fila vertical la lista de seis obligaba a
   bajar media pantalla para llegar al boton. */
.form-alerta .lista-casillas { columns: 2; column-gap: 1.25rem; }
@media (max-width: 575.98px) {
    .form-alerta .lista-casillas { columns: 1; }
}

/* --- El reCAPTCHA -------------------------------------------------------
   Mide 304x78 FIJOS y no hay forma de pedirle otra cosa: en un movil de 360,
   con el relleno de la tarjeta, se salia 29px por la derecha —medido: la
   pagina llegaba a 389px de ancho—.

   ⚠️ Escalarlo NO basta, que es lo que habia: `transform` cambia lo que se ve,
   no la caja que se ocupa, asi que el widget seguia midiendo 304 para el flujo
   y la pagina seguia desbordando. Es la caja de fuera la que arregla el flujo:
   ocupa el ancho disponible y recorta, y dentro el widget se encoge. */
.caja-recaptcha {
    max-width: 100%;
    overflow: hidden;
}
@media (max-width: 420px) {
    .caja-recaptcha { height: 68px; }        /* 78 * .87, el alto ya escalado */
    .caja-recaptcha .g-recaptcha {
        transform: scale(.87);
        transform-origin: 0 0;
    }
}

/* =========================================================================
   Avisos del flujo de confirmacion (revisa tu correo / confirmado) 2026-08-02
   ========================================================================= */
.aviso-confirmacion {
    max-width: 34rem;
    margin: 2rem auto 3rem;
    background: #fff;
    border: 1px solid var(--ivan-borde);
    border-radius: .5rem;
    padding: 2.25rem 2rem 2rem;
    text-align: center;
}
.aviso-confirmacion-icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background: #eaf4fd;
    color: var(--ivan-enlace);
    margin-bottom: 1rem;
}
.aviso-confirmacion-icono--ok  { background: #e8f5ec; color: #1c5c2e; }
.aviso-confirmacion-icono--mal { background: #fdf3f3; color: #8a2020; }
.aviso-confirmacion-titulo {
    font-size: 1.7rem !important;
    letter-spacing: -0.01em;
    margin-bottom: .6rem;
}
.aviso-confirmacion-texto { font-size: 1.02rem; margin-bottom: .5rem; }
.aviso-confirmacion-nota {
    font-size: .9rem;
    color: var(--ivan-tinta-suave, #6b7378);
    margin-bottom: 1.25rem;
}

/* =========================================================================
   Acceso al panel (2026-08-02)
   ========================================================================= */
.acceso-tarjeta {
    max-width: 25rem;
    margin: 2.5rem auto 3rem;
    background: #fff;
    border: 1px solid var(--ivan-borde);
    border-radius: .5rem;
    padding: 2rem 2rem 1.5rem;
}
.acceso-marca { text-align: center; margin-bottom: 1.5rem; }
.acceso-marca-nombre {
    display: block;
    font-weight: 900;
    font-size: 1.25rem;
    letter-spacing: .02em;
    color: var(--ivan-tinta);
}
.acceso-marca-etiqueta {
    display: block;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--ivan-tinta-suave, #6b7378);
    margin-top: .2rem;
}
.acceso-tarjeta input[type="text"],
.acceso-tarjeta input[type="password"] { max-width: none; }
.acceso-errores { font-size: .9rem; }
.acceso-errores ul { margin: 0; padding-left: 1.1rem; }
.acceso-boton { padding-top: .6rem; padding-bottom: .6rem; font-weight: 700; }
.acceso-vuelta { text-align: center; margin: 1.1rem 0 0; font-size: .9rem; }

/* --- Estado del caso en las tarjetas del listado (2026-08-02) -------------
   Mismo tamaño que la pastilla de categoria para que la fila se lea de un
   golpe, pero con el color del estado. Los nombres van completos, no solo
   color: distinguir tres estados por matiz deja fuera a quien no los ve. */
.ficha-reporte-estado {
    display: inline-block;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .03em;
    padding: .18rem .65rem;
    border: 1px solid transparent;
}
.ficha-reporte-estado--0 { color: #8a2020; background: #fdf0f0; border-color: #eec9c9; }
.ficha-reporte-estado--1 { color: #8a4b00; background: #fff3e2; border-color: #f0d5ac; }
.ficha-reporte-estado--2 { color: #1c5c2e; background: #e8f5ec; border-color: #bcdcc6; }

/* --- La entrada al panel, solo con sesion abierta (2026-08-02) ------------
   Se distingue del resto del menu porque no es contenido del sitio sino la
   puerta de la administracion: quien la ve es personal, no visitante. */
.ivan-nav-enlace.ivan-nav-panel,
.ivan-cajon-enlace.ivan-nav-panel {
    color: #1c5c2e;
    font-weight: 700;
}
.ivan-nav-enlace.ivan-nav-panel::before,
.ivan-cajon-enlace.ivan-nav-panel::before {
    content: "";
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-right: .35em;
    vertical-align: -.13em;
    background-color: currentColor;
    -webkit-mask-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"%3E%3Cpath d="M1 2.5A1.5 1.5 0 0 1 2.5 1h3A1.5 1.5 0 0 1 7 2.5v3A1.5 1.5 0 0 1 5.5 7h-3A1.5 1.5 0 0 1 1 5.5zM2.5 2a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5zM9 2.5A1.5 1.5 0 0 1 10.5 1h3A1.5 1.5 0 0 1 15 2.5v3A1.5 1.5 0 0 1 13.5 7h-3A1.5 1.5 0 0 1 9 5.5zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5zM1 10.5A1.5 1.5 0 0 1 2.5 9h3A1.5 1.5 0 0 1 7 10.5v3A1.5 1.5 0 0 1 5.5 15h-3A1.5 1.5 0 0 1 1 13.5zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5zM9 10.5A1.5 1.5 0 0 1 10.5 9h3a1.5 1.5 0 0 1 1.5 1.5v3a1.5 1.5 0 0 1-1.5 1.5h-3A1.5 1.5 0 0 1 9 13.5zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5z"/%3E%3C/svg%3E');
            mask-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"%3E%3Cpath d="M1 2.5A1.5 1.5 0 0 1 2.5 1h3A1.5 1.5 0 0 1 7 2.5v3A1.5 1.5 0 0 1 5.5 7h-3A1.5 1.5 0 0 1 1 5.5zM2.5 2a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5zM9 2.5A1.5 1.5 0 0 1 10.5 1h3A1.5 1.5 0 0 1 15 2.5v3A1.5 1.5 0 0 1 13.5 7h-3A1.5 1.5 0 0 1 9 5.5zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5zM1 10.5A1.5 1.5 0 0 1 2.5 9h3A1.5 1.5 0 0 1 7 10.5v3A1.5 1.5 0 0 1 5.5 15h-3A1.5 1.5 0 0 1 1 13.5zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5zM9 10.5A1.5 1.5 0 0 1 10.5 9h3a1.5 1.5 0 0 1 1.5 1.5v3a1.5 1.5 0 0 1-1.5 1.5h-3A1.5 1.5 0 0 1 9 13.5zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5z"/%3E%3C/svg%3E');
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
}


/* La tarjeta recortada dentro del globo de Google se retiro el 2026-08-02:
   el mapa abre ahora el reporte COMPLETO en un modal (.ficha-modal, mas
   arriba), asi que sobraban tanto `.tarjeta-reporte--mapa` como los parches
   sobre `.gm-style-iw-*` que le quitaban el relleno al globo. */

/* =========================================================================
   Contacto (2026-08-02)

   Eran dos bandas seguidas a lo ancho entero —ubicacion con un mapa de 350px,
   y debajo los telefonos— con lo que en escritorio la pagina quedaba como una
   columna larga y medio vacia. Ahora los datos y el mapa van en paralelo, y en
   movil se apilan con el mapa mas bajo.
   ========================================================================= */
.contacto-rejilla {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
    gap: 1.75rem 2.5rem;
    align-items: start;
}
.contacto-datos h2 { margin-top: 0; }
.contacto-datos h2 + address { margin-bottom: 1.75rem; }
.contacto-datos address:last-child { margin-bottom: 0; }

.contacto-telefonos {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}
/* Objetivo de pulsacion decente en un telefono: un enlace de una linea de
   texto son 22px de alto y hay que afinar mucho para acertar. */
.contacto-telefonos a {
    display: inline-block;
    padding: .2rem 0;
    font-weight: 700;
}

.contacto-mapa iframe {
    display: block;
    width: 100%;
    height: 380px;
    border: 1px solid var(--ivan-borde);
    border-radius: .4rem;
}

@media (max-width: 767.98px) {
    .contacto-rejilla { grid-template-columns: 1fr; gap: 1.5rem; }
    .contacto-mapa iframe { height: 260px; }
}