/* 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); }
}
/* Portal de instructor · lo propio de esta pantalla.
   Tokens, componentes, visualizacion y modal se concatenan delante
   desde los MISMOS archivos que usa la plataforma. El portal no carga
   el bundle de administracion: un instructor entra a ver su agenda,
   no a administrar la institucion. */

/* 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 ---------------------------------------------------- */

.si-app { display: flex; flex-direction: column; min-height: 100vh; }
.si-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);
}
.si-brand { display: flex; align-items: center; gap: var(--sg-2); color: inherit; text-decoration: none; }
/* V107 · isotipo oficial, el mismo que .si-access-mark en /i/** y el resto
   del producto. SG21-V ya habia unificado las cuatro marcas publicas entre
   si; ahora son la marca real en vez de un chip claro con una "S". */
.si-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;
}
.si-brand strong { display: block; font-size: var(--sg-fs-lg); font-weight: var(--sg-fw-black); }
.si-brand small { display: block; font-size: var(--sg-fs-2xs); color: rgba(255, 255, 255, .7); }
.si-user { display: flex; align-items: center; gap: var(--sg-3); }
/* V92 QR4 consolidado · hidden semántico domina los layouts del portal. */
.si-user[hidden],
.si-login[hidden],
.si-loading[hidden],
#siPortal[hidden] {
  display: none !important;
}

.si-user strong { display: block; font-size: var(--sg-fs-md); }
.si-user span { display: block; font-size: var(--sg-fs-2xs); color: rgba(255, 255, 255, .7); }
.si-main {
  display: grid;
  gap: var(--sg-5);
  width: min(1180px, calc(100% - 36px));
  margin: var(--sg-6) auto;
}

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

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

.si-welcome { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sg-5); }
.si-welcome p { max-width: 690px; }

/* Avisos -------------------------------------------------------------- */

.si-alerts-count,
.si-change-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 var(--sg-2);
  border-radius: var(--sg-radius-pill);
  background: var(--sg-warn-soft);
  color: var(--sg-warn);
  font-weight: var(--sg-fw-black);
}
.si-alerts-list { display: grid; gap: var(--sg-2); }
.si-alert-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sg-3);
  width: 100%;
  padding: var(--sg-3);
  border: 1px solid var(--sg-border);
  border-radius: var(--sg-radius-lg);
  background: var(--sg-surface);
  text-align: left;
}
.si-alert-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--sg-warn-soft);
  color: var(--sg-warn);
}
.si-alert-main { min-width: 0; }
.si-alert-topline { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sg-3); }
.si-alert-topline time { flex: 0 0 auto; font-size: var(--sg-fs-md); color: var(--sg-text-muted); }
.si-alert-course { font-weight: var(--sg-fw-bold); overflow-wrap: anywhere; }
.si-alert-reason,
.si-alert-summary { font-size: var(--sg-fs-md); color: var(--sg-text-muted); }
.si-alert-open { display: flex; align-items: center; gap: var(--sg-1); white-space: nowrap; color: var(--sg-accent-strong); font-weight: var(--sg-fw-bold); }

/* Sesiones ------------------------------------------------------------ */

.si-session-list { display: grid; gap: var(--sg-2); }
.si-session {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sg-5);
  padding: var(--sg-4);
  border: 1px solid var(--sg-border);
  border-radius: var(--sg-radius-lg);
  background: var(--sg-surface);
}
.si-session-date strong { display: block; font-weight: var(--sg-fw-black); }
.si-session-date span { display: block; font-size: var(--sg-fs-md); color: var(--sg-text-muted); }
.si-session-main { min-width: 0; }
.si-session-main strong { font-size: var(--sg-fs-lg); font-weight: var(--sg-fw-bold); overflow-wrap: anywhere; }
.si-session-meta { display: flex; flex-wrap: wrap; gap: var(--sg-1); }
.si-chip,
.si-trajectory-programs 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);
}
.si-session-hours { min-width: 72px; text-align: right; font-variant-numeric: tabular-nums; }
.si-session-actions { display: flex; flex-direction: column; align-items: flex-end; gap: var(--sg-2); }

/* Panel de detalle ---------------------------------------------------- */

body.si-detail-open { overflow: hidden; }
.si-detail-backdrop[hidden] { display: none; }
.si-detail-backdrop {
  position: fixed;
  inset: 0;
  z-index: 150000;
  display: flex;
  justify-content: flex-end;
  background: rgba(5, 26, 47, .5);
}
.si-detail-panel {
  width: min(620px, 100%);
  height: 100%;
  overflow: auto;
  background: var(--sg-surface);
}
.si-detail-header {
  position: sticky;
  top: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sg-4);
  padding: var(--sg-5);
  border-bottom: 1px solid var(--sg-border);
  background: var(--sg-surface);
}
.si-detail-close {
  display: grid;
  flex: 0 0 42px;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--sg-border);
  border-radius: var(--sg-radius-sm);
  background: var(--sg-surface);
  cursor: pointer;
}
.si-detail-body { display: grid; gap: var(--sg-5); padding: var(--sg-5); }
.si-detail-section { display: grid; gap: var(--sg-3); }
.si-detail-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sg-3); }
.si-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sg-3); }
.si-detail-field { min-width: 0; }
.si-detail-field span { display: block; font-size: var(--sg-fs-2xs); color: var(--sg-text-faint); }
.si-detail-field strong { display: block; overflow-wrap: anywhere; }
.si-detail-org,
.si-detail-note { font-size: var(--sg-fs-md); color: var(--sg-text-muted); }
.si-detail-timeline { display: grid; gap: var(--sg-2); }
.si-detail-session {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sg-3);
  padding: var(--sg-2);
  border-radius: var(--sg-radius-sm);
  background: var(--sg-surface-alt);
}
.si-detail-session-date { font-size: var(--sg-fs-md); }
.si-detail-session-main strong { display: block; overflow-wrap: anywhere; }
.si-detail-session-main span { display: block; font-size: var(--sg-fs-md); color: var(--sg-text-muted); }
.si-detail-session-hours { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Cambios ------------------------------------------------------------- */

.si-change-list { display: grid; gap: var(--sg-3); }
.si-change-card { overflow: hidden; border: 1px solid var(--sg-border); border-radius: var(--sg-radius-lg); }
.si-change-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sg-3);
  padding: var(--sg-3);
  background: var(--sg-surface-alt);
}
.si-change-module { font-weight: var(--sg-fw-bold); }
.si-change-date { display: block; font-size: var(--sg-fs-md); color: var(--sg-text-muted); }
.si-change-reason { padding: var(--sg-3); }
.si-change-reason span { display: block; font-size: var(--sg-fs-2xs); color: var(--sg-text-faint); }
.si-change-reason strong { display: block; }
.si-change-diffs { display: grid; }
.si-change-diff {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  align-items: center;
  gap: var(--sg-3);
  padding: var(--sg-2) var(--sg-3);
  border-top: 1px solid var(--sg-border);
}
.si-change-label { font-size: var(--sg-fs-md); color: var(--sg-text-muted); }
.si-change-values { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sg-2); }
/* Lo que habia antes se muestra tachado: el instructor necesita ver
   que cambio, no solo el valor nuevo. */
.si-change-before { text-decoration: line-through; color: var(--sg-text-faint); }
.si-change-arrow { color: var(--sg-text-faint); }

/* Trayectoria --------------------------------------------------------- */

.si-trajectory-head p { max-width: 760px; }
.si-trajectory-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sg-3); }
.si-trajectory-metrics > div {
  min-width: 0;
  padding: var(--sg-3);
  border-radius: var(--sg-radius-lg);
  background: var(--sg-surface-alt);
}
.si-trajectory-metrics span { display: block; font-size: var(--sg-fs-2xs); color: var(--sg-text-faint); }
.si-trajectory-metrics strong { display: block; font-size: var(--sg-fs-xl); font-weight: var(--sg-fw-black); }
.si-trajectory-subhead { font-size: var(--sg-fs-md); color: var(--sg-text-muted); }
.si-trajectory-company-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sg-3); }
.si-trajectory-company {
  min-width: 0;
  padding: var(--sg-3);
  border: 1px solid var(--sg-border);
  border-radius: var(--sg-radius-lg);
}
.si-trajectory-company-main { display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: start; gap: var(--sg-3); }
.si-trajectory-company-mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: var(--sg-radius-sm);
  background: var(--sg-accent-soft);
  color: var(--sg-accent-strong);
  font-weight: var(--sg-fw-black);
}
.si-trajectory-company-stats,
.si-trajectory-programs { display: flex; flex-wrap: wrap; gap: var(--sg-1); }
.si-trajectory-last { font-size: var(--sg-fs-md); color: var(--sg-text-muted); }

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

.si-empty,
.si-trajectory-empty {
  display: grid;
  grid-template-columns: 46px 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);
}
.si-empty-icon,
.si-trajectory-empty-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--sg-surface);
}
.si-empty h2 { font-size: var(--sg-fs-lg); font-weight: var(--sg-fw-bold); }
.si-empty p,
.si-trajectory-empty p { font-size: var(--sg-fs-md); color: var(--sg-text-muted); }

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

@media (max-width: 1024px) {
  .si-trajectory-company-list { grid-template-columns: minmax(0, 1fr); }
  .si-trajectory-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .si-main { width: min(100% - 22px, 1180px); }
  .si-welcome { flex-direction: column; }
  .si-session,
  .si-detail-session,
  .si-detail-grid,
  .si-change-diff { grid-template-columns: minmax(0, 1fr); }
  .si-session { gap: var(--sg-2); }
  .si-session-hours { text-align: left; }
  .si-session-actions { align-items: flex-start; }
  .si-alert-topline { display: block; }
  .si-alert-open { grid-column: 2; }
  .si-trajectory-metrics { grid-template-columns: minmax(0, 1fr); }
  .si-user > div { display: none; }
}

/* SIGDA V92-QR3 · autenticacion PIN + asistencia por sesion */
.si-login-activation{margin:var(--sg-3) 0 0;color:var(--sg-text-muted);font-size:var(--sg-fs-sm);text-align:center}
.si-login-activation a{color:var(--sg-accent);font-weight:var(--sg-fw-semibold);text-decoration:none}.si-login-activation a:hover{text-decoration:underline}
.si-session-actions .si-attendance-button{white-space:nowrap}
body.si-attendance-open{overflow:hidden}
.si-attendance-backdrop{position:fixed;inset:0;z-index:1450;display:grid;place-items:center;padding:20px;background:rgba(0,18,56,.46)}
.si-attendance-backdrop[hidden]{display:none}
.si-attendance-panel{width:min(920px,calc(100vw - 28px));max-height:min(88vh,920px);display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;border:1px solid var(--sg-border);border-radius:var(--sg-radius-lg);background:var(--sg-surface);box-shadow:var(--sg-shadow-lg);overflow:hidden}
.si-attendance-header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sg-4);padding:var(--sg-5);border-bottom:1px solid var(--sg-border)}
.si-attendance-header h2{margin:3px 0 2px;color:var(--sg-navy-800);font-size:var(--sg-fs-2xl)}
.si-attendance-header p{margin:0;color:var(--sg-text-muted);font-size:var(--sg-fs-sm)}
.si-attendance-status{margin:var(--sg-3) var(--sg-5) 0;padding:var(--sg-3);border:1px solid var(--sg-border);border-radius:var(--sg-radius);background:var(--sg-accent-soft);color:var(--sg-accent-strong)}
.si-attendance-status[data-kind="ERROR"]{background:var(--sg-danger-soft);color:var(--sg-danger)}
.si-attendance-status[data-kind="SUCCESS"]{background:var(--sg-ok-soft);color:var(--sg-ok)}
.si-attendance-body{min-height:0;overflow:auto;padding:var(--sg-5)}
.si-attendance-toolbar{display:flex;align-items:center;justify-content:space-between;gap:var(--sg-3);margin-bottom:var(--sg-3)}
.si-attendance-toolbar strong,.si-attendance-toolbar span{display:block}.si-attendance-toolbar span{margin-top:3px;color:var(--sg-text-muted);font-size:var(--sg-fs-sm)}
.si-attendance-list{display:grid;gap:var(--sg-2)}
.si-attendance-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--sg-4);min-height:58px;padding:var(--sg-3);border:1px solid var(--sg-border);border-radius:var(--sg-radius);background:var(--sg-surface)}
.si-attendance-person{display:grid;grid-template-columns:32px minmax(0,1fr);align-items:center;gap:var(--sg-3);min-width:0}.si-attendance-person>span{width:32px;height:32px;display:grid;place-items:center;border-radius:var(--sg-radius-pill);background:var(--sg-surface-alt);color:var(--sg-text-muted);font-size:var(--sg-fs-xs);font-variant-numeric:tabular-nums}.si-attendance-person strong{overflow-wrap:anywhere}
.si-attendance-choice{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--sg-border-control);border-radius:var(--sg-radius);overflow:hidden}
.si-attendance-choice button{min-height:34px;padding:0 var(--sg-3);border:0;background:var(--sg-surface);color:var(--sg-text-muted);font:inherit;font-size:var(--sg-fs-sm);font-weight:var(--sg-fw-semibold);cursor:pointer}.si-attendance-choice button+button{border-left:1px solid var(--sg-border-control)}.si-attendance-choice button[aria-pressed="true"][data-attendance-state="PRESENTE"]{background:var(--sg-ok-soft);color:var(--sg-ok)}.si-attendance-choice button[aria-pressed="true"][data-attendance-state="AUSENTE"]{background:var(--sg-danger-soft);color:var(--sg-danger)}.si-attendance-choice button:focus-visible{outline:2px solid var(--sg-accent);outline-offset:-2px}.si-attendance-choice button:disabled{cursor:not-allowed;opacity:.65}
.si-attendance-empty{padding:var(--sg-8);border:1px dashed var(--sg-border-control);border-radius:var(--sg-radius);color:var(--sg-text-muted);text-align:center}
.si-attendance-footer{display:flex;justify-content:flex-end;gap:var(--sg-2);padding:var(--sg-4) var(--sg-5);border-top:1px solid var(--sg-border);background:var(--sg-surface-alt)}
@media(max-width:680px){.si-attendance-backdrop{padding:8px}.si-attendance-panel{width:100%;max-height:96vh}.si-attendance-header{padding:var(--sg-4)}.si-attendance-body{padding:var(--sg-3)}.si-attendance-row{grid-template-columns:1fr}.si-attendance-choice{width:100%}.si-attendance-toolbar{align-items:flex-start;flex-direction:column}.si-attendance-footer{padding:var(--sg-3);display:grid;grid-template-columns:1fr 1fr}.si-attendance-footer .sg-btn{width:100%}}
.si-attendance-panel [hidden]{display:none}
.si-attendance-row[data-missing]{border-color:var(--sg-danger);outline:1px solid var(--sg-danger);outline-offset:-1px}
@media(max-width:680px){.si-attendance-choice button,.si-attendance-footer .sg-btn,.si-attendance-header .sg-btn,#siAttendanceAllPresent{min-height:44px}}
/* V105 D4.11 · primero lo que está en curso y sin repetir la próxima sesión; en el teléfono la acción cabe antes que el texto de bienvenida */
#siNow:not(:empty){display:grid;gap:var(--sg-2);margin-bottom:var(--sg-4)}
#siNow .si-session{border-color:var(--sg-accent)}
.si-attendance-header .si-detail-close{flex:0 0 44px;width:44px;height:44px}
@media(max-width:760px){.si-welcome p{display:none}.si-session-actions .sg-btn,.si-login .sg-btn{min-height:44px}}