/* B PLANT — tokens de diseño, tema claro estilo plataforma SaaS moderna
   (referencia: HubSpot — sidebar de navegación, superficies claras, acento
   naranja, tarjetas con sombra suave). Paleta validada con la skill de
   dataviz (references/palette.md): estados crítico/serio/advertencia/bueno
   reutilizan exactamente los pasos de esa paleta de estado. Fuentes
   autohospedadas, sin CDN. */

@font-face{font-family:'Archivo';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/archivo-var.woff2') format('woff2');}
@font-face{font-family:'Archivo';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/archivo-var.woff2') format('woff2');}
@font-face{font-family:'Archivo';font-style:normal;font-weight:800;font-display:swap;src:url('../fonts/archivo-var.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/ibmplexmono-400.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/ibmplexmono-500.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/ibmplexmono-600.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/ibmplexsans.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/ibmplexsans.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/ibmplexsans.woff2') format('woff2');}

:root{
  /* superficies */
  --bed:#F5F8FA;        /* plano de página */
  --panel:#FFFFFF;      /* tarjetas */
  --panel-2:#F5F8FA;    /* superficie secundaria / hover */
  --line:#E2E8F0;       /* borde fino */

  /* tinta */
  --ink:#33475B;         /* texto principal — navy */
  --ink-dim:#7C98B6;     /* texto secundario */
  --ink-soft:#516F90;    /* intermedio, para subtítulos */

  /* acento — naranja como acción primaria, azul como info/enlace */
  --agua:#FF7A59;        /* acción primaria (nombre histórico del token, ver nota abajo) */
  --agua-ink:#C9391E;    /* texto sobre fondos claros de acento naranja */
  --azul:#2A78D6;        /* enlaces, info */
  --veta:#FAB219;        /* advertencia / atención */
  --falla:#D03B3B;       /* crítico */
  --serio:#EC835A;       /* alto (serious) */
  --ok:#0CA30C;          /* bueno / bajo riesgo */

  --r:10px;
  --r-sm:6px;
  --r-lg:14px;
  --r-pill:999px;
  --shadow-sm:0 1px 2px rgba(15,23,42,.06);
  --shadow-md:0 2px 8px rgba(15,23,42,.08),0 1px 2px rgba(15,23,42,.04);
  --shadow-lg:0 12px 32px rgba(15,23,42,.12),0 2px 6px rgba(15,23,42,.06);

  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --sans:'IBM Plex Sans',system-ui,sans-serif;
  --disp:'Archivo',system-ui,sans-serif;

  /* sidebar */
  --sidebar-bg:#213343;
  --sidebar-bg-2:#2C4257;
  --sidebar-ink:#B0C1D4;
  --sidebar-ink-active:#FFFFFF;
  --sidebar-w:248px;

  /* espaciado — múltiplos de 4px, nombrados por escala no por valor para
     que sobrevivan si el número cambia (propuesto por el boceto del
     Cronograma Maestro, mockups/cronograma-maestro/, 2026-09-22; hallazgo
     de diseño: screens.css usaba 17 valores de font-size y márgenes de
     sección sin ningún criterio — ver docs/contexto/decisiones.md). Puras
     adiciones: nada existente referencia estos tokens todavía. */
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:24px;
  --space-6:32px;
  --space-7:48px;

  /* tipografía por rol, mismo criterio de nombrar por escala */
  --text-2xs:10.5px;   /* etiquetas de columna, mayúsculas */
  --text-xs:11.5px;    /* metadatos, mono */
  --text-sm:12.5px;    /* texto secundario, badges */
  --text-base:14px;    /* cuerpo de tabla/tarjeta */
  --text-md:15px;      /* cuerpo estándar (ya es el body real, ver arriba) */
  --text-lg:17px;      /* subtítulos de tarjeta */
  --text-xl:20px;      /* h3 de sección dentro de una vista */

  /* color por componente (8) — mismos valores hex que ya usaban los bares
     SVG del Gantt (screens.css: .bar-geo..bar-soc), promovidos a token
     para que cualquier pantalla los reuse sin reinventar el hex (hallazgo
     del boceto: .comp-dot nunca tuvo color por componente, solo
     --ink-dim fijo — bug chico, corregido de paso en screens.css). */
  --c-geo:#6C8AE4;
  --c-min:#8A7BD8;
  --c-met:#4FA8A0;
  --c-sst:#E4A93C;
  --c-amb:#5FB07A;
  --c-emp:#C98BC0;
  --c-jur:#D97B6C;
  --c-soc:#7FA3C4;
}
/* Nota: --agua conserva su nombre histórico (fase 1, tema oscuro con acento
   agua/teal) para no reescribir cada selector de screens.css; en el tema
   claro actual representa el naranja de acción primaria de la marca. */

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bed);
  color:var(--ink);
  font-family:var(--sans);
  font-size:15px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}

/* ---------- shell: sidebar + contenido ---------- */
.app-shell{display:flex;min-height:100vh}

.sidebar{
  width:var(--sidebar-w);flex:0 0 var(--sidebar-w);
  background:var(--sidebar-bg);color:var(--sidebar-ink);
  display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;overflow-y:auto;
}
.sidebar-logo{
  padding:22px 22px 18px;font-family:var(--disp);font-weight:800;letter-spacing:.08em;font-size:18px;color:#fff;
  display:flex;align-items:center;gap:2px;
}
.sidebar-logo b{color:var(--agua)}
.sidebar-logo .logo-name{display:inline;font:inherit;color:inherit;letter-spacing:inherit;margin:0;line-height:inherit}
.sidebar-logo .logo-mini{display:none}
.sidebar-logo .logo-tag{flex:1 1 100%;order:3}
.sidebar-logo span{
  display:block;font-family:var(--sans);font-weight:400;letter-spacing:0;font-size:11px;color:var(--sidebar-ink);
  margin-top:3px;line-height:1.4;
}
.sidebar-nav{flex:1;padding:6px 12px;display:flex;flex-direction:column;gap:2px}
.nav-label{min-width:0}

/* Menú contraer/expandir (2026-10-09): contraído queda una columna de íconos; el nombre sale como tooltip (title). */
.sidebar{transition:width .18s ease,flex-basis .18s ease}
.sidebar-logo{flex-wrap:wrap}
.sb-toggle{margin-left:auto;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:1px solid rgba(255,255,255,.14);border-radius:var(--r-sm);background:transparent;color:var(--sidebar-ink);cursor:pointer}
.sb-toggle:hover{background:var(--sidebar-bg-2);color:#fff}
.sb-toggle:focus-visible{outline:2px solid var(--agua);outline-offset:2px}
.sb-toggle svg{width:16px;height:16px;transition:transform .18s ease}
.sb-collapsed .sidebar{width:64px;flex:0 0 64px;overflow-x:hidden}
.sb-collapsed .sidebar-logo{padding:16px 0 10px;flex-direction:column;justify-content:center;gap:10px}
.sb-collapsed .sidebar-logo .logo-name,.sb-collapsed .sidebar-logo .logo-tag,.sb-collapsed .sidebar-demo-tag{display:none}
.sb-collapsed .sidebar-logo .logo-mini{display:block;font-family:var(--disp);font-weight:800;font-size:20px;color:#fff;letter-spacing:0}
.sb-collapsed .sb-toggle{margin-left:0}
.sb-collapsed .sb-toggle svg{transform:rotate(180deg)}
.sb-collapsed .sidebar-nav{padding:6px 8px}
.sb-collapsed .sidebar-footer{padding:12px 8px}
.sb-collapsed .nav-item{justify-content:center;padding:10px 0;gap:0}
.sb-collapsed .nav-label,.sb-collapsed .nav-item .n,.sb-collapsed .soon-badge,.sb-collapsed .nav-substeps{display:none}
.nav-item{
  display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:var(--r-sm);
  color:var(--sidebar-ink);text-decoration:none;font-size:13.5px;font-weight:500;
  transition:background .15s,color .15s;
}
.nav-item svg{flex:0 0 18px;width:18px;height:18px;opacity:.85}
.nav-item:hover{background:var(--sidebar-bg-2);color:#fff}
.nav-item[aria-current="true"]{background:var(--agua);color:#fff;font-weight:600}
.nav-item[aria-current="true"] svg{opacity:1}
.nav-item .n{
  font-family:var(--mono);font-size:10px;opacity:.6;min-width:14px;
}
.nav-item[aria-current="true"] .n{opacity:.85}
.nav-item.soon{opacity:.5;cursor:default;position:relative}
.nav-item.soon:hover{background:none;color:var(--sidebar-ink)}
.soon-badge{
  margin-left:auto;font-family:var(--mono);font-size:8.5px;letter-spacing:.05em;text-transform:uppercase;
  padding:2px 6px;border-radius:20px;background:rgba(255,255,255,.1);white-space:nowrap;
}
.nav-substeps{display:flex;flex-direction:column;gap:1px;padding:2px 0 6px 41px;margin-bottom:2px}
.nav-substep{
  display:flex;align-items:center;gap:9px;
  padding:6px 10px;border-radius:var(--r-sm);color:var(--sidebar-ink);text-decoration:none;
  font-size:12px;opacity:.75;transition:background .15s,color .15s,opacity .15s;
}
.nav-substep .n{font-family:var(--mono);font-size:9.5px;color:#fff;opacity:.55;min-width:13px}
.nav-substep:hover{background:var(--sidebar-bg-2);color:#fff;opacity:1}
.nav-substep:hover .n{opacity:.9}
.nav-substep[aria-current="true"]{background:rgba(255,255,255,.12);color:#fff;font-weight:600;opacity:1}
.nav-substep[aria-current="true"] .n{opacity:1}
.sidebar-footer{padding:14px 12px 18px;border-top:1px solid rgba(255,255,255,.08)}
.sidebar-footer .nav-item{font-size:12.5px;color:var(--sidebar-ink)}
.sidebar-demo-tag{
  margin:0 12px 10px;padding:6px 10px;border-radius:var(--r-sm);
  font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;color:var(--veta);
  border:1px solid rgba(250,178,25,.35);background:rgba(250,178,25,.08);
}

.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{
  position:sticky;top:0;z-index:15;background:rgba(245,248,250,.92);backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);padding:14px 32px;
}

.wrap{position:relative;z-index:1;max-width:1180px;margin:0 auto;padding:0 32px 80px}

/* ---------- banner de conectividad ---------- */
.conn-banner{
  text-align:center;font-family:var(--mono);font-size:11.5px;letter-spacing:.03em;
  padding:8px 12px;
}
.conn-banner.offline{background:#FFF6E5;color:#92610A;border-bottom:1px solid #F5D68C}
.conn-banner.syncing{background:#E9F7EF;color:#0A7A2E;border-bottom:1px solid #9EDDB6}
.conn-banner[hidden]{display:none}

/* ---------- pantallas ---------- */
.screen{padding-top:36px;animation:in .35s ease}
@keyframes in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--agua);margin-bottom:12px;font-weight:600}
h1{font-family:var(--disp);font-weight:800;font-size:clamp(30px,4.4vw,48px);line-height:1.08;letter-spacing:-.02em;color:var(--ink)}
h2{font-family:var(--disp);font-weight:700;font-size:24px;letter-spacing:-.01em;margin-bottom:6px;color:var(--ink)}
h3{font-family:var(--disp);font-weight:700;font-size:15px;letter-spacing:0;color:var(--ink)}
.lead{color:var(--ink-soft);font-size:16.5px;max-width:58ch;margin-top:16px;line-height:1.6}
.sub{color:var(--ink-soft);font-size:13.5px;margin-bottom:22px}

.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:22px;box-shadow:var(--shadow-sm)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:860px){.grid2,.grid3{grid-template-columns:1fr}}

/* botones */
.btn{
  font-family:var(--sans);font-weight:600;font-size:14px;
  background:var(--agua);color:#fff;border:none;border-radius:var(--r-sm);
  padding:11px 20px;cursor:pointer;transition:.15s;text-decoration:none;display:inline-block;
  box-shadow:0 1px 2px rgba(255,122,89,.25);
}
.btn:hover{filter:brightness(1.06);box-shadow:0 4px 10px rgba(255,122,89,.32);transform:translateY(-1px)}
.btn.ghost{background:#fff;color:var(--ink);border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.btn.ghost:hover{border-color:var(--agua);color:var(--agua-ink);filter:none;box-shadow:var(--shadow-md);transform:translateY(-1px)}
.btn:focus-visible,.opt:focus-visible,.nav-item:focus-visible{outline:2px solid var(--agua);outline-offset:2px}
.btn.is-disabled,.btn[disabled]{opacity:.45;cursor:not-allowed;pointer-events:none;transform:none;box-shadow:none}
.actions{display:flex;gap:10px;margin-top:32px;flex-wrap:wrap}

.toast{
  position:fixed;bottom:26px;left:50%;transform:translate(-50%,120%);
  background:var(--ink);color:#fff;border-radius:var(--r-sm);
  padding:13px 20px;font-size:13.5px;z-index:60;transition:.35s;box-shadow:var(--shadow-lg);
}
.toast.on{transform:translate(-50%,0)}
.toast b{color:#FFB49B}

.note{
  margin-top:44px;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r);
  font-family:var(--mono);font-size:11px;color:var(--ink-soft);line-height:1.7;background:var(--panel-2);
}
.note b{color:var(--agua-ink)}