/* =====================================================================
   STAR<GATE> — Tema «Command Center» (Design System v2 de Supra1)
   Se carga AL FINAL: redefine tokens y viste los componentes existentes
   (sgm-card, sgm-btn, sgm-table, nav, kpi, modal…) con la estética de
   Supra1, de modo que TODOS los módulos la heredan sin tocar cada vista.
   · Fondo ambiental con halos índigo/cian/oro y retícula
   · Superficies de vidrio (glass) con línea de brillo superior
   · Índigo #6366f1 + cian #22d3ee + oro #f0b429
   · Space Grotesk (títulos y cifras) · Inter (texto) · JetBrains Mono (datos)
   La marca por cuenta (SupraAdmin) sigue mandando: sobrescribe --brand…
   ===================================================================== */

:root {
  --bg: #070b14;            --bg-2: #0b1222;
  --panel: rgba(17, 26, 48, .62);     --panel-2: rgba(13, 20, 38, .78);
  --panel-solid: #101828;
  --line: rgba(148, 163, 184, .10);   --line-strong: rgba(148, 163, 184, .18);
  --text: #e2e8f0;          --text-2: #94a3b8;     --text-3: #64748b;
  --brand: #6366f1;         --brand-2: #818cf8;    --accent2: #22d3ee;
  --gold: #f0b429;          --violet: #8b5cf6;
  --ok: #22c55e;            --warn: #eab308;       --danger: #ef4444;
  --radius: 14px;           --radius-sm: 10px;
  --focus: 0 0 0 3px rgba(34, 211, 238, .35);
  --font-display: 'Space Grotesk', Inter, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
}
html[data-theme="light"] {
  --bg: #f4f6fb; --bg-2: #eef1f8; --panel: rgba(255,255,255,.86); --panel-2: #f8fafc; --panel-solid: #fff;
  --line: rgba(15,23,42,.09); --line-strong: rgba(15,23,42,.16);
  --text: #0f172a; --text-2: #475569; --text-3: #64748b; --brand: #4f46e5; --brand-2: #4338ca; --accent2: #0891b2;
}

body { font-family: Inter, system-ui, sans-serif; background: var(--bg); }

/* ── Fondo ambiental ── */
#bg-fx { position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(900px 500px at 85% -10%, rgba(99,102,241,.14), transparent 60%),
    radial-gradient(700px 420px at -10% 30%, rgba(34,211,238,.09), transparent 55%),
    radial-gradient(600px 500px at 50% 110%, rgba(240,180,41,.05), transparent 60%); }
#bg-fx::after { content: ''; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(148,163,184,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(148,163,184,.035) 1px, transparent 1px);
  background-size: 44px 44px; mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black 30%, transparent 75%); }
html[data-theme="light"] #bg-fx { opacity: .35; }
#app { position: relative; z-index: 1; }

/* ── Tipografía ── */
.font-display, h1.font-display, .welcome-hero h1, .hdr-crumbs .crumb-cur, .sb-brand-name, .mod-area-head h2, .onb h2 { font-family: var(--font-display) !important; letter-spacing: -.01em; }
.font-mono, .folio, code, .kbd { font-family: var(--font-mono); }
.text-electric { color: #818cf8 !important; }
.grad-text { background: linear-gradient(92deg, #a5b4fc, #67e8f9 70%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.eyebrow { font-size: .66rem; text-transform: uppercase; letter-spacing: .16em; color: var(--text-2); font-weight: 600; }

/* ── Encabezado de página estilo Supra1: eyebrow (área › sección) + título display ── */
.page-head { align-items: flex-end !important; margin-bottom: 1.5rem !important; }
.page-head h1 { font-size: 1.6rem !important; font-weight: 700 !important; line-height: 1.15; }
@media (min-width: 1024px) { .page-head h1 { font-size: 1.85rem !important; } }
.page-head .page-eyebrow { display: block; margin-bottom: .25rem; }
.page-head .page-eyebrow i { color: var(--brand-2); margin-right: .35rem; }

/* ── Superficies glass ── */
.sgm-card, .today-counter, .mod-card, .ntf-item, .sla-stat, .cc-chan-card, .quick-tile {
  background: var(--panel) !important; border: 1px solid var(--line) !important;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(255,255,255,.03) inset, 0 10px 30px -12px rgba(0,0,0,.5);
}
.sgm-card { border-radius: var(--radius); position: relative; }
.sgm-card::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 1px; border-radius: var(--radius) var(--radius) 0 0; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(99,102,241,.45), rgba(34,211,238,.45), transparent); opacity: .7; }
.sgm-card:hover, .mod-card:hover, .today-counter:hover { border-color: rgba(99,102,241,.32) !important; }
html[data-theme="light"] .sgm-card, html[data-theme="light"] .mod-card { box-shadow: 0 8px 24px -14px rgba(15,23,42,.18); }

/* ── KPI: cifra en Space Grotesk tabular ── */
.sgm-card .text-2xl.font-display, .today-counter .tc-v, .sla-stat b, .cc-chan-n { font-family: var(--font-display) !important; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }

/* ── Botones ── */
.sgm-btn { border-radius: var(--radius-sm); font-weight: 600; transition: transform .12s, box-shadow .15s, filter .15s; }
.sgm-btn:active { transform: scale(.97); }
.sgm-btn-primary { background: linear-gradient(135deg, #6366f1, #4f46e5 60%) !important; color: #fff !important; box-shadow: 0 6px 18px -6px rgba(99,102,241,.55); border-color: transparent !important; }
.sgm-btn-primary:hover { box-shadow: 0 8px 24px -6px rgba(99,102,241,.75); filter: brightness(1.06); }
.sgm-btn-ghost { background: rgba(148,163,184,.06) !important; border: 1px solid var(--line-strong) !important; color: #cbd5e1; }
.sgm-btn-ghost:hover { background: rgba(148,163,184,.12) !important; color: #fff; }
html[data-theme="light"] .sgm-btn-ghost { color: var(--text-2); }
.sgm-btn-danger { background: linear-gradient(135deg, #ef4444, #b91c1c) !important; color: #fff !important; }

/* ── Entradas ── */
.sgm-input { background: rgba(7,11,20,.7) !important; border: 1px solid var(--line-strong) !important; border-radius: var(--radius-sm) !important; color: var(--text); }
.sgm-input:focus { border-color: var(--brand) !important; box-shadow: 0 0 0 3px rgba(99,102,241,.15) !important; }
html[data-theme="light"] .sgm-input { background: #fff !important; }

/* ── Tablas «data» ── */
.sgm-table th { font-size: .64rem !important; letter-spacing: .1em !important; color: var(--text-3) !important; background: rgba(13,20,38,.92) !important; backdrop-filter: blur(6px); border-bottom: 1px solid var(--line-strong) !important; }
html[data-theme="light"] .sgm-table th { background: #f1f5f9 !important; }
.sgm-table tbody tr:hover td { background: rgba(99,102,241,.06) !important; }

/* ── Badges con borde (estilo Supra1) ── */
.sgm-badge { border: 1px solid transparent; border-radius: 9999px; font-weight: 600; }
.badge-danger { background: rgba(239,68,68,.14) !important; color: #fca5a5 !important; border-color: rgba(239,68,68,.35) !important; }
.badge-warn { background: rgba(234,179,8,.13) !important; color: #fde047 !important; border-color: rgba(234,179,8,.3) !important; }
.badge-ok { background: rgba(34,197,94,.12) !important; color: #86efac !important; border-color: rgba(34,197,94,.28) !important; }
.badge-info { background: rgba(99,102,241,.14) !important; color: #c7d2fe !important; border-color: rgba(99,102,241,.32) !important; }
.badge-violet { background: rgba(139,92,246,.14) !important; color: #ddd6fe !important; border-color: rgba(139,92,246,.32) !important; }
.badge-muted { background: rgba(100,116,139,.15) !important; color: #cbd5e1 !important; border-color: rgba(100,116,139,.3) !important; }

/* ── Navegación lateral ── */
.shell-sidebar { background: rgba(9,14,28,.82) !important; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
html[data-theme="light"] .shell-sidebar { background: rgba(255,255,255,.9) !important; }
.sb-brand-logo { background: linear-gradient(135deg, rgba(99,102,241,.35), rgba(34,211,238,.2)) !important; border: 1px solid rgba(99,102,241,.45); box-shadow: 0 10px 30px -10px rgba(99,102,241,.6) !important; border-radius: 12px !important; }
.sb-brand-name em { background: linear-gradient(92deg, #a5b4fc, #67e8f9 70%); -webkit-background-clip: text; background-clip: text; color: transparent !important; }
.sb-brand-name b { color: var(--gold); }
.nav-item { border-radius: 10px; position: relative; border: 1px solid transparent; }
.nav-item.active { color: #fff !important; background: linear-gradient(90deg, rgba(99,102,241,.22), rgba(34,211,238,.08)) !important; border-color: rgba(99,102,241,.3); box-shadow: none !important; }
.nav-item.active::before { content: ''; position: absolute; left: -2px; top: 20%; bottom: 20%; width: 3px; border-radius: 3px; background: linear-gradient(180deg, var(--brand), var(--accent2)); }
html[data-theme="light"] .nav-item.active { color: var(--brand-2) !important; }
.nav-area { color: #a5b4fc !important; }

/* ── Cabecera ── */
.shell-header { background: rgba(7,11,20,.72) !important; backdrop-filter: blur(14px); }
html[data-theme="light"] .shell-header { background: rgba(244,246,251,.85) !important; }

/* ── Aviso permanente (de Supra1) ── */
.cc-disclaimer { display: flex; align-items: center; gap: .6rem; margin-bottom: 1rem; padding: .5rem .9rem; border-radius: var(--radius-sm); font-size: .74rem;
  background: linear-gradient(90deg, rgba(240,180,41,.09), rgba(240,180,41,.03)); border: 1px solid rgba(240,180,41,.26); color: #fcd34d; }
html[data-theme="light"] .cc-disclaimer { color: #92400e; }

/* ── Notas de política ── */
.cc-note { display: flex; align-items: flex-start; gap: .6rem; padding: .6rem .95rem; border-radius: var(--radius-sm); font-size: .76rem; line-height: 1.45; }
.cc-note i { margin-top: .15rem; }
.cc-note.is-info { background: rgba(34,211,238,.07); border: 1px solid rgba(34,211,238,.22); color: #a5f3fc; }
.cc-note.is-ok { background: rgba(34,197,94,.07); border: 1px solid rgba(34,197,94,.22); color: #bbf7d0; }
.cc-note.is-danger { background: rgba(239,68,68,.07); border: 1px solid rgba(239,68,68,.22); color: #fecaca; }
html[data-theme="light"] .cc-note.is-info { color: #155e75; } html[data-theme="light"] .cc-note.is-ok { color: #166534; } html[data-theme="light"] .cc-note.is-danger { color: #991b1b; }

/* ── Bienvenida y héroe del Centro de mando ── */
.welcome-hero { background: linear-gradient(120deg, rgba(99,102,241,.18), rgba(34,211,238,.08) 60%, rgba(240,180,41,.06)) !important; border: 1px solid rgba(99,102,241,.28) !important; position: relative; overflow: hidden; }
.welcome-hero::after { content: ''; position: absolute; inset: 0 0 auto 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(99,102,241,.7), rgba(34,211,238,.7), transparent); }
.welcome-hero h1 { font-size: 1.45rem !important; font-weight: 700 !important; }
.onb-ico { background: linear-gradient(135deg, #6366f1, #22d3ee) !important; }

/* ── Modal ── */
.modal-backdrop { background: rgba(3,6,12,.72) !important; backdrop-filter: blur(6px); }
.modal-panel { background: rgba(16,24,40,.96) !important; border: 1px solid var(--line-strong) !important; border-radius: 18px !important; box-shadow: 0 30px 80px -20px rgba(0,0,0,.7) !important; }
html[data-theme="light"] .modal-panel { background: #fff !important; }

/* ── Pestañas y progreso con gradiente ── */
.sgm-tab.is-active { background: linear-gradient(135deg, rgba(99,102,241,.28), rgba(34,211,238,.1)) !important; color: #fff !important; }
html[data-theme="light"] .sgm-tab.is-active { color: var(--brand-2) !important; }
.sgm-progress-bar:not(.is-ok):not(.is-warn):not(.is-danger) { background: linear-gradient(90deg, var(--brand), var(--accent2)); }

/* ── Scrollbars ── */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: rgba(148,163,184,.22); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: rgba(148,163,184,.35); }

/* ── Login con borde degradado ── */
.login-card, .auth-card { position: relative; }

/* =====================================================================
   Componentes de los módulos de Supra1 (views-supra.js)
   ===================================================================== */
.cc-table td { font-size: .82rem; }
.cc-chan { display: inline-grid; place-items: center; width: 1.7rem; height: 1.7rem; margin-right: .2rem; border-radius: 8px; font-size: .75rem; background: rgba(34,197,94,.12); color: #86efac; border: 1px solid rgba(34,197,94,.28); }
.cc-pill { display: inline-flex; align-items: center; gap: .35rem; padding: .15rem .55rem; border-radius: 99px; font-size: .7rem; font-weight: 600; background: rgba(234,179,8,.12); color: #fde047; border: 1px solid rgba(234,179,8,.28); }
.cc-consent { display: flex; align-items: center; gap: .6rem; padding: .55rem .7rem; border-radius: var(--radius-sm); background: var(--panel-2); border: 1px solid var(--line); font-size: .76rem; color: var(--text); }
.cc-consent > i { color: #86efac; width: 1rem; text-align: center; }
.cc-consent.is-off { opacity: .55; } .cc-consent.is-off > i { color: var(--text-3); }
.cc-chan-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .6rem; }
.cc-chan-card { text-align: left; padding: .8rem .9rem; border-radius: var(--radius); display: flex; flex-direction: column; gap: .25rem; transition: transform .15s, border-color .15s; }
.cc-chan-card:hover { transform: translateY(-2px); }
.cc-chan-card.is-on { border-color: var(--brand) !important; background: linear-gradient(135deg, rgba(99,102,241,.2), rgba(34,211,238,.07)) !important; }
.cc-chan-h { display: flex; align-items: center; gap: .45rem; font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--text-2); }
.cc-chan-h i { color: var(--accent2); }
.cc-chan-n { font-size: 1.5rem; font-weight: 700; color: var(--text); line-height: 1.1; }
.cc-chan-s { font-size: .64rem; color: var(--text-3); }
.cc-task { display: flex; align-items: center; gap: .6rem; padding: .65rem .75rem; border-radius: var(--radius-sm); background: var(--panel-2); border: 1px solid var(--line); font-size: .8rem; color: var(--text); }
.cc-task.is-done { opacity: .55; }
.cc-feed { list-style: none; padding: 0; margin: 0; }
.cc-feed-item { position: relative; padding: 0 0 .9rem 1.4rem; font-size: .78rem; color: var(--text); }
.cc-feed-item::before { content: ''; position: absolute; left: .3rem; top: .4rem; width: 8px; height: 8px; border-radius: 50%; background: var(--accent2); box-shadow: 0 0 8px rgba(34,211,238,.6); }
.cc-feed-item::after { content: ''; position: absolute; left: .53rem; top: 1rem; bottom: 0; width: 1px; background: var(--line-strong); }
.cc-feed-item:last-child::after { display: none; }
.cc-team { display: flex; align-items: center; gap: .6rem; padding: .55rem .7rem; border-radius: var(--radius-sm); background: var(--panel-2); border: 1px solid var(--line); font-size: .78rem; color: var(--text); }
.cc-team-ico { width: 2rem; height: 2rem; flex: none; display: grid; place-items: center; border-radius: 10px; background: linear-gradient(135deg, rgba(99,102,241,.25), rgba(34,211,238,.1)); color: var(--accent2); font-size: .78rem; }

/* ── Accesibilidad (WCAG 2.2, de Supra1) ── */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--accent2); outline-offset: 2px; border-radius: 6px; box-shadow: none; }
@media (pointer: coarse) { .sgm-btn, .nav-item, .mnav-btn { min-height: 44px; } }

/* ── Estudio Creativo ── */
.cr-flow { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.cr-step { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .65rem; border-radius: 99px; font-size: .7rem; font-weight: 600; color: var(--text-2); background: var(--panel); border: 1px solid var(--line); }
.cr-step b { font-family: var(--font-display); color: var(--text); }
.cr-sep { font-size: .55rem; color: var(--text-3); }
.cr-board { display: grid; grid-template-columns: repeat(6, minmax(190px, 1fr)); gap: .6rem; overflow-x: auto; padding-bottom: .5rem; }
.cr-col { background: rgba(13,20,38,.45); border: 1px solid var(--line); border-radius: var(--radius); padding: .55rem; min-height: 160px; display: flex; flex-direction: column; gap: .45rem; }
html[data-theme="light"] .cr-col { background: rgba(241,245,249,.8); }
.cr-col-h { display: flex; justify-content: space-between; align-items: center; font-size: .7rem; color: var(--text-3); padding: 0 .1rem .2rem; }
.cr-card { padding: .6rem .65rem; border-radius: var(--radius-sm); background: var(--panel); border: 1px solid var(--line); font-size: .78rem; color: var(--text); cursor: pointer; transition: transform .12s, border-color .15s; }
.cr-card:hover { transform: translateY(-2px); border-color: rgba(99,102,241,.4); }
.cr-brief { white-space: pre-wrap; font-size: .8rem; line-height: 1.55; color: var(--text); background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .75rem; max-height: 260px; overflow-y: auto; }
.cr-mini-flow { display: flex; flex-wrap: wrap; gap: .25rem; }
.cr-mini-flow span { font-size: .62rem; padding: .15rem .5rem; border-radius: 99px; background: rgba(148,163,184,.1); color: var(--text-3); }
.cr-mini-flow span.is-done { background: rgba(34,197,94,.14); color: #86efac; }
.cr-mini-flow span.is-cur { background: linear-gradient(135deg, var(--brand), var(--accent2)); color: #fff; }