/* MAIA Escalas — estilo "Modernist" (adaptado del diseño de Claude Design)
   vestido con la identidad MAIA: tema oscuro, acento turquesa medición.
   Fuente de verdad de la marca: diseno/marca/MANUAL.md — los valores de §4 se
   copian aquí tal cual y NO se inventan tonos nuevos: si hace falta una
   variante, se deriva del turquesa moviendo SOLO la luminosidad (mismo matiz
   215), por eso la rampa de acento va en oklch.
   Esquinas rectas, divisores de 2px, tipografía Archivo VENDORIZADA (fonts/)
   porque la app funciona sin internet. */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 1000;           /* fuente variable: un archivo, todos los pesos */
  font-display: swap;
  src: url('../fonts/archivo-latin.woff2') format('woff2');
}

:root {
  /* ---- marca (MANUAL §4) ---- */
  --color-bg: #17181A;             /* Tinta */
  --color-surface: #22252B;        /* mismo fondo que el ícono de la app */
  --color-text: #FFFEFB;           /* Tinta invertida */
  --color-accent: #0090A9;         /* turquesa medición · tema oscuro */
  --color-accent-2: oklch(0.68 0.10 215);
  --color-divider: color-mix(in srgb, #FFFEFB 24%, transparent);

  /* rampa neutra: en tema oscuro va al revés que en claro — 100 es lo más
     cercano al fondo y 900 lo más cercano al texto. Las reglas que usan
     "fondo 100 / texto 800" siguen leyéndose bien sin tocarlas. */
  --color-neutral-100: color-mix(in srgb, var(--color-text)  7%, var(--color-bg));
  --color-neutral-200: color-mix(in srgb, var(--color-text) 11%, var(--color-bg));
  --color-neutral-300: color-mix(in srgb, var(--color-text) 17%, var(--color-bg));
  --color-neutral-400: color-mix(in srgb, var(--color-text) 25%, var(--color-bg));
  --color-neutral-500: color-mix(in srgb, var(--color-text) 38%, var(--color-bg));
  --color-neutral-600: color-mix(in srgb, var(--color-text) 52%, var(--color-bg));
  --color-neutral-700: color-mix(in srgb, var(--color-text) 66%, var(--color-bg));
  --color-neutral-800: color-mix(in srgb, var(--color-text) 80%, var(--color-bg));
  --color-neutral-900: color-mix(in srgb, var(--color-text) 92%, var(--color-bg));

  /* acento: mismo matiz 215, sólo cambia la luminosidad (MANUAL §4).
     100 = fondo teñido para chips · 700/800 = turquesa legible sobre oscuro. */
  --color-accent-100: oklch(0.30 0.045 215);
  --color-accent-300: oklch(0.44 0.080 215);
  --color-accent-600: oklch(0.66 0.110 215);
  --color-accent-700: oklch(0.74 0.100 215);
  --color-accent-800: oklch(0.86 0.060 215);

  /* semáforo clínico. NO es decoración ni marca: son estados del dato (LSI,
     tendencia, acciones destructivas). El turquesa jamás se usa para esto,
     porque en MAIA el acento identifica, no califica (MANUAL §4). */
  --color-ok: oklch(0.76 0.14 150);
  --color-ok-100: oklch(0.30 0.055 150);
  --color-alerta: oklch(0.80 0.13 75);
  --color-alerta-100: oklch(0.32 0.055 75);
  --color-peligro: oklch(0.72 0.17 25);
  --color-peligro-100: oklch(0.30 0.085 25);

  --font-heading: 'Archivo', system-ui, sans-serif;
  --font-body: 'Archivo', system-ui, sans-serif;
  /* logotipo y descriptor: MANUAL §5 pide Helvetica Neue e IBM Plex Mono. Van
     por pila del sistema (iPad/iPhone/Mac ya las traen) para no cargar otro
     archivo de fuente en una app que debe abrir sin internet. */
  --font-marca: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, monospace;

  --space-1: 4px; --space-2: 8px; --space-3: 12px;
  --space-4: 16px; --space-6: 24px; --space-8: 32px;

  --shadow-sm: 0 1px 2px color-mix(in srgb, #000 40%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #000 46%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #000 55%, transparent);

  color-scheme: dark;              /* tema por defecto de MAIA Escalas (MANUAL §3) */
}

*, *::before, *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--color-bg); color: var(--color-text);
  font-family: var(--font-body); font-size: 15px; line-height: 1.55; font-weight: 400;
  -webkit-text-size-adjust: 100%;
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading); font-weight: 800;
  line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 var(--space-2);
}
h1 { font-size: 42px; } h2 { font-size: 32px; } h3 { font-size: 25px; }
h4 { font-size: 20px; } h5 { font-size: 16px; }
p { margin: 0 0 var(--space-3); }
a { color: var(--color-accent-700); text-underline-offset: 3px; }
.text-muted { color: color-mix(in srgb, var(--color-text) 55%, transparent); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent-700); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

.hr { height: 2px; border: 0; margin: var(--space-4) 0; background: var(--color-divider); }

/* ---------- botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-heading); font-weight: 800;
  font-size: 14px; line-height: 1.2; color: var(--color-text);
  background: transparent; border: 1px solid transparent;
  padding: var(--space-2) calc(var(--space-3) * 1.2);
  border-radius: 0;
}
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary { background: var(--color-accent); color: var(--color-bg); }
.btn-primary:hover { background: var(--color-accent-600); }
.btn-primary:active { background: var(--color-accent-700); }
.btn-secondary { border-color: var(--color-divider); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }
.btn-ghost { color: var(--color-accent-700); padding-inline: var(--space-1); }
.btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.btn-peligro { border-color: color-mix(in srgb, var(--color-peligro) 55%, transparent); color: var(--color-peligro); }
.btn-peligro:hover { background: var(--color-peligro-100); }
.btn-icon { width: 36px; height: 36px; padding: 0; }
.btn-block { width: 100%; margin-top: var(--space-2); }
.btn-grande { min-height: 48px; }

/* ---------- formularios ---------- */
.field > label {
  display: block; font-size: 12px; margin-bottom: 5px;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.input {
  width: 100%; min-height: 36px; padding: 6px 10px; font: inherit;
  font-size: 14px; color: var(--color-text); caret-color: var(--color-accent);
  background: var(--color-surface);
  border: 1px solid var(--color-divider); border-radius: 0;
  appearance: none; -webkit-appearance: none;
}
.input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
textarea.input { min-height: 90px; resize: vertical; }
select.input { min-height: 48px; font-size: 16px; }

/* contador − [valor] unidad + (unidos, como en el diseño) */
.stepper { display: flex; align-items: stretch; }
.stepper .paso {
  width: 48px; height: 48px; padding: 0; font-size: 20px; flex: none;
  font-family: var(--font-heading); font-weight: 800;
  background: transparent; border: 1px solid var(--color-divider);
  color: var(--color-text); cursor: pointer; border-radius: 0;
}
.stepper .paso:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }
.stepper input {
  flex: 1; min-width: 0; height: 48px; font-size: 20px; font-weight: 600;
  text-align: center; border-left: 0; border-right: 0;
}
.stepper .unidad {
  display: flex; align-items: center; padding: 0 10px; flex: none;
  border-top: 1px solid var(--color-divider); border-bottom: 1px solid var(--color-divider);
  font-size: 12px; color: var(--color-neutral-600);
}

/* opciones tipo botón plano */
.opciones { display: flex; flex-wrap: wrap; gap: 6px; }
.op {
  border: 1px solid var(--color-divider); background: transparent; color: inherit;
  padding: 10px 14px; min-height: 44px; font-size: 13px; font-family: inherit;
  cursor: pointer; border-radius: 0; flex: 1 1 auto;
}
.op.activa {
  background: var(--color-accent); border-color: var(--color-accent);
  color: var(--color-bg); font-weight: 700;
}

/* ---------- tarjetas / kickers / tags ---------- */
.card {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-3); border-radius: 0; background: var(--color-surface);
}
.card-clic { cursor: pointer; }
.card-clic:hover { outline: 1px solid var(--color-divider); }
.card-kicker { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 60%, transparent); }
.card-title { font-family: var(--font-heading); font-weight: 800; font-size: 17px; line-height: 1.2; }
.card-body { margin: 0; font-size: 13px; opacity: 0.8; flex: 1; }
.card-meta {
  display: flex; align-items: center; gap: 6px; font-size: 11px;
  color: color-mix(in srgb, var(--color-text) 50%, transparent);
}
.elev-sm { box-shadow: var(--shadow-sm); }

.tag {
  display: inline-flex; align-items: center; font-size: 11px;
  letter-spacing: 0.02em; padding: 3px 10px; border-radius: 0; white-space: nowrap;
}
.tag-accent { background: var(--color-accent-100); color: var(--color-accent-800); }
.tag-neutral { background: var(--color-neutral-100); color: var(--color-neutral-800); }
.tag-ok { background: var(--color-ok-100); color: var(--color-ok); }
.tag-alerta { background: var(--color-alerta-100); color: var(--color-alerta); }
.tag-peligro { background: var(--color-peligro-100); color: var(--color-peligro); }

/* ---------- tablas ---------- */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th {
  text-align: left; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
  padding: var(--space-2); border-bottom: 2px solid var(--color-divider);
}
.table td { padding: var(--space-2); border-bottom: 1px solid var(--color-divider); }
.table tbody tr:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }
.table tr.clic { cursor: pointer; }
.table tr.grupo td {
  font-family: var(--font-heading); font-weight: 800; font-size: 13px;
  padding-top: var(--space-4); border-bottom: 2px solid var(--color-divider);
}

/* ---------- diálogo ---------- */
.dialog-backdrop {
  position: fixed; inset: 0; display: grid; place-items: center; z-index: 50;
  padding: var(--space-4);
  background: color-mix(in srgb, #000 62%, transparent);
}
.dialog {
  width: min(440px, 100%); display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-4); border-radius: 0;
  background: var(--color-surface); box-shadow: var(--shadow-lg);
}
.dialog-title { font-family: var(--font-heading); font-weight: 800; font-size: 20px; }
.dialog-body { font-size: 14px; opacity: 0.85; }
.dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-2); }

/* ---------- logotipo horizontal (MANUAL §3) ----------
   Isotipo a 40 px (archivo -small-: el nodo es punto de color, sin barras,
   porque por debajo de 56 px el símbolo se vuelve mancha), separación al texto
   0.45 × 40 = 18 px, texto 0.46 × 40 ≈ 18.5 px, letter-spacing .16em,
   MAIA en regular y Escalas en medium. La zona de respeto —el radio de un
   nodo— la da el padding de la barra: nada entra ahí. */
.logotipo { display: flex; align-items: center; gap: 18px; }
.logotipo .isotipo { display: block; flex: none; }
.logotipo .marca {
  font-family: var(--font-marca); font-size: 18.5px; line-height: 1;
  letter-spacing: 0.16em; white-space: nowrap; color: var(--color-text);
}
.logotipo .marca b { font-weight: 400; }      /* MAIA */
.logotipo .marca span { font-weight: 500; }   /* Escalas */

/* ═══════════ armazón de la app ═══════════ */
#app { display: flex; height: 100vh; height: 100dvh; overflow: hidden; }

#ladoIzq {
  /* 272 px = 40 (isotipo) + 18 (separación) + 152 (texto) + 36 (padding) + holgura.
     El logotipo horizontal del MANUAL §3 no se achica: la barra se ensancha. */
  width: 272px; flex: none; display: flex; flex-direction: column;
  border-right: 2px solid var(--color-divider); padding: 24px 18px;
}
#ladoIzq .logotipo { margin-bottom: 26px; }
.nav-item {
  display: flex; justify-content: flex-start; width: 100%;
  padding: 10px 12px; margin-bottom: 2px;
  border-left: 3px solid transparent; border-top: 0; border-right: 0; border-bottom: 0;
  background: transparent; cursor: pointer; border-radius: 0;
  font-family: var(--font-heading); font-weight: 800; font-size: 14px; color: var(--color-text);
}
.nav-item.activa { border-left-color: var(--color-accent); background: var(--color-surface); }
#ladoIzq .pie {
  border-top: 2px solid var(--color-divider); padding-top: 14px;
  display: flex; flex-direction: column; gap: 6px;
}
#ladoIzq .pie .estado { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; }
#ladoIzq .pie .punto { width: 8px; height: 8px; background: var(--color-accent); flex: none; }

#columna { flex: 1; display: flex; flex-direction: column; min-width: 0; }
#barraMovil {
  display: none; align-items: center; gap: 10px; flex: none;
  padding: calc(env(safe-area-inset-top, 0px) + 12px) 16px 12px;
  border-bottom: 2px solid var(--color-divider);
}
#barraMovil .punto { width: 7px; height: 7px; background: var(--color-accent); }

#contenido { flex: 1; overflow: auto; -webkit-overflow-scrolling: touch; }
.pagina { padding: 28px 36px; max-width: 1080px; }

#tabs { display: none; border-top: 2px solid var(--color-divider); flex: none;
  padding-bottom: env(safe-area-inset-bottom, 0px); }
#tabs .tab {
  flex: 1; min-height: 54px; display: flex; align-items: center; justify-content: center;
  border: 0; border-top: 3px solid transparent; background: transparent; border-radius: 0;
  font-family: var(--font-heading); font-weight: 800; font-size: 14px; color: var(--color-text);
  cursor: pointer;
}
#tabs .tab.activa { border-top-color: var(--color-accent); color: var(--color-accent); }

/* ---------- captura (asistente por secciones) ---------- */
.captura { display: flex; min-height: 100%; }
.rail {
  width: 280px; flex: none; border-right: 1px solid var(--color-divider);
  padding: 24px 18px;
}
.rail-item {
  display: flex; gap: 10px; align-items: center; padding: 10px 8px; cursor: pointer;
  font-size: 13px; line-height: 1.25; border-left: 3px solid transparent;
}
.rail-item.activa { border-left-color: var(--color-accent); background: var(--color-surface); font-weight: 600; }
.rail-num {
  width: 24px; height: 24px; flex: none; display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; border: 1px solid var(--color-divider);
}
.rail-num.lista { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-bg); }
.captura-main { flex: 1; padding: 28px 36px; max-width: 780px; min-width: 0; }

.pasos-movil {
  display: none; gap: 6px; overflow: auto; padding: 12px 0;
  border-bottom: 1px solid var(--color-divider);
}
.pasos-movil .paso-num {
  width: 40px; height: 40px; flex: none; display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700; cursor: pointer; font-family: inherit; border-radius: 0;
  border: 1px solid var(--color-divider); background: transparent; color: inherit;
}
.pasos-movil .paso-num.activa { border: 2px solid var(--color-accent); color: var(--color-accent); }
.pasos-movil .paso-num.lista { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-bg); }

.tecnica { background: var(--color-surface); padding: 14px 16px; margin-bottom: 22px; }
.tecnica .cuerpo { font-size: 13px; line-height: 1.5; }
.tecnica ul { margin: 0; padding-left: 18px; }
.tecnica li { margin-bottom: 5px; }

.campos-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 24px; }
.campos-grid .ancho-total { grid-column: 1 / -1; }

.cinta {
  display: flex; gap: 36px; flex-wrap: wrap; align-items: flex-end;
  border-top: 2px solid var(--color-divider); margin-top: 26px; padding-top: 14px;
}
.cinta .dato .num { font-family: var(--font-heading); font-weight: 800; font-size: 26px; line-height: 1.15; }
.cinta .num.acento { color: var(--color-accent-700); }
.cinta .num.ok { color: var(--color-ok); }
.cinta .num.alerta { color: var(--color-alerta); }
.cinta .num.peligro { color: var(--color-peligro); }
.cinta .nota { font-size: 11px; color: color-mix(in srgb, var(--color-text) 50%, transparent); align-self: flex-end; max-width: 220px; }

.pie-captura {
  display: flex; gap: 10px; border-top: 2px solid var(--color-divider);
  margin-top: 26px; padding-top: 16px; padding-bottom: 32px;
}

/* cronómetro */
.crono { display: flex; align-items: center; gap: 14px; margin: 0 0 18px; }
.crono .tiempo { font-family: var(--font-heading); font-weight: 800; font-size: 34px; font-variant-numeric: tabular-nums; flex: 1; }

/* ---------- gráficas ---------- */
.grafica-svg { width: 100%; display: block; }
.grid-graficas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.grid-graficas-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.grafica-num { font-family: var(--font-heading); font-weight: 800; font-size: 30px; line-height: 1; }

/* ---------- perfil ---------- */
.franja-datos {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px;
  border-top: 2px solid var(--color-divider); border-bottom: 2px solid var(--color-divider);
  padding: 14px 0; margin-top: 16px;
}
.franja-datos .valor { font-weight: 600; font-size: 14px; }

/* ---------- escalas (cuestionario) ---------- */
.progreso { height: 4px; background: var(--color-neutral-300); margin: 10px 0 18px; }
.progreso > div { height: 100%; background: var(--color-accent); transition: width .25s; }
.pregunta-texto { font-family: var(--font-heading); font-weight: 800; font-size: 22px; line-height: 1.25; margin: 8px 0 18px; letter-spacing: -0.015em; }
.op-escala {
  display: block; width: 100%; text-align: left; font-family: inherit; font-size: 15px;
  background: transparent; color: inherit; border: 1px solid var(--color-divider);
  border-radius: 0; padding: 14px 16px; margin-bottom: 8px; cursor: pointer; min-height: 48px;
}
.op-escala.activa { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-bg); font-weight: 700; }
.resultado-num { font-family: var(--font-heading); font-weight: 800; font-size: 64px; line-height: 1; color: var(--color-accent-700); }

/* ---------- varios ---------- */
.vacio { text-align: center; color: color-mix(in srgb, var(--color-text) 55%, transparent);
  padding: 46px 20px; font-size: 15px; line-height: 1.5; }
.vacio .icono { font-size: 34px; margin-bottom: 8px; }
.oculto { display: none !important; }
.aviso { background: var(--color-surface); border-left: 3px solid var(--color-divider);
  padding: 12px 14px; font-size: 13px; line-height: 1.5; margin: 12px 0; }
.lista-tarjetas { display: flex; flex-direction: column; gap: 10px; }
.dos-col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.grid-cartas { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
input[type=range] { width: 100%; accent-color: var(--color-accent); }
.visita-datos { display: flex; gap: 12px; margin-bottom: 18px; }
.visita-datos .field { flex: 1; }
.visita-datos .input { min-height: 40px; }

/* ═══════════ ancho (iPad / escritorio): ocultar lo exclusivo del teléfono ═══ */
@media (min-width: 900px) {
  .solo-angosto { display: none !important; }
}

/* ═══════════ teléfono / angosto ═══════════ */
@media (max-width: 899px) {
  #ladoIzq { display: none; }
  #barraMovil { display: flex; }
  #tabs { display: flex; }
  .pagina { padding: 16px; }
  h2 { font-size: 25px; } h3 { font-size: 20px; }
  .solo-ancho { display: none !important; }
  .captura { display: block; }
  .rail { display: none; }
  .pasos-movil { display: flex; }
  .captura-main { padding: 16px; max-width: none; }
  .campos-grid { grid-template-columns: 1fr; gap: 16px; }
  .grid-graficas, .grid-graficas-2 { grid-template-columns: 1fr; }
  .franja-datos { grid-template-columns: 1fr 1fr; gap: 10px 16px; padding: 12px 0; margin-top: 12px; }
  .franja-datos .valor { font-size: 13px; }
  .cinta { gap: 20px; }
  .cinta .dato .num { font-size: 20px; }
  .stepper .paso { width: 52px; height: 52px; font-size: 22px; }
  .stepper input { height: 52px; font-size: 22px; }
  .table { font-size: 13px; }
  .pie-captura { position: sticky; bottom: 0; background: var(--color-bg); }
}

/* ═══════════ teléfonos muy angostos ═══════════ */
@media (max-width: 380px) {
  /* el logotipo no se achica por debajo de los 40 px de isotipo que pide el
     MANUAL §6: lo que cede es el indicador de estado, no la marca */
  #barraMovil .estado-corto { display: none; }
}

/* ---------- logotipo apilado (MANUAL §3 y §6.3) ----------
   Pantalla de entrada: isotipo a 96 px —a ese tamaño SÍ lleva su símbolo, las
   barras de puntaje—, MAIA a 40 px con letter-spacing .22em, Escalas debajo, y
   el descriptor en monoespaciada, mayúsculas, dos renglones.
   El text-indent compensa el espacio que el letter-spacing deja colgando a la
   derecha, para que el bloque quede ópticamente centrado. */
.logotipo-apilado { text-align: center; }
.logotipo-apilado .isotipo { margin: 0 auto 18px; }
.logotipo-apilado .marca { font-family: var(--font-marca); line-height: 1; color: var(--color-text); }
.logotipo-apilado .marca b {
  display: block; font-size: 40px; font-weight: 400;
  letter-spacing: 0.22em; text-indent: 0.22em;
}
.logotipo-apilado .marca span {
  display: block; margin-top: 9px; font-size: 20px; font-weight: 500;
  letter-spacing: 0.22em; text-indent: 0.22em;
}
.logotipo-apilado .descriptor {
  margin-top: 18px; font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.14em; line-height: 1.75; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}