/* Supercontrol — estilos propios mínimos (todo lo demás es Tailwind).
   Identidad Soventix · Manual de Identidad Visual v0.2.
   Fuente de verdad de los tokens: design_handoff_supercontrol_ui/colors_and_type.css */

/* ---------- Montserrat (variable, local) ---------- */
@font-face {
  font-family: 'Montserrat';
  src: url('fonts/Montserrat-VariableFont_wght.ttf') format('truetype-variations'),
       url('fonts/Montserrat-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- Open Sans (estáticos por peso, locales; sin Google Fonts) ---------- */
@font-face {
  font-family: 'Open Sans';
  src: url('fonts/OpenSans-300.woff2') format('woff2');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Open Sans';
  src: url('fonts/OpenSans-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Open Sans';
  src: url('fonts/OpenSans-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Open Sans';
  src: url('fonts/OpenSans-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Open Sans';
  src: url('fonts/OpenSans-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  /* marca */  --teal: #0D6A71;
  --teal-800: #084F55;
  --teal-700: #0B5E64;
  --teal-500: #1F8189;
  --teal-200: #BFDEE1;
  --teal-100: #E2F0F1;
  --teal-50: #F1F8F9;
  --green: #9EAC3E;
  --green-700: #70801F;
  --green-600: #85952B;
  --green-200: #DEE4BB;
  --green-100: #EDF1D8;
  --green-50: #F6F8EB;
  --orange: #F79B31;
  --orange-700: #BF6A08;
  --orange-600: #DC831A;
  --orange-200: #FEDBAF;
  --orange-100: #FEEAD0;
  --orange-50: #FFF6EA;
  --cream: #F9F5E0;
  --grey: #C3CDD3;

  /* neutrales — sin negro puro */
  --ink-900: #0E1618;
  --ink-800: #1A2226;
  --ink-700: #2B3438;
  --ink-600: #4A5458;
  --ink-500: #6B7478;
  --ink-400: #9099A0;
  --ink-300: #BFC5C8;
  --ink-200: #E2E5E6;
  --ink-100: #EEF0F0;
  --ink-50: #F6F7F4;
  --paper: #FAFAF6;
  --canvas: #E5E9E9;

  /* texto sobre chip (derivados: los -700 de marca no alcanzan 4.5:1 a 11 px) */
  --on-green-100: #46520F;
  --on-orange-100: #8A4B04;
  --on-cream: #6B6320;
  --on-ink-50: #5C6569;

  --border-1: rgba(13, 106, 113, .12);
  --border-2: rgba(13, 106, 113, .24);

  --shadow-sm: 0 1px 2px rgba(13, 106, 113, .06);
  --shadow-md: 0 4px 16px rgba(13, 106, 113, .08);
  --shadow-lg: 0 12px 40px rgba(13, 106, 113, .14);

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-pill: 999px;

  --font-display: 'Montserrat', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Open Sans', 'Segoe UI', system-ui, sans-serif;
}

/* ---------- base ---------- */
h1, h2, h3, h4 { font-family: var(--font-display); color: var(--ink-900); }

/* eyebrow: Montserrat 700, mayúsculas, gris terciario */
.eyebrow {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 10.5px;
  line-height: 1.2;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-400);
}
/* variantes de eyebrow sobre fondos no blancos (evitan `!text-…` de Tailwind) */
.eyebrow-inv { color: rgba(255, 255, 255, .6); }
.eyebrow-soft { color: var(--ink-300); }

/* foco: siempre visible, naranja */
:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

/* ---------- tarjetas de sección (cabecera teal) ---------- */
.card-sec {
  background: #fff;
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  margin-bottom: 1rem;
  scroll-margin-top: 130px;
}
.sec-h {
  background: var(--teal);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 13px 22px;
}
/* el subtítulo deja de ser franja naranja: pasa a texto dentro de la cabecera teal.
   El naranja queda reservado para riesgo y para el documento oficial. */
.sec-sub {
  background: var(--teal);
  color: rgba(255, 255, 255, .8);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 10px 22px;
}
/* gana al `border-slate-100` que aún traen las plantillas (se retira en su paso) */
.card-sec .sec-sub { border-top-color: rgba(255, 255, 255, .18); }
/* tarjeta sin margen inferior (variante; evita `!mb-0` de Tailwind) */
.card-sec.card-flush { margin-bottom: 0; }
/* pegado a la cabecera: es su segunda línea, no una franja aparte */
.sec-h:has(+ .sec-sub) { padding-bottom: 5px; }
.sec-h + .sec-sub { padding-top: 0; padding-bottom: 12px; }

/* ---------- campos ---------- */
.field { display: grid; gap: 6px; font-size: 13px; }
.field > span {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13px;
  color: var(--ink-600);
}
.field input, .field select, .field textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--ink-800);
  background: #fff;
  border: 1px solid var(--border-1);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  box-shadow: var(--shadow-sm);
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-400); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
  border-color: var(--teal);
}
.field textarea { resize: vertical; }
.field-error input, .field-error select, .field-error textarea { border-color: var(--orange); }

/* ---------- pad de firma: misma proporción que el canvas (520×160) ---------- */
.sig-pad {
  width: 100%; aspect-ratio: 520 / 160; max-height: 160px; display: block;
  touch-action: none; cursor: crosshair;
  background: #fff;
  border: 1.5px dashed var(--grey);
  border-radius: var(--radius-sm);
}
.sig-pad:focus-visible { border-color: var(--teal); }

/* ---------- ficha réplica (pantalla e impresión) ---------- */
.ficha-paper {
  background: #fff;
  font-family: var(--font-body);
  font-size: 11px;
  line-height: 16px;
  color: var(--ink-800);
  max-width: 900px;
  margin-inline: auto;
}
.t-sec {
  background: var(--teal); color: #fff; text-align: center;
  font-family: var(--font-display); font-weight: 700; font-size: 10px;
  letter-spacing: .09em; text-transform: uppercase; padding: 5px 8px;
}
.t-sub {
  background: var(--orange); color: #fff; text-align: center;
  font-family: var(--font-display); font-weight: 700; font-size: 9px;
  letter-spacing: .06em; text-transform: uppercase; padding: 4px 8px;
  border-top: 1px solid rgba(255, 255, 255, .2);
}
.t-cell { border: 1px solid var(--ink-700); padding: 5px 8px; min-height: 1.6rem; }
.t-table { width: 100%; border-collapse: collapse; }
.t-table th {
  background: var(--cream); color: var(--ink-700);
  font-family: var(--font-display); font-weight: 700; font-size: 9px;
  letter-spacing: .06em; text-transform: uppercase;
  border: 1px solid var(--ink-700); padding: 4px 6px;
}
.t-table td { border: 1px solid var(--ink-700); padding: 4px 6px; vertical-align: top; }

/* ---------- sistema de estados ----------
   La paleta de marca cubre la escala semántica completa: el riesgo es naranja,
   no rojo. Un solo juego de colores alimenta chips, celdas de matriz y barras.
   Forma en .chip / .mx-cell / .est-punto, color en .est-* — las de color van
   después para que su border-color gane a la forma. */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid transparent; border-radius: var(--radius-pill);
  padding: 4px 10px;
  font-family: var(--font-display); font-weight: 700; font-size: 10.5px;
  letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
}
.chip-punto::before {
  content: ''; flex-shrink: 0;
  width: 8px; height: 8px; border-radius: var(--radius-pill);
  background: var(--solido, currentColor);
}

/* celda de la matriz comparativa: ancho completo de columna, no píldora suelta */
.mx-cell {
  display: block; border: 1px solid transparent; border-radius: 4px;
  padding: 5px 0; text-align: center;
  font-family: var(--font-display); font-weight: 700; font-size: 10.5px;
  letter-spacing: .04em; white-space: nowrap;
}

/* punto sólido por ítem (historia de estado en las barras de fila) */
.est-punto {
  display: inline-block; width: 9px; height: 9px; border-radius: var(--radius-pill);
  background: var(--solido, #D8DDDE);
}

/* barra segmentada: la representación por defecto del avance */
.barra-seg {
  display: flex; overflow: hidden;
  height: 10px; border-radius: var(--radius-pill); background: var(--ink-100);
}
.barra-seg > span { display: block; height: 100%; }

/* colores por estado (van al final del bloque a propósito: ver nota de arriba) */
.est-completado { background: var(--green-100); border-color: var(--green-200);  color: var(--on-green-100);  --solido: var(--green-600); }
.est-curso      { background: var(--teal-100);  border-color: var(--teal-200);   color: var(--teal-700);      --solido: var(--teal-500); }
.est-riesgo     { background: var(--orange-100);border-color: var(--orange-200); color: var(--on-orange-100); --solido: var(--orange); }
.est-pausado    { background: var(--cream);     border-color: #E8E2C4;           color: var(--on-cream);      --solido: #C9BE7A; }
.est-noini      { background: var(--ink-50);    border-color: var(--ink-200);    color: var(--on-ink-50);     --solido: #D8DDDE; }
/* el handoff propone --ink-400 aquí, pero da 2.69:1 sobre #F6F7F4; se usa el
   mismo texto que "no iniciado" (5.55:1) — el fondo ya es idéntico y la
   abreviatura (— frente a "no ini.") es la que distingue los dos casos. */
.est-vacio      { background: var(--ink-50);    border-color: var(--ink-200);    color: var(--on-ink-50);     --solido: #D8DDDE; }
/* el punto es macizo: su relleno es el sólido del estado, no el fondo del chip */
.est-punto.est-completado, .est-punto.est-curso, .est-punto.est-riesgo,
.est-punto.est-pausado, .est-punto.est-noini, .est-punto.est-vacio { background: var(--solido); }

/* ---------- grupo segmentado (filtros de la portada, rol del alta) ---------- */
.filtro-on { background: var(--teal); color: #fff; }
.rol-on { background: var(--teal); color: #fff; border-color: var(--teal); }

/* ---------- navegación principal por módulos ---------- */
.module-tab {
  position: relative; min-width: 0; display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border: 1px solid transparent; border-radius: var(--radius-md);
  color: var(--ink-500); transition: background .2s ease-out, border-color .2s ease-out, color .2s ease-out;
}
.module-tab:hover { background: var(--ink-50); color: var(--teal-700); }
.module-tab b {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--font-display); font-size: 12.5px; line-height: 1.25; font-weight: 700;
}
.module-tab small { display: block; margin-top: 2px; font-size: 11px; line-height: 1.25; white-space: nowrap; }
.module-icon {
  width: 34px; height: 34px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px; background: var(--ink-50); border: 1px solid var(--ink-200);
}
.module-tab.module-on { color: var(--teal-700); background: var(--teal-50); border-color: var(--teal-200); }
.module-tab.module-on::after {
  content: ''; position: absolute; left: 12px; right: 12px; bottom: -9px; height: 3px;
  border-radius: 3px 3px 0 0; background: var(--orange);
}
.module-tab.module-on .module-icon { color: #fff; background: var(--teal); border-color: var(--teal); }
/* en la barra lateral el testigo va a la izquierda, no abajo */
@media (min-width: 1024px) {
  #module-nav .module-tab.module-on::after {
    left: -9px; right: auto; top: 8px; bottom: 8px;
    width: 3px; height: auto;
    border-radius: 0 3px 3px 0;
  }
}
@media (max-width: 639px) {
  .module-tab { justify-content: center; gap: 6px; padding: 8px 5px; }
  .module-tab .module-icon { width: 28px; height: 28px; }
  .module-tab b { font-size: 10.5px; white-space: normal; text-align: center; }
  .module-tab small { display: none; }
  .module-tab > span:last-child { text-align: center; }
}
@media (min-width: 1024px) {
  #editor-layout.module-profile-layout { display: block; }
  #editor-layout.module-profile-layout #side-nav { display: none; }
}

/* ---------- navegación por pasos: una sección visible ---------- */
.sec-hidden { display: none; }
[data-sec] { animation: secIn .24s ease-out; }
@keyframes secIn { from { opacity: 0; } to { opacity: 1; } }

/* ---------- barra lateral de secciones ---------- */
.nav-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  font-family: var(--font-body); font-size: 13px; font-weight: 500;
  color: var(--ink-600);
  padding: 8px 10px; border-radius: var(--radius-sm);
  border: 1px solid transparent;
  transition: background .2s ease-out, border-color .2s ease-out;
}
.nav-item:hover { background: var(--ink-50); }
.nav-item.nav-on {
  background: var(--teal-100);
  border-color: var(--teal-200);
  color: var(--teal-700);
  font-weight: 600;
}
.nav-num {
  width: 20px; height: 20px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 10.5px; font-weight: 700;
  border-radius: var(--radius-pill);
  background: var(--ink-200); color: var(--on-ink-50);
}
.nav-on .nav-num { background: var(--teal); color: #fff; }
/* sección completa: verde con glifo de check (la completitud la calcula app.js) */
.nav-item.nav-done .nav-num { background: var(--green-600); color: #fff; font-size: 0; }
.nav-item.nav-done .nav-num::after { content: '\2713'; font-size: 11px; line-height: 1; }

/* ---------- tabs móvil ---------- */
#tabs-mobile [data-nav].tab-on { background: var(--teal); color: #fff; border-color: var(--teal); }

/* ---------- anterior / siguiente ---------- */
.sec-nav {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 14px 22px;
  border-top: 1px solid var(--ink-100);
  background: var(--ink-50);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}
.sec-nav-btn {
  font-family: var(--font-display); font-size: 12.5px; font-weight: 700;
  color: var(--teal);
  padding: 9px 15px; border-radius: var(--radius-md);
  border: 1px solid var(--grey); background: #fff;
  transition: background .2s ease-out, color .2s ease-out, box-shadow .2s ease-out;
}
.sec-nav-btn:hover { background: var(--teal); border-color: var(--teal); color: #fff; }
.sec-nav-btn:active { transform: scale(.98); }
.sec-nav-next { background: var(--teal); color: #fff; border-color: var(--teal); }
.sec-nav-next:hover { background: var(--teal-800); border-color: var(--teal-800); box-shadow: var(--shadow-lg); }

/* ---------- scroll lista ---------- */
#lista::-webkit-scrollbar { width: 8px; }
#lista::-webkit-scrollbar-thumb { background: var(--grey); border-radius: 8px; }

/* ---------- impresión: solo el documento elegido (#print-root) ---------- */
@media print {
  body > *:not(#print-root) { display: none !important; }
  #print-root { display: block !important; }
  body { background: #fff !important; }
  .ficha-paper { max-width: none !important; }
  /* los códigos del calendario semanal sí se imprimen con fondo */
  #print-root [data-cal-chip] { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}