/* ===========================================================================
   LOS AVISOS — la pila en pantalla y el centro de la campanita.
   ===========================================================================
   Ver src/core/avisos.js para el porqué. Como el toast, cuelga de <body> y lo
   ven por igual los módulos con identidad y los que siguen en Tailwind: prefijo
   `gs-`/`av-` y sólo tokens de :root (core/tokens.css).

   LAS DOS REGLAS DEL MANUAL QUE ESTO HACE CUMPLIR
   · El color es GRAVEDAD, no módulo (§1.1): franja de 4 px a la izquierda y el
     ícono en su tinta. Problema = --crit, Atención = --warn, Informa = --navy-500.
   · Un solo bloque relleno por tarjeta (§1.2): el botón navy de la acción.
     Antes había cabecera de color pleno MÁS botón de color pleno.
   =========================================================================== */

/* ── LA PILA ───────────────────────────────────────────────────────────────
   Abajo a la derecha, como antes, pero en UNA columna: `column-reverse` deja
   el primer hijo abajo, y avisos.js pone primero la más grave. */
#gs-avisos {
    position: fixed; right: 20px; bottom: 20px; z-index: 300;
    display: flex; flex-direction: column-reverse; align-items: flex-end; gap: 10px;
    width: min(360px, calc(100vw - 32px));
    max-height: calc(100vh - 40px); overflow-y: auto; overscroll-behavior: contain;
    pointer-events: none;
    font-family: 'Segoe UI', -apple-system, system-ui, Roboto, Arial, sans-serif;
    color: var(--ink, #1e2733);
    scrollbar-width: thin;
}
#gs-avisos > * { pointer-events: auto; }

.av {
    position: relative; width: 100%; flex: 0 0 auto;
    background: var(--surface, #fff);
    border: 1px solid var(--hair-strong, #d4dbe7); border-radius: 12px;
    box-shadow: var(--e3, 0 20px 60px rgba(10, 25, 60, .28));
    overflow: hidden;
}
.av:not(.ya) { animation: gsAvisoIn .24s var(--curva, ease-out); }
.av.saliendo { animation: gsAvisoOut .18s ease forwards; }
.av::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--navy-500, #154a94); }
.av.wrn::before { background: var(--warn, #a85900); }
.av.neg::before { background: var(--crit, #c62828); }

.av-h { display: flex; align-items: flex-start; gap: 10px; padding: 12px 10px 6px 18px; }
.av-ic { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center;
         background: var(--navy-050, #edf2fa); color: var(--navy-500, #154a94); }
.av.wrn .av-ic { background: var(--warn-050, #fdf3e5); color: var(--warn, #a85900); }
.av.neg .av-ic { background: var(--crit-050, #fdecec); color: var(--crit, #c62828); }
.av-ic .material-symbols-outlined { font-size: 19px; }
.av-tt { flex: 1; min-width: 0; padding-top: 1px; }
.av-tt b { display: block; font-size: 14px; font-weight: 700; line-height: 1.3; }
.av-tt small { display: block; font-size: 12px; color: var(--muted, #64707f); line-height: 1.35; margin-top: 1px; }

/* «Más tarde» no es una cruz: la tarjeta vuelve. Lo dice con palabras. */
.av-x { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 3px;
        border: 0; background: transparent; cursor: pointer; font: inherit;
        font-size: 12px; color: var(--faint, #6b7787); padding: 4px 7px; border-radius: 6px; }
.av-x .material-symbols-outlined { font-size: 16px; }
.av-x:hover { background: var(--navy-050, #edf2fa); color: var(--navy, #002b6b); }
.av-x:focus-visible, .av-ir:focus-visible, .av-mini:focus-visible, .av-mas:focus-visible, .av-pastilla:focus-visible {
    outline: 2px solid var(--navy-300, #4d82c8); outline-offset: 2px; }

.av-rs { padding: 0 14px 2px 18px; max-height: 210px; overflow-y: auto; }
.av-r { padding: 7px 0; border-top: 1px solid var(--hair, #e4e8f0); font-size: 13px; }
.av-r:first-child { border-top: 0; }
.av-r1 { display: flex; justify-content: space-between; gap: 10px; }
.av-rt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.av-rt em { font-style: normal; color: var(--muted, #64707f); }
.av-r time { flex: 0 0 auto; font-size: 12px; color: var(--muted, #64707f); font-variant-numeric: tabular-nums; }
.av-r time.tarde { color: var(--warn, #a85900); font-weight: 700; }
.av-cita { font-size: 12px; color: var(--muted, #64707f); margin-top: 2px;
           display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.av-rb { display: flex; gap: 6px; justify-content: flex-end; margin-top: 5px; }
.av-mini { border: 1px solid var(--hair-strong, #d4dbe7); background: var(--surface, #fff); color: var(--navy-500, #154a94);
           border-radius: 7px; padding: 3px 10px; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.av-mini:hover { border-color: var(--navy-300, #4d82c8); background: var(--navy-050, #edf2fa); }
.av-mini:disabled { opacity: .55; cursor: default; }

.av-cod { padding: 4px 14px 2px 18px; }
.av-cod code { display: block; background: var(--navy-050, #edf2fa); color: var(--navy, #002b6b); border-radius: 7px;
               padding: 6px 10px; font: 600 12.5px/1.3 Consolas, 'Cascadia Mono', monospace; }

.av-p { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 14px 12px 18px; }
.av-nota { font-size: 12px; color: var(--muted, #64707f); min-width: 0; line-height: 1.35; }
.av-ir { flex: 0 0 auto; border: 0; cursor: pointer; font: inherit; font-size: 13px; font-weight: 600;
         background: var(--navy, #002b6b); color: #fff; border-radius: 8px; padding: 7px 13px;
         transition: background .15s var(--curva, ease); }
.av-ir:hover { background: var(--navy-700, #001a41); }

/* La que se va sola muestra cuánto le queda. */
.av-vida { position: absolute; left: 4px; right: 0; bottom: 0; height: 2px; background: var(--hair, #e4e8f0); }
.av-vida i { display: block; height: 100%; background: var(--navy-300, #4d82c8); transform-origin: left;
             animation-name: gsAvisoVida; animation-timing-function: linear; animation-fill-mode: forwards; }

/* «+N avisos más»: los que no entran no desaparecen, se nombran. */
.av-mas { width: 100%; flex: 0 0 auto; display: flex; align-items: center; gap: 10px; text-align: left;
          border: 1px dashed var(--hair-strong, #d4dbe7); background: var(--surface, #fff);
          border-radius: 10px; padding: 8px 12px; cursor: pointer; font: inherit; font-size: 13px;
          color: var(--navy-500, #154a94); box-shadow: var(--e2, 0 8px 22px rgba(16, 32, 64, .09)); }
.av-mas b { flex: 0 0 auto; font-weight: 700; }
.av-mas .av-mas-q { flex: 1; min-width: 0; color: var(--muted, #64707f); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.av-mas .material-symbols-outlined { margin-left: auto; font-size: 18px; }
.av-mas:hover { border-color: var(--navy-300, #4d82c8); }

/* Lo pospuesto no se esconde: queda una pastilla. */
.av-pastilla { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px;
               border: 1px solid var(--hair-strong, #d4dbe7); background: var(--surface, #fff); border-radius: 999px;
               padding: 6px 14px 6px 7px; cursor: pointer; font: inherit; font-size: 13px; font-weight: 600;
               color: var(--ink, #1e2733); box-shadow: var(--e2, 0 8px 22px rgba(16, 32, 64, .09)); }
.av-pastilla .n { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; display: grid; place-items: center;
                  color: #fff; font-size: 12px; font-variant-numeric: tabular-nums; background: var(--navy-500, #154a94); }
.av-pastilla .n.wrn { background: var(--warn, #a85900); }
.av-pastilla .n.neg { background: var(--crit, #c62828); }
.av-pastilla:hover { border-color: var(--navy-300, #4d82c8); }

@keyframes gsAvisoIn  { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes gsAvisoOut { to { opacity: 0; transform: translateX(14px); } }
@keyframes gsAvisoVida { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* ── LA CAMPANITA (pie del rail) ─────────────────────────────────────────── */
#app-rail .rail-avisos { position: relative; }
/* La campanita: rellena (tiene estado, como la división). Se hamaca desde el
   gancho al pasar el mouse y cuando sube la cuenta de sin leer (`.suena`, la
   pone avisos.js); el número rebota (`.pop`). */
#app-rail .rail-campana {
    font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24;
    transform-origin: 50% 12%;
}
#app-rail .rail-btn:hover .rail-campana,
#app-rail .rail-campana.suena { animation: gsCampana .8s var(--curva, ease-out); }
#app-rail .rail-avisos-n.pop  { animation: gsAvisoPop .45s var(--curva, ease-out); }
@keyframes gsCampana {
    15% { transform: rotate(16deg); }  32% { transform: rotate(-13deg); }
    50% { transform: rotate(8deg); }   68% { transform: rotate(-4deg); }
    84% { transform: rotate(2deg); }
}
@keyframes gsAvisoPop { 0% { transform: scale(.4); } 60% { transform: scale(1.18); } }
#app-rail .rail-avisos-n {
    position: absolute; top: 3px; right: 9px;
    min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
    display: grid; place-items: center;
    font-size: 10.5px; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums;
    border: 2px solid var(--shell-navy, #002b6b);
    background: var(--navy-300, #4d82c8);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
}
#app-rail .rail-avisos-n.wrn { background: linear-gradient(180deg, #e08a1e, #b85e00); }
#app-rail .rail-avisos-n.neg { background: var(--crit, #c62828); }
#app-rail .rail-avisos-n[hidden] { display: none; }

/* ── EL CENTRO ───────────────────────────────────────────────────────────────
   Es contenido, no navegación: panel BLANCO, aunque cuelgue del rail navy.
   `#main-page #app-rail` para ganarle al panel verde de Polvos (shell-ui.css,
   que se carga antes). */
#main-page #app-rail .rail-pop.av-centro,
#app-rail .rail-pop.av-centro {
    width: 380px; max-width: calc(100vw - 110px);
    padding: 0; overflow: hidden;
    background: var(--surface, #fff); color: var(--ink, #1e2733);
    border: 1px solid var(--hair-strong, #d4dbe7); border-radius: 14px;
    box-shadow: var(--e3, 0 20px 60px rgba(10, 25, 60, .28));
    font-family: 'Segoe UI', -apple-system, system-ui, Roboto, Arial, sans-serif;
}
#app-rail .rail-pop.av-centro.abierto { display: flex; flex-direction: column; max-height: min(78vh, 620px); }
.av-centro .avc-h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 14px 16px 8px; }
.av-centro .avc-h b { font-size: 16px; color: var(--navy, #002b6b); }
.av-centro .avc-h small { font-size: 12px; color: var(--muted, #64707f); }
.av-centro .avc-h small::first-letter { text-transform: uppercase; }

.av-centro .avc-tabs { display: flex; gap: 18px; padding: 0 16px; border-bottom: 1px solid var(--hair, #e4e8f0); }
.av-centro .avc-tabs button { border: 0; background: transparent; cursor: pointer; font: inherit; font-size: 13px;
                              color: var(--muted, #64707f); padding: 6px 0 8px; border-bottom: 2.5px solid transparent; margin-bottom: -1px; }
.av-centro .avc-tabs button span { font-variant-numeric: tabular-nums; color: var(--faint, #6b7787); margin-left: 3px; }
.av-centro .avc-tabs button[aria-selected="true"] { color: var(--navy, #002b6b); font-weight: 700; border-bottom-color: var(--navy, #002b6b); }

.av-centro .avc-l { overflow-y: auto; padding: 4px 0; min-height: 60px; }
.av-centro .avc-i { position: relative; width: 100%; display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: start;
                    border: 0; background: transparent; text-align: left; cursor: pointer; font: inherit; color: inherit;
                    padding: 9px 14px 9px 18px; border-top: 1px solid var(--hair, #e4e8f0); }
.av-centro .avc-i:first-child { border-top: 0; }
.av-centro .avc-i::before { content: ''; position: absolute; left: 7px; top: 11px; bottom: 11px; width: 3px; border-radius: 2px; background: var(--navy-500, #154a94); }
.av-centro .avc-i.wrn::before { background: var(--warn, #a85900); }
.av-centro .avc-i.neg::before { background: var(--crit, #c62828); }
.av-centro .avc-i.leido.cerrado::before { background: var(--hair-strong, #d4dbe7); }
.av-centro .avc-i:hover { background: var(--navy-050, #edf2fa); }
.av-centro .avc-i:focus-visible { outline: 2px solid var(--navy-300, #4d82c8); outline-offset: -2px; }
.av-centro .avc-ic { font-size: 18px; color: var(--navy-500, #154a94); margin-top: 1px; }
.av-centro .avc-i.wrn .avc-ic { color: var(--warn, #a85900); }
.av-centro .avc-i.neg .avc-ic { color: var(--crit, #c62828); }
.av-centro .avc-i.leido .avc-ic { color: var(--faint, #6b7787); }
.av-centro .avc-tx { min-width: 0; }
.av-centro .avc-tx b { display: block; font-size: 13.5px; font-weight: 700; line-height: 1.3; }
.av-centro .avc-i.leido .avc-tx b { font-weight: 400; color: var(--muted, #64707f); }
.av-centro .avc-tx small { display: block; font-size: 12px; color: var(--muted, #64707f); line-height: 1.35;
                           overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.av-centro .avc-md { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.av-centro .avc-md time { font-size: 12px; color: var(--muted, #64707f); font-variant-numeric: tabular-nums; }
.av-centro .avc-chip { font-style: normal; font-size: 11px; font-weight: 700; color: var(--warn, #a85900);
                       background: var(--warn-050, #fdf3e5); border: 1px solid var(--warn-hair, #f2ddbb); border-radius: 999px; padding: 0 7px; }
.av-centro .avc-i.neg .avc-chip { color: var(--crit, #c62828); background: var(--crit-050, #fdecec); border-color: var(--crit-hair, #f3c9c9); }
.av-centro .avc-ok { font-style: normal; font-size: 11px; color: var(--ok, #0f7a52); }
.av-centro .avc-vacio { margin: 0; padding: 22px 16px; text-align: center; font-size: 13px; color: var(--muted, #64707f); }

.av-centro .avc-p { display: flex; justify-content: space-between; align-items: center; gap: 10px;
                    padding: 9px 16px; border-top: 1px solid var(--hair, #e4e8f0); font-size: 12px; color: var(--muted, #64707f); }
.av-centro .avc-todo { border: 0; background: transparent; cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 600;
                       color: var(--navy-500, #154a94); padding: 2px 0; }
.av-centro .avc-todo:hover { color: var(--navy, #002b6b); text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
    @keyframes gsAvisoIn  { from { opacity: 0; } to { opacity: 1; } }
    @keyframes gsAvisoOut { to { opacity: 0; } }
    #app-rail .rail-campana, #app-rail .rail-avisos-n,
    #app-rail .rail-sw-tile, #app-rail .rail-sw-tile #switcher-icon { animation: none !important; transition: none !important; transform: none !important; }
}