/* =============================================================================
   Avisos y confirmaciones · paquete portátil
   Extraído de AsegPro (static/css/estilos.css). Sin Bootstrap, sin fuente de
   iconos: los iconos los dibuja alertas.js con SVG en línea.

   Tres formas del mismo sistema:
     .aviso            franja dentro de la pantalla o del modal
     .aviso-flotante   tarjeta abajo a la derecha, se va sola
     .confirmar-*      el diálogo de sí o no que reemplaza a confirm()

   No se pinta un bloque de color plano: el color es una barra lateral y un
   icono, y el texto se lee sobre fondo claro. Así la gravedad se ve sin que el
   mensaje deje de leerse.
   ============================================================================= */

:root {
    /* El acento sale de --brand, que el selector de tema reescribe en caliente:
       así las alertas siguen al tema elegido sin tocar este archivo. */
    --aviso-acento:       var(--brand, #0077b6);
    --aviso-acento-claro: var(--brand-light, #00c2f0);
    --aviso-acento-fuerte: var(--brand-dark, #005a8e);
    --aviso-borde:        #e2e8f0;
    --aviso-texto:        #1f2937;
    --aviso-texto-suave:  #64748b;
    --aviso-radio:        0.5rem;
    --aviso-tipografia:   var(--font, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);

    /* Sección 12.1: el diálogo se abre ENCIMA de cualquier modal. Aquí los
       modales llegan a 9999 (menú lateral, FAB), así que 1080 lo dejaría
       debajo y la pantalla quedaría trabada sin nada que pulsar. */
    --aviso-z-dialogo: 20000;
    --aviso-z-pila:    20010;
}


/* --- Franja dentro de la pantalla ----------------------------------------- */

.aviso {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.7rem 0.85rem;
    margin-bottom: 1rem;
    font-family: var(--aviso-tipografia);
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--aviso-texto);
    background: #fff;
    border: 1px solid var(--aviso-borde);
    border-left: 3px solid var(--tono, var(--aviso-acento));
    border-radius: var(--aviso-radio);
    box-shadow: 0 1px 3px rgba(15, 45, 74, 0.06);
    animation: aviso-entra 0.18s ease-out;
}

.aviso.oculto { display: none; }

.aviso-danger  { --tono: #dc3545; background: #fef6f6; }
.aviso-warning { --tono: #d98a12; background: #fffaf1; }
.aviso-success { --tono: #198754; background: #f3faf6; }
.aviso-info    { --tono: var(--aviso-acento-claro); background: #f4f8fc; }

.aviso-icono {
    color: var(--tono);
    flex-shrink: 0;
    display: block;
    width: 1rem;
    height: 1rem;
    margin-top: 0.15rem;
}

/* El SVG hereda el tamaño del hueco: sin esto un <svg> sin width sale de 300px */
.aviso-icono svg { width: 100%; height: 100%; display: block; }

/* Las franjas que pinta el servidor (los flash del login) traen el icono como
   fuente y no como SVG: ahí el hueco no aplica y hay que darle el tamaño. */
.aviso-icono i { font-size: 1rem; line-height: 1; }

.aviso-texto { flex-grow: 1; min-width: 0; }

/* Cierre discreto: se nota al pasar por encima, no compite con el mensaje */
.aviso-cerrar {
    flex-shrink: 0;
    border: 0;
    background: none;
    padding: 0 0.15rem;
    cursor: pointer;
    line-height: 0;
    color: var(--aviso-texto-suave);
    opacity: 0.6;
    transition: opacity 0.15s;
}

.aviso-cerrar svg { width: 0.7rem; height: 0.7rem; display: block; }

/* Acción del aviso flotante («Ver»): seguir desde el aviso sin buscar dónde. */
.aviso-accion {
    flex-shrink: 0;
    align-self: center;
    border: 1px solid currentColor;
    border-radius: 7px;
    background: none;
    color: inherit;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 0.25rem 0.65rem;
    cursor: pointer;
}
.aviso-accion:hover,
.aviso-accion:focus-visible { background: rgba(0, 0, 0, 0.06); }

.aviso-cerrar:hover,
.aviso-cerrar:focus-visible { opacity: 1; }

@keyframes aviso-entra {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
}


/* --- Avisos flotantes ----------------------------------------------------- */
/* Van abajo a la derecha y no arriba: arriba se pelearían con la barra superior
   del sistema, que ya ocupa esa esquina. */

.pila-avisos {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: var(--aviso-z-pila);  /* por encima de cualquier modal */
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    width: min(380px, calc(100vw - 2rem));
    pointer-events: none;          /* la pila no bloquea; cada tarjeta sí recibe */
}

.aviso-flotante {
    pointer-events: auto;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.8rem 0.9rem 0.85rem;
    font-family: var(--aviso-tipografia);
    color: var(--aviso-texto);
    background: #fff;
    border: 1px solid var(--aviso-borde);
    border-left: 3px solid var(--tono, var(--aviso-acento));
    border-radius: 0.6rem;
    box-shadow: 0 10px 28px rgba(15, 45, 74, 0.16);
    font-size: 0.875rem;
    opacity: 1;
    transform: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
    animation: flotante-entra 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.aviso-flotante.se-va {
    opacity: 0;
    transform: translateX(12px);
}

.aviso-flotante .aviso-texto {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
}

.aviso-titulo {
    font-weight: 600;
    color: #111827;
    font-size: 0.875rem;
}

.aviso-detalle {
    color: var(--aviso-texto-suave);
    font-size: 0.825rem;
    line-height: 1.4;
}

/* Barra de tiempo: se agota sola y muestra cuánto falta para que desaparezca */
.aviso-tiempo {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    width: 100%;
    background: var(--tono);
    opacity: 0.4;
    transform-origin: left center;
    animation-name: aviso-tiempo;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}

.aviso-flotante.en-pausa .aviso-tiempo { animation-play-state: paused; }

@keyframes aviso-tiempo {
    from { transform: scaleX(1); }
    to   { transform: scaleX(0); }
}

@keyframes flotante-entra {
    from { opacity: 0; transform: translateX(24px) scale(0.98); }
    to   { opacity: 1; transform: none; }
}


/* --- Diálogo de confirmación ---------------------------------------------- */
/* z-index alto a propósito: este diálogo se abre ENCIMA de otro modal —al
   cerrar un formulario con datos, al borrar algo desde su propia ventana—. Si
   queda debajo del que lo llamó, y ese tiene el fondo bloqueado, la pantalla se
   traba sin nada que se pueda pulsar. */

.av-fondo {
    position: fixed;
    inset: 0;
    z-index: var(--aviso-z-dialogo);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(15, 45, 74, 0.45);
    opacity: 0;
    transition: opacity 0.15s ease;
}

.av-fondo.abierto { opacity: 1; }

.av-caja {
    width: 100%;
    max-width: 420px;
    background: #fff;
    border-radius: 0.9rem;
    box-shadow: 0 20px 50px rgba(15, 45, 74, 0.25);
    font-family: var(--aviso-tipografia);
    text-align: center;
    padding: 1.5rem;
    transform: translateY(-8px);
    transition: transform 0.15s ease;
}

.av-fondo.abierto .av-caja { transform: none; }

.confirmar-icono {
    width: 54px;
    height: 54px;
    margin: 0.25rem auto 1rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.confirmar-icono svg { width: 1.5rem; height: 1.5rem; }

.confirmar-icono.es-peligro { background: #fdecec; color: #dc3545; }
.confirmar-icono.es-cuidado { background: #fff6e6; color: #d98a12; }
.confirmar-icono.es-normal  { background: #eef4fa; color: var(--aviso-acento); }

.confirmar-titulo {
    font-size: 1.08rem;
    font-weight: 600;
    color: var(--aviso-acento-fuerte);
    margin: 0 0 0.45rem;
}

.confirmar-mensaje {
    font-size: 0.9rem;
    color: #374151;
    margin: 0 0 0.35rem;
}

.confirmar-detalle {
    font-size: 0.82rem;
    color: var(--aviso-texto-suave);
    margin: 0;
}

.confirmar-detalle.oculto { display: none; }

/* ── Campo de motivo ──
   Solo aparece con `Aviso.confirmarConMotivo`. Una acción que hay que explicar
   —anular un abono, por ejemplo— necesita el porqué en el mismo gesto: pedirlo
   después, en otra pantalla, es pedirlo cuando ya nadie se acuerda. */
.confirmar-campo {
    display: block;
    margin-top: 1rem;
    text-align: left;
}

.confirmar-campo.oculto { display: none; }

.confirmar-campo-etiqueta {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--aviso-texto-suave);
    margin-bottom: 0.3rem;
}

.confirmar-campo-texto {
    width: 100%;
    box-sizing: border-box;
    padding: 0.5rem 0.6rem;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font: inherit;
    font-size: 0.85rem;
    color: #111827;
    background: #fff;
    resize: vertical;
    min-height: 2.6rem;
}

.confirmar-campo-texto:focus {
    outline: none;
    border-color: var(--aviso-acento, #0077b6);
    box-shadow: 0 0 0 3px rgba(0, 119, 182, 0.12);
}

/* Se marca al intentar confirmar en vacío: el botón no cierra, y sin señal
   parecería que dejó de funcionar. */
.confirmar-campo-texto.confirmar-campo-falta {
    border-color: #dc2626;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
}

.confirmar-botones {
    display: flex;
    gap: 0.5rem;
    margin-top: 1.5rem;
}

.av-btn {
    flex: 1 1 0;
    padding: 0.5rem 0.9rem;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.5;
    border-radius: 0.375rem;
    border: 1px solid transparent;
    cursor: pointer;
    transition: filter 0.15s, background-color 0.15s;
}

.av-btn:focus-visible { outline: 2px solid var(--aviso-acento-claro); outline-offset: 2px; }
.av-btn:hover { filter: brightness(0.96); }

/* Cancelar es el botón tranquilo: no debe verse tan llamativo como la acción */
.confirmar-no {
    background: #f8f9fa;
    border-color: var(--aviso-borde);
    color: var(--aviso-texto);
}

.confirmar-si { color: #fff; font-weight: 600; }
.confirmar-si.es-peligro { background: #dc3545; }
.confirmar-si.es-cuidado { background: #d98a12; }
.confirmar-si.es-normal  { background: var(--aviso-acento); }


/* Quien no quiere animaciones no las recibe; el aviso igual aparece y se va,
   solo deja de deslizarse. */
@media (prefers-reduced-motion: reduce) {
    .aviso,
    .aviso-flotante,
    .aviso-tiempo { animation: none; }
    .aviso-flotante,
    .av-fondo,
    .av-caja { transition: none; }
}

@media print {
    .pila-avisos, .av-fondo { display: none !important; }
}


/* --- Mensaje bajo el campo (la cuarta forma, seccion 3.4) ----------------- */
/* Reserva su alto SIEMPRE: si apareciera y desapareciera, el formulario
   brincaria a cada tecla. */

.mensaje-campo {
    font-size: 0.78rem;
    color: var(--aviso-texto-suave);
    display: flex;
    align-items: center;
    gap: 0.3rem;
    min-height: 1.15rem;
}

/* Mientras escribe: ambar. Un campo a medio llenar todavia no es un error, y
   pintarlo como si lo fuera regana al usuario por no haber terminado. */
.mensaje-campo.es-aviso { color: #9a6700; }

/* Al salir del campo: rojo. Ahi el dato ya se dio por escrito. */
.mensaje-campo.es-error { color: #dc3545; font-weight: 600; }

.mensaje-campo.es-ok    { color: #198754; }