/* ═══════════════════════════════════════════════════════════
   SENTRION DESIGN SYSTEM  ·  entrada única
   ───────────────────────────────────────────────────────────
   Fuente ÚNICA de tokens + componentes para TODA la web.
   Una página consume el diseño con un solo <link> a este archivo:

       <link rel="stylesheet" href="/design/design-system.css">

   Portado del portal de referencia (SITRAQ-V2 · ds-v2.css +
   shell de portal_v2): dark control-room OLED, near-black,
   Urbanist + Inter self-hosted, acentos teal/lima. Sin build,
   sin CDN, sin estilos inline por página (esa es la lección).

   Estructura del archivo:
     1) @import fuentes + tokens
     2) reset + base + scrollbar
     3) app-shell: sidebar · topbar · main · page
     4) componentes: kpi · card · btn · badge · table · input ·
        filter-bar · tab · alert · status · role · divider
     5) utilidades
   ═══════════════════════════════════════════════════════════ */

@import url('fonts.css');
@import url('tokens.css');

/* ── 2 · RESET + BASE ───────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { color-scheme: dark; }

body {
  min-height: 100vh;
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.5;
  background: var(--bg);
  color: var(--t1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

button, input, select, textarea { font-family: inherit; }
button { cursor: pointer; }
a { color: inherit; }

::-webkit-scrollbar        { width: 4px; height: 4px; }
::-webkit-scrollbar-track  { background: transparent; }
::-webkit-scrollbar-thumb  { background: rgba(255,255,255,.10); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: var(--primary); }

/* ── 3 · APP SHELL ──────────────────────────────────────────── */
.ds-shell { display: flex; height: 100vh; overflow: hidden; }

/* Sidebar: rail de 60px que se expande a 240px con hover o .expanded */
.ds-sidebar {
  width: var(--sb-w);
  flex-shrink: 0;
  background: var(--s);
  border-right: 1px solid var(--b);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 400;
  transition: width .22s cubic-bezier(.4,0,.2,1);
}
.ds-sidebar.expanded,
.ds-sidebar:hover { width: var(--sb-exp); }

.ds-sidebar__brand {
  height: var(--topbar-h);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 17px;
  border-bottom: 1px solid var(--b);
  overflow: hidden;
  white-space: nowrap;
}
.ds-sidebar__logo { width: 26px; height: 26px; flex-shrink: 0; }
.ds-sidebar__name {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .04em;
  opacity: 0;
  transition: opacity .15s .1s;
}
.ds-sidebar__name span { color: var(--cyan); }
.ds-sidebar.expanded .ds-sidebar__name,
.ds-sidebar:hover .ds-sidebar__name { opacity: 1; }

.ds-sidebar__user {
  padding: 12px 14px;
  border-bottom: 1px solid var(--b);
  display: flex;
  align-items: center;
  gap: 10px;
  overflow: hidden;
}
.ds-sidebar__avatar {
  width: 32px; height: 32px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--primary);
  border: 1.5px solid rgba(26,92,240,.5);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ds-sidebar__uinfo { opacity: 0; transition: opacity .15s .1s; overflow: hidden; white-space: nowrap; }
.ds-sidebar__uname { font-size: 12px; font-weight: 600; color: var(--t1); }
.ds-sidebar__urole { font-size: 9.5px; color: var(--t3); text-transform: uppercase; letter-spacing: .1em; margin-top: 1px; }
.ds-sidebar.expanded .ds-sidebar__uinfo,
.ds-sidebar:hover .ds-sidebar__uinfo { opacity: 1; }

.ds-sidebar__nav { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 8px; }
.ds-sidebar__section {
  height: 30px;
  padding: 12px 9px 5px;
  font-size: 8.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--t3);
  white-space: nowrap;
  overflow: hidden;
  opacity: 0;
  transition: opacity .12s;
}
.ds-sidebar.expanded .ds-sidebar__section,
.ds-sidebar:hover .ds-sidebar__section { opacity: 1; }
.ds-sidebar__footer { padding: 10px 8px; border-top: 1px solid var(--b); }

.ds-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px;
  border: none;
  border-radius: var(--radius);
  background: none;
  color: var(--t2);
  font-size: 12.5px;
  font-weight: 500;
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  transition: background .15s, color .15s;
}
.ds-nav-item:hover { background: var(--s2); color: var(--t1); }
.ds-nav-item.active { background: var(--primary-g); color: var(--t1); border: 1px solid rgba(26,92,240,.3); }
.ds-nav-item.active .ds-nav-item__icon { color: var(--cyan); }
.ds-nav-item__icon { width: 20px; height: 20px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.ds-nav-item__icon svg { width: 18px; height: 18px; }
.ds-nav-item__label { flex: 1; opacity: 0; transition: opacity .15s .08s; }
.ds-sidebar.expanded .ds-nav-item__label,
.ds-sidebar:hover .ds-nav-item__label { opacity: 1; }
.ds-nav-item__badge {
  margin-left: auto;
  padding: 1px 5px;
  border-radius: 100px;
  font-size: 9px;
  font-weight: 700;
  opacity: 0;
  transition: opacity .15s .08s;
}
.ds-nav-item__badge--warn   { background: rgba(250,204,21,.2); color: var(--yellow); }
.ds-nav-item__badge--danger { background: rgba(244,63,94,.2);  color: var(--red); }
.ds-sidebar.expanded .ds-nav-item__badge,
.ds-sidebar:hover .ds-nav-item__badge { opacity: 1; }

/* Main + topbar */
.ds-main { flex: 1; display: flex; flex-direction: column; overflow: hidden; background: var(--bg); }

.ds-topbar {
  height: var(--topbar-h);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 20px;
  border-bottom: 1px solid var(--b);
  background: var(--s);
}
.ds-topbar__title { flex: 1; font-size: 13px; font-weight: 600; color: var(--t1); }
.ds-topbar__clock { font-family: var(--font-mono); font-size: 12px; color: var(--t3); letter-spacing: .04em; }
.ds-topbar__sep { width: 1px; height: 22px; background: var(--b); flex-shrink: 0; }

/* Gutter horizontal compartido de toda página (ADR 0016/0020): el contenido nunca
   toca el borde. Es responsive —crece en pantallas anchas para que el contenido no
   quede pegado a los bordes ni se despliegue de lado a lado—. Las barras/tablas/paneles
   heredan este margen vía `--page-gutter`; el hero rompe a full-bleed (abajo) para que
   su divisor siga a todo el ancho. */
.ds-page { --page-gutter: clamp(24px, 3.5vw, 56px); flex: 1; overflow-y: auto; display: flex; flex-direction: column; padding: 0 var(--page-gutter) 28px; }

.ds-page-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding: 20px var(--page-gutter) 16px;
  margin: 0 calc(-1 * var(--page-gutter)) 0;   /* cancela el gutter del ds-page: el divisor va a todo el ancho */
  border-bottom: 1px solid var(--b);
  flex-shrink: 0;
}
.ds-page-title { font-family: var(--font-display); font-size: 32px; font-weight: 800; letter-spacing: -.03em; line-height: 1.05; }
.ds-page-subtitle { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 11px; color: var(--t3); }

/* ── 4 · KPI ────────────────────────────────────────────────── */
.ds-kpi-strip { display: flex; gap: 1px; border: 1px solid var(--b); border-radius: var(--radius-lg); overflow: hidden; }
.ds-kpi {
  flex: 1;
  min-width: 130px;
  padding: 14px 20px;
  background: var(--s);
  display: flex;
  flex-direction: column;
  gap: 3px;
  position: relative;
  overflow: hidden;
}
.ds-kpi + .ds-kpi { border-left: 1px solid var(--b); }
.ds-kpi::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; opacity: .7; background: linear-gradient(90deg, var(--primary), transparent); }
.ds-kpi--lime::after   { background: linear-gradient(90deg, var(--lime), transparent); }
.ds-kpi--cyan::after   { background: linear-gradient(90deg, var(--cyan), transparent); }
.ds-kpi--danger::after { background: linear-gradient(90deg, var(--red),  transparent); }
.ds-kpi--blue::after   { background: linear-gradient(90deg, var(--blue), transparent); }
.ds-kpi__label { font-size: 9.5px; font-weight: 500; text-transform: uppercase; letter-spacing: .08em; color: var(--t3); }
.ds-kpi__value { font-size: 28px; font-weight: 800; letter-spacing: -.04em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.ds-kpi__sub { font-size: 9.5px; color: var(--t3); }

/* ── 4 · CARD ───────────────────────────────────────────────── */
.ds-card { background: var(--s); border: 1px solid var(--b); border-radius: var(--radius-lg); overflow: hidden; }
.ds-card__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; padding: 14px 16px 10px; border-bottom: 1px solid var(--b); }
.ds-card__title { font-size: 12.5px; font-weight: 600; color: var(--t1); }
.ds-card__subtitle { font-size: 10.5px; color: var(--t3); margin-top: 2px; }
.ds-card__actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.ds-card__body { padding: 16px; }

/* ── 4 · BUTTON ─────────────────────────────────────────────── */
.ds-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
}
.ds-btn svg { width: 15px; height: 15px; flex-shrink: 0; }
.ds-btn--primary { background: var(--primary); color: #fff; }
.ds-btn--primary:hover { background: #1646C4; box-shadow: var(--glow-blue); }
.ds-btn--ghost { background: transparent; color: var(--t2); border-color: var(--b); }
.ds-btn--ghost:hover { background: var(--s2); color: var(--t1); }
.ds-btn--danger { background: rgba(244,63,94,.12); color: var(--red); border-color: rgba(244,63,94,.2); }
.ds-btn--danger:hover { background: rgba(244,63,94,.2); box-shadow: var(--glow-red); }
.ds-btn--sm { padding: 5px 11px; font-size: 11px; }

/* ── 4 · BADGE ──────────────────────────────────────────────── */
.ds-badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 100px; font-size: 10px; font-weight: 600; white-space: nowrap; }
.ds-badge::before { content: ''; width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; background: currentColor; }
.ds-badge--ok      { background: rgba(74,222,128,.12); color: #4ADE80; border: 1px solid rgba(74,222,128,.2); }
.ds-badge--danger  { background: rgba(244,63,94,.12);  color: #F43F5E; border: 1px solid rgba(244,63,94,.2); }
.ds-badge--warn    { background: rgba(250,204,21,.12); color: #FACC15; border: 1px solid rgba(250,204,21,.2); }
.ds-badge--active  { background: rgba(0,217,192,.12);  color: var(--cyan); border: 1px solid rgba(0,217,192,.2); }
.ds-badge--info    { background: rgba(91,155,248,.12); color: var(--blue); border: 1px solid rgba(91,155,248,.2); }
.ds-badge--neutral { background: rgba(240,242,245,.06); color: var(--t2); border: 1px solid var(--b); }

/* ── 4 · TABLE ──────────────────────────────────────────────── */
.ds-table-wrap { overflow-x: auto; }
.ds-table { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.ds-table th { padding: 8px 12px; text-align: left; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--t3); border-bottom: 1px solid var(--b); white-space: nowrap; }
.ds-table td { padding: 9px 12px; color: var(--t2); border-bottom: 1px solid var(--b2); vertical-align: middle; }
.ds-table tr:last-child td { border-bottom: none; }
.ds-table tbody tr:hover td { background: var(--s2); color: var(--t1); }
.ds-table td.primary { color: var(--t1); font-weight: 500; }

/* ── 4 · INPUT + FILTER BAR ─────────────────────────────────── */
.ds-input {
  width: 100%;
  background: var(--s2);
  border: 1px solid var(--b);
  border-radius: var(--radius);
  padding: 7px 11px;
  color: var(--t1);
  font-size: 12px;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.ds-input::placeholder { color: var(--t3); }
.ds-input:focus { border-color: rgba(26,92,240,.5); box-shadow: 0 0 0 3px rgba(26,92,240,.08); }
select.ds-input { cursor: pointer; }

.ds-filter-bar { display: flex; align-items: center; gap: 10px; padding: 10px 24px; border-bottom: 1px solid var(--b); flex-wrap: wrap; flex-shrink: 0; }
.ds-filter-bar label { font-size: 10.5px; color: var(--t3); white-space: nowrap; }
.ds-filter-bar__search { position: relative; flex: 1; min-width: 180px; max-width: 300px; }
.ds-filter-bar__search svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--t3); pointer-events: none; }
.ds-filter-bar__search .ds-input { padding-left: 34px; }

/* ── 4 · TAB ────────────────────────────────────────────────── */
.ds-tab { padding: 4px 10px; border: none; border-radius: var(--radius-sm); background: none; color: var(--t3); font-size: 10.5px; font-weight: 500; transition: background .15s, color .15s; }
.ds-tab.on, .ds-tab:hover { background: var(--s3); color: var(--t1); }

/* ── 4 · ALERT ──────────────────────────────────────────────── */
.ds-alert { display: flex; align-items: flex-start; gap: 12px; padding: 14px 18px; border-radius: var(--radius-md); font-size: 13px; line-height: 1.5; margin-bottom: 16px; }
.ds-alert svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }
.ds-alert--danger  { background: rgba(255,111,110,.10); color: #fca5a5; border: 1px solid rgba(255,111,110,.25); }
.ds-alert--warn    { background: rgba(245,200,66,.10);  color: #fcd34d; border: 1px solid rgba(245,200,66,.25); }
.ds-alert--ok      { background: rgba(169,235,100,.10); color: #bef264; border: 1px solid rgba(169,235,100,.25); }
.ds-alert--info    { background: rgba(91,155,248,.10);  color: #93c5fd; border: 1px solid rgba(91,155,248,.25); }

/* ── 4 · STATUS PILL (live) ─────────────────────────────────── */
.ds-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: var(--t2); }
.ds-status__dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; background: var(--t3); }
.ds-status--active .ds-status__dot { background: var(--lime); box-shadow: 0 0 8px rgba(169,235,100,.6); animation: ds-pulse 2s infinite; }
.ds-status--down .ds-status__dot { background: var(--red); }
@keyframes ds-pulse { 0%,100% { box-shadow: 0 0 4px rgba(169,235,100,.6); } 50% { box-shadow: 0 0 12px rgba(169,235,100,.9); } }

/* ── 4 · ROLE ───────────────────────────────────────────────── */
.ds-role { display: inline-block; padding: 2px 8px; border-radius: var(--radius-sm); font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.ds-role--admin  { background: rgba(26,92,240,.15);  color: var(--cyan);  border: 1px solid rgba(26,92,240,.35); }
.ds-role--sup    { background: rgba(168,85,247,.12);  color: #c084fc;      border: 1px solid rgba(168,85,247,.25); }
.ds-role--oper   { background: rgba(245,200,66,.12);  color: var(--yellow);border: 1px solid rgba(245,200,66,.25); }
.ds-role--reader { background: rgba(240,242,245,.06); color: var(--t2);    border: 1px solid var(--b); }

/* ── 4 · DIVIDER ────────────────────────────────────────────── */
.ds-divider { height: 1px; border: none; background: var(--b); margin: 0; }

/* ── 5 · UTILIDADES ─────────────────────────────────────────── */
.ds-mono { font-family: var(--font-mono); }
.ds-tabular { font-variant-numeric: tabular-nums; }
.ds-text-muted { color: var(--t3); }
.ds-text-cyan  { color: var(--cyan); }
.ds-text-lime  { color: var(--lime); }
.ds-text-red   { color: var(--red); }