/* ═══════════════════════════════════════════════════════════════════════════
   AVISOS — .notif- (la campana del riel y su bandeja) y .av-estado- (los
   distintivos de estado que comparten la campana y /avisos).

   La campana agrupa por asunto: una tarjeta por asunto con su acción pendiente,
   su responsable y cómo terminó; dentro, los avisos del más nuevo al más viejo.
   Dos vocabularios de estado, a propósito distintos:
     · cómo va para la persona (nuevo · leído · pospuesto · resuelto): .av-estado-*
     · qué pasó en cada canal (pendiente · enviado · omitido · fallido): .notif-canal-*
   Tokens de pantalla.css (--pan-*). Sin sombras duras ni bordes gruesos.
   ═══════════════════════════════════════════════════════════════════════════ */

.notif-raiz { position: relative; display: inline-block; }

/* ── El botón de la campana (el riel lo pinta claro sobre fondo oscuro) ── */
.notif-boton {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border: 0; border-radius: 10px;
    background: transparent; color: inherit; cursor: pointer;
}
.notif-boton .material-symbols-outlined { font-size: 24px; }
.notif-boton:focus-visible { outline: 2px solid #9fd0f2; outline-offset: 2px; }
.notif-insignia {
    position: absolute; top: 3px; right: 3px;
    min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
    background: var(--pan-rojo); color: #fff;
    font: 700 10.5px/18px var(--pan-sans); text-align: center;
    box-shadow: 0 0 0 2px rgba(12, 39, 64, .35);
}

/* ── El fondo que cierra con un clic fuera ── */
.notif-fondo { position: fixed; inset: 0; z-index: 1040; background: transparent; }

/* ── El panel ── */
.notif-panel {
    position: absolute; right: 0; top: 110%;
    width: 400px; max-height: 520px; z-index: 1050;
    display: flex; flex-direction: column;
    background: var(--pan-papel); color: var(--pan-tinta);
    border: 1px solid var(--pan-linea); border-radius: 12px;
    box-shadow: var(--pan-sombra); overflow: hidden;
    font-family: var(--pan-sans); text-align: left;
}
.notif-panel:focus { outline: none; }
.notif-cab {
    flex: none; display: flex; align-items: center; gap: 8px;
    padding: 10px 12px 8px 14px; border-bottom: 1px solid var(--pan-linea);
}
.notif-cab b { font-size: 14px; letter-spacing: .02em; }
.notif-cuenta { flex: 1 1 auto; min-width: 0; font-size: 12px; color: var(--pan-apagado); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.notif-cerrar, .notif-limpiar {
    flex: none; display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border: 0; border-radius: 8px; background: transparent; color: var(--pan-apagado); cursor: pointer;
}
.notif-cerrar:hover, .notif-limpiar:hover { background: var(--pan-fondo); color: var(--pan-tinta); }
.notif-cerrar .material-symbols-outlined, .notif-limpiar .material-symbols-outlined { font-size: 20px; }
.notif-enlace {
    flex: none; border: 0; background: transparent; color: var(--pan-azul); font: 600 12px var(--pan-sans);
    padding: 6px 8px; border-radius: 8px; cursor: pointer; white-space: nowrap;
}
.notif-enlace:hover { background: rgba(24, 95, 165, .08); }
.notif-enlace:disabled { opacity: .5; cursor: default; }

/* ── Búsqueda de avisos anteriores ── */
.notif-buscar {
    flex: none; display: flex; align-items: center; gap: 6px;
    padding: 8px 10px; border-bottom: 1px solid var(--pan-linea); background: var(--pan-fondo);
}
.notif-buscar .material-symbols-outlined { font-size: 20px; color: var(--pan-tenue); }
.notif-buscar input {
    flex: 1 1 auto; min-width: 0; height: 36px; border: 1px solid var(--pan-linea); border-radius: 8px;
    padding: 0 10px; font: 13px var(--pan-sans); color: var(--pan-tinta); background: var(--pan-papel);
}
.notif-buscar input:focus { outline: 2px solid rgba(24, 95, 165, .35); outline-offset: 0; border-color: var(--pan-azul); }
.notif-buscando { font-size: 11.5px; color: var(--pan-apagado); padding: 6px 14px 0; }

/* ── La lista ── */
.notif-lista { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }

.notif-estado { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 26px 18px; text-align: center; color: var(--pan-apagado); font-size: 13px; }
.notif-estado .material-symbols-outlined { font-size: 30px; color: var(--pan-tenue); }
.notif-estado b { color: var(--pan-tinta); font-size: 13.5px; }
.notif-estado-error { color: var(--pan-tinta); background: rgba(211, 47, 20, .06); }
.notif-estado-error .material-symbols-outlined { color: var(--pan-rojo); }
.notif-estado-error span { color: var(--pan-apagado); font-size: 12.5px; }
.notif-reintentar {
    margin-top: 4px; border: 1px solid var(--pan-rojo); background: var(--pan-papel); color: var(--pan-rojo);
    font: 600 12px var(--pan-sans); letter-spacing: .04em; padding: 7px 14px; border-radius: 8px; cursor: pointer;
}
.notif-reintentar:disabled { opacity: .55; cursor: default; }
.notif-esqueleto { padding: 10px 14px; display: flex; flex-direction: column; gap: 10px; }
.notif-esqueleto i { display: block; height: 14px; border-radius: 6px; background: linear-gradient(90deg, #eef2f6 25%, #f7f9fb 50%, #eef2f6 75%); background-size: 200% 100%; animation: notif-brillo 1.2s infinite; }
.notif-esqueleto i:nth-child(2) { width: 70%; }
.notif-esqueleto i:nth-child(4) { width: 55%; }
@keyframes notif-brillo { to { background-position: -200% 0; } }

.notif-seccion { padding: 8px 14px 2px; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--pan-tenue); }

/* ── Un asunto ── */
.notif-grupo { border-bottom: 1px solid var(--pan-linea); padding: 8px 12px 8px 14px; }
.notif-grupo-pendiente { box-shadow: inset 3px 0 0 var(--pan-azul); background: rgba(24, 95, 165, .03); }
.notif-grupo-cerrado { opacity: .72; }
.notif-grupo-cab { display: flex; align-items: center; gap: 8px; min-width: 0; }
.notif-punto { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--pan-tenue); }
.notif-punto-1 { background: var(--pan-rojo); }
.notif-punto-2 { background: #e8a33d; }
.notif-punto-3 { background: var(--pan-azul); }
.notif-grupo-titulo { flex: 1 1 auto; min-width: 0; font-weight: 700; font-size: 13px; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notif-grupo-n { flex: none; font-size: 11px; color: var(--pan-apagado); white-space: nowrap; }
.notif-hace { flex: none; font-size: 11px; color: var(--pan-tenue); white-space: nowrap; }

.notif-accion, .notif-resolucion {
    display: flex; align-items: flex-start; gap: 6px; margin: 5px 0 0; font-size: 12px; line-height: 1.35; color: var(--pan-apagado);
}
.notif-accion .material-symbols-outlined, .notif-resolucion .material-symbols-outlined { font-size: 16px; flex: none; margin-top: 1px; }
.notif-accion b { color: var(--pan-tinta); font-weight: 600; }
.notif-accion .material-symbols-outlined { color: var(--pan-ambar); }
.notif-resolucion { color: var(--pan-verde); }
.notif-resolucion .material-symbols-outlined { color: var(--pan-verde); }

/* ── Un aviso dentro del asunto ── */
.notif-fila { padding: 6px 0 2px; }
.notif-fila + .notif-fila { border-top: 1px dashed var(--pan-linea); }
.notif-fila-cab { display: flex; align-items: flex-start; gap: 8px; }
.notif-abrir {
    flex: 1 1 auto; min-width: 0; border: 0; background: transparent; padding: 0; text-align: left;
    font-family: var(--pan-sans); color: var(--pan-tinta); cursor: pointer; border-radius: 6px;
}
.notif-abrir:focus-visible { outline: 2px solid rgba(24, 95, 165, .45); outline-offset: 3px; }
.notif-abrir:hover .notif-titulo { color: var(--pan-azul); }
.notif-titulo { display: block; font-weight: 600; font-size: 13px; line-height: 1.3; }
.notif-fila-leida .notif-titulo { font-weight: 500; color: var(--pan-apagado); }
.notif-msg { display: block; font-size: 12.5px; line-height: 1.35; color: #3d4b59; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.notif-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin-top: 4px; font-size: 11px; color: var(--pan-tenue); }
.notif-meta time { white-space: nowrap; }

/* Cómo va para la persona */
.av-estado {
    display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: 9.5px; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; background: #eef1f5; color: var(--pan-apagado);
}
.av-estado-nuevo { background: rgba(24, 95, 165, .12); color: var(--pan-azul); }
.av-estado-leido { background: #eef1f5; color: var(--pan-apagado); }
.av-estado-pospuesto { background: rgba(184, 84, 27, .12); color: var(--pan-ambar); }
.av-estado-resuelto { background: rgba(28, 138, 90, .12); color: var(--pan-verde); }

/* Qué pasó en cada canal: un icono por canal, coloreado por el estado */
.notif-canales { display: inline-flex; align-items: center; gap: 2px; }
.notif-canal { display: inline-flex; align-items: center; gap: 1px; font-size: 10.5px; color: var(--pan-tenue); }
.notif-canal .material-symbols-outlined { font-size: 15px; }
.notif-canal-enviado { color: var(--pan-verde); }
.notif-canal-fallo { color: var(--pan-rojo); }
.notif-canal-pendiente { color: var(--pan-ambar); }
.notif-canal-omitido { color: var(--pan-tenue); opacity: .7; }

/* Acciones de cada aviso: botones de texto pequeños, sin marco */
.notif-fila-acciones { display: flex; flex-wrap: wrap; gap: 2px 4px; margin-top: 4px; }
.notif-fila-acciones button {
    border: 0; background: transparent; color: var(--pan-azul); font: 600 11.5px var(--pan-sans);
    padding: 5px 7px; border-radius: 6px; cursor: pointer; display: inline-flex; align-items: center; gap: 3px; min-height: 30px;
}
.notif-fila-acciones button:hover { background: rgba(24, 95, 165, .08); }
.notif-fila-acciones button:disabled { opacity: .5; cursor: default; }
.notif-fila-acciones button .material-symbols-outlined { font-size: 16px; }
.notif-fila-acciones .notif-listo { color: var(--pan-verde); }
.notif-fila-acciones .notif-listo:hover { background: rgba(28, 138, 90, .1); }

/* Posponer: el menú aparece bajo la fila, dentro del flujo (nada flota fuera del panel) */
.notif-posponer { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 4px 0 2px; padding: 6px 8px; background: var(--pan-fondo); border-radius: 8px; font-size: 11.5px; color: var(--pan-apagado); }
.notif-posponer b { color: var(--pan-tinta); font-weight: 600; margin-right: 2px; }
.notif-posponer button {
    border: 1px solid var(--pan-linea); background: var(--pan-papel); color: var(--pan-tinta);
    font: 500 11.5px var(--pan-sans); padding: 4px 9px; border-radius: 999px; cursor: pointer; min-height: 28px;
}
.notif-posponer button:hover { border-color: var(--pan-azul); color: var(--pan-azul); }

.notif-mas {
    border: 0; background: transparent; color: var(--pan-apagado); font: 500 11.5px var(--pan-sans);
    padding: 4px 0; cursor: pointer; text-decoration: underline; text-decoration-color: var(--pan-linea);
}
.notif-mas:hover { color: var(--pan-azul); }

.notif-pie { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 14px; border-top: 1px solid var(--pan-linea); background: #fafbfc; }
.notif-pie-cuenta { font-size: 11.5px; color: var(--pan-apagado); }
.notif-pie a { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--pan-azul); text-decoration: none; cursor: pointer; white-space: nowrap; }
.notif-pie a:hover { text-decoration: underline; }
.notif-pie a .material-symbols-outlined { font-size: 16px; }

/* ── En el teléfono: el panel es una hoja anclada abajo, a lo ancho ── */
@media (max-width: 1023.98px) {
    .notif-panel {
        position: fixed; left: 8px; right: 8px; top: auto;
        bottom: calc(var(--navinf-alto, 62px) + env(safe-area-inset-bottom, 0px) + 10px);
        width: auto; max-height: min(72vh, 600px);
    }
    .notif-fila-acciones button { min-height: 40px; padding: 6px 9px; font-size: 12.5px; }
    .notif-posponer button { min-height: 40px; padding: 6px 12px; font-size: 12.5px; }
    .notif-cerrar, .notif-limpiar { width: 40px; height: 40px; }
    .notif-enlace { min-height: 40px; }
    .notif-reintentar { min-height: 40px; padding: 9px 16px; }
    .notif-buscar input { height: 40px; font-size: 16px; }   /* 16px: iOS no hace zoom al enfocar */
    .notif-mas { min-height: 40px; }
    .notif-pie a { min-height: 40px; padding: 8px 0; }
}

@media (max-width: 400px) {
    .notif-panel { left: 4px; right: 4px; }
    .notif-grupo { padding: 8px 10px 8px 12px; }
}

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

/* ── /avisos: entregas con intentos, y el diagnóstico por canal ── */
.av-entrega-intento { font-size: 11px; color: var(--pan-apagado); white-space: nowrap; }
.av-diag { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 8px; }
.av-diag-canal { padding: 10px 12px; border: 1px solid var(--pan-linea); border-radius: 8px; background: #fbfcfd; display: flex; flex-direction: column; gap: 4px; }
.av-diag-canal.av-diag-pausa { border-color: rgba(211, 47, 20, .4); background: rgba(211, 47, 20, .04); }
.av-diag-canal.av-diag-apagado { opacity: .6; }
.av-diag-cab { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: 13px; color: var(--pan-tinta); }
.av-diag-cab .rzi { font-size: 18px; color: var(--pan-azul); }
.av-diag-cab .rz-badge { margin-left: auto; }
.av-diag-cifras { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.av-diag-cifra { display: flex; flex-direction: column; align-items: center; padding: 4px 2px; border-radius: 6px; background: var(--pan-papel); border: 1px solid var(--pan-linea); }
.av-diag-cifra b { font-family: var(--pan-mono); font-size: 14px; color: var(--pan-tinta); }
.av-diag-cifra span { font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--pan-apagado); }
.av-diag-cifra.av-diag-mal b { color: var(--pan-rojo); }
.av-diag-cifra.av-diag-espera b { color: var(--pan-ambar); }
.av-diag-linea { font-size: 11.5px; line-height: 1.35; color: var(--pan-apagado); }
.av-diag-linea b { color: var(--pan-tinta); font-weight: 600; }
.av-diag-linea.av-diag-error { color: var(--pan-rojo); white-space: normal; word-break: break-word; }
.av-diag-acciones { display: flex; justify-content: flex-end; margin-top: 2px; }