/*
 * iERP — estilos del menú y del cajón de notificaciones del armazón
 * (`shared/app-shell-notifications.js`).
 *
 * Antes los metía el propio JS en un `<style id="ierp-notif-styles">` al
 * arrancar. Eso es un estilo EN LÍNEA: con la CSP estricta (`style-src
 * 'self'`, hoy en report-only) mandaba un informe `csp-report` en cada
 * carga de cada pantalla. Como hoja estática del `<head>` no dispara nada.
 *
 * No dependen de Tailwind a propósito: varias clases del markup viejo no
 * están en el CSS compilado.
 */

.ierp-notif-grow{min-width:0}
.ierp-notif-body{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ierp-notif-chip{letter-spacing:.04em;text-transform:uppercase;font-size:11px;font-weight:600;line-height:1}
.ierp-notif-del:hover{color:#dc2626}
.ierp-notif-ic--info{background:#eff6ff;color:#2563eb}
.ierp-notif-ic--success{background:#ecfdf5;color:#059669}
.ierp-notif-ic--warning{background:#fffbeb;color:#d97706}
.ierp-notif-ic--danger{background:#fef2f2;color:#dc2626}
.ierp-notif-chip--info{color:#2563eb}
.ierp-notif-chip--success{color:#059669}
.ierp-notif-chip--warning{color:#b45309}
.ierp-notif-chip--danger{color:#dc2626}
.dark .ierp-notif-ic--info{background:rgba(59,130,246,.16);color:#93c5fd}
.dark .ierp-notif-ic--success{background:rgba(16,185,129,.16);color:#6ee7b7}
.dark .ierp-notif-ic--warning{background:rgba(245,158,11,.16);color:#fcd34d}
.dark .ierp-notif-ic--danger{background:rgba(239,68,68,.16);color:#fca5a5}
.dark .ierp-notif-chip--info{color:#93c5fd}
.dark .ierp-notif-chip--success{color:#6ee7b7}
.dark .ierp-notif-chip--warning{color:#fcd34d}
.dark .ierp-notif-chip--danger{color:#fca5a5}

/* Bubble de no-leídas sobre la campana. CSS propio: varias clases del
   markup viejo (inset-e-0, -me/-mt-1.5, min-w/h-4.5, text-[10px]) NO están
   en el CSS compilado → el badge salía mal posicionado/sin tamaño.
   Nace oculta AQUÍ (`display:none`) y no con `style="display:none"` en el
   topbar: el atributo era un estilo en línea para la CSP estricta. `setBadge()`
   la enseña con `el.style.display`, que pisa a la hoja. */
.ierp-notif-badge{display:none;position:absolute;top:0;inset-inline-end:0;transform:translate(35%,-40%);z-index:10;pointer-events:none}
.ierp-notif-badge-ping{position:absolute;inset:0;border-radius:9999px;background:#f87171;opacity:.7;animation:ierp-notif-ping 1.2s cubic-bezier(0,0,.2,1) infinite}
.ierp-notif-badge-dot{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:1.125rem;height:1.125rem;padding:0 .3rem;font-size:10px;font-weight:700;line-height:1;color:#fff;background:#ef4444;border-radius:9999px}
@keyframes ierp-notif-ping{75%,100%{transform:scale(1.9);opacity:0}}

/* Drawer de detalle de notificación. CSS propio (no depende de Tailwind). */
.ierp-nd{position:fixed;inset:0;z-index:90}
.ierp-nd[hidden]{display:none}
.ierp-nd-back{position:absolute;inset:0;background:rgba(15,23,42,.45);opacity:0;transition:opacity .18s ease}
.ierp-nd--open .ierp-nd-back{opacity:1}
.ierp-nd-panel{position:absolute;top:0;inset-inline-end:0;height:100%;width:100%;max-width:min(94vw,720px);display:flex;flex-direction:column;background:var(--color-card,#fff);color:var(--color-foreground,#0f172a);box-shadow:-8px 0 30px rgba(0,0,0,.18);transform:translateX(100%);transition:transform .2s ease}
.ierp-nd--open .ierp-nd-panel{transform:translateX(0)}
.ierp-nd-head{display:flex;align-items:flex-start;gap:.75rem;padding:1.25rem;border-bottom:1px solid var(--color-card-line,#e5e7eb)}
.ierp-nd-head-txt{flex:1;min-width:0}
.ierp-nd-head-txt h2{margin:.25rem 0 0;font-size:1rem;font-weight:600;line-height:1.35}
.ierp-nd-x{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:.5rem;color:var(--color-muted-foreground-1,#64748b);background:transparent;border:0;cursor:pointer}
.ierp-nd-x:hover{background:var(--color-muted-hover,rgba(100,116,139,.12))}
.ierp-nd-body{flex:1;overflow-y:auto;padding:1.25rem}
.ierp-nd-body p{margin:0;font-size:.9rem;line-height:1.5;white-space:pre-wrap}
.ierp-nd-cuerpo{font-size:.9rem;line-height:1.5}
.ierp-nd-lead{margin:0 0 .85rem!important}
.ierp-nd-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:.55rem;margin:0 0 1rem}
.ierp-nd-kpi{border:1px solid var(--color-card-line,#e5e7eb);border-radius:.75rem;padding:.65rem .8rem;background:var(--color-card,#fff)}
.ierp-nd-kpi-label{margin:0!important;font-size:.7rem;text-transform:uppercase;letter-spacing:.04em;color:var(--color-muted-foreground-1,#64748b)}
.ierp-nd-kpi-value{margin:.15rem 0 0!important;font-size:1.35rem;font-weight:500;line-height:1.1;color:var(--color-foreground,#0f172a)}
.ierp-nd-count{margin:0 0 .55rem!important;font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--color-muted-foreground-1,#64748b)}
.ierp-nd-tablewrap{margin-top:.15rem}
.ierp-nd-tablewrap td{word-break:break-word}
.ierp-nd-scalars{display:flex;flex-direction:column;gap:.3rem}
.ierp-nd-scalar{font-size:.85rem;color:var(--color-foreground,#0f172a)}
.ierp-nd-link{color:var(--color-primary,#2563eb);font-weight:500;text-decoration:none}
.ierp-nd-link:hover{text-decoration:underline}
.ierp-nd-kv{display:flex;gap:.4rem;font-size:.8rem;line-height:1.5}
.ierp-nd-k{flex-shrink:0;color:var(--color-muted-foreground-1,#64748b)}
.ierp-nd-v{color:var(--color-foreground,#0f172a);word-break:break-word}
.ierp-nd-more{margin:.4rem 0 0!important;font-size:.78rem;color:var(--color-muted-foreground-1,#64748b)}
.ierp-nd-meta{margin-top:.85rem!important;font-size:.78rem;color:var(--color-muted-foreground-1,#64748b)}
.ierp-nd-actions{display:flex;flex-direction:column;gap:.5rem;padding:1rem 1.25rem;border-top:1px solid var(--color-card-line,#e5e7eb)}
.ierp-nd-cta{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;width:100%;padding:.6rem .9rem;font-size:.875rem;font-weight:600;border-radius:.6rem;cursor:pointer;border:1px solid transparent;text-decoration:none;background:var(--color-primary,#2563eb);color:var(--color-primary-foreground,#fff)}
.ierp-nd-cta:hover{filter:brightness(.95)}
.ierp-nd-cta--ghost{background:transparent;color:var(--color-foreground,#0f172a);border-color:var(--color-card-line,#e5e7eb)}
.ierp-nd-cta--ghost:hover{background:var(--color-muted-hover,rgba(100,116,139,.1));filter:none}