/* Variables de color (temas claro y oscuro), tipografía y base. */

:root {
  --bg: #1a1d24;
  --bg-1: #22262f;
  --bg-2: #2a2f39;
  --bg-3: #343a45;
  /* Color que toma el arco inferior del logo para fundirse con su contenedor.
     DEBE ir siempre igual a --bg-1 (sidebar, login y overlay usan ese fondo);
     si se desincroniza, el borde del logo deja de verse recortado. */
  --logo-bg: #22262f;
  --border: rgba(255,255,255,0.08);
  --border-soft: rgba(255,255,255,0.05);
  --border-strong: rgba(255,255,255,0.16);
  --teal: #4a86c8;
  --teal-dim: rgba(74,134,200,0.14);
  --blue: #1c5aa6;
  --blue-deep: #16385f;
  --amber: #e3a64a;
  --red: #dd6b7c;
  /* Verde de "terminado": un tono menos saturado para no cansar la vista. */
  --ok: #4cb886;
  --ok-dim: rgba(76,184,134,0.14);
  --estado-sin: #59616f;
  --text: #e8ebef;
  --text-dim: #b3bac3;
  --text-faint: #8a919b;
  --radius: 10px;
  --radius-sm: 7px;
  --shadow: 0 10px 24px rgba(0,0,0,0.28);
  /* Superficies de las tablas de registro, que antes iban con color fijo. */
  --reg-bg: #2c323d;
  --reg-head: #373e4a;
  --reg-head-text: #e4e9ef;
  --reg-col1: #333a45;
  --reg-col1-hover: #3d4551;
  --reg-total: #404856;
  --campo-bg: #1d222a;
  --campo-borde: rgba(255,255,255,0.26);
  --opcion-bg: #262b34;
  --opcion-text: #f3f4f6;
  --hover-fila: rgba(255,255,255,0.03);
  --hover-suave: rgba(255,255,255,0.06);
  --hover-fuerte: rgba(255,255,255,0.10);
  --pastilla: rgba(255,255,255,0.06);
  --esquema: dark;
  --font-head: 'Sora', -apple-system, sans-serif;
  --font-body: 'Inter', -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

/* ---------------- Tema claro ----------------
   Para trabajar a pleno sol en obra: mismas medidas y misma estructura, solo
   cambian las superficies y el contraste. Los colores de estado (verde, azul,
   ambar) se mantienen porque significan lo mismo en los dos temas. */
html[data-tema="claro"] {
  --bg: #f2f4f7;
  --bg-1: #ffffff;
  --bg-2: #f5f7fa;
  --bg-3: #e8ecf1;
  --logo-bg: #ffffff;
  --border: rgba(20,30,45,0.11);
  --border-soft: rgba(20,30,45,0.06);
  --border-strong: rgba(20,30,45,0.22);
  --teal: #1c5aa6;
  --teal-dim: rgba(28,90,166,0.12);
  --amber: #b8822d;
  --red: #c45a52;
  --ok: #2f9a68;
  --ok-dim: rgba(47,154,104,0.12);
  --estado-sin: #aab2bd;
  --text: #1f2933;
  --text-dim: #4a5563;
  --text-faint: #6e7887;
  --shadow: 0 8px 20px rgba(20,30,45,0.08);
  --reg-bg: #ffffff;
  --reg-head: #e4e9ef;
  --reg-head-text: #22303f;
  --reg-col1: #f2f5f9;
  --reg-col1-hover: #e6ebf2;
  --reg-total: #dfe5ec;
  --campo-bg: #ffffff;
  --campo-borde: rgba(20,30,45,0.30);
  --opcion-bg: #ffffff;
  --opcion-text: #17202c;
  --hover-fila: rgba(20,30,45,0.04);
  --hover-suave: rgba(20,30,45,0.06);
  --hover-fuerte: rgba(20,30,45,0.09);
  --pastilla: rgba(20,30,45,0.07);
  --esquema: light;
}
html[data-tema="claro"] body { background: var(--bg); color: var(--text); }

* { box-sizing: border-box; }

/* Evita que Chrome/Safari móvil agrande el texto automáticamente dentro de
   columnas angostas (tablas de checklist) — sin esto, las filas se ven
   mucho más grandes en el celular real de lo que muestra el CSS. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
}