/* ─────────────────────────────────────────────────────────────────────
 * Notifications UI styles — Fase L.1.5 (Bloque 5).
 *
 * Sistema centrado en variables CSS para que sea fácil rebrand-ear sin
 * tocar la lógica. Compatible con la paleta del dashboard actual.
 *
 * Composición:
 *   1. Variables compartidas
 *   2. Campana del header (#ib-bell-btn + badge)
 *   3. Drawer (dropdown desde la campana)
 *   4. Items de notificación (compartido drawer + página)
 *   5. Página /notifications (head, filtros, lista, paginación)
 *   6. Toasts
 * ───────────────────────────────────────────────────────────────────── */

/* Paleta de la plataforma (owner 2026-08-04): neutro con --ib-*; solo las
   severidades warning/critical/urgent conservan color (SEMÁNTICO). Los
   colores decorativos por feature se eliminaron. */
:root {
    --ib-notif-bg:            #ffffff;
    --ib-notif-bg-hover:      var(--ib-bg-soft, #f6f7f9);
    --ib-notif-border:        rgba(0, 0, 0, 0.08);
    --ib-notif-text:          var(--ib-text, #111827);
    --ib-notif-muted:         var(--ib-muted, #4b5563);
    --ib-notif-shadow:        0 12px 32px rgba(15, 23, 42, 0.12);
    --ib-notif-radius:        14px;
    --ib-notif-radius-sm:     10px;
    --ib-notif-z:             10000;
    --ib-toast-z:             10001;

    --ib-sev-info-fg:         var(--ib-muted, #4b5563);
    --ib-sev-info-bg:         var(--ib-bg-soft, #f6f7f9);
    --ib-sev-warning-fg:      #b45309;
    --ib-sev-warning-bg:      #fef3c7;
    --ib-sev-critical-fg:     #dc2626;
    --ib-sev-critical-bg:     #fee2e2;
    --ib-sev-urgent-fg:       #ffffff;
    --ib-sev-urgent-bg:       #b91c1c;
}

/* ── 2. Campana ────────────────────────────────────────────────────── */
.ib-bell-btn { position: relative; }
.ib-bell-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: #ef4444;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    box-shadow: 0 0 0 2px var(--ib-notif-bg);
}

/* ── 3. Drawer ─────────────────────────────────────────────────────── */
.ib-notif-drawer {
    position: fixed;
    top: 60px;            /* JS reposiciona al abrir */
    right: 16px;
    width: 360px;
    max-width: calc(100vw - 24px);
    max-height: calc(100vh - 80px);
    background: var(--ib-notif-bg);
    border: 1px solid var(--ib-notif-border);
    border-radius: var(--ib-notif-radius);
    box-shadow: var(--ib-notif-shadow);
    z-index: var(--ib-notif-z);
    display: none;
    flex-direction: column;
    overflow: hidden;
    font-family: 'Poppins', system-ui, sans-serif;
    color: var(--ib-notif-text);
}
.ib-notif-drawer.is-open { display: flex; }

.ib-notif-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid var(--ib-notif-border);
}
.ib-notif-drawer-title {
    font-size: 15px;
    font-weight: 600;
}
.ib-notif-mark-all {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: transparent;
    border: 0;
    color: var(--ib-notif-muted);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 8px;
    transition: background .15s, color .15s;
}
.ib-notif-mark-all:hover {
    background: var(--ib-notif-bg-hover);
    color: var(--ib-notif-text);
}

/* X de cierre: solo existe visualmente en móvil (drawer a pantalla completa). */
.ib-notif-drawer-close {
    display: none;
    background: transparent;
    border: 0;
    color: var(--ib-notif-text);
    cursor: pointer;
    padding: 6px;
    border-radius: 8px;
}
.ib-notif-drawer-close:hover { background: var(--ib-notif-bg-hover); }

.ib-notif-drawer-list {
    overflow-y: auto;
    max-height: 480px;
    overscroll-behavior: contain;   /* el scroll interno no encadena a la página */
}

.ib-notif-drawer-foot {
    border-top: 1px solid var(--ib-notif-border);
    padding: 10px 16px;
    text-align: center;
}
.ib-notif-see-all {
    color: var(--ib-notif-text);
    text-decoration: underline;
    text-underline-offset: 3px;
    font-size: 14px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.ib-notif-see-all:hover { color: #000; }

/* ── 4. Items ──────────────────────────────────────────────────────── */
.ib-notif-item {
    display: grid;
    grid-template-columns: 36px 1fr auto;
    gap: 12px;
    align-items: flex-start;
    padding: 12px 16px;
    border-bottom: 1px solid var(--ib-notif-border);
    color: var(--ib-notif-text);
    text-decoration: none;
    transition: background .15s;
    cursor: pointer;
}
.ib-notif-item:last-child { border-bottom: 0; }
.ib-notif-item:hover { background: var(--ib-notif-bg-hover); }
.ib-notif-item.is-unread { background: var(--ib-bg-soft, #f6f7f9); }
.ib-notif-item.is-compact { padding: 10px 16px; }

.ib-notif-icon {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ib-notif-icon i { width: 18px; height: 18px; }

.ib-notif-item.sev-info     .ib-notif-icon { background: var(--ib-sev-info-bg);     color: var(--ib-sev-info-fg); }
.ib-notif-item.sev-warning  .ib-notif-icon { background: var(--ib-sev-warning-bg);  color: var(--ib-sev-warning-fg); }
.ib-notif-item.sev-critical .ib-notif-icon { background: var(--ib-sev-critical-bg); color: var(--ib-sev-critical-fg); }
.ib-notif-item.sev-urgent   .ib-notif-icon { background: var(--ib-sev-urgent-bg);   color: var(--ib-sev-urgent-fg); }

.ib-notif-body { min-width: 0; }
.ib-notif-title {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 2px;
    word-wrap: break-word;
}
.ib-notif-item.is-compact .ib-notif-title { font-size: 14px; }
.ib-notif-text {
    font-size: 14px;
    color: var(--ib-notif-muted);
    line-height: 1.4;
    word-wrap: break-word;
    /* Truncar a 2 líneas */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ib-notif-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    font-size: 12px;
    color: var(--ib-notif-muted);
}
/* Insignia de feature NEUTRA (sin colores decorativos). */
.ib-notif-feature {
    text-transform: capitalize;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    color: var(--ib-notif-muted);
    background: var(--ib-bg-soft, #f6f7f9);
}

.ib-notif-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ef4444;
    margin-top: 8px;
    flex-shrink: 0;
}

/* Empty state */
.ib-notif-empty {
    padding: 40px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: var(--ib-notif-muted);
    font-size: 13px;
    text-align: center;
}
.ib-notif-empty-page {
    padding: 80px 16px;
    gap: 12px;
}
.ib-notif-empty-page h3 { margin: 0; font-size: 18px; color: var(--ib-notif-text); }
.ib-notif-empty-page p { margin: 0; max-width: 400px; }

.ib-notif-loading {
    padding: 24px;
    text-align: center;
    color: var(--ib-notif-muted);
    font-size: 13px;
}

/* ── 5. Página /notifications ──────────────────────────────────────── */
/* Full-width: la página usa todo el área de contenido. Padding generoso
   en los lados para no pegar al borde del sidebar. */
.ib-notif-page {
    width: 100%;
    padding: 32px 40px;
    font-family: 'Poppins', system-ui, sans-serif;
    box-sizing: border-box;
}
.ib-notif-page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}
.ib-notif-page-title {
    margin: 0 0 4px 0;
    font-size: 28px;
    font-weight: 700;
    color: var(--ib-notif-text);
}
.ib-notif-page-subtitle {
    margin: 0;
    color: var(--ib-notif-muted);
    font-size: 14px;
}
/* Botones y chips: canónicos ib-btn (dashboard.css) — cero CSS local. */

/* Filters bar */
.ib-notif-filters {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
.ib-notif-filter-spacer { flex: 1; }
.ib-notif-toggle {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--ib-notif-text);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
}

/* Lista de la página: PLANA estilo app también en ESCRITORIO (owner
   2026-08-04) — sin card con borde; los separadores finos entre items
   llevan el diseño. */
.ib-notif-page-list {
    width: 100%;
    background: transparent;
    border: 0;
    border-top: 1px solid var(--ib-notif-border);
    border-radius: 0;
}
.ib-notif-page-list .ib-notif-item {
    padding: 18px 24px;
    grid-template-columns: 44px 1fr auto;
    gap: 16px;
}
.ib-notif-page-list .ib-notif-icon {
    width: 44px;
    height: 44px;
}
.ib-notif-page-list .ib-notif-icon i { width: 20px; height: 20px; }
.ib-notif-page-list .ib-notif-title { font-size: 15px; }
.ib-notif-page-list .ib-notif-text  { font-size: 14px; }
.ib-notif-pagination {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

/* ── 6. Toasts ─────────────────────────────────────────────────────── */
.ib-toast-stack {
    position: fixed;
    top: 80px;
    right: 16px;
    z-index: var(--ib-toast-z);
    display: flex;
    flex-direction: column;
    gap: 12px;
    pointer-events: none;
    width: 360px;
    max-width: calc(100vw - 24px);
}
.ib-toast {
    pointer-events: auto;
    background: var(--ib-notif-bg);
    border: 1px solid var(--ib-notif-border);
    border-left-width: 4px;
    border-radius: var(--ib-notif-radius-sm);
    box-shadow: var(--ib-notif-shadow);
    padding: 12px 14px;
    display: grid;
    grid-template-columns: 28px 1fr auto;
    gap: 10px;
    align-items: flex-start;
    font-family: 'Poppins', system-ui, sans-serif;
    color: var(--ib-notif-text);
    animation: ib-toast-in .25s ease-out;
}
.ib-toast.is-leaving { animation: ib-toast-out .2s ease-in forwards; }
@keyframes ib-toast-in {
    from { opacity: 0; transform: translateX(20px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes ib-toast-out {
    from { opacity: 1; transform: translateX(0); }
    to   { opacity: 0; transform: translateX(20px); }
}
.ib-toast-sev-info     { border-left-color: var(--ib-notif-text); }
.ib-toast-sev-warning  { border-left-color: var(--ib-sev-warning-fg); }
.ib-toast-sev-critical { border-left-color: var(--ib-sev-critical-fg); }
.ib-toast-sev-urgent   { border-left-color: var(--ib-sev-urgent-bg); }
.ib-toast-icon {
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 6px;
    flex-shrink: 0;
}
.ib-toast-sev-info     .ib-toast-icon { background: var(--ib-bg-soft, #f6f7f9); color: var(--ib-notif-muted); }
.ib-toast-sev-warning  .ib-toast-icon { background: var(--ib-sev-warning-bg);  color: var(--ib-sev-warning-fg); }
.ib-toast-sev-critical .ib-toast-icon { background: var(--ib-sev-critical-bg); color: var(--ib-sev-critical-fg); }
.ib-toast-sev-urgent   .ib-toast-icon { background: var(--ib-sev-urgent-bg);   color: var(--ib-sev-urgent-fg); }
.ib-toast-icon i { width: 16px; height: 16px; }
.ib-toast-body { min-width: 0; cursor: pointer; }
.ib-toast-title { font-size: 13px; font-weight: 600; line-height: 1.3; }
.ib-toast-text  { font-size: 12px; color: var(--ib-notif-muted); margin-top: 2px; line-height: 1.4; word-wrap: break-word; }
.ib-toast-close {
    background: transparent; border: 0;
    color: var(--ib-notif-muted);
    cursor: pointer;
    padding: 2px;
    border-radius: 4px;
}
.ib-toast-close:hover { background: var(--ib-notif-bg-hover); color: var(--ib-notif-text); }

/* Responsive */
@media (max-width: 900px) {
    .ib-notif-page { padding: 24px 24px; }
}
/* Móvil (≤768, como el resto de L4): drawer a PANTALLA COMPLETA con X para
   cerrar; el fondo se congela con el lock canónico (ibLockScroll, 2026-08-04).
   El JS no aplica top/right inline en móvil (positionDrawer los limpia). */
@media (max-width: 768px) {
    .ib-notif-drawer {
        inset: 0;
        width: 100%;
        max-width: none;
        max-height: none;
        border: none;
        border-radius: 0;
    }
    .ib-notif-drawer-list { max-height: none; flex: 1; }
    .ib-notif-drawer-close { display: inline-flex; }
    .ib-toast-stack { right: 8px; width: calc(100vw - 16px); top: 70px; }
}
@media (max-width: 768px) {
    /* El main del layout ya aporta 12px laterales — la página no suma más y
       la lista los COME para ir a sangre completa (patrón de la plataforma).
       width:auto es CLAVE: con width:100% el margin negativo solo desplaza. */
    .ib-notif-page { padding: 16px 0 24px; }
    .ib-notif-page-title { font-size: 22px; }
    .ib-notif-page-list {
        width: auto;
        border-top: 1px solid var(--ib-notif-border);
        margin: 0 -12px;
    }
    .ib-notif-page-list .ib-notif-item { padding: 14px 16px; gap: 12px; }
}