/* ============================================================================
 *  mensajes.css — AVISOS DEL SISTEMA (banner flotante global)
 *  Compañero de wwwroot/js/mensajes-globales.js y Shared/MensajesGlobales.razor
 * ============================================================================
 *  DECISIÓN DE COLOR — por qué NO usa las variables del tema
 *  --------------------------------------------------------------------------
 *  El sistema tiene 4 temas y DOS de ellos son OSCUROS (esmeralda #0B1512 y
 *  linear #0D0E12) contra dos CLAROS (vibrante #EEF2FF y monday #F7F7FB). Un
 *  aviso pintado con --bg-surface saldría casi negro en dos temas y casi blanco
 *  en los otros, y el color del tipo (rojo/ámbar/verde) quedaría lavado.
 *
 *  Un aviso es una CAPA POR ENCIMA de la aplicación, no parte de la superficie:
 *  se pinta con color propio, saturado y opaco, y texto blanco. Así el mismo
 *  rojo de error tiene el mismo contraste en los 4 temas — que es justo lo que
 *  Luis pidió: "que se vea". Del tema sólo se toma el radio/sombra ambiental.
 *
 *  UBICACIÓN
 *  --------------------------------------------------------------------------
 *  Arriba y al centro, FIJO al viewport (no al documento): se ve sin importar
 *  cuánto scrolleó el cajero. Arriba y no abajo a propósito: en el celular la
 *  mitad inferior es donde viven "+ Agregar" y "Guardar" (botón de facturar) y
 *  un toast ahí taparía el trabajo. Ver _flujo-teclado.mjs [MOVIL] M3.
 * ==========================================================================*/

.av-mensajes {
    position: fixed;
    top: 0.75rem;
    left: 50%;
    transform: translateX(-50%);
    /* Por encima del modal de Bootstrap (1055) y del backdrop (1050), y por
       encima del banner blue/green (1080): un error tiene que verse SIEMPRE. */
    z-index: 1090;
    width: min(560px, calc(100vw - 1.5rem));
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    /* El contenedor no debe robar clics a la pantalla que hay debajo;
       cada aviso los vuelve a habilitar para su botón de cerrar. */
    pointer-events: none;
}

.av-msg {
    pointer-events: auto;
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.7rem 0.75rem 0.7rem 0.9rem;
    border-radius: 0.6rem;
    color: #FFFFFF;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28), 0 2px 6px rgba(0, 0, 0, 0.18);
    /* borde claro: despega el aviso del fondo también en los temas oscuros */
    border: 1px solid rgba(255, 255, 255, 0.22);
    overflow: hidden;
    animation: avMsgEntra 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.4);
    font-size: 0.95rem;
    line-height: 1.35;
}

/* --- colores por tipo (opacos, contraste AA sobre el texto blanco) --- */
.av-msg-error { background: linear-gradient(135deg, #C62026 0%, #9B1B22 100%); }
.av-msg-advertencia { background: linear-gradient(135deg, #B26A00 0%, #8A5200 100%); }
.av-msg-exito { background: linear-gradient(135deg, #16794A 0%, #0F5C38 100%); }
.av-msg-info { background: linear-gradient(135deg, #1B5FA8 0%, #144A85 100%); }

.av-msg-ico {
    flex: 0 0 auto;
    font-size: 1.15rem;
    line-height: 1.2;
    margin-top: 0.05rem;
    opacity: 0.95;
}

.av-msg-cuerpo {
    flex: 1 1 auto;
    min-width: 0;
    /* mensajes largos cortan bien y no desbordan a lo ancho */
    overflow-wrap: anywhere;
}

.av-msg-titulo {
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    opacity: 0.9;
    margin-bottom: 0.1rem;
}

.av-msg-texto { font-weight: 500; }

/* Botón de cerrar: 44x44 reales (requisito táctil), aunque el ícono sea chico. */
.av-msg-cerrar {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    margin: -0.35rem -0.25rem -0.35rem 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    border-radius: 0.45rem;
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    font-size: 0.9rem;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.av-msg-cerrar:hover { background: rgba(255, 255, 255, 0.18); color: #FFFFFF; }
.av-msg-cerrar:focus-visible {
    outline: 2px solid #FFFFFF;
    outline-offset: -2px;
}

/* Barra de tiempo del auto-cierre. Desde el 16-ago-2026 la llevan TODOS los tipos:
   error y advertencia también se van solos, así que también avisan cuánto les queda. */
.av-msg-barra {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 100%;
    background: rgba(255, 255, 255, 0.55);
    transform-origin: left center;
    animation-name: avMsgBarra;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}

/* --- animaciones --- */
@keyframes avMsgEntra {
    from { opacity: 0; transform: translateY(-14px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes avMsgBarra {
    from { transform: scaleX(1); }
    to   { transform: scaleX(0); }
}
@keyframes avMsgSacude {
    0%, 100% { transform: translateX(0); }
    25%      { transform: translateX(-5px); }
    75%      { transform: translateX(5px); }
}

.av-msg.saliendo {
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}
.av-msg.sacudir { animation: avMsgSacude 0.3s ease; }

/* Accesibilidad: quien pidió menos movimiento no recibe animaciones. */
@media (prefers-reduced-motion: reduce) {
    .av-msg, .av-msg.sacudir { animation: none; }
    .av-msg-barra { animation-duration: 0s; }
    .av-msg.saliendo { transition: none; }
}

/* --- MÓVIL: ancho completo, texto un punto más grande, sin tapar el pie --- */
@media (max-width: 640px) {
    .av-mensajes {
        top: 0.5rem;
        width: calc(100vw - 1rem);
        /* nunca más de la mitad de la pantalla: el cajero tiene que seguir
           viendo el campo en el que está trabajando */
        max-height: 50vh;
        overflow-y: auto;
    }
    .av-msg {
        font-size: 1rem;
        padding: 0.8rem 0.6rem 0.8rem 0.85rem;
    }
}

/* --- IMPRESIÓN: los avisos NO se imprimen (facturas, KuDE, ticket 80mm) --- */
@media print {
    .av-mensajes { display: none !important; }
}