/* Tema "paridad Secureframe" aplicado a toda la plataforma legacy.
 *
 * Se enlaza DESPUÉS de las 6 hojas de index.html para ganar por cascada (ver el mapa de
 * tokens en el commit de este archivo). Lleva el look del panel (/panel, css/secureframe.css)
 * a toda la UI legacy — neutros suaves, cards redondeadas con sombra tenue, sidebar blanco —
 * con los colores GAMR (azul #2563eb, verde #02a45a, ámbar #d97706, rojo #dc2626). No toca el
 * markup ni reescribe styles.css: solo repunta tokens y pule los componentes compartidos.
 *
 * Reglas respetadas (CLAUDE.md): no se cambia la altura 40px de los controles, los `th` y
 * `label.field` en mayúsculas se dejan como están (coinciden con el panel), y no se agregan
 * reglas `display` sobre contenedores que togglean `hidden`.
 */

/* ── A) Tokens globales ──────────────────────────────────────────────
 * Los legacy (--bg/--surface/--border/--text/--accent) del último bloque de styles.css son
 * normales (sin !important), así que un :root final los gana. */
:root {
  --bg: #f5f7fb;
  --surface: #ffffff;
  --surface-2: #f8fafc;
  --border: #e7ebf1;
  --text: #0f172a;
  --text-secondary: #334155;

  --accent: #2563eb;
  --accent-hover: #1d4ed8;
  --success: #02a45a;
  --warning: #d97706;
  --danger: #dc2626;

  --radius: 12px;
  --radius-card: 16px;
  --radius-standard: 10px;
  --radius-pill: 999px;
  --radius-portal: 20px;
  --ux-radius-card: 16px;
  --ux-radius-control: 10px;

  --shadow: 0 1px 2px rgba(15, 23, 42, .05);
  --shadow-md: 0 10px 30px -14px rgba(15, 23, 42, .18);
  --shadow-base: 0 1px 2px rgba(15, 23, 42, .05);
  --shadow-elevated: 0 10px 30px -14px rgba(15, 23, 42, .18);
  --ux-shadow: 0 10px 30px -14px rgba(15, 23, 42, .18);

  /* El acento "orizon" era teal y hacía de acento principal: lo llevamos al azul GAMR para
   * que los componentes que lo usan directo (no vía --accent) queden alineados. */
  --orizon-green: #2563eb;
  --orizon-green-hover: #1d4ed8;
  --orizon-green-soft: #eef3ff;
  --orizon-blue: #2563eb;
  --orizon-blue-dark: #1d4ed8;
  --orizon-ink: #0f172a;
  --orizon-text: #334155;
  --orizon-border-solid: #e7ebf1;
  --orizon-surface: #ffffff;
  --orizon-surface-alt: #f8fafc;
  --orizon-bg: #f5f7fb;
}

/* --font/--mono/--text-muted/--muted vienen con !important en styles.css: hay que pisarlos. */
:root {
  --font: "Inter", "Source Sans 3", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
  --text-muted: #64748b !important;
  --muted: #64748b !important;
  --orizon-muted: #64748b !important;
  --text-secondary: #334155 !important;
}

/* ── B) Sidebar oscuro premium ────────────────────────────────────────
 * Sidebar navy (#0f172a) con acento teal, íconos SVG thin-stroke. Los tokens del sidebar
 * los pone styles.css (:root); acá solo reforzamos los --app-* del panel de contenido y
 * apagamos el wallpaper decorativo. */
body.shell-modern {
  --app-bg: #f8fafc;
  --app-panel: #ffffff;
  --app-line: #e7ebf1;
  --app-ink: #0f172a;
  --app-muted: #64748b;
}
#app-sidebar {
  background: var(--sb-bg) !important;
  background-image: none !important;
  box-shadow: none;
}
body.shell-modern {
  --app-wallpaper-grid: transparent !important;
  --app-wallpaper-glow-a: transparent !important;
  --app-wallpaper-glow-b: transparent !important;
}
#app-sidebar .sb-org-code { background: rgba(20,184,166,.15); color: var(--sb-accent); }
#app-sidebar .sb-org select,
#app-sidebar #global-org-select { color: var(--sb-ink) !important; }
#app-sidebar .nav-group-label { color: var(--sb-muted) !important; }
#app-sidebar .nav-btn { color: var(--sb-muted) !important; }
#app-sidebar .nav-btn:hover { background: var(--sb-bg-soft) !important; color: #fff !important; }
#app-sidebar .nav-btn.active,
#app-sidebar .nav-btn.active:hover {
  background: var(--sb-bg-soft) !important;
  color: #fff !important;
  box-shadow: inset 3px 0 0 var(--sb-accent) !important;
}
#app-sidebar .sb-user-meta strong { color: var(--sb-ink); }
#app-sidebar .sb-user > summary:hover { background: var(--sb-bg-soft); }
#app-sidebar .sb-nav.nav,
#app-sidebar #app-primary-nav { scrollbar-color: rgba(148,163,184,.3) transparent; }

/* ── C) Componentes compartidos ──────────────────────────────────────
 * Especificidad body.shell-modern + !important para pisar el restyle del shell. */

/* Tarjetas: radio y sombra del panel */
body.shell-modern .card {
  border-radius: var(--radius-card) !important;
  border-color: var(--border) !important;
  box-shadow: var(--shadow) !important;
}

/* Botones */
body.shell-modern .btn { border-radius: var(--ux-radius-control) !important; }
body.shell-modern .btn-primary {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
}
body.shell-modern .btn-primary:hover {
  background: var(--accent-hover) !important;
  border-color: var(--accent-hover) !important;
}

/* Inputs / selects: radio y borde suaves; foco azul. (La altura 40px la deja el shell.) */
body.shell-modern input,
body.shell-modern select,
body.shell-modern textarea {
  border-radius: var(--ux-radius-control) !important;
  border-color: #d6dce6 !important;
}
body.shell-modern input:focus,
body.shell-modern select:focus,
body.shell-modern textarea:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .15) !important;
  outline: none !important;
}

/* Tablas: cabecera gris-muted (ya era uppercase), bordes de fila suaves */
body.shell-modern thead th,
body.shell-modern th {
  background: #f8fafc !important;
  color: #64748b !important;
  border-bottom-color: var(--border) !important;
}
body.shell-modern .data-table td,
body.shell-modern tbody td { border-bottom-color: var(--border) !important; }

/* Pills / badges redondeados */
body.shell-modern .badge { border-radius: var(--radius-pill) !important; }

/* Modales */
body.shell-modern .modal-card,
body.shell-modern dialog {
  border-radius: var(--radius-card) !important;
  box-shadow: var(--shadow-md) !important;
  border: 1px solid var(--border) !important;
}

/* Topbar: fondo claro del panel */
body.shell-modern .app-topbar {
  background: rgba(255, 255, 255, .9) !important;
  border-bottom-color: var(--border) !important;
}
body.shell-modern .app-topbar.is-elevated { box-shadow: var(--shadow-md) !important; }

/* ── D) Inicio · paridad visual con el mockup premium ──────────────────
 * Estas reglas cierran la brecha entre la producción y el artefacto de
 * referencia: canvas, cards, sombras, animaciones y tabs. platform-theme
 * se carga último, así que gana por cascada sin necesidad de !important
 * en la mayoría de los casos. */

/* D.1  Canvas — el fondo del área de contenido */
body.shell-modern .panel-home.active {
  background: #f8fafc !important;
  padding: 24px 28px !important;
}

/* D.2  Cards dentro de Inicio — sombra y borde del mockup */
.inicio-gerencial .ig-kpi,
.inicio-gerencial .ig-card {
  border-color: #e8edf3 !important;
  box-shadow: 0 1px 3px rgba(15,23,42,.03), 0 6px 16px rgba(15,23,42,.04) !important;
}
.inicio-gerencial .ig-kpi:hover,
.inicio-gerencial .ig-card:hover {
  box-shadow: 0 2px 8px rgba(15,23,42,.05), 0 12px 28px rgba(15,23,42,.06) !important;
}

/* D.3  Tabs segmented control — alineados con .topbar-tabs del mockup */
.inicio-tabs {
  background: #f1f5f9;
  border-radius: 6px;
  padding: 3px;
}
.inicio-tab {
  font-size: 12.5px !important;
  padding: 5px 14px !important;
  border-radius: 4px !important;
}
.inicio-tab.active {
  background: #fff !important;
  box-shadow: 0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04) !important;
}

/* D.4  Veredicto — barra horizontal compacta del mockup */
.inicio-gerencial .ig-veredicto {
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 14px 18px !important;
  border-radius: 10px !important;
  border-left-width: 4px !important;
}
.inicio-gerencial .ig-veredicto-head {
  flex: 1;
  min-width: 0;
}

/* D.5  Decision list items — estilo .act del mockup */
.inicio-gerencial .ig-decision {
  border-radius: 6px !important;
  padding: 10px 8px !important;
  margin-inline: -8px !important;
  transition: background .15s !important;
}
.inicio-gerencial .ig-decision:hover .ig-decision-go {
  color: #14b8a6 !important;
}

/* D.6  Barra de exposición — estilo .stk del mockup */
.inicio-gerencial .ig-expo-barra {
  border-radius: 6px !important;
}
.inicio-gerencial .ig-expo-barra span {
  border-radius: 0 !important;
  transition: flex .8s cubic-bezier(.4,0,.2,1) !important;
}

/* D.7  Timeline — brillo teal en el hito activo */
.inicio-gerencial .ig-hito[data-estado="actual"] .ig-hito-marca {
  box-shadow: 0 0 0 4px rgba(20,184,166,.12) !important;
}

/* D.8  Sección postura — cards con el mismo tratamiento */
.postura-kpi {
  border-color: #e8edf3 !important;
  box-shadow: 0 1px 3px rgba(15,23,42,.03), 0 6px 16px rgba(15,23,42,.04) !important;
}
.postura-kpi:hover {
  box-shadow: 0 2px 8px rgba(15,23,42,.05), 0 12px 28px rgba(15,23,42,.06) !important;
}
.postura-panel {
  border-color: #e8edf3 !important;
  box-shadow: 0 1px 3px rgba(15,23,42,.03), 0 6px 16px rgba(15,23,42,.04) !important;
}
.postura-panel:hover {
  box-shadow: 0 2px 8px rgba(15,23,42,.05), 0 12px 28px rgba(15,23,42,.06) !important;
}

/* D.9  Animaciones de entrada — fade + slide-up del mockup */
@media (prefers-reduced-motion: no-preference) {
  .inicio-gerencial .ig-kpi,
  .inicio-gerencial .ig-card,
  .inicio-gerencial .ig-veredicto,
  .postura-kpi,
  .postura-panel {
    animation: ig-up .45s cubic-bezier(.4,0,.2,1) both;
  }
  .inicio-gerencial .ig-kpi:nth-child(1) { animation-delay: .05s; }
  .inicio-gerencial .ig-kpi:nth-child(2) { animation-delay: .10s; }
  .inicio-gerencial .ig-kpi:nth-child(3) { animation-delay: .15s; }
  .inicio-gerencial .ig-kpi:nth-child(4) { animation-delay: .20s; }
  .ig-atencion-grid .ig-card:nth-child(1) { animation-delay: .10s; }
  .ig-atencion-grid .ig-card:nth-child(2) { animation-delay: .15s; }
  .ig-atencion-grid .ig-card:nth-child(3) { animation-delay: .20s; }
  .ig-atencion-grid .ig-card:nth-child(4) { animation-delay: .25s; }
  .ig-grilla-compacta .ig-card:nth-child(1) { animation-delay: .15s; }
  .ig-grilla-compacta .ig-card:nth-child(2) { animation-delay: .20s; }
  .ig-grilla-compacta .ig-card:nth-child(3) { animation-delay: .25s; }
}
@keyframes ig-up {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* D.10  Grilla compacta y atencion — bordes consistentes */
.ig-grilla-compacta .ig-card,
.ig-atencion-grid .ig-card {
  border-color: #e8edf3 !important;
}

/* D.11  Header del inicio — eyebrow + título con la tipografía Archivo */
body.shell-modern .inicio-gerencial .ig-titulo {
  font-family: "Archivo", "DM Sans", system-ui, sans-serif !important;
  letter-spacing: -0.02em !important;
}

/* D.12  Card titles — font Archivo como en el mockup */
body.shell-modern .inicio-gerencial .ig-card-titulo {
  font-family: "Archivo", "DM Sans", system-ui, sans-serif !important;
  letter-spacing: -0.01em !important;
}

/* D.13  Postura heading — Archivo */
body.shell-modern #postura-seguridad h3 {
  font-family: "Archivo", "DM Sans", system-ui, sans-serif !important;
}
body.shell-modern .postura-panel h4 {
  font-family: "Archivo", "DM Sans", system-ui, sans-serif !important;
}

/* D.14  Mini donut dentro del KPI (Preparación) */
.ig-kpi-donut {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 4px;
}
.ig-dnt {
  width: 68px;
  height: 68px;
  flex-shrink: 0;
  transform: rotate(-90deg);
}

/* D.15  Progress bar mini dentro del KPI (Documentación) */
.ig-prog {
  height: 4px;
  background: var(--ig-borde, #e2e8f0);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 4px;
}
.ig-prog-f {
  height: 100%;
  border-radius: 2px;
  transition: width 1s ease;
}

/* D.16  Audit rows con barras de avance y cumplimiento */
.ig-aud-bar {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ig-aud-bar-l {
  font-size: 0.72rem;
  color: var(--ig-tenue, #64748b);
  width: 82px;
  flex-shrink: 0;
}
.ig-aud-trk {
  flex: 1;
  height: 6px;
  background: #f1f5f9;
  border-radius: 3px;
  overflow: hidden;
}
.ig-aud-f {
  height: 100%;
  border-radius: 3px;
  transition: width 1s cubic-bezier(.4,0,.2,1);
}
.ig-aud-f-a { background: var(--ig-azul, #0f766e); }
.ig-aud-f-g { background: var(--ig-bien, #059669); }
.ig-aud-v {
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ig-tenue, #334155);
  width: 36px;
  text-align: right;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

/* D.17 — Portal cliente: inicio adaptado ─────────────────────────────────────
   El cliente no ve riesgos, decisiones de dirección, exposición, camino a la
   certificación ni plan de acción. Ve indicadores de documentación, NC y
   auditorías, más las tarjetas del bloque «Requiere atención» que ya le aplican
   (plazos documentales y buzón). Los datos salen del mismo endpoint. */
body.client-portal .ig-card-decisiones,
body.client-portal .ig-card-guias,
body.client-portal [aria-labelledby="ig-camino-titulo"],
body.client-portal [aria-labelledby="ig-expo-titulo"],
body.client-portal .ig-encabezado-acciones {
  display: none !important;
}
body.client-portal .ig-grilla-compacta {
  grid-template-columns: 1fr;
}
body.client-portal .ig-kpis {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}