/* =========================================================
   core.css — Base global del diseño.
   Contiene: tokens, temas, reset/base tipográfica, enlaces,
   layout global, formularios, botones, utilidades y campos.
   ========================================================= */

/* ============================
   00. Variables globales (Tokens)
   ============================ */
:root{
  /* ===== Fuente ===== */
  --font: "Inter", Inter, -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* ===== Colores base (claro) ===== */
  --bg:#f7f7f8;
  --surface:#fff;
  --surface-2:#f3f4f6;
  --panel: color-mix(in oklch, var(--bg) 96%, var(--label) 4%);

  --label:#111827;
  --secondary:#6b7280;

  --fill:#f4f6fa;
  --separator:#e6eaf0;
  --separator-hover:#d5dbe5;
  --separator-soft: color-mix(in oklch, var(--separator) 60%, transparent 40%);

  --hover-neutral: color-mix(in oklab, var(--fill) 96%, black 4%);
  --surface-hover: var(--hover-neutral);
  --resaltado-bg:#ffec99;

  /* ===== Marca / Acento ===== */
  --brand: oklch(0.72 0.21 250); /* ≈ #0d99ff */
  --tint: var(--brand);
  --tint-hover: color-mix(in oklch, var(--brand) 88%, black 12%);
  --tint-disabled: color-mix(in oklch, var(--brand) 35%, white 65%);

  /* ===== Semánticos (claro) ===== */
  --success: oklch(0.78 0.14 145);
  --success-ink: oklch(0.36 0.03 145);
  --success-bg: oklch(0.97 0.02 145);

  --warn: oklch(0.82 0.13 70);
  --warn-ink: oklch(0.40 0.04 70);
  --warn-bg: oklch(0.98 0.02 70);

  --error: oklch(0.70 0.20 25);
  --error-ink: oklch(0.34 0.03 25);
  --error-bg: oklch(0.98 0.02 25);

  /* Soft (chips/badges) */
  --success-soft: color-mix(in oklch, var(--success) 16%, white 84%);
  --warn-soft:    color-mix(in oklch, var(--warn) 16%, white 84%);
  --error-soft:   color-mix(in oklch, var(--error) 16%, white 84%);

  /* ===== Neutros extendidos ===== */
  --ink-0:#0b0e13; --ink-1:#111827; --ink-2:#1f2937; --ink-3:#374151;
  --gray-0:#f9fafb; --gray-1:#f3f4f6; --gray-2:#e5e7eb; --gray-3:#d1d5db;

  /* ===== Foco ===== */
  --focus: oklch(0.86 0.17 250);
  --focus-ring: 0 0 0 1px color-mix(in oklch, var(--brand) 35%, white 65%);

  /* ===== Blur / Sombras ===== */
  --blur-sm:4px; --blur-md:8px; --blur-lg:12px;
  --shadow-xs:0 1px 3px rgba(0,0,0,.06);
  --shadow-sm:0 1px 6px rgba(0,0,0,.04);  /* usado por glass */
  --shadow-m: 0 6px 16px rgba(0,0,0,.08);
  --shadow-l: 0 8px 24px rgba(0,0,0,.06);

  /* ===== Glass ===== */
  --glass-bg:    color-mix(in oklch, var(--surface) 80%, transparent);
  --glass-border: color-mix(in oklch, var(--separator) 40%, transparent);
  --glass-blur:  var(--blur-lg);
  --glass-shadow: var(--shadow-sm);

  /* ===== Layout / Medidas ===== */
  --container:1280px;
  --header-h:60px;
  --resultsbar-h:56px;

  /* Hit areas */
  --hit-desktop:36px;
  --hit-touch:44px;

  /* ===== Espaciados ===== */
  --s-2:2px; --s-4:4px; --s-5:5px; --s-6:6px; --s-8:8px; --s-10:10px; --s-12:12px; --s-14:14px; --s-15:15px; --s-16:16px; --s-18:18px; --s-20:20px;
  --s-22:22px; --s-24:24px; --s-28:28px; --s-30:30px; --s-32:32px; --s-36:36px; --s-40:40px; --s-48:48px;

  /* ===== Radios ===== */
  --rad-xs:6px; --rad-sm:8px; --rad-md:12px; --rad-lg:16px; --rad-xl:20px;
  --rad-btn:9999px; --rad-card:var(--rad-md); --rad-pill:9999px;

  /* ===== Tipografía ===== */
  --fs-12:.75rem; --fs-13:.8125rem; --fs-14:.875rem; --fs-15:.9375rem; --fs-16:1rem;
  --fs-18:1.125rem; --fs-20:1.25rem; --fs-22:1.375rem; --fs-24:1.5rem;
  --fs-26:1.625rem; --fs-28:1.75rem; --fs-30:1.875rem; --fs-32:2rem;
  --fs-36:2.25rem; --fs-40:2.5rem; --fs-48:3rem;

  --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700;
  --lh-tight:1.2; --lh-base:1.4; --ls-overline:.04em;

  /* Labels de campo */
  --field-label:var(--label);
  --field-label-muted:var(--secondary);
  --field-label-size:var(--fs-14);
  --field-label-weight:var(--fw-semibold);

  /* ===== Breakpoints ===== */
  --bp-sm:480px; --bp-md:768px; --bp-lg:1024px; --bp-xl:1280px;

  /* ===== Z-index (semánticos) ===== */
  --z-base:0;
  --z-dropdown:100;
  --z-popover:1000;
  --z-sticky:1100;
  --z-toast:1300;

  /* Modales y paneles */
  --z-modal:2000;
  --z-modal-panel:2001;

  /* Overlays laterales (tools / carrito) por sobre modales */
  --z-drawer:2100;
  --z-drawer-panel:2101;

  /* Aliases “legacy” (para que no reviente nada) */
  --z-resumen:var(--z-sticky);
  --z-resumen-popover:var(--z-popover);

  /* ===== Scrims ===== */
  --scrim-strong:rgba(0,0,0,.5);
  --scrim-soft:rgba(15,23,42,.12);

  /* ===== Motion ===== */
  --motion-fast:.20s; --motion-base:.28s; --motion-morph:.42s; --motion-push:.32s;
  --motion-ease:cubic-bezier(.2,.6,.2,1);
  --motion-ease-ios:cubic-bezier(.22,.61,.36,1);

  /* Duraciones base */
  --motion-duration-xs: 150ms;   /* microinteracciones */
  --motion-duration-sm: 250ms;   /* hover, focus */
  --motion-duration-md: 500ms;   /* transiciones medias */
  --motion-duration-lg: 2000ms;  /* animaciones largas (ej: shadowDepth) */

  /* Timing functions */
  --motion-ease: ease-in-out; 
  --motion-linear: linear;
  --motion-in: ease-in;
  --motion-out: ease-out;
}

/* ============================
   00.1 Variables — Modo oscuro
   ============================ */
body.oscuro{
  /* Bases (neutras, sin tinte) */
  --bg:#0b0d0f;
  --surface:#121417;     /* capa 1 */
  --surface-2:#161a1f;   /* capa 2 (ligeramente más clara) */
  --panel:#0e1114;       /* capa 0 (un poco más oscura) */

  /* Texto */
  --label:#eef2f6;
  --secondary:#9aa3ad;

  /* Neutros/contornos */
  --fill:#11161b;                /* usado por cards del Paso 1/2 */
  --separator:#1b232b;
  --separator-hover:#2a333d;
  --separator-soft: color-mix(in oklch, var(--separator) 60%, transparent 40%);

  /* Hover neutro (coherente con cards), sin tinte de marca */
  --hover-neutral: color-mix(in oklab, var(--surface) 92%, white 8%);
  --surface-hover: var(--hover-neutral);

  /* Marca/acentos (mismo matiz que claro, sólo aclarado) */
  --tint: color-mix(in oklch, var(--brand) 88%, white 12%);
  --tint-hover: color-mix(in oklch, var(--brand) 100%, white 18%);
  --tint-disabled: color-mix(in oklch, var(--brand) 35%, #2a3d47 65%);

  /* Semánticos */
  --success:      oklch(0.72 0.14 145);
  --success-ink:  oklch(0.93 0.02 145);
  --success-bg:   oklch(0.23 0.03 145);

  --warn:         oklch(0.78 0.14 70);
  --warn-ink:     oklch(0.94 0.02 70);
  --warn-bg:      oklch(0.24 0.03 70);

  --error:        oklch(0.66 0.20 25);
  --error-ink:    oklch(0.94 0.02 25);
  --error-bg:     oklch(0.23 0.03 25);

  /* Foco */
  --focus: oklch(0.76 0.17 250);
  --focus-ring: 0 0 0 1px color-mix(in oklch, var(--brand) 35%, black 65%);

  /* Glass alineado a cards de Paso 1/2 */
  --glass-bg: var(--fill);
  --glass-border: var(--separator);
  --glass-blur: var(--blur-lg);
  --glass-shadow: var(--shadow-sm);
}

/* ============================
   01. Reset / Base
   ============================ */
*{ box-sizing:border-box; }

html, body{
  transition:
    background-color var(--motion-fast) var(--motion-ease),
    color var(--motion-fast) var(--motion-ease);
}

body{
  margin: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--label);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: var(--lh-base);
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding-top: var(--header-h); /* deja espacio para el header fijo */
}

main{
  max-width: var(--container);
  width: 100%;
  margin: 0 auto;
  flex: 1;
  padding-bottom: var(--s-48); /* aire inferior global */
}

/* Ajuste responsive: menos aire en móvil */
@media (max-width: 768px){
  main{ padding-bottom: var(--s-32); }
}

/* primer bloque después del header (sea section, div, nav, etc.) */
main > :first-child{ padding-top: var(--s-20); }

header{ text-align: center; }

/* ============================
   02. Tipografía
   ============================ */
header p:first-child{
  font-size:var(--fs-12);
  letter-spacing:var(--ls-overline);
  color:var(--secondary);
  text-transform:uppercase;
  margin:0 0 10px;
}

h1{
  font-size:var(--fs-32);
  font-weight:var(--fw-bold);
  letter-spacing:-.01em;
  margin:4px 0 10px;
  line-height:var(--lh-tight);
}

header p:last-child{
  font-size:var(--fs-16);
  color:var(--secondary);
  margin:0 0 20px;
}

/* ============================
   02.1 Enlaces
   ============================ */
a{
  color:var(--tint);
  text-decoration:none;
  transition:color var(--motion-fast) var(--motion-ease);
}
a:hover{ color:var(--tint-hover); }
a:focus-visible{
  outline: none;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* ============================
   02.2 Contenedor fluido
   ============================ */
.container{
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:clamp(var(--s-12), 4vw, var(--s-24));
}

/* ============================
   03. Formularios (estructura base)
   ============================ */
fieldset{ border:0; margin:0; padding:0; }
legend{ position:absolute; left:-9999px; }

ul{ list-style:none; margin:0; padding:0; }
/* márgenes sólo para las listas “de contenido”, no listas de layout */
main > ul > li{
  margin-bottom:var(--s-12);
}

input[type="radio"]{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

/* ============================
   04. Cards (opciones) — claro/oscuro
   ============================ */
label{
  display:block;
  background:var(--fill);
  border:1px solid var(--separator);
  border-radius:var(--rad-card);
  padding:14px 16px;
  cursor:pointer;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
  transition:
    background var(--motion-fast) var(--motion-ease),
    border-color var(--motion-fast) var(--motion-ease),
    box-shadow var(--motion-fast) var(--motion-ease);
  outline:none;
}

/* Hover con tokens (sirve en ambos temas) */
label:hover{
  background: var(--surface-hover);
  border-color: var(--separator-hover);
}

/* Checked + focus del input */
input[type="radio"]:checked + label{
  border-color:var(--tint);
  background: color-mix(in oklab, var(--bg) 94%, var(--tint) 6%);
}
input[type="radio"]:focus-visible + label,
label:focus-visible{
  outline: none;
  box-shadow: none;
  border-color: var(--tint);
}

/* Tipografía interna */
label h2{
  font-size:var(--fs-16);
  font-weight:var(--fw-semibold);
  margin:0 0 4px;
  color:var(--label);
}
label p{
  font-size:var(--fs-14);
  font-weight:var(--fw-regular);
  margin:0;
  color:var(--secondary);
}

/* ===== Contraste de labels en formularios (modo oscuro) ===== */
body.oscuro label{ color:var(--secondary); }

/* ============================
   05. Notas y ayudas
   ============================ */
form > p{
  font-size:var(--fs-12);
  color:var(--secondary);
  margin:var(--s-16) 0;
}

/* ============================
   06. Botones
   ============================ */
.acciones{
  display:flex;
  justify-content:center;
  align-items:stretch;
  gap:var(--s-12);
  margin-top:var(--s-16);
  flex-wrap:wrap;
}

/* Base común */
button,
a.btn-primario,
a.btn-secundario{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font:inherit;
  font-size:var(--fs-14);
  font-weight:var(--fw-semibold);
  min-height:var(--hit-desktop);
  padding:0 var(--s-16);
  border-radius:var(--rad-btn);
  border:1px solid transparent;
  cursor:pointer;
  line-height:1;
  text-decoration:none;
  transition:
    background var(--motion-fast) var(--motion-ease),
    border-color var(--motion-fast) var(--motion-ease),
    color var(--motion-fast) var(--motion-ease);
}

/* ===== Primario (modo claro: sólido) ===== */
.btn-primario{
  background:var(--tint);
  color:#fff;
  border-color:var(--tint);
}
.btn-primario:hover{
  background:var(--tint-hover);
  border-color:var(--tint-hover);
}
.btn-primario:disabled,
.btn-primario[aria-disabled="true"]{
  background:var(--tint-disabled);
  border-color:var(--tint-disabled);
  cursor:not-allowed;
}
.btn-primario:focus-visible{ outline:none; }

/* Forzar texto blanco en <a> primario (solo modo claro) */
body:not(.oscuro) a.btn-primario,
body:not(.oscuro) a.btn-primario:hover,
body:not(.oscuro) a.btn-primario:focus,
body:not(.oscuro) a.btn-primario:active,
body:not(.oscuro) a.btn-primario:visited{ color:#fff; }

/* ===== Secundario (modo claro) ===== */
.btn-secundario{
  background:var(--bg);
  color:var(--secondary);
  border-color:var(--separator);
}
.btn-secundario:hover{
  background:color-mix(in oklab, var(--bg) 95%, var(--label) 5%);
  border-color:var(--separator-hover);
}
.btn-secundario:focus-visible{ outline:none; }
.btn-secundario:disabled,
.btn-secundario[aria-disabled="true"]{
  opacity:.6;
  cursor:not-allowed;
}

/* ===== Variantes extra ===== */
.btn-primario:active,
.btn-secundario:active{ transform:translateY(1px); }

.btn-quiet{
  background:transparent;
  color:var(--tint);
  border-color:transparent;
}
.btn-quiet:hover{
  background:color-mix(in oklab, var(--bg) 92%, var(--tint) 8%);
}

.btn-destructive{
  background:var(--error);
  border-color:var(--error);
  color:#fff;
}
.btn-destructive:hover{
  background:color-mix(in oklab, var(--error) 90%, #000 10%);
}

/* ===== Responsive ===== */
@media (pointer:coarse){
  button,
  a.btn-primario,
  a.btn-secundario{
    min-height:var(--hit-touch);
  }
}

/* ===== Botones modo oscuro (outline con hover visible y sin halo) ===== */

/* Primario: outline + “wash” sutil al hover */
body.oscuro .btn-primario{
  background:transparent;
  color:var(--tint);
  border:1px solid var(--tint);
}
body.oscuro .btn-primario:hover{
  color:var(--tint-hover);
  border-color:var(--tint-hover);
  background: color-mix(in oklch, var(--tint) 16%, transparent);
}
body.oscuro .btn-primario:disabled,
body.oscuro .btn-primario[aria-disabled="true"]{
  color:var(--tint-disabled);
  border-color:var(--tint-disabled);
  background:transparent;
  opacity:.6;
  cursor:not-allowed;
}

/* Secundario: outline + “wash” gris al hover */
body.oscuro .btn-secundario{
  background:transparent;
  color:var(--secondary);
  border:1px solid var(--separator);
}
body.oscuro .btn-secundario:hover{
  color:var(--label);
  border-color:var(--separator-hover);
  background:color-mix(in oklab, var(--label) 10%, transparent);
}
body.oscuro .btn-secundario:disabled,
body.oscuro .btn-secundario[aria-disabled="true"]{
  color:var(--secondary);
  border-color:var(--separator);
  background:transparent;
  opacity:.5;
  cursor:not-allowed;
}

/* ============================
   07. Responsividad
   ============================ */
@media (max-width: 400px){
  h1{ font-size:var(--fs-28); }
  :root{ --field-label-size: var(--fs-14); }
}

/* ============================
   08. Utilidades
   ============================ */
.sr-only{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); border:0; white-space:nowrap;
}

/* Layout utils */
.stack > * + *{ margin-top:var(--s-12); }
.gap-8{ gap:var(--s-8); } .gap-12{ gap:var(--s-12); } .gap-16{ gap:var(--s-16); }
.round-sm{ border-radius:var(--rad-sm); } .round-md{ border-radius:var(--rad-md); }
.elev-s{ box-shadow:var(--shadow-s); } .elev-m{ box-shadow:var(--shadow-m); }
.surface{ background:var(--surface); } .surface-2{ background:var(--surface-2); }

/* ============================
   09. Campos de formulario
   ============================ */
.field{ margin-bottom:var(--s-16); }

.field label{
  display:block;
  font-size:var(--field-label-size);
  font-weight:var(--field-label-weight);
  color:var(--field-label);
  margin:0 0 var(--s-8);
}

.field .muted{
  color:var(--field-label-muted);
  font-weight:var(--fw-medium);
  font-size:var(--fs-13);
}

/* Inputs base */
.field input[type="text"],
.field input[type="date"],
.field input[type="number"]{
  width:100%;
  padding:12px 14px;
  border:1px solid var(--separator);
  border-radius:var(--rad-card);
  background:var(--bg);
  color:var(--label);
  font:inherit;
  line-height:1.2;
  transition:
    border-color var(--motion-fast) var(--motion-ease),
    box-shadow var(--motion-fast) var(--motion-ease),
    background var(--motion-fast) var(--motion-ease);
}

.field input:hover{
  background: var(--bg);
  border-color: var(--separator-hover);
}
.field input:focus{
  outline: none;
  border-color: var(--tint);
  box-shadow: none;
}

/* Textarea & Select */
.field textarea,
.field select{
  width:100%;
  padding:12px 14px;
  border:1px solid var(--separator);
  border-radius:var(--rad-card);
  background:var(--bg);
  color:var(--label);
  font:inherit;
  line-height:1.35;
  transition:
    border-color var(--motion-fast) var(--motion-ease),
    box-shadow var(--motion-fast) var(--motion-ease),
    background var(--motion-fast) var(--motion-ease);
}
.field select:hover,
.field textarea:hover{
  background: color-mix(in oklab, var(--bg) 94%, var(--label) 6%);
}
.field select:focus,
.field textarea:focus{
  outline: none;
  border-color: var(--tint);
  box-shadow: none;
}

/* Estados */
.field :is(input, select, textarea):disabled{
  background:var(--fill);
  color: color-mix(in oklab, var(--label) 60%, transparent);
  cursor:not-allowed;
}
.field :is(input, select, textarea):invalid{
  border-color: var(--error);
  box-shadow: none;
  outline: none;
}

/* Mensajes */
.field .help{
  visibility:hidden;
  opacity:0;
  font-size:var(--fs-12);
  color:var(--secondary);
  margin-top:var(--s-8);
  transition:opacity var(--motion-fast) var(--motion-ease);
}
.field .help--error{ color:var(--error); }
.field .help--success{ color:var(--success); }

/* Al enfocar el campo, se revela suavemente */
.field:focus-within .help{
  visibility:visible;
  opacity:1;
}

/* DESHABILITADO */
input[type="radio"]:disabled + label {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none; /* evita clics en el label */
}

/* ===================================================
   Anti-FOUC (PRO) · capas que NO deben parpadear
   - Vive en CSS CRÍTICO (core.css)
   - No depende de CSS diferido (componentes/overlays)
   - Regla: aria-hidden="true" => fuera del flujo (display:none)
   =================================================== */

/* Skip link:
   Tu HTML ya trae <a class="skip-link" href="#main">...
   ui.js solo normaliza si el header parcial trae otro “Saltar al contenido”. */

/* Overlays / modales / paneles: ocultos si aria-hidden="true" */
#modalComparacion[aria-hidden="true"],
#modalSolicitud[aria-hidden="true"],
#menuAccionesComparar[aria-hidden="true"],
#cartBackdrop[aria-hidden="true"],
#cartPanel[aria-hidden="true"],
#planDetailBackdrop[aria-hidden="true"],
#planDetailPanel[aria-hidden="true"] {
  display: none !important;
}

/* Paso 4: nunca debe “asomar” antes del flujo */
#paso4[hidden],
#paso4[inert] {
  display: none !important;
}