/* Avisos — una sola línea visual (T-09, 05/08/2026)
   ═══════════════════════════════════════════════════════════════════════

   LOS COLORES DE AVISO NO SON CONFIGURABLES, y eso es la decisión, no un
   descuido. El cajero no LEE el aviso: lo reconoce por el color en medio
   segundo, y sigue trabajando. Si el verde de «venta registrada» dependiera
   del color de marca que eligió el dueño, ese medio segundo se convertiría
   en leer. Por eso aquí no aparece ni una sola var(--primary-color): se
   cambia la marca entera y estos cuatro no se mueven.

   Cuatro y solo cuatro:
     · Éxito       verde     algo se completó bien
     · Alerta      naranja   requiere atención, NO es un error
     · Error       rojo      falló, se eliminó, o se pierde algo
     · Información azul      dato neutro

   Contraste texto/fondo verificado ≥ 4.5:1 (WCAG AA) en los cuatro. */

#avisos {
    position: fixed;
    top: 74px;
    right: 20px;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: min(380px, calc(100vw - 40px));
    pointer-events: none;
}

.aviso {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid;
    border-left-width: 4px;
    box-shadow: 0 6px 20px rgba(15, 23, 42, .12);
    font-size: 14px;
    line-height: 1.45;
    animation: aviso-entra .18s ease-out;
}

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

@media (prefers-reduced-motion: reduce) {
    .aviso { animation: none; }
}

.aviso__icono { flex: none; margin-top: 1px; }
.aviso__cuerpo { flex: 1; min-width: 0; }
.aviso__titulo { font-weight: 650; }
/* El detalle NO baja de contraste: es donde va el dato que importa
   («Q15.00 → Q18.25»). Atenuarlo sería esconder lo único accionable. */
.aviso__detalle { margin-top: 2px; }

.aviso__cerrar {
    flex: none;
    border: 0;
    background: transparent;
    color: inherit;
    opacity: .55;
    cursor: pointer;
    font-size: 15px;
    line-height: 1;
    padding: 2px 4px;
}
.aviso__cerrar:hover { opacity: 1; }

.aviso--exito  { background: #ECFDF5; border-color: #16A34A; color: #065F46; }
.aviso--alerta { background: #FFFBEB; border-color: #D97706; color: #92400E; }
.aviso--error  { background: #FEF2F2; border-color: #DC2626; color: #991B1B; }
/* El borde de «información» NO es el --info-color de la paleta (#0EA5E9):
   sobre este fondo daba 2.55:1, por debajo del 3:1 que pide WCAG para
   elementos no textuales. Es la franja que identifica el tipo de aviso de un
   vistazo, así que tiene que verse. #0284C7 da 3.76:1. */
.aviso--info   { background: #EFF6FF; border-color: #0284C7; color: #075985; }

@media (max-width: 768px) {
    #avisos { top: 66px; right: 10px; left: 10px; width: auto; }
}