/* =====================================================================
   Automatic Perú · sistema visual compartido
   Fábrica (Control v2) usa el tema oscuro "pizarra"; el cuestionario del
   cliente usa el tema claro. Mismos tamaños, ritmo, componentes y marca.
   Reglas canon adoptadas de SpeedGas (visual-system.css):
   1. Cambiar tokens antes de escribir colores o tamaños locales.
   2. Alturas de control únicas: 30 (compacta) / 34 (normal) / 40 (principal).
   3. Espaciado en base 4 (4 8 12 16 20 24 28 32 48); radios 6 controles, 10 paneles.
   4. Texto: cuerpo 13, etiquetas y ayudas 12; jerarquía por peso (400/600/700), no por tamaño.
   5. Colores de estado solo para significado operativo; chips con tinte suave + borde del mismo tono.
   ===================================================================== */

:root {
  /* ---------- Marca (del logo: chevrón blanco + verde lima→bosque) ---------- */
  --lima: #C3E85E;          /* solo avance y logro: segmentos completados, celebración */
  --bosque: #2D9222;        /* verde del logo */

  /* ---------- Tema claro (cuestionario) ---------- */
  --canvas: #EEF2F1;
  --surface-1: #FFFFFF;
  --surface-2: #F5F8F7;
  --surface-3: #E6ECEB;
  --border: #D6DEDD;
  --border-strong: #7C8D8F;     /* bordes de campos: 3.3:1 sobre blanco */
  --ink: #13202A;
  --ink-2: #3C4D55;
  --muted: #56666D;             /* 5.9:1 sobre blanco */
  --brand: #217A2B;             /* botón principal, texto blanco 5.6:1 */
  --brand-hover: #1A6523;
  --on-brand: #FFFFFF;
  --primary: #087B40;           /* botón principal sólido (verde SpeedGas), texto blanco */
  --primary-hover: #066A36;
  --brand-text: #1D6E26;
  --brand-soft: #E3F1DF;
  --done: #2E9A36;              /* segmento de avance completado */
  --typical-bg: #F1F6E4;        /* campo con valor típico precargado */
  --typical-ink: #4A5E12;

  --amber: #8F5A00;  --amber-soft: #FBEFD6;
  --red: #B42D25;    --red-soft: #FBE5E3;
  --blue: #1D6497;   --blue-soft: #E0EEF8;
  --green: #1D6E26;  --green-soft: #E3F1DF;
  --gray: #56666D;   --gray-soft: #E9EEEE;

  --focus: #1D6497;
  --shadow-1: 0 1px 2px rgba(19, 32, 42, .06), 0 1px 1px rgba(19, 32, 42, .04);
  --shadow-2: 0 8px 24px rgba(19, 32, 42, .12);

  /* ---------- Tipografía: una sola familia ---------- */
  --font: "Onest", ui-sans-serif, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, monospace; /* solo direcciones web y códigos */

  /* Escala densa (Fábrica) */
  --t-xs: 11.5px;  /* contadores en chips */
  --t-sm: 12px;    /* meta, etiquetas de columna */
  --t-md: 13px;    /* cuerpo */
  --t-lg: 15px;    /* título de panel */
  --t-xl: 18px;    /* título de página: nunca más grande */
  /* Escala cómoda (cuestionario, móvil primero: 16px evita el zoom de iOS) */
  --q-meta: 13px;
  --q-body: 16px;
  --q-label: 15px;
  --q-title: 22px;
  --q-hero: 28px;

  --w-regular: 400;
  --w-medium: 500;
  --w-semibold: 600;
  --w-bold: 700;
  --lh-tight: 1.25;
  --lh-body: 1.5;

  /* ---------- Espacio (base 4) ---------- */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s7: 28px; --s8: 32px; --s10: 40px; --s12: 48px;

  /* ---------- Forma ---------- */
  --r-sm: 6px;     /* controles */
  --r-md: 10px;    /* paneles */
  --r-pill: 999px; /* chips */

  /* ---------- Controles: tres alturas ---------- */
  --h-sm: 30px;
  --h-md: 34px;
  --field-h: var(--h-md);   /* altura canonica de campos (SpeedGas: 34px) */
  --h-lg: 40px;
  --touch: 44px;

  /* ---------- Movimiento ---------- */
  --dur-1: 120ms;
  --dur-2: 220ms;
  --ease: cubic-bezier(.2, .8, .2, 1);

  /* ---------- Layout ---------- */
  --sidebar: 216px;
  --topbar: 52px;
  --bottombar: 60px;
  --q-width: 640px;

  color-scheme: light;
}

/* ---------- Tema oscuro "pizarra" (Fábrica) ---------- */
[data-theme="dark"] {
  --canvas: #0D1417;
  --surface-1: #131C20;
  --surface-2: #18232A;
  --surface-3: #1F2D34;
  --border: #25343B;
  --border-strong: #5F737B;     /* 3.2:1 sobre surface-1 */
  --ink: #E8EEF0;
  --ink-2: #B7C4C9;
  --muted: #93A3A9;             /* 6.3:1 sobre surface-1 */
  --brand: #45B24F;             /* botón principal, texto oscuro 7.4:1 */
  --brand-hover: #56C25F;
  --on-brand: #06120A;
  --primary: #087B40;
  --primary-hover: #066A36;
  --brand-text: #72CF79;
  --brand-soft: rgba(69, 178, 79, .14);
  --done: #9FD450;
  --typical-bg: rgba(195, 232, 94, .07);
  --typical-ink: #CDE59A;

  --amber: #EDBB5A;  --amber-soft: rgba(237, 187, 90, .13);
  --red: #F2807A;    --red-soft: rgba(242, 128, 122, .13);
  --blue: #6DBDED;   --blue-soft: rgba(109, 189, 237, .13);
  --green: #72CF79;  --green-soft: rgba(114, 207, 121, .13);
  --gray: #93A3A9;   --gray-soft: rgba(147, 163, 169, .12);

  --focus: #8FD0F5;
  --shadow-1: 0 1px 0 rgba(0, 0, 0, .25);
  --shadow-2: 0 12px 32px rgba(0, 0, 0, .45);
  color-scheme: dark;
}

/* =====================================================================
   Base
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--t-md);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "tnum" 1, "cv11" 1;
}
h1, h2, h3, h4, p { margin: 0; }
h1, h2, h3, h4 { font-weight: var(--w-semibold); line-height: var(--lh-tight); letter-spacing: -.005em; }
a { color: var(--brand-text); text-underline-offset: 2px; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--r-sm); }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.mono { font-family: var(--mono); font-size: .95em; }
.muted { color: var(--muted); }
.num { font-variant-numeric: tabular-nums; }

/* Íconos (sprite en iconos.js) */
.i { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; }
.i-lg { width: 20px; height: 20px; }

/* =====================================================================
   Botones: primario (uno por vista), secundario, fantasma, peligro
   ===================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  height: var(--h-md); padding: 0 var(--s4);
  border: 1px solid color-mix(in srgb, var(--brand) 42%, transparent); border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--brand) 11%, var(--surface-1)); color: var(--brand-text);
  font-size: var(--t-md); font-weight: var(--w-bold); white-space: nowrap;
  cursor: pointer; text-decoration: none;
  transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.btn:hover:not([disabled]) { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 17%, var(--surface-1)); box-shadow: 0 7px 18px color-mix(in srgb, var(--brand) 15%, transparent); }
/* Botón principal (uno por vista): sólido, verde SpeedGas, texto blanco. Los demás botones quedan tintados. */
.btn.btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn.btn-primary:hover:not([disabled]) { background: var(--primary-hover); border-color: var(--primary-hover); box-shadow: none; }
.btn-tint { background: color-mix(in srgb, var(--brand) 10%, var(--surface-1)); border-color: color-mix(in srgb, var(--brand) 46%, var(--border)); color: var(--brand-text); }
.btn-info { border-color: color-mix(in srgb, var(--blue) 46%, var(--border)); color: var(--blue); background: color-mix(in srgb, var(--blue) 10%, var(--surface-1)); border-color: color-mix(in srgb, var(--blue) 46%, var(--border)); color: var(--blue); }
.btn-info:hover:not([disabled]) { border-color: var(--blue); background: color-mix(in srgb, var(--blue) 16%, var(--surface-1)); box-shadow: none; }
.btn-ghost { background: transparent; border-color: transparent; color: var(--ink-2); }
.btn-ghost:hover:not([disabled]) { border-color: transparent; background: var(--surface-3); color: var(--ink); box-shadow: none; }
.btn-danger { color: var(--red); border-color: color-mix(in srgb, var(--red) 52%, var(--border)); background: color-mix(in srgb, var(--red) 9%, var(--surface-1)); }
.btn-danger:hover:not([disabled]) { border-color: var(--red); background: color-mix(in srgb, var(--red) 16%, var(--surface-1)); box-shadow: none; }
.btn-sm { height: var(--h-sm); padding: 0 var(--s3); font-size: var(--t-sm); }
.btn-lg { height: var(--h-lg); padding: 0 var(--s6); font-size: var(--q-body); }
.btn-icon { width: var(--h-md); padding: 0; }
.btn-icon.btn-sm { width: var(--h-sm); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.btn-block { width: 100%; }

/* =====================================================================
   Campos
   ===================================================================== */
.field { display: grid; gap: 6px; min-width: 0; }
.field > label, .field .label { font-size: var(--t-md); font-weight: var(--w-semibold); color: var(--ink); display: flex; align-items: center; gap: var(--s2); }
.field .hint { font-size: var(--t-sm); color: var(--muted); }
.input, .select, .textarea {
  width: 100%; height: var(--field-h); padding: 0 var(--s3);
  background: var(--surface-1); color: var(--ink);
  border: 1px solid var(--border-strong); border-radius: var(--r-sm);
  transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.textarea { height: auto; min-height: 84px; padding: var(--s2) var(--s3); resize: vertical; line-height: var(--lh-body); }
.input::placeholder, .textarea::placeholder { color: var(--muted); opacity: 1; }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 28%, transparent); }
.select { appearance: none; padding-right: 32px; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 17px) 55%, calc(100% - 12px) 55%; background-size: 5px 5px; background-repeat: no-repeat; }
.input-affix { display: flex; align-items: stretch; }
.input-affix > .affix { display: inline-flex; align-items: center; padding: 0 var(--s3); border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--muted); font-size: var(--t-sm); white-space: nowrap; }
.input-affix > .affix:first-child { border-right: 0; border-radius: var(--r-sm) 0 0 var(--r-sm); }
.input-affix > .affix:last-child { border-left: 0; border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.input-affix > .input:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.input-affix > .input:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }

/* Valor típico precargado: fondo tenue + etiqueta. Al editarlo, desaparece. */
.is-typical .input, .is-typical .select { background: var(--typical-bg); }
.tag-typical { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 7px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--typical-ink) 8%, var(--surface-1)); color: var(--typical-ink); font-size: var(--t-xs); font-weight: var(--w-bold); letter-spacing: .04em; text-transform: uppercase; border: 1px solid color-mix(in srgb, var(--typical-ink) 42%, transparent); }

/* Error */
.is-error .input, .is-error .select, .is-error .textarea, .is-error .choice-group { border-color: var(--red); box-shadow: 0 0 0 1px var(--red); }
.error-msg { display: flex; gap: 6px; align-items: flex-start; color: var(--red); font-size: var(--t-sm); font-weight: var(--w-medium); }

/* Chips seleccionables (opciones múltiples) */
.choice-group { display: flex; flex-wrap: wrap; gap: var(--s2); border-radius: var(--r-sm); }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.choice span { display: inline-flex; align-items: center; gap: 6px; height: var(--h-md); padding: 0 var(--s4); border: 1px solid var(--border-strong); border-radius: var(--r-pill); background: var(--surface-1); color: var(--ink-2); font-weight: var(--w-medium); }
.choice input:checked + span { background: var(--brand-soft); border-color: var(--brand); color: var(--brand-text); }
.choice input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Interruptor sí/no */
.switch { position: relative; display: inline-flex; align-items: center; gap: var(--s3); cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch .track { width: 34px; height: 20px; border-radius: var(--r-pill); background: transparent; border: 1px solid var(--border-strong); position: relative; transition: border-color 180ms ease, background 180ms ease; flex: none; }
.switch .track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 12px; height: 12px; border-radius: 50%; background: var(--muted); transition: transform 180ms ease, background 180ms ease; }
.switch input:checked + .track { background: transparent; border-color: color-mix(in srgb, var(--brand) 65%, var(--border)); }
.switch input:checked + .track::after { transform: translateX(14px); background: var(--brand); }
.switch input:focus-visible + .track { outline: none; box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 42%, transparent); }
/* Casilla: colores de SpeedGas (desmarcada borde gris; marcada borde verde, fondo de superficie y check verde). Forma y tamano los define cada regla de uso. */
input[type="checkbox"]:not([role="switch"]):not(.switch input) { appearance: none; -webkit-appearance: none; border-color: var(--border-strong); background-color: var(--surface-1); background-repeat: no-repeat; background-position: center; background-size: 72%; cursor: pointer; }
input[type="checkbox"]:not([role="switch"]):not(.switch input):checked { border-color: var(--brand); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%2345b24f' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M3 8.2l3.2 3.2L13 4.4'/%3E%3C/svg%3E"); }
input[type="checkbox"]:not([role="switch"]):not(.switch input):focus-visible { outline: 2px solid color-mix(in srgb, var(--brand) 42%, transparent); outline-offset: 2px; }

/* Selector segmentado */
.seg { display: inline-flex; padding: 3px; gap: 2px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm); }
.seg button, .seg a { display: inline-flex; align-items: center; gap: 6px; height: calc(var(--h-sm) - 4px); padding: 0 var(--s3); border: 0; border-radius: 4px; background: transparent; color: var(--ink-2); font-size: var(--t-sm); font-weight: var(--w-semibold); cursor: pointer; text-decoration: none; white-space: nowrap; }
.seg [aria-pressed="true"], .seg [aria-current="true"] { background: var(--surface-1); color: var(--ink); box-shadow: var(--shadow-1); }
[data-theme="dark"] .seg [aria-pressed="true"], [data-theme="dark"] .seg [aria-current="true"] { background: var(--surface-3); }

/* =====================================================================
   Chips de estado: color + ícono + texto (nunca solo color)
   ===================================================================== */
.chip { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: var(--r-pill); font-size: var(--t-xs); font-weight: var(--w-bold); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; background: color-mix(in srgb, var(--gray) 8%, var(--surface-1)); color: var(--gray); border: 1px solid color-mix(in srgb, var(--gray) 40%, transparent); }
.chip .i { width: 13px; height: 13px; vertical-align: 0; stroke-width: 2.2; }
.chip-green { background: color-mix(in srgb, var(--green) 8%, var(--surface-1)); color: var(--green); border-color: color-mix(in srgb, var(--green) 42%, transparent); }
.chip-amber { background: color-mix(in srgb, var(--amber) 8%, var(--surface-1)); color: var(--amber); border-color: color-mix(in srgb, var(--amber) 42%, transparent); }
.chip-red { background: color-mix(in srgb, var(--red) 8%, var(--surface-1)); color: var(--red); border-color: color-mix(in srgb, var(--red) 42%, transparent); }
.chip-blue { background: color-mix(in srgb, var(--blue) 8%, var(--surface-1)); color: var(--blue); border-color: color-mix(in srgb, var(--blue) 42%, transparent); }
.count { display: inline-grid; place-items: center; min-width: 20px; height: 18px; padding: 0 5px; border-radius: var(--r-pill); font-size: var(--t-xs); font-weight: var(--w-bold); background: var(--surface-3); color: var(--ink-2); }
.count-amber { background: var(--amber); color: #FFFFFF; }
.count-red { background: var(--red); color: #FFFFFF; }
[data-theme="dark"] .count-amber { color: #1B1204; }
[data-theme="dark"] .count-red { color: #1E0605; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }

/* =====================================================================
   Avance por niveles: segmentos en forma de chevrón (el logo)
   ===================================================================== */
.levels { display: flex; gap: 3px; }
.levels .lv { flex: 1; height: 8px; background: var(--surface-3); clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 50%, calc(100% - 6px) 100%, 0 100%, 6px 50%); }
.levels .lv:first-child { clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 50%, calc(100% - 6px) 100%, 0 100%); border-radius: 3px 0 0 3px; }
.levels .lv.done { background: var(--done); }
.levels .lv.now { background: linear-gradient(90deg, var(--brand) 0 var(--fill, 35%), color-mix(in srgb, var(--brand) 28%, var(--surface-3)) var(--fill, 35%)); }
[data-theme="dark"] .levels .lv.now { background: linear-gradient(90deg, var(--lima) 0 var(--fill, 35%), color-mix(in srgb, var(--lima) 22%, var(--surface-3)) var(--fill, 35%)); }
.levels .lv.fail { background: var(--red); }
.levels .lv.pop { animation: pop 700ms var(--ease) 1; }
@keyframes pop { 0% { filter: brightness(1.6); transform: scaleY(1.9); } 100% { filter: none; transform: none; } }

/* Mini-rastreador de 6 pasos para tablas */
.track6 { display: inline-flex; gap: 2px; vertical-align: middle; }
.track6 i { width: 12px; height: 6px; background: var(--surface-3); clip-path: polygon(0 0, calc(100% - 3px) 0, 100% 50%, calc(100% - 3px) 100%, 0 100%, 3px 50%); }
.track6 i.d { background: var(--done); }
.track6 i.n { background: var(--amber); }
.track6 i.b { background: var(--blue); }
.track6 i.f { background: var(--red); }

/* Barra de avance simple (tarea en curso) */
.bar { height: 6px; background: var(--surface-3); border-radius: var(--r-pill); overflow: hidden; }
.bar > span { display: block; height: 100%; width: var(--v, 0%); background: var(--blue); border-radius: inherit; }

/* =====================================================================
   Superficies
   ===================================================================== */
.panel { background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--r-md); }
.panel-head { display: flex; align-items: center; gap: var(--s3); min-height: 48px; padding: var(--s2) var(--s4); border-bottom: 1px solid var(--border); }
.panel-head h2, .panel-head h3 { font-size: var(--t-lg); }
.panel-head .spacer { flex: 1; }
.panel-body { padding: var(--s4); }

/* Filas de lista densas */
.rows { list-style: none; margin: 0; padding: 0; }
.rows > li { display: grid; align-items: center; gap: var(--s3); min-height: 56px; padding: var(--s2) var(--s4); border-bottom: 1px solid var(--border); }
.rows > li:last-child { border-bottom: 0; }

/* Tabla */
.table { width: 100%; border-collapse: collapse; }
.table th { text-align: left; font-size: var(--t-sm); font-weight: var(--w-semibold); color: var(--muted); padding: var(--s2) var(--s4); border-bottom: 1px solid var(--border); white-space: nowrap; }
.table td { padding: 10px var(--s4); border-bottom: 1px solid var(--border); vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr { cursor: pointer; }
.table tbody tr:hover td { background: var(--surface-2); }
.table tbody tr:focus-within td { background: var(--surface-2); }
.table a.rowlink { color: var(--ink); text-decoration: none; font-weight: var(--w-semibold); }
.table a.rowlink:focus-visible { outline-offset: 4px; }

/* Aviso en línea */
.note { display: flex; gap: var(--s3); align-items: flex-start; padding: var(--s3) var(--s4); border-radius: var(--r-sm); background: var(--surface-2); border: 1px solid var(--border); color: var(--ink-2); }
.note-red { background: var(--red-soft); border-color: color-mix(in srgb, var(--red) 35%, transparent); color: var(--ink); }
.note-red > .i { color: var(--red); }
.note-green { background: var(--green-soft); border-color: color-mix(in srgb, var(--green) 35%, transparent); color: var(--ink); }
.note-green > .i { color: var(--green); }
.note-amber { background: var(--amber-soft); border-color: color-mix(in srgb, var(--amber) 35%, transparent); color: var(--ink); }
.note-amber > .i { color: var(--amber); }

/* Guardado automático discreto */
.autosave { display: inline-flex; align-items: center; gap: 6px; font-size: var(--q-meta); color: var(--muted); }
.autosave .i { width: 14px; height: 14px; color: var(--green); }
.autosave.saving .i { color: var(--muted); animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Avatar */
.avatar { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--surface-3); color: var(--ink); font-size: var(--t-xs); font-weight: var(--w-bold); flex: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
}