/* =========================================================================
   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 ----------------------------------------- */
    /* ⚠️ Los DOS nombres. Google renombro "Source Sans Pro" a "Source Sans 3";
       el layout pide la familia nueva, pero si se deja solo el nombre viejo en
       la pila no casa con nada y el sitio cae a Helvetica. Con ambos funciona
       tanto si el navegador ya tiene cacheada la vieja como si baja la nueva. */
    --bs-body-font-family: "Source Sans 3", "Source Sans Pro", Helvetica, Arial, sans-serif;
    --bs-body-font-size: 1.1667rem;      /* 18.6667px con la raiz en 16px */
    --bs-body-font-weight: 300;
    --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; }

/* 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; }

.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;
    text-align: center;
    padding: .35rem .5rem;
}
.ivan-indice ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .25rem 1rem;
}
.ivan-indice a {
    display: inline-block;
    padding: 5px;
    font-weight: 700;
    font-size: 1rem;
    color: #fff;
    border-bottom: 5px solid transparent;   /* reserva el hueco del activo */
    text-decoration: none;
}
.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: 4.5rem; }

@media (max-width: 575.98px) {
    .ivan-indice a { font-size: .85rem; padding: 4px; border-bottom-width: 3px; }
    body:has(.ivan-indice) { padding-bottom: 6rem; }
}

/* =========================================================================
   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; }

.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;
}
.ficha-reporte-categoria {
    display: inline-block;
    background: #eaf4fd;
    color: #14567e;
    border: 1px solid #cfe6f8;
    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)); }
}

/* =========================================================================
   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; }

@media (max-width: 575.98px) {
    .doc-fecha { white-space: normal; }
    .doc-tabla td, .doc-tabla th { padding: .5rem .65rem; }
}

/* 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);
}
.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;
}
.lista-filtro select.form-select { min-width: 12rem; font-size: 1rem; }

/* 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; }
}