/* ============================================================
   Migesa Cloud Control Center · sistema de diseño de la Consola_Web
   1 Tokens · 2 Base · 3 Menú y encabezado · 4 Componentes · 5 Vistas
   6 Estados (carga, vacío, error, éxito) · 7 Movimiento · 8 Responsive · 9 Accesibilidad
   Las clases y los identificadores existentes se conservan: los scripts generan el mismo HTML.
   ============================================================ */

/* 1. Tokens ---------------------------------------------------- */
:root{
  /* Marca */
  --azul:#0093D0; --navy:#003366; --cielo:#7FD1EE; --acero:#2E7DB5; --palo:#A8DDF2; --profundo:#002347;
  /* Semánticos para acentos y gráficos */
  --ok:#1E8E6A; --warn:#D97706; --bad:#C0392B; --neutral:#8CA3B8;
  /* Semánticos para texto y fondos (contraste AA) */
  --ok-text:#166534; --warn-text:#92400E; --bad-text:#B91C1C; --info-text:#0B4F7C;
  --ok-bg:#ECFDF3; --warn-bg:#FFF8EB; --bad-bg:#FEF2F2; --info-bg:#EEF6FC;
  --ok-line:#B7E4CB; --warn-line:#F6D59C; --bad-line:#F6C1BC; --info-line:#C3DFF2;
  /* Superficies y bordes */
  --bg:#EEF2F7; --surface:#FFFFFF; --surface-2:#F8FAFC; --surface-3:#EEF3F8;
  --card:var(--surface); --line:#E3E9F0; --line-strong:#C9D4E0; --line-hover:#B4C2D2;
  --line-input:#7F95AB; --line-input-hover:#5F7389;
  /* Texto */
  --ink:#0F1B2A; --text:#1B2636; --text-2:#3D4A5C; --muted:#536175;
  /* Acción */
  --primary:#0078B8; --primary-hover:#00679E; --primary-active:#005683; --primary-soft:#E6F3FA; --on-primary:#FFFFFF;
  --danger:#C42B2B; --danger-hover:#A82222;
  --focus-ring:0 0 0 3px rgba(0,147,208,.32);
  /* Tipografía */
  --font:"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-display:"Segoe UI Variable Display","Segoe UI",system-ui,-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:"Cascadia Code","Cascadia Mono",Consolas,"SFMono-Regular",Menlo,Monaco,monospace;
  --fs-2xs:11.5px; --fs-xs:12.5px; --fs-sm:13.5px; --fs-md:14px; --fs-base:14.5px; --fs-lg:16.5px; --fs-xl:24px; --fs-2xl:28px;
  /* Espaciado (base 4) y radios */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px;
  --r-sm:6px; --r-md:8px; --r-lg:14px; --r-xl:16px; --r-pill:999px;
  /* Elevación */
  --sh-xs:0 1px 2px rgba(15,27,42,.05);
  --sh-sm:0 1px 3px rgba(15,27,42,.08),0 1px 2px rgba(15,27,42,.04);
  --sh-md:0 8px 20px -6px rgba(15,27,42,.14),0 2px 6px rgba(15,27,42,.05);
  --sh-lg:0 22px 48px -14px rgba(15,27,42,.28),0 6px 14px rgba(15,27,42,.07);
  --sh:var(--sh-sm); --shl:var(--sh-lg);
  /* Movimiento */
  --ease:cubic-bezier(.2,0,0,1); --ease-out:cubic-bezier(.16,1,.3,1);
  --t-fast:120ms; --t:180ms; --t-slow:280ms;
  --skel:#E6ECF3; --skel-hi:rgba(255,255,255,.72);
  --sidebar-w:256px; --gutter:28px;
  /* Iconos de estado (máscaras SVG) */
  --ic-info:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5M12 7.6h.01'/%3E%3C/svg%3E");
  --ic-warn:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.6 2.6 19.8h18.8z'/%3E%3Cpath d='M12 10v4.4M12 17.2h.01'/%3E%3C/svg%3E");
  --ic-check-c:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12.4l2.7 2.7L16 9.8'/%3E%3C/svg%3E");
  --ic-x-c:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9.2 9.2l5.6 5.6M14.8 9.2l-5.6 5.6'/%3E%3C/svg%3E");
  --ic-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}

/* 2. Base ------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:96px}
html,body{margin:0;background:var(--bg);color:var(--text)}
body{font-family:var(--font);font-size:var(--fs-base);line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
button,input,select,textarea{font-family:inherit;color:inherit}
h1,h2,h3,h4{font-family:var(--font-display);letter-spacing:-.01em;line-height:1.3}
a{color:var(--primary);text-underline-offset:2px}
a:hover{color:var(--primary-hover)}
code,pre{font-family:var(--mono)}
::selection{background:rgba(0,147,208,.2)}
.hidden{display:none!important}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
svg.ic,svg.bi{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#C8D4E1;border-radius:10px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:#A9B8C9;border:2px solid transparent;background-clip:padding-box}

/* 3. Menú lateral y encabezado --------------------------------- */
.sidebar{position:fixed;inset:0 auto 0 0;width:var(--sidebar-w);z-index:30;padding:16px 12px 14px;display:flex;flex-direction:column;
  background:linear-gradient(180deg,#003366 0%,#002347 100%);color:#C9D8E8;overflow:hidden;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.2) transparent;border-right:1px solid rgba(255,255,255,.05)}
.sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border:2px solid transparent;background-clip:padding-box}
.sidebar .brand,.sidebar .who,.side-foot{flex-shrink:0}
.brand{background:#fff;border-radius:var(--r-lg);padding:10px 12px;margin:0 2px 16px;box-shadow:0 8px 20px rgba(0,12,30,.35)}
.brand img{width:100%;display:block}
nav{display:flex;flex-direction:column;gap:2px}
/* Solo la lista del menú se desplaza: la marca, la cuenta y el pie quedan siempre visibles */
.sidebar nav{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;margin:0 -12px;padding:0 12px 18px;
  -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 18px),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - 18px),transparent);
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.2) transparent}
.sidebar nav::-webkit-scrollbar{width:8px}
.sidebar nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border:2px solid transparent;background-clip:padding-box}
.nav-group{display:flex;flex-direction:column;gap:2px}
.nav-group + .nav-group{margin-top:10px}
.nav-label{padding:2px 12px 6px;font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#93AECB}
.nav-group:not(:has(> .nav-item:not(.hidden))){display:none}
.nav-item{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:var(--r-md);color:#C9D8E8;font-weight:500;font-size:var(--fs-md);
  line-height:1.3;cursor:pointer;position:relative;text-decoration:none;user-select:none;-webkit-tap-highlight-color:transparent;
  transition:background-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.nav-item .ic{width:18px;height:18px;flex:0 0 18px;opacity:.78;transition:opacity var(--t-fast) var(--ease),transform var(--t) var(--ease),color var(--t-fast) var(--ease)}
.nav-item:hover{background:rgba(255,255,255,.07);color:#fff}
.nav-item:hover .ic{opacity:1}
.nav-item:active .ic{transform:scale(.9)}
.nav-item.active{background:rgba(255,255,255,.12);color:#fff;font-weight:600}
.nav-item.active .ic{opacity:1;color:var(--cielo)}
.nav-item.active::before{content:"";position:absolute;left:-12px;top:7px;bottom:7px;width:3px;border-radius:0 3px 3px 0;background:var(--azul);box-shadow:0 0 12px rgba(0,147,208,.6)}
.nav-count{margin-left:auto;background:#FBBF24;color:#1F2937;border-radius:var(--r-pill);padding:0 7px;min-width:20px;text-align:center;font-size:11px;font-weight:700;line-height:18px}
.side-foot{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;margin-top:12px;padding:12px 6px 2px;color:#93AECB;font-size:11px;border-top:1px solid rgba(255,255,255,.08)}
.side-meta{line-height:1.4}
.side-meta b{color:#BDE3F5;font-weight:600}
.ai-pill{display:inline-flex;align-items:center;gap:6px;margin-top:0;font-size:10.5px;padding:3px 10px;border-radius:var(--r-pill);
  background:rgba(0,147,208,.18);color:#BDE3F5;border:1px solid rgba(0,147,208,.45)}
.ai-pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.8}
.ai-pill.on{background:rgba(30,142,106,.22);color:#A7E8CF;border-color:rgba(30,142,106,.6)}
.nav-scrim{display:none}

.main{margin-left:var(--sidebar-w);padding:0 var(--gutter) 36px;min-height:100vh}
/* Barra superior: suscripción y acciones globales, siempre visibles */
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:10px 12px;flex-wrap:wrap;margin:0 calc(-1 * var(--gutter));
  padding:12px var(--gutter);background:rgba(255,255,255,.94);-webkit-backdrop-filter:saturate(1.4) blur(12px);backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:1px solid var(--line);box-shadow:0 1px 3px rgba(15,27,42,.05)}
.btn.nav-toggle{display:none}
.controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap;flex:1 1 auto;min-width:0}
/* Encabezado de la vista: título, descripción y contexto de la suscripción */
.page-head{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:12px 24px;padding:26px 0 18px}
.page-title{min-width:0}
.page-title h1{margin:0;font-size:var(--fs-xl);font-weight:700;color:var(--navy);letter-spacing:-.02em;line-height:1.2}
.page-title p{margin:6px 0 0;color:var(--muted);font-size:var(--fs-md);max-width:72ch}
.sub-picker{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line-input);border-radius:var(--r-md);
  padding:3px 6px 3px 12px;min-height:36px;box-shadow:var(--sh-xs);min-width:320px;transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
.sub-picker:hover{border-color:var(--line-input-hover)}
.sub-picker:focus-within{border-color:var(--primary);box-shadow:var(--focus-ring)}
.sub-picker .lbl{font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700;white-space:nowrap}
.sub-picker select{border:0;outline:0;font-size:var(--fs-md);font-weight:600;color:var(--navy);background:transparent;min-width:200px;max-width:300px;
  cursor:pointer;padding:5px 2px;text-overflow:ellipsis}
.sub-meta{display:flex;flex-wrap:wrap;gap:6px;font-size:var(--fs-xs);color:var(--muted)}
.chip{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:3px 11px;border-radius:var(--r-pill);background:var(--surface);
  border:1px solid var(--line);color:var(--text-2);font-size:var(--fs-xs);white-space:nowrap;box-shadow:var(--sh-xs)}
.chip b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.chip-k{color:var(--muted);font-weight:500}
.chip .dot{width:8px;height:8px;border-radius:50%;background:var(--neutral)}
.chip.ok{color:var(--ok-text);background:var(--ok-bg);border-color:var(--ok-line)} .chip.ok .dot{background:var(--ok)}
.chip.warn{color:var(--warn-text);background:var(--warn-bg);border-color:var(--warn-line)} .chip.warn .dot{background:var(--warn)}
/* Cuenta de la sesión, al pie del menú */
.who{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin:12px 2px 0;padding:10px 12px;border-radius:var(--r-lg);
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);font-size:var(--fs-2xs);color:#C9D8E8}
.who > :not(.btn){grid-column:1 / -1;min-width:0}
.who-t{color:#93AECB;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.who-t b{color:#DCE7F2;font-weight:600}
.who-u{color:#fff;font-weight:600;font-size:var(--fs-xs);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.who .role{justify-self:start;background:rgba(127,209,238,.16);color:#BDE3F5;border:1px solid rgba(127,209,238,.3)}
.who .btn.ghost{--btn-bg:rgba(255,255,255,.04);--btn-fg:#DCE7F2;--btn-bd:rgba(255,255,255,.18);min-height:30px;padding:4px 8px;font-size:var(--fs-2xs);box-shadow:none}
.who .btn.ghost:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.32);color:#fff;box-shadow:none}
.foot{color:var(--muted);font-size:var(--fs-xs);text-align:center;padding:24px 0 4px}

/* 4. Componentes ----------------------------------------------- */
/* Botones */
.btn{--btn-bg:var(--primary);--btn-fg:var(--on-primary);--btn-bd:transparent;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:36px;padding:7px 16px;border:1px solid var(--btn-bd);
  border-radius:var(--r-md);background:var(--btn-bg);color:var(--btn-fg);font-weight:600;font-size:var(--fs-md);line-height:1.2;cursor:pointer;
  white-space:nowrap;text-decoration:none;box-shadow:var(--sh-xs);-webkit-tap-highlight-color:transparent;
  transition:background-color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease),box-shadow var(--t) var(--ease),transform var(--t-fast) var(--ease),opacity var(--t) var(--ease)}
.btn:hover{background:var(--primary-hover);color:var(--btn-fg);box-shadow:0 4px 12px -3px rgba(0,120,184,.45)}
.btn:active{transform:translateY(1px) scale(.985);background:var(--primary-active);box-shadow:none}
.btn .bi{width:16px;height:16px;flex:0 0 16px}
.btn.ghost{--btn-bg:var(--surface);--btn-fg:var(--navy);--btn-bd:var(--line-strong)}
.btn.ghost:hover{background:var(--surface-2);border-color:var(--line-hover);box-shadow:var(--sh-sm)}
.btn.ghost:active{background:var(--surface-3)}
.btn.danger{--btn-bg:var(--danger)}
.btn.danger:hover{background:var(--danger-hover);box-shadow:0 4px 12px -3px rgba(196,43,43,.45)}
.btn.sm{min-height:28px;padding:3px 10px;font-size:var(--fs-xs);border-radius:var(--r-sm);gap:6px}
.btn.sm .bi{width:14px;height:14px;flex-basis:14px}
.btn.icon{padding:0;width:36px;min-width:36px}
.btn:disabled,.btn[disabled]{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}
.btn:disabled:hover{background:var(--btn-bg);border-color:var(--btn-bd)}
.btn.is-busy{cursor:progress}
.btn.is-busy:disabled{opacity:.82}
.btn.is-busy:not(.icon)::before{content:"";width:13px;height:13px;flex:0 0 13px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:ui-spin .7s linear infinite}
.btn.is-busy:not(.icon) .bi{display:none}
.btn.icon.is-busy .bi{animation:ui-spin .9s linear infinite}

/* Mensajes de avance junto a los botones */
.status{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-xs);color:var(--muted);min-width:96px;font-weight:500}
.status:empty{min-width:0}
#status{min-width:0;min-height:28px;padding:3px 11px;border-radius:var(--r-pill);background:var(--surface);border:1px solid var(--line);color:var(--text-2)}
#status.load{color:var(--info-text);background:var(--info-bg);border-color:var(--info-line)}
.status.load::after,.status.is-working::after{content:"";display:inline-block;width:11px;height:11px;flex:0 0 11px;border:2px solid var(--palo);border-top-color:var(--primary);border-radius:50%;animation:ui-spin .7s linear infinite}
.status.is-done{color:var(--ok-text)}
.status.is-done::before{content:"";width:13px;height:13px;flex:0 0 13px;background:var(--ok);-webkit-mask:var(--ic-check) center/contain no-repeat;mask:var(--ic-check) center/contain no-repeat;animation:ui-pop .32s var(--ease-out) both}
.status.is-error{color:var(--bad-text)}
#cafSaveMsg{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-sm);font-weight:500}

/* Tarjetas */
.row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:16px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px 22px;box-shadow:var(--sh-sm);min-width:0;
  animation:ui-fade .32s var(--ease-out) both;transition:box-shadow var(--t) var(--ease),border-color var(--t) var(--ease)}
.card:hover{box-shadow:var(--sh-sm);border-color:#DAE2EB}
.card.g2{grid-column:span 2}
/* Las gráficas de anillo y radar son cuadradas: el tope evita que crezcan sin límite en tarjetas anchas */
.card > canvas{max-height:360px}
.card-h{display:flex;align-items:center;justify-content:space-between;gap:8px 12px;flex-wrap:wrap;margin:0 0 16px;padding-bottom:12px;border-bottom:1px solid var(--line);font-weight:650;color:var(--navy);
  font-size:var(--fs-lg);letter-spacing:-.005em;line-height:1.35}
.card .card.flat{box-shadow:none;border:1px solid var(--line);animation:none;background:var(--surface)}
.card .card.flat:hover{box-shadow:none}
.mb{margin-bottom:16px}
.mt{margin-top:16px}
.toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:14px}

/* Indicadores (KPI) */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin:16px 0 18px}
.kpi{--kpi-accent:var(--azul);position:relative;overflow:hidden;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:16px 18px 16px 20px;min-height:112px;box-shadow:var(--sh-sm);animation:ui-rise .42s var(--ease-out) both;
  transition:box-shadow var(--t) var(--ease),transform var(--t) var(--ease),border-color var(--t) var(--ease)}
.kpi::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:3px;border-radius:0 3px 3px 0;background:var(--kpi-accent)}
.kpi:hover{transform:translateY(-2px);box-shadow:var(--sh-md);border-color:#D5DEE8}
.kpi-ic{position:absolute;top:14px;right:14px;display:grid;place-items:center;width:36px;height:36px;border-radius:11px;
  color:var(--kpi-accent);background:var(--primary-soft);background:color-mix(in srgb,var(--kpi-accent) 12%,#fff)}
.kpi-ic .bi{width:19px;height:19px}
@media (min-width:1025px){.kpis:has(> .kpi:nth-child(8):last-child){grid-template-columns:repeat(4,minmax(0,1fr))}}
.kpi .l{font-size:var(--fs-xs);color:var(--text-2);font-weight:600;margin-bottom:8px;padding-right:44px;letter-spacing:.01em;line-height:1.3}
.kpi .v{font-family:var(--font-display);font-size:var(--fs-2xl);font-weight:700;color:var(--navy);letter-spacing:-.02em;line-height:1.1;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.kpi .d{font-size:var(--fs-xs);margin-top:6px;font-weight:600;color:var(--text-2)}
.kpi.up{--kpi-accent:var(--bad)} .kpi.up .d{color:var(--bad-text)}
.kpi.down{--kpi-accent:var(--ok)} .kpi.down .d{color:var(--ok-text)}
.kpi.warn{--kpi-accent:var(--warn)} .kpi.warn .d{color:var(--warn-text)}
.kpi:nth-child(2){animation-delay:.03s}.kpi:nth-child(3){animation-delay:.06s}.kpi:nth-child(4){animation-delay:.09s}
.kpi:nth-child(5){animation-delay:.12s}.kpi:nth-child(6){animation-delay:.15s}.kpi:nth-child(7){animation-delay:.18s}.kpi:nth-child(n+8){animation-delay:.21s}

/* Etiquetas */
.pill,.badge-origin,.sev-tag,.state-tag,.cls-tag,.cause-tag{display:inline-flex;align-items:center;gap:4px;padding:1px 9px;border-radius:var(--r-pill);
  font-size:11px;font-weight:600;line-height:18px;white-space:nowrap;vertical-align:middle;letter-spacing:.01em}
.pill{background:var(--primary-soft);color:var(--navy)}
.pill.ai{background:#E7F6EF;color:var(--ok-text)}
.pill:empty{display:none}
.badge-origin-real{color:#14532D;background:#DCFCE7}
.badge-origin-est{color:#7C2D12;background:#FFEDD5}
.badge-origin-none{color:#374151;background:#E5E7EB}
.badge-origin-tel{color:#0C4A6E;background:#E0F2FE}
.badge-origin-self{color:#4C1D95;background:#EDE9FE}
.badge-origin[tabindex]{cursor:help;text-decoration:underline dotted;text-underline-offset:2px}
.badge-wrap{position:relative;display:inline-block}
.badge-wrap .tip{display:none;position:absolute;z-index:30;right:0;top:calc(100% + 6px);min-width:260px;max-width:360px;background:var(--surface);color:var(--text);
  border:1px solid var(--line);border-radius:var(--r-md);padding:10px 12px;box-shadow:var(--sh-lg);font-size:var(--fs-xs);line-height:1.5;font-weight:400;text-align:left;white-space:normal}
.badge-wrap:hover .tip,.badge-wrap:focus-within .tip{display:block;animation:ui-pop .16s var(--ease-out) both}
.sev-tag.sev-Alta{color:#991B1B;background:#FEE2E2}
.sev-tag.sev-Media{color:#92400E;background:#FEF3C7}
.sev-tag.sev-Baja{color:#166534;background:#DCFCE7}
.state-tag{color:#374151;background:#E5E7EB}
.st-Activo{color:#166534;background:#DCFCE7}
.st-Pendiente{color:#92400E;background:#FEF3C7}
.st-Suspendido,.st-Rechazado{color:#991B1B;background:#FEE2E2}
.cls-idle{color:#7F1D1D;background:#FEE2E2}
.cls-over{color:#7C2D12;background:#FFEDD5}
.cls-ok{color:#14532D;background:#DCFCE7}
.cls-sat{color:#4C1D95;background:#EDE9FE}
.cls-none{color:#374151;background:#E5E7EB}
.cause-tag{font-weight:600;color:var(--navy);background:var(--primary-soft)}
/* Severidad como texto en tablas (con color de texto de contraste suficiente) */
.sev-Alta{color:var(--bad-text);font-weight:700}
.sev-Media{color:var(--warn-text);font-weight:700}
.sev-Baja{color:var(--ok-text);font-weight:700}
.delta-up{color:var(--bad-text)}
.delta-down{color:var(--ok-text)}

/* Tablas */
.tbl-wrap{overflow:auto;max-height:460px;border:1px solid var(--line);border-radius:var(--r-md);scrollbar-width:thin;
  background:linear-gradient(90deg,var(--surface) 30%,rgba(255,255,255,0)) left/28px 100% no-repeat local,
    linear-gradient(270deg,var(--surface) 30%,rgba(255,255,255,0)) right/28px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%,rgba(15,27,42,.14),transparent) left/10px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%,rgba(15,27,42,.14),transparent) right/10px 100% no-repeat scroll,var(--surface)}
table{width:100%;border-collapse:separate;border-spacing:0}
th,td{padding:10px 12px;text-align:left;font-size:var(--fs-sm);border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums}
th{position:sticky;top:0;z-index:1;background:var(--surface-2);color:var(--text-2);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.05em;
  white-space:nowrap;box-shadow:inset 0 -1px 0 var(--line);border-bottom:0}
tbody tr{transition:background-color var(--t-fast) var(--ease)}
tbody tr:hover{background:#F4F8FC}
tbody tr:last-child td{border-bottom:0}
tbody tr:nth-child(-n+40){animation:ui-fade .26s var(--ease-out) both}
#batch tbody tr{animation:none}
td b{color:var(--ink);font-weight:600}
td code{background:var(--surface-3);padding:1px 6px;border-radius:5px}
.roles-tbl td{vertical-align:top}
tr.detail td{background:#FAFCFE;border-bottom:1px solid var(--line)}
tr.detail details ul{margin:6px 0;padding-left:18px;font-size:var(--fs-xs)}

/* Avisos */
.note{position:relative;margin:0 0 14px;padding:11px 14px 11px 40px;border:1px solid var(--info-line);border-radius:var(--r-md);background:var(--info-bg);
  color:var(--info-text);font-size:var(--fs-sm);line-height:1.55;animation:ui-fade .28s var(--ease-out) both}
.note::before{content:"";position:absolute;left:13px;top:12px;width:17px;height:17px;background:currentColor;
  -webkit-mask:var(--ic-info) center/contain no-repeat;mask:var(--ic-info) center/contain no-repeat}
.note.warn{border-color:var(--warn-line);background:var(--warn-bg);color:var(--warn-text)}
.note.warn::before{-webkit-mask-image:var(--ic-warn);mask-image:var(--ic-warn)}
.note b{color:inherit}
.note code{background:rgba(255,255,255,.8);border:1px solid rgba(15,27,42,.08);padding:1px 6px;border-radius:5px;font-size:11.5px}
.note ul{margin:6px 0 0 18px;padding:0}
.src-note ul{margin:6px 0 0 18px;padding:0}

/* Formularios */
:is(.login-card,.gate-card,.inv-form,.usr-act,.cli-form,.con-side,.imp-form,.req-form) :is(input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]),select,textarea),
#repFilter{min-height:36px;padding:7px 11px;border:1px solid var(--line-input);border-radius:var(--r-md);background:var(--surface);color:var(--ink);
  font-size:var(--fs-md);line-height:1.4;font-family:inherit;transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
:is(.login-card,.gate-card,.inv-form,.usr-act,.cli-form,.con-side,.imp-form,.req-form) :is(input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]),select,textarea):hover,
#repFilter:hover{border-color:var(--line-input-hover)}
:is(.login-card,.gate-card,.inv-form,.usr-act,.cli-form,.con-side,.imp-form,.req-form) :is(input,select,textarea):focus,#repFilter:focus{outline:none;border-color:var(--primary);box-shadow:var(--focus-ring)}
:is(input,select,textarea)[aria-invalid="true"]{border-color:var(--bad)!important}
:is(input,select,textarea)[aria-invalid="true"]:focus{box-shadow:0 0 0 3px rgba(192,57,43,.22)!important}
:is(input,select,textarea):disabled{background:var(--surface-2);color:var(--muted);cursor:not-allowed}
input[type=checkbox],input[type=radio]{accent-color:var(--primary);width:16px;height:16px;margin:0;cursor:pointer}
textarea{resize:vertical}
::placeholder{color:#8A97A8;opacity:1}
.field-err{display:block;color:var(--bad-text);font-size:var(--fs-xs);margin-top:3px}
.field-err:empty{display:none}
.inv-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px 14px;align-items:end}
.inv-form label{display:block;font-weight:600;color:var(--text);font-size:var(--fs-xs);margin-bottom:5px}
.inv-form input,.inv-form select{width:100%}
.usr-act{display:flex;gap:6px;flex-wrap:wrap;align-items:center;min-width:280px}
.usr-act input,.usr-act select{min-height:30px!important;padding:4px 8px!important;font-size:var(--fs-xs)!important}
.usr-act input[type=date]{width:150px}
.cli-form .wide{grid-column:1/-1}
.cli-form textarea,.cli-form select,.cli-form input[type=number],.cli-form input[type=email],.cli-form input:not([type]){width:100%}
.cli-form fieldset,.req-form fieldset{border:1px solid var(--line);border-radius:var(--r-md);padding:10px 14px;margin:0}
.cli-form legend,.req-form legend{font-weight:600;color:var(--navy);font-size:var(--fs-sm);padding:0 6px}
.chk{display:flex;gap:8px;align-items:center;font-size:var(--fs-sm);cursor:pointer}
.imp-form{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;margin:10px 0}
.imp-form label{display:block;font-size:var(--fs-xs);font-weight:600;color:var(--text);margin-bottom:5px}
.imp-form input[type=file]{font-size:var(--fs-sm)}
.imp-form input[type=file]::file-selector-button{margin-right:10px;padding:6px 12px;border:1px solid var(--line-input);border-radius:var(--r-md);background:var(--surface);
  color:var(--navy);font-weight:600;cursor:pointer;transition:background-color var(--t-fast) var(--ease)}
.imp-form input[type=file]::file-selector-button:hover{background:var(--surface-2)}
.con-side label{display:block;font-size:var(--fs-xs);font-weight:600;color:var(--text);margin:10px 0 5px}
.con-side input,.con-side textarea{width:100%}
#repFilter{max-width:280px}

/* Pestañas */
.tabs{display:flex;flex-wrap:wrap;gap:2px;margin:4px 0 16px;border-bottom:1px solid var(--line)}
.tab{position:relative;background:none;border:0;margin:0 0 -1px;padding:10px 14px;font-weight:600;color:var(--muted);cursor:pointer;font-size:var(--fs-md);
  border-radius:var(--r-md) var(--r-md) 0 0;transition:color var(--t-fast) var(--ease),background-color var(--t-fast) var(--ease)}
.tab::after{content:"";position:absolute;left:10px;right:10px;bottom:0;height:2px;border-radius:2px;background:var(--primary);transform:scaleX(0);transition:transform var(--t) var(--ease-out)}
.tab:hover{color:var(--navy);background:var(--surface-2)}
.tab.active{color:var(--navy)}
.tab.active::after{transform:scaleX(1)}

/* Aviso flotante */
.toast{position:fixed;right:24px;bottom:24px;z-index:70;display:flex;align-items:flex-start;gap:12px;max-width:min(420px,calc(100vw - 32px));
  padding:14px 18px 16px 14px;background:#0F1B2A;color:#F1F5F9;border-radius:var(--r-lg);box-shadow:var(--sh-lg);font-size:var(--fs-md);line-height:1.45;
  overflow:hidden;opacity:0;transform:translateY(14px) scale(.98);pointer-events:none;
  transition:opacity var(--t) var(--ease),transform var(--t-slow) var(--ease-out)}
.toast::before{content:"";flex:0 0 20px;width:20px;height:20px;margin-top:1px;background:var(--cielo);
  -webkit-mask:var(--ic-info) center/contain no-repeat;mask:var(--ic-info) center/contain no-repeat}
.toast.ok::before{background:#4ADE80;-webkit-mask-image:var(--ic-check-c);mask-image:var(--ic-check-c)}
.toast.err::before{background:#F87171;-webkit-mask-image:var(--ic-x-c);mask-image:var(--ic-x-c)}
.toast::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--azul);transform-origin:left center;transform:scaleX(0)}
.toast.ok::after{background:#22C55E}
.toast.err::after{background:#EF4444}
.toast.show{opacity:1;transform:none}
.toast.show::after{animation:ui-timer var(--toast-ms,4200ms) linear forwards}
.toast-body{min-width:0}
.toast-detail{margin-top:4px;font-size:var(--fs-xs);color:#94A3B8;overflow-wrap:anywhere}

/* Confirmación (ui.js) */
.ui-modal{position:fixed;inset:0;z-index:85;display:grid;place-items:center;padding:20px;background:rgba(8,20,36,.48);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);opacity:0;transition:opacity var(--t) var(--ease)}
.ui-modal.open{opacity:1}
.ui-modal-card{width:min(440px,100%);background:var(--surface);border-radius:var(--r-xl);padding:24px;box-shadow:0 30px 60px -20px rgba(0,10,30,.45);
  transform:translateY(10px) scale(.97);transition:transform var(--t-slow) var(--ease-out)}
.ui-modal.open .ui-modal-card{transform:none}
.ui-modal-ic{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--info-bg);color:var(--primary);margin-bottom:14px}
.ui-modal-ic::before{content:"";width:22px;height:22px;background:currentColor;-webkit-mask:var(--ic-info) center/contain no-repeat;mask:var(--ic-info) center/contain no-repeat}
.ui-modal-ic.danger{background:var(--bad-bg);color:var(--bad-text)}
.ui-modal-ic.danger::before{-webkit-mask-image:var(--ic-warn);mask-image:var(--ic-warn)}
.ui-modal h2{margin:0 0 6px;font-size:var(--fs-lg);font-weight:650;color:var(--ink)}
.ui-modal p{margin:0;color:var(--text-2);font-size:var(--fs-md);line-height:1.55}
.ui-modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:22px;flex-wrap:wrap}

/* Barra de actividad de red (ui.js) */
#ui-progress{position:fixed;left:0;right:0;top:0;height:3px;z-index:95;pointer-events:none;overflow:hidden;opacity:0;transition:opacity var(--t-slow) var(--ease)}
#ui-progress.on{opacity:1}
#ui-progress::before{content:"";position:absolute;top:0;bottom:0;left:0;width:40%;border-radius:3px;background:linear-gradient(90deg,rgba(0,147,208,0),var(--azul) 40%,var(--cielo))}
#ui-progress.on::before{animation:ui-indeterminate 1.15s var(--ease) infinite}

/* Inicio de sesión y pantallas de acceso */
.login{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;padding:24px;overflow:auto;
  background:radial-gradient(900px 520px at 12% -8%,rgba(0,147,208,.28),transparent 62%),linear-gradient(160deg,#003366,#001A35)}
.login-card{background:var(--surface);border-radius:var(--r-xl);padding:30px 32px;width:min(460px,100%);box-shadow:0 30px 60px -20px rgba(0,10,30,.55);
  display:flex;flex-direction:column;gap:10px;animation:ui-dialog .38s var(--ease-out) both;margin:auto}
.login-card img{width:168px;align-self:center;margin-bottom:6px}
.login-card h1{margin:0;color:var(--navy);font-size:var(--fs-xl);font-weight:650;text-align:center}
.login-card p{margin:0;color:var(--muted);font-size:var(--fs-sm);text-align:center;line-height:1.5}
.login-card label{font-weight:600;color:var(--text);font-size:var(--fs-sm);margin-top:8px}
.login-card .btn{margin-top:6px;min-height:40px}
.login-card .note{margin:0;text-align:left}
.login-help{font-size:var(--fs-xs)!important}
.gate-card{width:min(560px,100%);max-height:calc(100vh - 48px);overflow:auto}
.gate-card form{display:flex;flex-direction:column;gap:4px}
.gate-card label{font-weight:600;color:var(--text);font-size:var(--fs-sm);margin-top:8px}
.gate-card .btn{margin-top:10px}
.gate-acc{font-size:var(--fs-xs)!important}
.gate-actions{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:6px}
.gate-mail{margin:14px 0 4px;border-top:1px solid var(--line);padding-top:12px}

/* 5. Vistas ---------------------------------------------------- */
.gauge{position:relative;display:flex;justify-content:center;align-items:center;height:158px}
.gauge canvas{max-width:158px;max-height:158px}
.gauge-c{position:absolute;text-align:center}
.gauge-c .n{font-family:var(--font-display);font-size:30px;font-weight:700;color:var(--navy);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.gauge-c .t{font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-weight:700}
.waf{display:flex;flex-direction:column;gap:12px}
.waf-row{display:flex;align-items:center;gap:12px;font-size:var(--fs-sm)}
.waf-row .nm{min-width:160px;font-weight:600;color:var(--navy)}
.waf-bar{flex:1;height:8px;border-radius:var(--r-pill);background:var(--surface-3);overflow:hidden}
.waf-bar i{display:block;height:100%;border-radius:var(--r-pill);width:0;background:linear-gradient(90deg,var(--azul),var(--primary));transition:width 1s var(--ease-out)}
.waf-row b{min-width:44px;text-align:right;color:var(--navy);font-variant-numeric:tabular-nums}
.ai-box{background:linear-gradient(180deg,#F5FAFE,#FFFFFF);border:1px solid var(--info-line);border-radius:var(--r-lg);padding:18px 20px;margin-bottom:16px;animation:ui-fade .3s var(--ease-out) both}
.ai-box .narr{font-size:var(--fs-base);color:var(--navy);line-height:1.65;font-weight:500}
.ai-list{margin:12px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
.ai-list li{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--azul);border-radius:var(--r-md);padding:8px 12px;font-size:var(--fs-sm)}
.ai-list.risk li{border-left-color:var(--bad)}
#batch{margin-bottom:16px}
.batch-bar{height:8px;border-radius:var(--r-pill);background:var(--surface-3);overflow:hidden;margin-bottom:10px}
.batch-bar i{display:block;height:100%;border-radius:var(--r-pill);background:linear-gradient(90deg,var(--azul),var(--primary));transition:width .4s var(--ease-out)}
.batch-counts{font-size:var(--fs-sm);margin-bottom:10px}
.batch-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:12px;font-size:var(--fs-sm)}
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.muted{color:var(--text-2);font-size:12px}
.badge-origin{font-weight:600}
.score-block{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.score-block .n{font-family:var(--font-display);font-size:26px;color:var(--navy);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.score-block .of{color:var(--muted);font-size:12px}
.score-block .bar{flex:1;min-width:90px;height:8px;border-radius:var(--r-pill);background:var(--surface-3);overflow:hidden}
.score-block .bar i{display:block;height:100%;border-radius:var(--r-pill);background:linear-gradient(90deg,var(--azul),var(--primary));animation:ui-grow .7s var(--ease-out) both;transform-origin:left center}
.score-block .state{font-size:var(--fs-xs);color:var(--text-2);font-weight:600}
.score-block.no-score .state{font-size:var(--fs-md);color:var(--navy)}
.plan{border-top:1px solid var(--line);padding-top:14px;margin-top:14px}
.plan:first-child{border-top:0;margin-top:0;padding-top:0}
.plan-h{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.plan-h h3{margin:0 0 6px;font-size:var(--fs-lg);font-weight:650;color:var(--navy)}
.plan-scores{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:12px}
.plan-scores .score-block{margin:0}
.plan-scores .engine,.plan-scores .target{color:var(--text-2)}
.hz h4{display:flex;align-items:center;gap:8px;margin:16px 0 8px;font-size:var(--fs-xs);color:var(--acero);text-transform:uppercase;letter-spacing:.06em;font-weight:700}
ol.actions{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.action{border:1px solid var(--line);border-left:3px solid var(--azul);border-radius:var(--r-md);padding:12px 14px;background:var(--surface);
  transition:box-shadow var(--t) var(--ease),border-color var(--t) var(--ease)}
.action:hover{box-shadow:var(--sh-sm);border-color:#D2DCE7}
.action:has(.sev-tag.sev-Alta){border-left-color:var(--bad)}
.action:has(.sev-tag.sev-Media){border-left-color:var(--warn)}
.action:has(.sev-tag.sev-Baja){border-left-color:var(--ok)}
.a-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.a-h .prio{font-weight:700;color:var(--acero);font-variant-numeric:tabular-nums}
.a-t{color:var(--navy);font-size:var(--fs-md)}
.a-d,.a-ai,.a-meta,.a-cve{font-size:12px;margin-top:6px;line-height:1.5}
.a-meta{color:#334155}
.a-res summary{cursor:pointer;font-size:12px;color:var(--primary);margin-top:6px;font-weight:600;width:max-content;max-width:100%}
.a-res summary:hover{color:var(--primary-hover)}
.a-res ul{margin:6px 0 0 16px;padding:0;font-size:var(--fs-xs)}
.a-cmd{margin-top:8px;display:flex;gap:8px;align-items:flex-start;flex-wrap:wrap}
.a-cmd code{background:var(--surface-3);padding:3px 7px;border-radius:var(--r-sm);font-size:11px;word-break:break-all}
.a-cmd pre{margin:0;white-space:pre-wrap;word-break:break-all;display:inline-block;max-width:calc(100% - 80px);vertical-align:top}
.a-cmd pre code{display:block;padding:8px 10px;background:#F1F5F9;border:1px solid var(--line);border-radius:var(--r-md);line-height:1.5}
.a-goal{font-size:12px;color:var(--ok-text);background:var(--ok-bg);border:1px solid var(--ok-line);border-radius:var(--r-md);padding:6px 10px;margin:8px 0 2px}
.caf-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;margin-bottom:16px}
.crit{margin:8px 0 0 16px;padding:0;font-size:12px;line-height:1.55}
.crit li{margin-bottom:3px}
.q-group{color:var(--navy);font-size:var(--fs-base);font-weight:650;margin:18px 0 8px}
fieldset.q{border:1px solid var(--line);border-radius:var(--r-md);padding:10px 14px;margin:0 0 10px;transition:border-color var(--t) var(--ease),background-color var(--t) var(--ease)}
fieldset.q:focus-within{border-color:var(--palo);background:#FBFDFF}
fieldset.q legend{font-weight:600;color:var(--navy);font-size:var(--fs-sm);padding:0 6px}
fieldset.q[aria-invalid]{border-color:var(--bad);background:var(--bad-bg)}
.q-opt{display:flex;gap:10px;align-items:flex-start;font-size:12.5px;padding:5px 6px;border-radius:var(--r-sm);cursor:pointer;transition:background-color var(--t-fast) var(--ease)}
.q-opt:hover{background:var(--surface-2)}
.q-opt input{margin-top:2px}
.agg{display:flex;flex-direction:column;gap:12px}
.agg h4{margin:0 0 6px;font-size:var(--fs-sm);color:var(--navy);font-weight:650}
.agg table{border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.agg th{position:static}
/* Diagrama de red */
.nd-wrap{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:12px}
.nd-tools{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
.nd-canvas{border:1px solid var(--line);border-radius:var(--r-md);height:520px;overflow:hidden;background:var(--surface-2)}
.nd-svg{width:100%;height:100%;display:block;font-family:var(--font)}
.nd-svg text{font-family:var(--font)}
.nd{cursor:pointer;transition:opacity var(--t-fast) var(--ease)}
.nd:hover{opacity:.85}
.nd.sel rect,.nd.sel polygon,.nd.sel path{stroke:#B42318;stroke-width:3}
.nd-panel{border:1px solid var(--line);border-radius:var(--r-md);padding:12px 14px;max-height:560px;overflow:auto;background:var(--surface)}
.nd-panel h3{margin:0 0 8px;font-size:var(--fs-md);color:var(--navy)}
.kv th{position:static;text-transform:none;letter-spacing:0;background:var(--surface-2);width:40%;font-size:11.5px;color:var(--text-2);box-shadow:none;border-bottom:1px solid var(--line)}
.kv th,.kv td{font-size:11.5px;padding:6px 8px;word-break:break-all;white-space:normal}
.nd-f{margin:0;padding:0 0 0 16px;font-size:12px}
.nd-table summary{cursor:pointer;margin-top:10px;font-weight:600;color:var(--primary)}
.nd-table caption{text-align:left;font-weight:650;color:var(--navy);padding:8px 0 4px}
/* Administración */
.admin-banner{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--line);
  border-left:3px solid #F59E0B;border-radius:var(--r-lg);padding:14px 18px;margin:12px 0;box-shadow:var(--sh-xs);animation:ui-fade .3s var(--ease-out) both}
.admin-banner h2{margin:0 0 3px;font-size:var(--fs-base);font-weight:650;color:var(--navy)}
.admin-banner p{margin:0;font-size:var(--fs-sm);color:var(--text-2)}
.admin-banner .acts{display:flex;gap:8px;flex-wrap:wrap}
.help-steps{margin:0 0 12px 18px;padding:0;font-size:var(--fs-sm);line-height:1.6}
.help-steps li{margin-bottom:6px}
/* Costos / FinOps */
.fin-ranks{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin:4px 0 16px}
.fin-rank{border:1px solid var(--line);border-radius:var(--r-lg);padding:12px 16px;background:var(--surface);transition:box-shadow var(--t) var(--ease)}
.fin-rank:hover{box-shadow:var(--sh-sm)}
.fin-rank h4{margin:0 0 8px;color:var(--navy);font-size:var(--fs-sm);font-weight:650}
.fin-rank ol{margin:0;padding-left:18px;font-size:var(--fs-sm)}
.fin-rank li{margin:6px 0}
.fin-tbl td{vertical-align:top}
.fin-why{min-width:260px;max-width:440px;font-size:12px;line-height:1.5}
.fin-rec{margin-top:4px;color:var(--ok-text)}
.fin-sig{font-size:var(--fs-xs);white-space:nowrap}
.fin-sub{color:var(--navy);font-size:var(--fs-md);font-weight:650;margin:16px 0 8px}
.hist-var{border-left:3px solid var(--acero);padding:4px 0 4px 14px;margin:14px 0}
.hist-var h4{margin:0 0 4px;color:var(--navy);font-size:var(--fs-md);font-weight:650}
.hist-var p{margin:0 0 6px;font-size:var(--fs-sm)}
/* Clientes, prueba y contratación */
.feat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:4px 14px}
.feat-mini{display:flex;gap:8px;align-items:center;font-size:var(--fs-sm);padding:3px 0;cursor:pointer}
.feat-group{border:1px solid var(--line);border-radius:var(--r-lg);padding:8px 14px;margin:0 0 12px}
.feat-group legend{font-weight:700;color:var(--navy);padding:0 6px;font-size:var(--fs-sm)}
.feat{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:start;padding:9px 6px;border-bottom:1px solid var(--line);font-size:var(--fs-sm);cursor:pointer;
  border-radius:var(--r-sm);transition:background-color var(--t-fast) var(--ease)}
.feat:hover{background:var(--surface-2)}
.feat:last-child{border-bottom:0}
.feat:has(input:checked){background:#F3F9FD}
.feat input{margin-top:2px}
.feat-price{white-space:nowrap;font-weight:700;color:var(--navy);text-align:right;font-variant-numeric:tabular-nums}
table.quote th{background:none;position:static;text-transform:none;letter-spacing:0;font-size:var(--fs-sm);color:var(--text);font-weight:500;box-shadow:none;border-bottom:1px solid var(--line);white-space:normal}
table.quote td{text-align:right;font-variant-numeric:tabular-nums}
table.quote tr:last-child th,table.quote tr:last-child td{border-bottom:0;font-size:var(--fs-base)}
[aria-busy="true"]:not(.btn){opacity:.6;transition:opacity var(--t) var(--ease)}
.trial-bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;background:var(--info-bg);border:1px solid var(--info-line);border-left:3px solid var(--azul);
  border-radius:var(--r-md);padding:10px 14px;font-size:var(--fs-sm);color:var(--info-text);margin-bottom:12px;animation:ui-fade .3s var(--ease-out) both}
.trial-bar.ended{background:var(--bad-bg);border-color:var(--bad-line);border-left-color:var(--bad);color:#7F1D1D}
.trial-end{border-left:3px solid var(--bad)}
.trial-end h2{margin:0 0 6px;color:#7F1D1D;font-size:var(--fs-lg);font-weight:650}
.req .card-h{flex-wrap:wrap}

/* Cambios: quién y cuándo (Req 44) */
.chg-authors{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.chg-authors li{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface-2)}
.chg-av{display:grid;place-items:center;width:34px;height:34px;flex:0 0 34px;border-radius:50%;background:var(--primary-soft);color:var(--navy);font-weight:700;font-size:var(--fs-2xs)}
.chg-who{display:flex;flex-direction:column;min-width:0;flex:1 1 auto}
.chg-who b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink)}
.chg-n{display:flex;flex-direction:column;align-items:flex-end;text-align:right;white-space:nowrap;font-size:var(--fs-sm)}
.chg-props{margin-top:4px;font-size:var(--fs-xs);color:var(--text-2);line-height:1.7}
.chg-props code{font-size:11px}
/* Qué cambió (Req 45) */
.chg-cats{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
.chg-cats:empty{display:none}
.chg-cat{display:inline-flex;align-items:center;gap:4px;padding:1px 8px;margin-right:6px;border-radius:var(--r-pill);font-size:11px;font-weight:600;
  line-height:18px;white-space:nowrap;vertical-align:1px;color:var(--navy);background:var(--primary-soft)}
.chg-cats .chg-cat{margin-right:0}
.chg-cat[data-c="Seguridad"]{color:var(--bad-text);background:var(--bad-bg)}
.chg-cat[data-c="Costo y capacidad"]{color:var(--warn-text);background:var(--warn-bg)}
.chg-cat[data-c="Disponibilidad"]{color:var(--ok-text);background:var(--ok-bg)}
.chg-cat[data-c="Red"]{color:var(--info-text);background:var(--info-bg)}
.chg-cat[data-c="Etiquetas"],.chg-cat[data-c="Inventario"],.chg-cat[data-c="Configuración"]{color:#374151;background:#E5E7EB}
.chg-what{min-width:280px;max-width:520px}
.chg-sum{line-height:1.55;color:var(--ink)}
.chg-diff{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:4px;font-size:var(--fs-xs);color:var(--text-2);line-height:1.6}
.chg-diff b{color:var(--text);font-weight:600}
.chg-v{font-family:var(--mono);font-size:11.5px;color:var(--ink);background:var(--surface-3);border-radius:4px;padding:0 4px;overflow-wrap:anywhere}
.chg-diff del{text-decoration-color:var(--bad-text)}
.chg-more summary{margin-top:6px;cursor:pointer;color:var(--primary);font-size:var(--fs-xs);font-weight:600;width:max-content}
.chg-more summary:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:4px}

/* Centro de seguridad, rendimiento y costos (Entrega 7, Req 46-54) */
.sv,.lv,.ev,.st,.cls{display:inline-flex;align-items:center;gap:4px;padding:1px 8px;margin-right:4px;border-radius:var(--r-pill);font-size:11px;font-weight:700;font-style:normal;line-height:18px;white-space:nowrap;vertical-align:1px}
.sv-Critical,.lv-Critico{color:#fff;background:#7F1D1D}
.sv-High,.lv-Alto{color:#991B1B;background:#FEE2E2}
.sv-Medium,.lv-Medio{color:#92400E;background:#FEF3C7}
.sv-Low{color:#1E3A8A;background:#DBEAFE}
.lv-Bajo{color:#166534;background:#DCFCE7}
.sv-t{color:var(--bad-text)}
.ev-det{color:#fff;background:#B91C1C}
.ev-exp{color:#92400E;background:#FEF3C7;border:1px solid #F6D59C}
.ev-inf{color:#5B21B6;background:#F5F3FF;border:1px dashed #8B5CF6;font-style:italic}
.st-ok{color:#166534;background:#DCFCE7} .st-bad{color:#991B1B;background:#FEE2E2} .st-na{color:#374151;background:#E5E7EB}
.cls-Ocioso{color:#92400E;background:#FEF3C7} .cls-Sobredimensionado{color:#9A3412;background:#FFEDD5} .cls-Adecuado{color:#166534;background:#DCFCE7}
.cls-Saturado{color:#991B1B;background:#FEE2E2} .cls-Sinmetricas{color:#374151;background:#E5E7EB}
.prio-tag{display:inline-block;padding:0 6px;margin-right:4px;border-radius:4px;background:var(--navy);color:#fff;font-size:11px;font-weight:700;line-height:18px}
.ps-res{appearance:none;background:none;border:0;padding:0;color:var(--primary);font:inherit;font-weight:600;cursor:pointer;text-align:left;text-decoration:underline;text-decoration-color:rgba(0,120,184,.35);text-underline-offset:2px}
.ps-res:hover{color:var(--primary-hover);text-decoration-color:currentColor}
.src{display:inline-block;margin-top:2px;font-size:11px;color:var(--muted)}
.cve{font-family:var(--mono);font-size:11.5px;margin-right:6px}
code.wrap{white-space:normal;overflow-wrap:anywhere;word-break:break-all}
.fd{padding:8px 0;font-size:var(--fs-sm);line-height:1.55}
.fd p{margin:6px 0}
.fd-g{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin:8px 0}
.fd-src{font-size:var(--fs-xs);color:var(--text-2);margin:6px 0}
.evd{display:grid;grid-template-columns:max-content 1fr;gap:4px 12px;margin:8px 0;font-size:var(--fs-xs)}
.evd dt{font-weight:600;color:var(--text-2)} .evd dd{margin:0;overflow-wrap:anywhere}
.flt{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:flex-end;margin:0 0 12px}
.flt label{display:flex;flex-direction:column;gap:3px;font-size:var(--fs-xs);font-weight:600;color:var(--text-2)}
.flt input,.flt select{min-height:32px;padding:4px 8px;border:1px solid var(--line-input);border-radius:var(--r-sm);font:inherit;font-size:var(--fs-sm);background:#fff;color:var(--ink);min-width:140px}
.tbl-wrap.tall{max-height:640px}
td.wide{min-width:280px;max-width:520px}
td details summary,.fl summary,.al>summary,.bm-c>summary,.bm-d>summary,.svc>summary{cursor:pointer}
.tr{font-size:11.5px;font-weight:700;white-space:nowrap} .tr-up{color:var(--bad-text)} .tr-down{color:var(--ok-text)} .tr-flat{color:var(--muted)}
.spark{vertical-align:middle;color:var(--acero)}
/* Matriz de riesgo */
.rm{display:grid;gap:4px;font-size:var(--fs-xs)}
.rm-r{display:grid;grid-template-columns:96px repeat(4,minmax(0,1fr));gap:4px;align-items:stretch}
.rm-hd span{font-weight:700;color:var(--text-2);padding:4px}
.rm-c{border-radius:var(--r-md);padding:8px;min-height:44px;border:1px solid var(--line);background:var(--surface-2)}
.rm-Critical{background:rgba(127,29,29,calc(var(--a)*.32))} .rm-High{background:rgba(192,57,43,calc(var(--a)*.3))}
.rm-Medium{background:rgba(217,119,6,calc(var(--a)*.3))} .rm-Low{background:rgba(46,125,181,calc(var(--a)*.25))}
.rm-c b{font-size:var(--fs-lg);color:var(--ink)}
/* Cyber Kill Chain */
.kc{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px;list-style:none;margin:0 0 12px;padding:0}
.kc>li{position:relative}
.kc:not(.kc-mini)>li:not(:last-child)::after{content:"›";position:absolute;right:-9px;top:50%;transform:translateY(-50%);color:var(--muted);font-weight:700;font-size:18px}
.kc-s{display:flex;flex-direction:column;gap:4px;width:100%;min-height:104px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface-2);text-align:left;font:inherit;color:inherit;cursor:pointer}
.kc-s b{font-size:var(--fs-sm)} .kc-s small{color:var(--muted);font-size:11px} .kc-s span{display:flex;flex-wrap:wrap;gap:3px}
.kc-s.has-det{border-color:#B91C1C;background:#FEF2F2} .kc-s.has-exp{border-color:#F6D59C;background:#FFF8EB} .kc-s.has-inf{border:1px dashed #8B5CF6;background:#F5F3FF}
.kc-s.sel{box-shadow:var(--focus-ring)}
.kc-mini{grid-template-columns:1fr;gap:4px}
.kc-mini .kc-s{flex-direction:row;justify-content:space-between;align-items:center;min-height:0;padding:6px 10px;cursor:default}
.kc-d{border:1px solid var(--line);border-radius:var(--r-md);padding:10px 12px;background:var(--surface)}
.kc-d h4{margin:0 0 8px;color:var(--navy)}
/* Matriz de MITRE ATT&CK */
.mx{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(150px,1fr);gap:6px;overflow-x:auto;padding-bottom:8px;margin-bottom:12px;scrollbar-width:thin}
.mx-c{display:flex;flex-direction:column;gap:4px;min-width:150px}
.mx-h{display:flex;flex-direction:column;gap:2px;min-height:82px;padding:8px;border-radius:var(--r-md);background:var(--navy);color:#fff}
.mx-h small{color:#CFE3F5;font-size:10.5px}
.mx-t{display:flex;justify-content:space-between;gap:6px;align-items:flex-start;width:100%;padding:6px 8px;border-radius:var(--r-sm);border:1px solid var(--line);font:inherit;font-size:11.5px;text-align:left;cursor:pointer;line-height:1.35;color:var(--ink);background:#fff}
.mx-t.is-det{background:rgba(185,28,28,calc(var(--a)*.32));border-color:#B91C1C}
.mx-t.is-exp{background:rgba(217,119,6,calc(var(--a)*.32));border-color:#F6D59C}
.mx-t.is-inf{background:rgba(139,92,246,calc(var(--a)*.22));border:1px dashed #8B5CF6}
.mx-t.sel{box-shadow:var(--focus-ring)} .mx-t code{font-size:10.5px}
.mx-0{padding:6px 8px;font-size:11px}
.lg,.evl,.tl,.cl,.rs,.fl,.rc{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:var(--fs-sm)}
.evl li{padding:6px 0;border-bottom:1px solid var(--line)}
.tl li{padding-left:10px;border-left:2px solid var(--line)}
.cl li{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:4px}
.rt{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.rt-i{border:1px dashed #8B5CF6;border-radius:var(--r-lg);padding:12px;background:#FBFAFF}
.rt-s{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:8px 0;padding:0}
.rt-s li{display:flex;flex-direction:column;gap:2px;padding:8px 10px;border-radius:var(--r-md);background:#fff;border:1px solid #DDD6FE;min-width:150px;max-width:280px;font-size:var(--fs-xs)}
.rt-s small{color:#5B21B6;font-weight:700}
/* Respuestas, prioridades y benchmark */
.qa{list-style:none;counter-reset:qa;margin:0;padding:0;display:grid;gap:10px}
.qa li{counter-increment:qa;position:relative;padding:10px 12px 10px 42px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface-2);font-size:var(--fs-sm)}
.qa li::before{content:counter(qa);position:absolute;left:10px;top:10px;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--navy);color:#fff;font-size:11px;font-weight:700}
.qa p{margin:4px 0 6px}
.qa-f{display:flex;justify-content:space-between;gap:8px;align-items:center;flex-wrap:wrap}
.fx,.gp,.bl{margin:0;padding-left:22px;display:grid;gap:10px;font-size:var(--fs-sm)}
.fx-h{display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.bm-d,.svc,.al{border:1px solid var(--line);border-radius:var(--r-lg);padding:10px 12px;margin-bottom:10px}
.bm-d>summary{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center}
.bm-bar{display:inline-flex;width:160px;height:8px;border-radius:var(--r-pill);overflow:hidden;background:var(--surface-3)}
.bm-bar i{display:block;height:100%} .bm-bar .ok{background:var(--ok)} .bm-bar .bad{background:var(--bad)} .bm-bar .na{background:var(--neutral)}
.bm-c{margin:8px 0 0 12px;padding:8px 10px;border-left:3px solid var(--line);font-size:var(--fs-sm)}
.bm-c.is-failed{border-left-color:var(--bad)}
.bm-al{list-style:none;margin:8px 0;padding:0;display:grid;gap:8px}
.bm-a{padding:6px 0;border-bottom:1px dashed var(--line)}
.bm-f{margin:6px 0 0 16px;padding:0;display:grid;gap:6px}
/* Costo frente a uso */
.qg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.qb{display:flex;flex-direction:column;gap:2px;text-align:left;padding:10px 12px;border-radius:var(--r-md);border:1px solid var(--line);border-left:5px solid var(--q);background:var(--surface);font:inherit;color:inherit;cursor:pointer}
.qb span{font-size:var(--fs-xs);color:var(--text-2)}
.qb.qb-top{background:#FEF2F2} .qb.sel{box-shadow:var(--focus-ring)}
.qb-all{grid-column:span 2;border-left-color:var(--navy);flex-direction:row;justify-content:space-between}
.qd{display:inline-block;padding:1px 8px;border-radius:var(--r-pill);font-size:11px;font-weight:700;color:var(--ink);background:#fff;border:1px solid var(--q);border-left:6px solid var(--q);white-space:nowrap}
/* Vista 360° */
.r360{width:min(1180px,96vw);max-height:92vh;padding:0;border:0;border-radius:var(--r-xl);box-shadow:0 24px 64px rgba(15,27,42,.35);color:var(--text)}
.r360::backdrop{background:rgba(15,27,42,.45)}
.r360-h{position:sticky;top:0;z-index:1;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 20px;background:var(--surface);border-bottom:1px solid var(--line)}
.r360-h h2{margin:0;font-size:var(--fs-lg);color:var(--navy)}
#r360B{padding:16px 20px 22px}
.r360-meta{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px}
.r360-g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:12px}
.r360-g .card{animation:none}
.r360-g h4{margin:10px 0 4px;font-size:var(--fs-sm);color:var(--navy)}
.gauge{height:10px;border-radius:var(--r-pill);background:var(--surface-3);overflow:hidden}
.gauge-b{height:100%;border-radius:var(--r-pill)}
.gauge-b.lv-Critico{background:#7F1D1D} .gauge-b.lv-Alto{background:var(--bad)} .gauge-b.lv-Medio{background:var(--warn)} .gauge-b.lv-Bajo{background:var(--ok)}
.sv-row{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:8px} .sv-row div{display:flex;align-items:center;gap:4px}
.mini{width:100%;border-collapse:collapse;font-size:var(--fs-xs)} .mini th,.mini td{padding:4px 6px;border-bottom:1px solid var(--line);text-align:left}
.kv{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:8px}
.kv div{display:flex;flex-direction:column;padding:8px 10px;border-radius:var(--r-md);background:var(--surface-2)}
.kv span,.kv small{font-size:11px;color:var(--text-2)}
.mbar{display:flex;align-items:flex-end;gap:6px;height:84px;margin-top:8px}
.mbar div{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:2px}
.mbar i{display:block;width:100%;max-width:36px;background:var(--azul);border-radius:4px 4px 0 0}
.mbar span{font-size:10.5px;color:var(--muted)}
@media (max-width:1100px){.kc{grid-template-columns:repeat(2,minmax(0,1fr))}.kc:not(.kc-mini)>li::after{content:none!important}}
@media (max-width:900px){.r360-g{grid-template-columns:1fr}.rm-r{grid-template-columns:72px repeat(4,minmax(64px,1fr))}.qg{grid-template-columns:1fr}.qb-all{grid-column:auto}}

/* 6. Estados de carga y vacíos --------------------------------- */
.empty{padding:32px 18px;text-align:center;color:var(--muted);font-size:var(--fs-sm);line-height:1.55}
.empty .ic{display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin:0 auto 10px;border-radius:50%;background:var(--surface-3);color:#8CA3B8;font-size:20px;line-height:1}
/* Esqueletos mientras la vista carga por primera vez (la clase is-loading la pone busy() en app.js) */
.is-loading .view:not(.hidden) .kpis:empty{min-height:96px;border-radius:var(--r-lg);
  background:linear-gradient(100deg,transparent 30%,var(--skel-hi) 50%,transparent 70%) 0 0/220% 100% no-repeat,
    repeating-linear-gradient(90deg,var(--skel) 0 calc(25% - 12px),transparent calc(25% - 12px) 25%);
  animation:ui-shimmer 1.3s linear infinite}
.is-loading .view:not(.hidden) :is(#aiBox,#perfBody,#histBody,#impBody,#netDiagram,#cafCards,#cafPlans,#cafQuestBody,#archPlan,#wafPlans,#ecoPlan,#secPlan,#ecoAgg,#cliBody,#conBody,#secPosture):empty{
  min-height:118px;border-radius:var(--r-md);
  background:linear-gradient(100deg,transparent 30%,var(--skel-hi) 50%,transparent 70%) 0 0/220% 100% no-repeat,
    linear-gradient(var(--skel),var(--skel)) 0 4px/58% 14px no-repeat,
    linear-gradient(var(--skel),var(--skel)) 0 34px/100% 12px no-repeat,
    linear-gradient(var(--skel),var(--skel)) 0 60px/92% 12px no-repeat,
    linear-gradient(var(--skel),var(--skel)) 0 86px/74% 12px no-repeat;
  animation:ui-shimmer 1.3s linear infinite}
.is-loading .view:not(.hidden) .tbl-wrap:has(> table > tbody:empty){min-height:168px;
  background:linear-gradient(100deg,transparent 30%,var(--skel-hi) 50%,transparent 70%) 0 0/220% 100% no-repeat,
    repeating-linear-gradient(180deg,transparent 0 18px,var(--skel) 18px 30px,transparent 30px 42px) 12px 40px/calc(100% - 24px) calc(100% - 52px) no-repeat,var(--surface);
  animation:ui-shimmer 1.3s linear infinite}
.is-loading .view:not(.hidden) canvas:not([style]):not(#chScore){display:block;width:100%;border-radius:var(--r-md);
  background:linear-gradient(100deg,transparent 30%,var(--skel-hi) 50%,transparent 70%) 0 0/220% 100% no-repeat,var(--skel);
  animation:ui-shimmer 1.3s linear infinite}

/* 7. Movimiento ------------------------------------------------ */
.view:not(.hidden){animation:ui-view .32s var(--ease-out) both}
@keyframes ui-view{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes ui-fade{from{opacity:0}to{opacity:1}}
@keyframes ui-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes ui-pop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
@keyframes ui-dialog{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
@keyframes ui-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes ui-spin{to{transform:rotate(360deg)}}
@keyframes ui-shimmer{from{background-position:120% 0}to{background-position:-120% 0}}
@keyframes ui-indeterminate{from{transform:translateX(-100%)}to{transform:translateX(260%)}}
@keyframes ui-timer{from{transform:scaleX(1)}to{transform:scaleX(0)}}
/* Nombres anteriores, por compatibilidad */
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* 8. Responsive ------------------------------------------------ */
@media (max-width:1280px){.main{padding:0 22px 28px}}
@media (max-width:1180px){
  .row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .card.g2{grid-column:1/-1}
  .row > .g2 + :not(.g2):last-child,.row > :not(.g2):nth-child(3):last-child{grid-column:1/-1}
  .row > :not(.g2):first-child:has(+ .g2){grid-column:1/-1}
  .nd-wrap{grid-template-columns:1fr}
}
@media (max-height:860px){
  .brand{padding:8px 10px;margin-bottom:10px}
  .nav-item{padding:7px 12px}
  .nav-group + .nav-group{margin-top:8px}
  .side-foot{padding-top:8px;font-size:10.5px}
}
@media (max-width:1024px){
  .sidebar{transform:translateX(-100%);transition:transform var(--t-slow) var(--ease-out),visibility 0s linear var(--t-slow);visibility:hidden;box-shadow:none}
  body.nav-open .sidebar{transform:none;visibility:visible;box-shadow:var(--sh-lg);transition:transform var(--t-slow) var(--ease-out)}
  .nav-scrim{display:block;position:fixed;inset:0;z-index:25;background:rgba(8,20,36,.45);opacity:0;visibility:hidden;transition:opacity var(--t) var(--ease),visibility 0s linear var(--t)}
  body.nav-open .nav-scrim{opacity:1;visibility:visible;transition:opacity var(--t) var(--ease)}
  .main{margin-left:0}
  .btn.nav-toggle{display:inline-flex}
}
@media (max-width:760px){
  :root{--gutter:14px}
  .topbar{padding:10px var(--gutter)}
  .page-title h1{font-size:21px}
  .page-head{padding:18px 0 12px}
  .controls{display:contents}
  .sub-picker{min-width:0;flex:1 1 calc(100% - 56px)}
  .sub-picker select{min-width:0;max-width:none;flex:1}
  .row{grid-template-columns:1fr}
  .row > *{grid-column:auto!important}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .kpi{padding:12px 12px 12px 15px}
  .kpi .v{font-size:23px}
  .card{padding:16px}
  .admin-banner{padding:12px 14px}
  .waf-row .nm{min-width:110px}
  .tbl-wrap{max-height:none}
  .toast{left:12px;right:12px;bottom:12px;max-width:none}
  .ui-modal-actions .btn{flex:1}
  .login-card{padding:24px 20px}
  .nd-canvas{height:420px}
}
@media (max-width:420px){
  .kpis{gap:8px}
  .btn{padding:7px 12px}
  #runAllBtn .bi{display:none}
  #status.is-done{display:none}
}

@media (max-width:340px){.kpis{grid-template-columns:1fr}}

/* 9. Accesibilidad --------------------------------------------- */
.skip{position:fixed;left:12px;top:-64px;z-index:100;background:var(--navy);color:#fff;padding:10px 16px;border-radius:var(--r-md);font-weight:600;
  text-decoration:none;box-shadow:var(--sh-lg);transition:top var(--t) var(--ease)}
.skip:focus{top:12px;color:#fff;outline:2px solid var(--cielo);outline-offset:2px}
:focus-visible{outline:2px solid var(--azul);outline-offset:2px}
.btn:focus-visible{outline:2px solid var(--azul);outline-offset:2px;box-shadow:var(--focus-ring)}
.nav-item:focus-visible{outline:2px solid var(--cielo);outline-offset:-2px}
.tab:focus-visible{outline:2px solid var(--azul);outline-offset:-2px}
summary:focus-visible,.badge-origin:focus-visible{outline:2px solid var(--azul);outline-offset:2px;border-radius:4px}
.sub-picker select:focus-visible{outline:none}
.nd-canvas:focus-visible,.nd:focus-visible{outline:3px solid var(--azul);outline-offset:2px}
@media (prefers-reduced-motion:reduce){
  /* Sin transiciones (0s evita que la propiedad inicial «all» anime cambios de visibilidad) y animaciones reducidas a su estado final */
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;animation-delay:0s!important;transition-duration:0s!important;transition-delay:0s!important;scroll-behavior:auto!important}
}
@media (forced-colors:active){
  .btn,.card,.kpi,.note,.tbl-wrap{border:1px solid CanvasText}
  .nav-item.active{outline:2px solid Highlight}
}
/* Licenciamiento y gobierno (Entrega 8, Req 55-66) */
.nav-sub{margin:8px 12px 2px;padding-top:8px;border-top:1px solid rgba(255,255,255,.12);font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#7FA0C2}
.dc{display:inline-flex;align-items:center;padding:0 7px;margin-right:4px;border-radius:var(--r-pill);font-size:10.5px;font-weight:700;line-height:17px;white-space:nowrap;vertical-align:1px;border:1px solid transparent}
.dc-desc{color:#14532D;background:#DCFCE7;border-color:#BBF7D0}
.dc-calc{color:#1E3A8A;background:#DBEAFE;border-color:#BFDBFE}
.dc-est{color:#7C2D12;background:#FFEDD5;border-color:#FED7AA}
.dc-man{color:#5B21B6;background:#EDE9FE;border-color:#DDD6FE}
.dc-rec{color:#0F172A;background:#FEF9C3;border-color:#FDE68A}
.lcs,.lls{display:inline-flex;align-items:center;padding:1px 8px;margin-right:4px;border-radius:var(--r-pill);font-size:11px;font-weight:700;line-height:18px;white-space:nowrap;vertical-align:1px}
.lcs-Compliant{color:#fff;background:#1E8E6A} .lcs-Warning{color:#7C2D12;background:#FDE68A} .lcs-Critical{color:#fff;background:#B91C1C}
.lcs-Unknown{color:#fff;background:#64748B} .lcs-Informativo{color:#1E3A8A;background:#DBEAFE}
.lls-ok{color:#14532D;background:#DCFCE7} .lls-warn{color:#7C2D12;background:#FEF3C7} .lls-esu{color:#155E75;background:#CFFAFE}
.lls-bad{color:#fff;background:#B91C1C} .lls-unk{color:#334155;background:#E2E8F0}
.lic-flt{padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface-2)}
.lic-flt select{min-width:150px;max-width:220px}
.lic-flt .pill{align-self:center}
.lic-leg{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin:0 0 14px;font-size:var(--fs-xs)}
.lic-g4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:14px}
.lic-g4 .card{margin:0}
@media (max-width:1200px){.lic-g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:700px){.lic-g4{grid-template-columns:1fr}}
.lic-kv th[scope="row"]{width:30%;font-weight:600;color:var(--text-2);text-align:left;white-space:normal}
.lic-kv td{white-space:normal;overflow-wrap:anywhere}
.lic-fl{list-style:none;margin:0;padding:0}
.lic-fl li{padding:9px 0;border-bottom:1px solid var(--line);line-height:1.5}
.lic-fl li:last-child{border-bottom:0}
.lic-set fieldset{margin:0 0 12px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-md)}
.lic-set legend{padding:0 6px;font-weight:700;color:var(--navy);font-size:var(--fs-sm)}
.lic-al{display:flex;align-items:center;gap:8px;padding:4px 0;font-size:var(--fs-sm)}
.lic-al input[type="number"]{width:90px;min-height:28px;padding:2px 6px;border:1px solid var(--line-input);border-radius:var(--r-sm)}
.lic-pr{padding:6px 0;border-bottom:1px dashed var(--line);margin:0}
.lic-man{margin-top:6px}
.lic-dlg #licRB{padding:16px 20px 22px}
.lic-dlg h4{margin:14px 0 6px;font-size:var(--fs-sm);color:var(--navy)}
.lic-dlg .tabs{margin-top:10px}.lic-ev{white-space:nowrap;line-height:1.7}