/* SIGDA V92 · FUNDACION · instrumento de registro.
   1. Ningun color de texto baja de 4.5:1 sobre su fondo REAL. V91
      muestreaba PNGs y dejo faint 2.71, warn 2.36, ok 3.14.
   2. La escala arranca en 11px. V91 midio pixeles sobre capturas y
      aterrizo en cuerpos de 8.5 y 9px.
   3. No se declara una fuente que no se sirve: V91 pedia Inter sin
      cargarla y el producto cambiaba en cada maquina.
   4. Cifras tabulares: folios y horas se comparan en columna.
   Navy 800, acento, fondo y superficie son contrato: intactos. */

:root {
  /* COLOR · azul marino institucional */
  --sg-navy-900: #001238;
  --sg-navy-800: #00173f;
  --sg-navy-700: #062455;
  --sg-navy-600: #173c68;

  --sg-accent: #0055fc;
  --sg-accent-strong: #003fc4;
  --sg-accent-soft: #e8f0ff;

  --sg-bg: #fafbfd;
  --sg-surface: #ffffff;
  --sg-surface-alt: #f4f7fb;
  --sg-surface-sunken: #eef2f8;
  --sg-border: #e2e8f1;
  --sg-border-strong: #c6d0e0;
  /* Un borde de control es informacion, no adorno: 3.19:1 sobre
     blanco. Campos, selects y botones secundarios lo usan. */
  --sg-border-control: #8191ad;
  --sg-rule: #d7dfeb;

  --sg-text: #0a1c3f;
  --sg-text-muted: #55647e;
  --sg-text-faint: #68758c;
  --sg-text-invert: #ffffff;

  /* ESTADO · medidos sobre su propio fondo suave, no sobre blanco
     teorico. Ninguno decora: cada uno significa una cosa. */
  --sg-ok: #077a52;
  --sg-ok-soft: #e6f4ee;
  --sg-warn: #8a5300;
  --sg-warn-soft: #fdf0dd;
  --sg-danger: #c0102b;
  --sg-danger-soft: #fdeaec;
  --sg-info: #5334c4;
  --sg-info-soft: #eee9fb;

  /* TIPOGRAFIA */
  --sg-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI Variable Text",
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --sg-fs-4xl: 30px;
  --sg-fs-3xl: 24px;
  --sg-fs-2xl: 19px;
  --sg-fs-xl: 16px;
  --sg-fs-lg: 14px;
  --sg-fs-md: 13px;
  --sg-fs-sm: 12px;
  --sg-fs-xs: 11px;
  /* El suelo tipografico. Era 9px y se consumia en veinte sitios; al
     subir el token subieron los veinte de una vez. */
  --sg-fs-2xs: 11px;

  --sg-fw-regular: 400;
  --sg-fw-medium: 500;
  --sg-fw-semibold: 600;
  --sg-fw-bold: 650;
  --sg-fw-black: 700;

  --sg-lh-tight: 1.25;
  --sg-lh-normal: 1.5;
  --sg-ls-caps: .06em;
  --sg-ls-tight: -.011em;

  /* SPACING · base 4 */
  --sg-1: 4px;
  --sg-2: 8px;
  --sg-3: 12px;
  --sg-4: 16px;
  --sg-5: 20px;
  --sg-6: 24px;
  --sg-8: 32px;
  --sg-10: 40px;

  /* Alturas de control. 36px en escritorio denso, 44px al alcance del
     dedo; el bloque responsive las sube, no las inventa. */
  --sg-control: 36px;
  --sg-control-sm: 30px;

  /* RADIOS · un instrumento se lee mas preciso con la esquina corta */
  --sg-radius-sm: 4px;
  --sg-radius: 6px;
  --sg-radius-lg: 10px;
  --sg-radius-pill: 999px;

  /* ELEVACION · el papel institucional no flota. La jerarquia la
     llevan el borde y el tono de superficie; la sombra solo aparece
     cuando algo se despega de verdad -menu, modal, popover-. */
  --sg-shadow-sm: 0 1px 0 rgba(10, 28, 63, .04);
  --sg-shadow: 0 1px 2px rgba(10, 28, 63, .06), 0 8px 20px -12px rgba(10, 28, 63, .18);
  --sg-shadow-lg: 0 24px 48px -24px rgba(10, 28, 63, .28);

  --sg-focus-ring: 0 0 0 3px rgba(0, 85, 252, .28);
  --sg-transition: 120ms cubic-bezier(.2, .7, .3, 1);
}

/* Fondo y color de texto son lo unico que no puede pertenecer a una
   pantalla: repartidos por hoja producian un flash al navegar. La
   tipografia la aplica el shell (gate H3). Las cifras si son
   globales; la prosa corrida lo desactiva abajo. */
body {
  background: var(--sg-bg);
  color: var(--sg-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

p, .sg-page-sub, .sg-card-sub, .sg-note { font-variant-numeric: normal; }

/* RC4 · el suelo de 11px tambien vale para <small>.
   El navegador le aplica 0.8em por defecto: sobre el cuerpo de 13.5px
   salian 10.83px, y ahi viajan folios, correos y telefonos —justo lo que
   hay que poder leer—. Ninguna hoja lo declaraba, asi que el suelo se
   respetaba en todo el producto MENOS en el unico sitio donde nadie
   habia escrito una regla. Medido en /participantes, /empresas,
   /programas, /metricas y los portales. */
small { font-size: var(--sg-fs-xs); }

@media (prefers-reduced-motion: reduce) {
  :root { --sg-transition: 0ms; }
}
/* SIGDA V92 · COMPONENTES BASE
   Una decision por pieza. V91 definia boton, campo, tarjeta, tabla y
   badge DOS veces -la base y una "calibracion final" que la
   sobrescribia mas abajo-, asi que el valor vigente no era el que se
   leia. Aqui cada componente se declara una sola vez.
   Borde y tono de superficie llevan la jerarquia; la sombra queda
   para lo que se despega de verdad. Sin gradiente, glow ni barra de
   color al costado. */

/* FOCO · uno solo, visible, y nunca se apaga */
.sg-btn:focus-visible,
.auth-field input:focus-visible,
.sg-input:focus-visible,
.sg-select:focus-visible,
.sg-textarea:focus-visible,
.sg-tab:focus-visible,
.sg-nav-link:focus-visible,
.sg-card a:focus-visible {
  outline: 2px solid var(--sg-accent);
  outline-offset: 2px;
  box-shadow: var(--sg-focus-ring);
}

/* BOTONES */
/* V92-B · las clases historicas adoptan el boton del sistema */
.sg-btn,
button.groups-btn,
.groups-tools-actions summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sg-2);
  min-height: var(--sg-control);
  padding: 0 var(--sg-4);
  border: 1px solid transparent;
  border-radius: var(--sg-radius);
  background: var(--sg-surface);
  color: var(--sg-text);
  font-size: var(--sg-fs-md);
  font-weight: var(--sg-fw-semibold);
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--sg-transition), border-color var(--sg-transition);
}

.sg-btn[disabled],
.sg-btn[aria-disabled="true"] {
  opacity: .55;
  cursor: not-allowed;
}

/* La accion primaria se distingue por color y peso, no por brillo. */
.sg-btn--primary,
.sg-btn.primary,
button.groups-btn.primary {
  background: var(--sg-accent);
  border-color: var(--sg-accent);
  color: var(--sg-text-invert);
}
.sg-btn--primary:hover:not([disabled]),
button.groups-btn.primary:hover { background: var(--sg-accent-strong); }

.sg-btn--secondary,
button.groups-btn,
.groups-tools-actions summary {
  background: var(--sg-surface);
  border-color: var(--sg-border-control);
  color: var(--sg-navy-800);
}
.sg-btn--secondary:hover:not([disabled]),
button.groups-btn:not(.primary):hover,
.groups-tools-actions summary:hover { background: var(--sg-accent-soft); }

.sg-btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--sg-navy-700);
}
.sg-btn--ghost:hover:not([disabled]) { background: var(--sg-accent-soft); }
/* RC1 · secondary+ghost: manda el borde de secondary */
.sg-btn--secondary.sg-btn--ghost { border-color: var(--sg-border-control); }

/* Destructivo: sobrio, no alarmista. Solo cancelar y equivalentes. */
.sg-btn--danger {
  background: var(--sg-surface);
  border-color: var(--sg-danger);
  color: var(--sg-danger);
}
.sg-btn--danger:hover:not([disabled]) { background: var(--sg-danger-soft); }

.sg-btn--sm { min-height: var(--sg-control-sm); padding: 0 var(--sg-3); font-size: var(--sg-fs-sm); }
.sg-btn--block { width: 100%; }

/* CAMPOS · el borde de un control es informacion. A 1.22:1 el campo
   anterior no se veia; este cumple el 3:1 de elemento no textual. */
.sg-field { display: flex; flex-direction: column; gap: var(--sg-1); }

.sg-label {
  color: var(--sg-text-muted);
  font-size: var(--sg-fs-sm);
  font-weight: var(--sg-fw-semibold);
  letter-spacing: 0;
}

.auth-field input,
.sg-input,
.sg-select,
.sg-textarea {
  width: 100%;
  min-height: var(--sg-control);
  padding: var(--sg-2) var(--sg-3);
  border: 1px solid var(--sg-border-control);
  border-radius: var(--sg-radius);
  background: var(--sg-surface);
  color: var(--sg-text);
  font-family: var(--sg-font);
  font-size: var(--sg-fs-md);
}
.sg-textarea { min-height: 88px; resize: vertical; }

.auth-field input:hover,
.sg-input:hover,
.sg-select:hover,
.sg-textarea:hover { border-color: var(--sg-navy-600); }

.auth-field input::placeholder,
.sg-input::placeholder,
.sg-textarea::placeholder { color: var(--sg-text-faint); }

.sg-input[aria-invalid="true"],
.sg-select[aria-invalid="true"],
.sg-textarea[aria-invalid="true"] { border-color: var(--sg-danger); }

/* El error se dice con texto, no solo con color: quien no distingue */
.sg-error {
  color: var(--sg-danger);
  font-size: var(--sg-fs-sm);
  font-weight: var(--sg-fw-semibold);
}
.sg-hint { color: var(--sg-text-muted); font-size: var(--sg-fs-sm); }

/* BADGES · versalita de registro. Color fuerte sobre fondo suave;
   los seis pares medidos sobre ESE fondo, no sobre blanco. */
.sg-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sg-1);
  padding: 3px var(--sg-2);
  border-radius: var(--sg-radius-sm);
  font-size: var(--sg-fs-xs);
  font-weight: var(--sg-fw-black);
  letter-spacing: var(--sg-ls-caps);
  text-transform: uppercase;
  white-space: nowrap;
}
.sg-badge--neutral { background: var(--sg-surface-sunken); color: var(--sg-text-muted); }
.sg-badge--ok      { background: var(--sg-ok-soft);        color: var(--sg-ok); }
.sg-badge--warn    { background: var(--sg-warn-soft);      color: var(--sg-warn); }
.sg-badge--danger  { background: var(--sg-danger-soft);    color: var(--sg-danger); }
.sg-badge--info    { background: var(--sg-info-soft);      color: var(--sg-info); }
.sg-badge--accent  { background: var(--sg-accent-soft);    color: var(--sg-accent-strong); }

/* TARJETAS · borde, no sombra. La tarjeta agrupa; no flota. */
.sg-card {
  padding: var(--sg-5);
  border: 1px solid var(--sg-border);
  border-radius: var(--sg-radius);
  background: var(--sg-surface);
}
.sg-card--flush { padding: 0; overflow: hidden; }
.sg-card--raised { box-shadow: var(--sg-shadow); }

.sg-card-head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sg-3);
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--sg-4);
}
.sg-card-title {
  margin: 0;
  color: var(--sg-navy-800);
  font-size: var(--sg-fs-xl);
  font-weight: var(--sg-fw-bold);
  line-height: var(--sg-lh-tight);
  letter-spacing: var(--sg-ls-tight);
}
.sg-card-sub { margin: 0; color: var(--sg-text-muted); font-size: var(--sg-fs-md); }

/* TABLAS · donde SIGDA trabaja. Cabecera fija, regla fina entre
   filas, cifras a la derecha y tabulares. */
.sg-table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--sg-border);
  border-radius: var(--sg-radius);
  background: var(--sg-surface);
}
.sg-table { width: 100%; border-collapse: collapse; font-size: var(--sg-fs-md); }
.sg-table th,
.sg-table td { padding: var(--sg-3) var(--sg-4); text-align: left; vertical-align: middle; }
.sg-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--sg-surface-alt);
  border-bottom: 1px solid var(--sg-border-strong);
  color: var(--sg-text-muted);
  font-size: var(--sg-fs-xs);
  font-weight: var(--sg-fw-black);
  letter-spacing: var(--sg-ls-caps);
  text-transform: uppercase;
}
.sg-table tbody tr + tr td { border-top: 1px solid var(--sg-rule); }
.sg-table tbody tr:hover td { background: var(--sg-surface-alt); }
.sg-table .sg-num { text-align: right; font-variant-numeric: tabular-nums; }

/* SHELL   NAVEGACION */
.sg-shell { min-height: 100vh; background: var(--sg-bg); color: var(--sg-text); }

.sg-header {
  display: flex;
  align-items: center;
  gap: var(--sg-4);
  padding: var(--sg-3) var(--sg-5);
  background: var(--sg-navy-800);
  color: var(--sg-text-invert);
}
.sg-header-brand {
  color: var(--sg-text-invert);
  font-size: var(--sg-fs-lg);
  font-weight: var(--sg-fw-black);
  letter-spacing: var(--sg-ls-caps);
  text-decoration: none;
}
.sg-header-spacer { flex: 1 1 auto; }
.sg-header-meta { color: rgba(255, 255, 255, .78); font-size: var(--sg-fs-md); }

.sg-nav { display: flex; flex-wrap: wrap; gap: var(--sg-1); }
.sg-nav-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--sg-control-sm);
  padding: 0 var(--sg-3);
  border-radius: var(--sg-radius-sm);
  color: rgba(255, 255, 255, .82);
  font-size: var(--sg-fs-md);
  font-weight: var(--sg-fw-semibold);
  text-decoration: none;
}
.sg-nav-link:hover { background: rgba(255, 255, 255, .12); color: var(--sg-text-invert); }
.sg-nav-link[aria-current="page"] {
  background: var(--sg-accent);
  color: var(--sg-text-invert);
}

.sg-main { padding: var(--sg-6) var(--sg-5); }
.sg-container { width: 100%; max-width: 1280px; margin: 0 auto; }

.sg-page-head { margin-bottom: var(--sg-6); }
.sg-page-title {
  margin: 0;
  color: var(--sg-navy-900);
  font-size: var(--sg-fs-3xl);
  font-weight: var(--sg-fw-black);
  line-height: var(--sg-lh-tight);
  letter-spacing: var(--sg-ls-tight);
}
.sg-page-sub { margin: var(--sg-1) 0 0; color: var(--sg-text-muted); font-size: var(--sg-fs-lg); }

.sg-stack { display: flex; flex-direction: column; gap: var(--sg-4); }
.sg-row { display: flex; flex-wrap: wrap; gap: var(--sg-3); align-items: center; }
.sg-grid {
  display: grid;
  gap: var(--sg-4);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

/* ESTADOS VACIOS · un hueco explicado, no un recuadro punteado. */
.sg-empty {
  padding: var(--sg-8) var(--sg-5);
  border: 1px solid var(--sg-border);
  border-radius: var(--sg-radius);
  background: var(--sg-surface-alt);
  color: var(--sg-text-muted);
  font-size: var(--sg-fs-md);
  text-align: center;
}
.sg-empty[data-sigda-empty="SIN_DATOS"] {
  border-color: var(--sg-warn);
  background: var(--sg-warn-soft);
  color: var(--sg-warn);
}

/* ACCESIBILIDAD */
.sg-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.sg-skip-link {
  position: absolute;
  left: var(--sg-3);
  top: -100px;
  z-index: 100;
  padding: var(--sg-2) var(--sg-4);
  border-radius: var(--sg-radius-sm);
  background: var(--sg-accent);
  color: var(--sg-text-invert);
  font-weight: var(--sg-fw-bold);
  text-decoration: none;
}
.sg-skip-link:focus { top: var(--sg-3); }

/* RESPONSIVE BASE */
@media (max-width: 720px) {
  .sg-header { flex-wrap: wrap; padding: var(--sg-3) var(--sg-4); }
  .sg-header-spacer { flex-basis: 100%; height: 0; }
  .sg-main { padding: var(--sg-4) var(--sg-3); }
  .sg-card { padding: var(--sg-4); }
  .sg-page-title { font-size: var(--sg-fs-2xl); }
  .sg-grid { grid-template-columns: 1fr; }
  .sg-btn { min-height: 38px; }
  .sg-input,
  .sg-select,
  .sg-textarea { min-height: 42px; font-size: var(--sg-fs-lg); }
  .sg-table th,
  .sg-table td { padding: var(--sg-2) var(--sg-3); }
}

@media (prefers-reduced-motion: reduce) {
  .sg-btn { transition: none; }
}

.sg-eyebrow { color: var(--sg-accent-strong); font-size: var(--sg-fs-xs); font-weight: var(--sg-fw-black); letter-spacing: var(--sg-ls-caps); text-transform: uppercase; }

/* BANDEJAS · la barra de color al costado era el tic mas reconocible
   del tablero generico. Manda el titulo y el orden de lectura. */
.sg-trays { display: flex; flex-direction: column; gap: var(--sg-4); margin-bottom: var(--sg-6); }
.sg-tray-row { display: flex; flex-wrap: wrap; gap: var(--sg-3); align-items: center; justify-content: space-between; padding: var(--sg-3) 0; border-top: 1px solid var(--sg-rule); }
.sg-tray-main { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: var(--sg-1); align-items: flex-start; }
.sg-tray-title { color: var(--sg-navy-800); font-size: var(--sg-fs-lg); font-weight: var(--sg-fw-bold); line-height: var(--sg-lh-tight); }
@media (max-width: 720px) { .sg-tray-row > .sg-btn { width: 100%; } }

/* WORKSPACE DE IMPARTICION */
.sg-wsheader { margin-top: var(--sg-3); padding: var(--sg-4); background: var(--sg-surface); border: 1px solid var(--sg-border); border-radius: var(--sg-radius); }
.sg-wsbar { display: flex; flex-wrap: wrap; gap: var(--sg-4); align-items: flex-start; justify-content: space-between; }
.sg-wsid { flex: 1 1 260px; min-width: 0; }
.sg-wstitle { display: block; color: var(--sg-navy-800); font-size: var(--sg-fs-xl); font-weight: var(--sg-fw-bold); line-height: var(--sg-lh-tight); letter-spacing: var(--sg-ls-tight); }
.sg-layer { display: flex; gap: var(--sg-2); margin-top: var(--sg-1); font-size: var(--sg-fs-md); }
.sg-layer-key { flex: 0 0 82px; color: var(--sg-text-muted); font-weight: var(--sg-fw-semibold); }
.sg-layer-val { flex: 1 1 auto; font-weight: var(--sg-fw-bold); }
.sg-layer-val--neutral { color: var(--sg-navy-700); }
.sg-layer-val--ok { color: var(--sg-ok); }
.sg-layer-val--warn { color: var(--sg-warn); }
.sg-layer-why { font-weight: var(--sg-fw-regular); color: var(--sg-text-muted); }
.sg-tabs { display: flex; flex-wrap: wrap; gap: var(--sg-1); margin: var(--sg-4) 0 0; border-bottom: 1px solid var(--sg-border); overflow-x: auto; }
.sg-tab { flex: 0 0 auto; min-height: var(--sg-control); padding: 0 var(--sg-4); border: 0; border-bottom: 2px solid transparent; background: none; color: var(--sg-text-muted); font-size: var(--sg-fs-md); font-weight: var(--sg-fw-semibold); cursor: pointer; }
.sg-tab:hover { color: var(--sg-navy-800); }
.sg-tab[aria-selected="true"] { color: var(--sg-accent-strong); border-bottom-color: var(--sg-accent); font-weight: var(--sg-fw-bold); }
@media (max-width: 720px) {
  .sg-wsheader { padding: var(--sg-3); }
  .sg-wsbar > .sg-btn { width: 100%; }
  .sg-layer-key { flex-basis: 68px; }
  .sg-tabs { flex-wrap: nowrap; }
}

/* SHELL GLOBAL */
.sg-sidebar { background: var(--sg-navy-900); color: var(--sg-text-invert); }
.sg-nav-label { color: rgba(255, 255, 255, .52); font-size: var(--sg-fs-xs); font-weight: var(--sg-fw-black); letter-spacing: var(--sg-ls-caps); text-transform: uppercase; }
/* Visualizacion de datos · V91.
   Cifras destacadas y lecturas compactas, declaradas una sola vez para
   todas las pantallas. V108: actividad por mes y barras (sg-months,
   sg-bars) tienen hoy un solo consumidor -el Portal Empresa- y viven en
   su hoja; Reportes dibuja su serie con eje y comparacion propios. */

/* Cifras destacadas */

.sg-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sg-3);
}
.sg-kpi {
  display: flex;
  flex-direction: column;
  gap: var(--sg-1);
  min-width: 0;
  padding: var(--sg-4);
  border: 1px solid var(--sg-border);
  border-radius: var(--sg-radius);
  background: var(--sg-surface);
}
.sg-kpi small {
  font-size: var(--sg-fs-xs);
  font-weight: var(--sg-fw-black);
  letter-spacing: var(--sg-ls-caps);
  text-transform: uppercase;
  color: var(--sg-text-faint);
}
.sg-kpi strong {
  font-size: var(--sg-fs-3xl);
  font-weight: var(--sg-fw-black);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  color: var(--sg-text);
}
.sg-kpi span { font-size: var(--sg-fs-md); color: var(--sg-text-muted); }
.sg-kpi--primary { border-color: var(--sg-accent); }
.sg-kpi--primary strong { color: var(--sg-accent-strong); }
/* Cancelados y excepciones: presentes, pero nunca como logro. */
.sg-kpi--warn strong { color: var(--sg-warn); }

/* Lectura compacta de cifras relacionadas */

.sg-readout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sg-3);
}
.sg-readout > div {
  padding: var(--sg-2) var(--sg-3);
  border: 1px solid var(--sg-border);
  border-radius: var(--sg-radius);
  background: var(--sg-surface-alt);
}
.sg-readout small { display: block; color: var(--sg-text-muted); font-size: var(--sg-fs-xs); }
.sg-readout strong {
  display: block;
  font-size: var(--sg-fs-xl);
  font-weight: var(--sg-fw-black);
  font-variant-numeric: tabular-nums;
}

/* Responsive */

@media (max-width: 1200px) {
  .sg-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .sg-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sg-readout { grid-template-columns: minmax(0, 1fr); }
}
/* Modal · V91.
   El modal de curso existente traia su propia hoja inyectada desde el
   runtime con createElement("style"): 4 KB de colores literales, blur
   y una sombra que no existe en el sistema. Era la unica pantalla de
   SIGDA con estilos fuera del build, invisible para todos los gates
   de CSS. Ahora es un componente mas. */

.sg-modal {
  position: fixed;
  inset: 0;
  z-index: 150000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--sg-6);
  background: rgba(5, 26, 47, .5);
}
.sg-modal.show { display: flex; }

.sg-modal-card {
  width: min(720px, 96vw);
  max-height: 92vh;
  overflow: auto;
  border: 1px solid var(--sg-border);
  border-radius: var(--sg-radius-lg);
  background: var(--sg-surface);
  box-shadow: var(--sg-shadow-lg);
}
.sg-modal-head { padding: var(--sg-5) var(--sg-5) var(--sg-4); border-bottom: 1px solid var(--sg-border); }
.sg-modal-head small {
  display: block;
  margin-bottom: var(--sg-1);
  font-size: var(--sg-fs-2xs);
  font-weight: var(--sg-fw-black);
  letter-spacing: var(--sg-ls-caps);
  text-transform: uppercase;
  color: var(--sg-text-faint);
}
.sg-modal-head h2 { margin: 0; font-size: var(--sg-fs-2xl); line-height: 1.2; color: var(--sg-text); }
.sg-modal-head p { margin: var(--sg-2) 0 0; max-width: 600px; font-size: var(--sg-fs-md); line-height: 1.55; color: var(--sg-text-muted); }
.sg-modal-body { padding: var(--sg-5); }
.sg-modal-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sg-4); }
.sg-modal-grid .sg-field--full { grid-column: 1 / -1; }
.sg-modal-note {
  margin-top: var(--sg-4);
  padding: var(--sg-3);
  border: 1px solid var(--sg-border);
  border-radius: var(--sg-radius-lg);
  background: var(--sg-surface-alt);
  font-size: var(--sg-fs-md);
  line-height: 1.55;
  color: var(--sg-text-muted);
}
.sg-modal-actions { display: flex; justify-content: flex-end; gap: var(--sg-2); margin-top: var(--sg-5); }

@media (max-width: 700px) {
  .sg-modal-grid { grid-template-columns: minmax(0, 1fr); }
  .sg-modal-grid .sg-field--full { grid-column: auto; }
  .sg-modal-actions { flex-direction: column-reverse; }
  .sg-modal-actions button { width: 100%; }
}
/* Portal de empresa · lo propio de esta pantalla.
   El resto -tokens, botones, campos, tarjetas, tablas, badges,
   pestañas, KPIs, barras, meses y modal- se concatena delante desde
   los MISMOS archivos que usa la plataforma: el portal no carga el
   bundle de administracion, pero habla su mismo idioma.

   La hoja anterior traia cuatro capas de ajustes que se contradecian:
   .se-metrics pedia cuatro columnas, luego dos, luego una; .se-tab
   media 48px, 46px y 42px; .se-course-numbers 130px, 105px y 90px.
   Aqui cada cosa se dice una vez. */

/* La fundacion declara la escala; cada superficie la instala. El
   portal no carga el shell de administracion, asi que la aplica aqui. */
body {
  background: var(--sg-bg);
  color: var(--sg-text);
  font-family: var(--sg-font);
  font-size: var(--sg-fs-lg);
  line-height: var(--sg-lh-normal);
}

/* Shell del portal ---------------------------------------------------- */

.se-app { display: flex; flex-direction: column; min-height: 100vh; }
.se-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sg-6);
  min-height: 66px;
  padding: 0 var(--sg-5);
  background: var(--sg-navy-900);
  color: var(--sg-text-invert);
}
.se-brand { display: flex; align-items: center; gap: var(--sg-2); color: inherit; text-decoration: none; }
/* V107 · isotipo oficial, el mismo de la portada, del acceso institucional y
   del shell de administracion. SG21-V ya habia unificado las cuatro marcas
   publicas; lo que faltaba era que fueran la marca de verdad y no un chip
   claro con una "S". El isotipo es blanco, asi que va directo sobre el navy. */
.se-brand-mark {
  display: block;
  width: 38px;
  height: 38px;
  border-radius: 0;
  background: transparent url('/assets/sigda-mark-v91.png') center / contain no-repeat;
  color: transparent;
  font-size: 0;
  overflow: hidden;
}
.se-brand strong { display: block; font-size: var(--sg-fs-lg); font-weight: var(--sg-fw-black); }
.se-brand small { display: block; font-size: var(--sg-fs-2xs); color: rgba(255, 255, 255, .7); }
.se-user { display: flex; align-items: center; gap: var(--sg-3); }
.se-user strong { display: block; font-size: var(--sg-fs-md); }
.se-user span { display: block; font-size: var(--sg-fs-2xs); color: rgba(255, 255, 255, .7); }
.se-main {
  display: grid;
  /* RC3 · sin columnas declaradas, la columna implicita se resuelve a
     `auto`, cuyo minimo es el min-content del contenido. La banda de
     meses -.sg-months- es un scroller con min-content de 952 px, asi que
     la columna crecia a 986 px y arrastraba todo el portal fuera de la
     pantalla en 768 y 390 px. minmax(0,1fr) pone suelo cero a la columna
     y devuelve el desbordamiento a quien sabe gestionarlo: el propio
     scroller. Es el mismo remedio que .sg-em-stage en emision. */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sg-5);
  width: min(1220px, calc(100% - 36px));
  margin: var(--sg-6) auto;
}

/* Carga y acceso ------------------------------------------------------ */

/* RC3 · hidden semantico domina los layouts del portal.
   .se-loading y .se-login declaran display:flex/grid con especificidad de
   clase, que gana al [hidden]{display:none} de la hoja del navegador. El
   runtime las apagaba con .hidden=true y seguian pintando: el smoke
   autenticado encontro el spinner "Cargando Portal Empresa" y el
   formulario de acceso superpuestos al portal ya cargado, y desbordando
   a lo ancho en 768 y 390 px. El Portal Instructor ya tenia este bloque;
   a Empresa le faltaba. Mismo idioma, mismo owner. */
.se-user[hidden],
.se-loading[hidden],
.se-login[hidden],
#sePortal[hidden] {
  display: none !important;
}

.se-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sg-2);
  min-height: 360px;
  color: var(--sg-text-muted);
}
.se-spinner {
  width: 34px;
  height: 34px;
  border: 3px solid var(--sg-border);
  border-top-color: var(--sg-accent);
  border-radius: 50%;
  animation: se-spin 900ms linear infinite;
}
@keyframes se-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .se-spinner { animation-duration: 3s; }
}
.se-login { display: grid; place-items: center; min-height: 620px; }
.se-login-card { width: min(460px, 100%); }
.se-login form { display: grid; gap: var(--sg-3); }
.se-status { min-height: 20px; font-size: var(--sg-fs-md); color: var(--sg-text-muted); }

/* Bienvenida y filtros ------------------------------------------------ */

.se-welcome { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sg-6); }
.se-welcome p { max-width: 720px; }
.se-welcome-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--sg-2);
  min-width: 280px;
}
.se-filter-wrap { display: grid; gap: var(--sg-1); min-width: 230px; }
.se-filter-wrap select { width: 100%; min-height: 36px; }
.se-filter-wrap[hidden] { display: none; }

/* Pestañas ------------------------------------------------------------ */

.se-tabs-list {
  display: flex;
  align-items: center;
  gap: var(--sg-1);
  min-width: max-content;
  overflow-x: auto;
}
.se-tabs-list::-webkit-scrollbar { display: none; }
.se-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 var(--sg-1);
  border-radius: var(--sg-radius-pill);
  background: var(--sg-surface-alt);
  font-size: var(--sg-fs-2xs);
  font-weight: var(--sg-fw-black);
}
[data-se-tab-panel][hidden] { display: none; }

/* Secciones ----------------------------------------------------------- */

.se-count {
  display: grid;
  place-items: center;
  min-width: 34px;
  height: 34px;
  padding: 0 var(--sg-2);
  border-radius: var(--sg-radius-pill);
  background: var(--sg-accent-soft);
  color: var(--sg-accent-strong);
  font-weight: var(--sg-fw-black);
}

/* Solicitudes --------------------------------------------------------- */

.se-request-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sg-2); }
.se-request-summary > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sg-1);
  min-width: 0;
  min-height: 78px;
  padding: var(--sg-3);
  border-radius: var(--sg-radius-lg);
  background: var(--sg-surface-alt);
}
.se-request-summary strong { font-size: var(--sg-fs-2xl); font-weight: var(--sg-fw-black); font-variant-numeric: tabular-nums; }
.se-request-summary span { font-size: var(--sg-fs-md); color: var(--sg-text-muted); }
.se-request-list { display: grid; gap: var(--sg-2); }
.se-request-card {
  min-width: 0;
  padding: var(--sg-4);
  border: 1px solid var(--sg-border);
  border-radius: var(--sg-radius-lg);
  background: var(--sg-surface);
}
.se-request-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sg-3); }
.se-request-card-title { min-width: 0; }
.se-request-card-title h3 { font-size: var(--sg-fs-lg); font-weight: var(--sg-fw-bold); overflow-wrap: anywhere; }
.se-request-status { flex: 0 0 auto; min-height: 27px; white-space: nowrap; }
.se-request-meta { display: flex; flex-wrap: wrap; gap: var(--sg-1) var(--sg-2); }
.se-request-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  padding: 0 var(--sg-2);
  border-radius: var(--sg-radius-pill);
  background: var(--sg-surface-alt);
  font-size: var(--sg-fs-md);
  color: var(--sg-text-muted);
}
.se-request-comments { overflow-wrap: anywhere; }
.se-request-empty p { max-width: 500px; }

/* Cursos e instituciones ---------------------------------------------- */

.se-course-list { display: grid; gap: var(--sg-2); }
.se-course {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--sg-3);
  padding: var(--sg-4);
  border: 1px solid var(--sg-border);
  border-radius: var(--sg-radius-lg);
  background: var(--sg-surface);
}
.se-course-main { min-width: 0; }
.se-course-main h4 { font-size: var(--sg-fs-lg); font-weight: var(--sg-fw-bold); overflow-wrap: anywhere; }
.se-course-context { font-size: var(--sg-fs-md); color: var(--sg-text-muted); }
.se-course-meta { display: flex; flex-wrap: wrap; gap: var(--sg-1); }
.se-chip {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  padding: 0 var(--sg-2);
  border-radius: var(--sg-radius-pill);
  background: var(--sg-surface-alt);
  font-size: var(--sg-fs-md);
  color: var(--sg-text-muted);
}
.se-course-numbers { min-width: 90px; text-align: right; }
.se-course-numbers strong { display: block; font-weight: var(--sg-fw-black); font-variant-numeric: tabular-nums; }
.se-course-numbers span { display: block; font-size: var(--sg-fs-2xs); color: var(--sg-text-muted); }
.se-course-actions { display: flex; flex: 0 0 auto; justify-content: flex-end; }
/* V105 D4.13 · la lista se lee por momento: en curso, próximas, concluidas. */
.se-course-group { margin-top: var(--sg-3); font-size: var(--sg-fs-md); font-weight: var(--sg-fw-bold); color: var(--sg-text-muted); }
.se-course-group:first-child { margin-top: 0; }
.se-course-none { font-size: var(--sg-fs-md); color: var(--sg-text-muted); }

.se-institution-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sg-2); }
.se-institution {
  min-width: 0;
  padding: var(--sg-4);
  border: 1px solid var(--sg-border);
  border-radius: var(--sg-radius-lg);
  background: var(--sg-surface);
}
.se-institution-top { display: flex; align-items: flex-start; gap: var(--sg-2); }
.se-institution-mark {
  display: grid;
  flex: 0 0 38px;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: var(--sg-radius-sm);
  background: var(--sg-accent-soft);
  color: var(--sg-accent-strong);
  font-weight: var(--sg-fw-black);
}
.se-institution-main { flex: 1; min-width: 0; }
.se-institution-main h3 { font-size: var(--sg-fs-lg); font-weight: var(--sg-fw-bold); overflow-wrap: anywhere; }
.se-institution-stats { display: flex; flex-wrap: wrap; gap: var(--sg-1); }

/* Analisis ------------------------------------------------------------ */

.se-analytics-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sg-4); }
.se-analysis-card { min-width: 0; }
.se-analysis-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sg-2); }
.se-analysis-kpis > div {
  min-height: 68px;
  padding: var(--sg-3);
  border-radius: var(--sg-radius-lg);
  background: var(--sg-surface-alt);
}
.se-analysis-kpis strong { display: block; font-size: var(--sg-fs-xl); font-weight: var(--sg-fw-black); }
.se-analysis-kpis span { display: block; font-size: var(--sg-fs-2xs); color: var(--sg-text-muted); }
.se-analysis-empty { font-size: var(--sg-fs-md); color: var(--sg-text-muted); }

/* Modales -------------------------------------------------------------- */

.se-modal-close {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--sg-border);
  border-radius: var(--sg-radius-sm);
  background: var(--sg-surface);
  cursor: pointer;
}
.se-reprogram-course { display: grid; gap: var(--sg-1); }
.se-reprogram-course span { overflow-wrap: anywhere; }
.se-form-status { min-height: 20px; font-size: var(--sg-fs-md); color: var(--sg-text-muted); }

/* Vacios --------------------------------------------------------------- */

.se-empty {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: var(--sg-3);
  padding: var(--sg-4);
  border-radius: var(--sg-radius-lg);
  background: var(--sg-surface-alt);
}
.se-empty-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--sg-surface);
}
.se-empty strong { display: block; font-weight: var(--sg-fw-bold); }
.se-table-empty { padding: var(--sg-4); color: var(--sg-text-muted); text-align: center; }

/* Responsive ----------------------------------------------------------- */

@media (max-width: 1024px) {
  .se-analytics-grid,
  .se-institution-list { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .se-main { width: min(100% - 22px, 1220px); }
  .se-welcome { flex-direction: column; align-items: stretch; gap: var(--sg-4); }
  .se-welcome-actions { width: 100%; min-width: 0; align-items: stretch; }
  .se-filter-wrap { min-width: 0; }
  .se-course { grid-template-columns: minmax(0, 1fr); }
  .se-course-numbers { min-width: 0; text-align: left; }
  .se-request-summary { grid-template-columns: minmax(0, 1fr); }
  .se-request-card-head { flex-direction: column; }
  .se-request-status { align-self: flex-start; }
  .se-user > div { display: none; }
  .se-user .sg-btn, .se-welcome-actions .sg-btn, .se-filter-wrap select, .sg-tabs .sg-tab, .se-course-actions .sg-btn { min-height: 44px; }
}

/* V108 · Primitivas de serie del portal (salieron del bundle global:
   el portal es su unico consumidor). */
/* Actividad por mes */

.sg-months {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: var(--sg-2);
  height: 175px;
  overflow-x: auto;
}
.sg-month {
  display: flex;
  flex: 0 1 72px;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sg-1);
  width: 72px;
  min-width: 42px;
  max-width: 72px;
  height: 100%;
  font-size: var(--sg-fs-2xs);
  color: var(--sg-text-muted);
  text-align: center;
}
.sg-month-box {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  height: 125px;
}
.sg-month-bar {
  width: min(28px, 70%);
  min-height: 3px;
  border-radius: var(--sg-radius-sm) var(--sg-radius-sm) 0 0;
  background: var(--sg-accent);
}
.sg-month strong { font-size: var(--sg-fs-md); color: var(--sg-text); }

/* Distribuciones en barra */

.sg-bars { display: grid; gap: var(--sg-2); }
.sg-bar-row {
  display: grid;
  grid-template-columns: 95px minmax(0, 1fr) 35px;
  align-items: center;
  gap: var(--sg-2);
}
.sg-bar-label {
  overflow: hidden;
  font-size: var(--sg-fs-md);
  color: var(--sg-text-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sg-bar-track {
  height: 7px;
  overflow: hidden;
  border-radius: var(--sg-radius-pill);
  background: var(--sg-surface-alt);
}
.sg-bar-track i {
  display: block;
  height: 100%;
  min-width: 2px;
  border-radius: var(--sg-radius-pill);
  background: var(--sg-accent);
}
.sg-bar-value {
  font-size: var(--sg-fs-md);
  font-variant-numeric: tabular-nums;
  text-align: right;
}