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