/*
 * Complemento del diseño público (2026-08-03).
 *
 * `css/app.css` viene de IVAN Fresno y es Tailwind v4 YA COMPILADO: solo contiene las
 * clases que Fresno usa en su marcado. Aquí va lo que Tulare necesita y allí no existe,
 * y se carga después para poder ajustar sin tocar la hoja copiada.
 *
 * Regla para no volver a lo de antes: si algo se puede resolver con una clase que ya
 * está en app.css, se usa esa. Este archivo es para lo que Fresno no tiene.
 */

/* ── Selector de idioma (GTranslate) ──────────────────────────────────────────
   Fresno no lo lleva. En Tulare es un widget flotante; se le quita la banderita,
   que se pintaba encima del texto. */
.gtranslate_wrapper .gt_float_switcher img {
    display: none !important;
}

/* ── Aviso de emergencia de /report ───────────────────────────────────────────
   Fresno no lo tiene. Se mantiene destacado porque lleva un teléfono al que hay que
   llamar ANTES de reportar, y eso no puede pasar desapercibido. */
.aviso-emergencia {
    background: #f0ffc1;
    border: 1px solid #dcefa4;
    border-radius: 8px;
    padding: .7rem .9rem;
    margin: 0 0 1.2rem;
    color: #3d4449;
    font-size: .95rem;
    line-height: 1.45;
}

/* ── Errores de validación de Yii ─────────────────────────────────────────────
   `CActiveForm::error()` pinta `.errorMessage` y `labelEx()` marca el asterisco con
   `.required`. Son clases de Yii, así que no están en la hoja de Fresno. Se les da el
   mismo rojo que usa `js/app.js` para sus mensajes, para que no haya dos rojos. */
.errorMessage {
    color: #c0392b;
    font-size: .875rem;
    margin-top: .375rem;
}
/* Solo el asterisco, no la etiqueta entera: `labelEx()` pone la clase `required`
   TAMBIÉN en el <label>, así que un `.required` a secas dejaba todos los rótulos del
   formulario en rojo, como si estuvieran mal rellenados. */
span.required {
    color: #c0392b;
}

/* ── Adjuntos del formulario ──────────────────────────────────────────────────
   La zona de arrastre y las miniaturas usan `.upload-zone`, `.media-card`,
   `.media-thumb` y `.media-del`, que ya vienen en `app.css`. Aquí solo va lo que falta:
   el estado mientras un archivo se está subiendo.

   Ya no hay reglas para `.ajax-upload-dragdrop`: ese marcado lo pintaba el plugin
   jQuery `uploadfile`, que este formulario ya no carga. */

/* ── Ayuda del campo de descripción ───────────────────────────────────────────
   Estas preguntas vivían en un `data-tip`: aparecían solo al pasar el ratón y tapaban
   el campo mientras se escribía. Ahora van fijas debajo. Se conserva el amarillo que
   tenían, que es el mismo del aviso de emergencia. */
.pista-descripcion {
    background: #f6ffd4;
    border: 1px solid #e4f2b4;
    border-radius: 8px;
    padding: .55em .8em;
    margin: .5rem 0 0;
    color: #3d4449;
    font-size: .9rem;
    line-height: 1.45;
}

/* El campo de fecha nativo: se abre pulsando en cualquier punto, no solo en el icono. */
.panel-campo input[type="datetime-local"],
input[type="datetime-local"].field { cursor: pointer; }
input[type="datetime-local"].field::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .6; }
input[type="datetime-local"].field:hover::-webkit-calendar-picker-indicator { opacity: 1; }

/* Lo que se puede previsualizar invita a pulsarlo; un documento, no. */
.media-card.abrible { cursor: zoom-in; }
.media-card.abrible:hover .media-thumb { filter: brightness(.92); }

/* Mientras sube, la miniatura se atenúa y late, para que se vea que aún no está. */
.media-card.subiendo {
    opacity: .55;
    animation: subiendo-late 1.1s ease-in-out infinite;
}
.media-card.subiendo .media-del {
    display: none;   /* quitarlo a medias dejaría el archivo a medio subir */
}
@keyframes subiendo-late {
    50% { opacity: .3; }
}

/* Respeta a quien tenga desactivadas las animaciones en su sistema. */
@media (prefers-reduced-motion: reduce) {
    .media-card.subiendo { animation: none; }
}

/* El hueco del aviso no debe dejar un espacio en blanco cuando está vacío. */
#report-upload-msg:empty {
    display: none;
}

/* ── Menú de secciones dentro de una página ───────────────────────────────────
   Lo usan las páginas largas (FAQs, About) para saltar entre apartados. El aspecto
   anterior venía del tema `.downMenu`, que el diseño nuevo ya no carga.

   `js/nav.js` marca el activo con `.downActive` y hace el desplazamiento suave. */
.menu-secciones {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.menu-secciones a {
    display: inline-block;
    padding: .5rem 1rem;
    border: 1px solid #e0e0e0;
    border-radius: 999px;
    background: #fff;
    color: #5b6470;
    font-size: .9rem;
    font-weight: 600;
    text-decoration: none;
    transition: border-color .15s, color .15s, background .15s;
}
.menu-secciones a:hover {
    border-color: #cfe6fb;
    background: #eef5ff;
    color: #0099ff;
    text-decoration: none;
}
.menu-secciones a.downActive {
    background: #0099ff;
    border-color: #0099ff;
    color: #fff;
}

/* ── Página About ─────────────────────────────────────────────────────────────
   `.about-hero` y `.about-card` estaban en el marcado pero NO tenían estilo en ninguna
   hoja: la página se apoyaba en los envoltorios `#main`/`.inner` del tema anterior.
   Al migrarla se les da un aspecto propio, en la línea del resto del diseño. */
.about-hero p {
    max-width: 60rem;
    margin-top: .4rem;
}
.about-card {
    background: #fff;
    border: 1px solid #e7e9ee;
    border-radius: 1rem;
    padding: 1.6rem 1.8rem;
}
.about-card h2 {
    margin: 0 0 .5rem;
    font-size: 1.35rem;
    font-weight: 700;
    color: #2b3038;
    text-transform: none;
    letter-spacing: normal;
}
.about-card p:last-child { margin-bottom: 0; }

/* Entre tarjetas seguidas sobra el doble margen que dejan sus contenedores. */
.container-ivan.py-8 + .container-ivan.py-8 { padding-top: 0; }

/* ── Globo de un monitor en el mapa de aire ───────────────────────────────────
   El marcado (`.air-popup*`) viene de Fresno y ya está en `app.css`, pero allí el mapa
   es Leaflet y aquí es Google. Google envuelve el contenido en su propio recuadro con
   relleno, así que la cabecera de color quedaba flotando dentro de un marco blanco.
   Esto lo pega a los bordes, que es lo que hace la regla `.air-popup-wrap` de Leaflet. */
.gm-style .gm-style-iw-c {
    padding: 0;
    overflow: hidden;
}
.gm-style .gm-style-iw-d {
    overflow: hidden !important;   /* Google lo pone en `auto` y saca una barra de 1px */
    max-height: none !important;
}
/* `gm-style-iw-chr` es la fila que Google reserva ARRIBA para el aspa de cerrar. Aquí
   está vacía salvo por el botón, y dejaba una banda blanca de 48px sobre la cabecera de
   color. Se le quita la altura y el aspa se superpone, con fondo propio para que se lea
   sobre cualquier color. */
.gm-style .gm-style-iw-c .gm-style-iw-chr {
    height: 0;
    overflow: visible;
}
.gm-style .gm-style-iw-c .gm-style-iw-chr button.gm-ui-hover-effect {
    position: absolute !important;
    top: 4px !important;
    right: 4px !important;
    width: 30px !important;
    height: 30px !important;
    background: rgba(255, 255, 255, .82) !important;
    border-radius: 999px !important;
}
.gm-style .gm-style-iw-c .gm-style-iw-chr button.gm-ui-hover-effect > span {
    margin: 3px !important;
}

/* ── Acordeón de las páginas de preguntas ─────────────────────────────────────
   Lo usan /air/faqs y /resources/ivanfaqs. Estas reglas estaban DUPLICADAS dentro de
   las dos vistas, metidas con `registerCss`, así que viajaban en cada visita y había
   que acordarse de tocar las dos. El comportamiento va en `js/faq.js`. */
.faq h2 { font-size: 1.5em; margin: 0 0 .4em; }
.faq .accordion {
    cursor: pointer;
    margin: 0;
    padding: .85em 2.4em .85em 1em;
    background: #f2f5f7;
    border: 1px solid #e1e6ea;
    border-radius: 6px;
    font-weight: 600;
    position: relative;
    color: #3d4449;
}
.faq .accordion:hover { background: #e9eef2; }
.faq .accordion.active { background: #0099ff; color: #fff; border-color: #0099ff; }
.faq .accordion:after {
    content: '+';
    position: absolute;
    right: 1em;
    top: 50%;
    transform: translateY(-50%);
    font-weight: 700;
}
.faq .accordion.active:after { content: '\2013'; }
.faq .panel {
    display: none;
    padding: .6em 1.1em 1em;
    border: 1px solid #e1e6ea;
    border-top: none;
    border-radius: 0 0 6px 6px;
    margin-bottom: .7em;
}
.faq .panel.open { display: block; }
.faq .accordion + .panel { margin-top: -4px; }
.faq .panel p { margin: 0 0 .8em; line-height: 1.7; }
.faq .panel ul { list-style: disc; padding-left: 1.4em; margin: 0 0 .8em; }

/* ── Utilidades de Tailwind que Fresno no llegó a usar ────────────────────────
   La hoja está compilada: solo trae las clases del marcado de Fresno. Estas hacen
   falta en Tulare y allí no salían, así que se escriben a mano con el mismo valor
   que les daría Tailwind. Si algún día se recompila la hoja, sobran. */
.list-decimal { list-style-type: decimal; }   /* los pasos de "What to do" de la portada */