/* style-base.css — VALIDEAS Design Tokens (Mockup v.4)
 * Carga antes que style-public.css y style-panel.css.
 * Sistema editorial: franjas naranjas + tarjetas cream + bordes negros gruesos.
 */

:root {
  /* ── Colores primarios ─────────────────────────────────────── */
  --orange-500: #FF6B00;     /* bandas, CTAs, chips activos */
  --orange-600: #E55A00;     /* hover */
  --orange-700: #C44A00;     /* pressed */
  --orange-100: #FFE2CC;     /* fondos sutiles */
  --orange-050: #FFF1E5;     /* backgrounds muy suaves */

  --cream:      #FFF8E7;     /* tarjetas */
  --cream-2:    #FAF6EC;     /* background body */
  --paper:      #FFFFFF;     /* inputs */

  --ink:        #111111;     /* texto + bordes 2px */
  --ink-muted:  #4A4A4A;     /* texto secundario */
  --ink-soft:   #767676;     /* captions */
  --ink-line:   #D9D2C0;     /* líneas suaves sobre cream */

  --white:      #FFFFFF;
  --black:      #000000;

  /* ── Pares de contraste (WCAG AA) ───────────────────────────
     Sobre --orange-500 el texto va en ink: blanco da 2.84:1 (falla
     AA en todo tamaño), ink da 6.65:1. El naranja es RELLENO, no
     portador de texto — igual que --band-eyebrow, que ya usa ink.
     ─────────────────────────────────────────────────────────── */
  --on-orange:  #111111;     /* = --ink, sobre orange-500/600/700 */

  /* ── Fases (mockup p.3) ─────────────────────────────────────── */
  --phase-registro: #FF6B00;
  --phase-pre:      #B6E2A1;
  --phase-examen:   #FFD86B;
  --phase-banco:    #4FA3D1;

  /* ── Estados (mockup p.3) ───────────────────────────────────── */
  --status-acta-pre:    #F59E0B;
  --status-acta-examen: #EAB308;
  --status-validada:    #16A34A;
  --status-desarrollar: #2563EB;

  /* ── Semaforo semantico ─────────────────────────────────────
     El trio #16a34a/#dc2626/#d97706 estaba repetido a pelo en 4 CSS
     + verify-email.js + panel-idea-detail.html. Aqui una sola vez.

     Split RELLENO vs TEXTO, igual que --on-orange: sobre --cream el
     verde da 3.11:1 y el ambar 3.01:1 (fallan AA como texto), pero
     como fondo de punto/barra/anillo son correctos. Las variantes
     -text son las mismas familias oscurecidas a >=4.5:1.
       usar --success        -> fondos, barras, anillos, puntos
       usar --success-text   -> texto y iconos sobre cream/paper
     ─────────────────────────────────────────────────────────── */
  --success:       #16A34A;   /* relleno   — 3.11:1 s/cream */
  --success-text:  #15803D;   /* texto     — 4.74:1 s/cream */
  --danger:        #DC2626;   /* relleno   — 4.56:1 s/cream */
  --danger-text:   #DC2626;   /* ya pasa AA, mismo valor */
  --warning:       #D97706;   /* relleno   — 3.01:1 s/cream */
  --warning-text:  #B45309;   /* texto     — 4.74:1 s/cream */
  --on-status:     #FFFFFF;   /* texto sobre los rellenos anteriores */

  /* ── Tipografía ─────────────────────────────────────────────── */
  --font-display: 'Archivo Black', 'Impact', system-ui, sans-serif;
  --font-body:    'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', Consolas, monospace;

  --fs-xxs: 0.6875rem;   /* 11 */
  --fs-xs:  0.75rem;     /* 12 */
  --fs-sm:  0.875rem;    /* 14 */
  --fs-md:  1rem;        /* 16 */
  --fs-lg:  1.125rem;    /* 18 */
  --fs-xl:  1.375rem;    /* 22 */
  --fs-2xl: 1.75rem;     /* 28 */
  --fs-3xl: 2.25rem;     /* 36 */
  --fs-4xl: 3rem;        /* 48 */
  --fs-5xl: 3.75rem;     /* 60 */

  --lh-tight:  1.1;
  --lh-snug:   1.25;
  --lh-normal: 1.5;
  --lh-loose:  1.7;

  /* ── Spacing (8px base) ─────────────────────────────────────── */
  --sp-1:  0.25rem;  /* 4 */
  --sp-2:  0.5rem;   /* 8 */
  --sp-3:  0.75rem;  /* 12 */
  --sp-4:  1rem;     /* 16 */
  --sp-5:  1.25rem;  /* 20 */
  --sp-6:  1.5rem;   /* 24 */
  --sp-8:  2rem;     /* 32 */
  --sp-10: 2.5rem;   /* 40 */
  --sp-12: 3rem;     /* 48 */
  --sp-16: 4rem;     /* 64 */
  --sp-20: 5rem;     /* 80 */
  --sp-24: 6rem;     /* 96 */

  /* ── Border radius ─────────────────────────────────────────── */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 18px;
  --r-2xl: 24px;
  --r-pill: 999px;

  /* ── Elevacion (escala unica, paso de 2px) ──────────────────
     El sistema es plano: sombra de tinta desplazada, sin blur. Un
     unico paso de 2px para todo, de modo que un hover siempre sube
     exactamente un escalon (boton 1->2, card 2->3).
       --elev-0  reposo hundido / :active
       --elev-1  controles (botones, chips)
       --elev-2  superficies (cards, paneles, modales)
       --elev-3  hover de superficie
     ─────────────────────────────────────────────────────────── */
  --elev-0: 0 0 0 var(--ink);
  --elev-1: 2px 2px 0 var(--ink);
  --elev-2: 4px 4px 0 var(--ink);
  --elev-3: 6px 6px 0 var(--ink);

  /* Alias historicos — mismos valores, ahora derivados de la escala. */
  --shadow-flat:    var(--elev-2);
  --shadow-flat-sm: var(--elev-1);
  --shadow-card:    var(--elev-2);   /* era 0 4px 16px con blur: contradecia el sistema plano */
  --shadow-hover:   var(--elev-3);

  /* ── Tracking (5 pasos, ligados al tamano y a la caja alta) ──
     Regla: display en minusculas se aprieta; en MAYUSCULAS nunca
     baja de --tr-snug; las etiquetas en caja alta se abren.
     ─────────────────────────────────────────────────────────── */
  --tr-display:  -0.04em;   /* display en minusculas, >= 2rem */
  --tr-tight:    -0.02em;   /* titulares 1rem - 2rem */
  --tr-snug:     -0.01em;   /* texto corrido y titulares en caja alta */
  --tr-caps:      0.04em;   /* etiquetas, botones y chips en caja alta */
  --tr-caps-lg:   0.08em;   /* eyebrows y versales muy pequenas */

  /* ── Altura de control (minimo tactil de 44px) ───────────────
     Todo lo que se pulsa mide al menos --ctl-sm. Los circulos
     decorativos (avatares, spinner, numeros de paso) NO son
     controles y conservan su tamano.
     ─────────────────────────────────────────────────────────── */
  --ctl-sm: 44px;
  --ctl-md: 52px;
  --ctl-lg: 60px;

  /* ── Ancho de la barra lateral privada ───────────────────────
     Un unico valor para las dos areas privadas: el area de trabajo
     (.dash-layout, style-dashboard.css) y el area de cuenta
     (.panel-shell, style-panel.css). Tambien es el ancho del cajon
     en movil, para que la barra no cambie de medida al colapsar.
     ─────────────────────────────────────────────────────────── */
  --sidebar-w: 280px;

  /* ── Transitions ───────────────────────────────────────────── */
  --tx-fast:  120ms cubic-bezier(0.16, 1, 0.3, 1);
  --tx-mid:   220ms cubic-bezier(0.16, 1, 0.3, 1);
  --tx-slow:  400ms cubic-bezier(0.16, 1, 0.3, 1);

  /* ── Layout ────────────────────────────────────────────────── */
  --max-w: 1200px;
  --gutter: clamp(1rem, 4vw, 2rem);
  --nav-h: 68px;
}

/* ── Reset ligero ────────────────────────────────────────────── */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--cream-2);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg, video { max-width: 100%; display: block; }

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--tx-fast);
}
a:hover { color: var(--orange-500); }

button {
  font: inherit;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  color: inherit;
}

input, textarea, select {
  font: inherit;
  color: inherit;
}

/* Direccion "contraste selectivo": el titular por defecto habla en voz
 * normal — Jakarta 700 en caja baja. Archivo Black y las versales dejan
 * de ser el default y pasan a ser una decision explicita (.display /
 * .eyebrow), reservada al logo, al h1 de portada y al h2 de LA franja.
 * Antes este bloque ponia display+versales en los 36 titulares de la
 * app a la vez, y por eso ninguno destacaba. */
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: var(--tr-tight);
  line-height: var(--lh-tight);
  text-transform: none;
}

/* Opt-in al registro alto. Uno por pantalla, dos como mucho. */
.display {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: var(--tr-display);
  text-transform: none;
}

/* Etiqueta pequena de seccion: el unico sitio donde sobreviven las
 * versales, porque ahi no compiten con nada. */
.eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--tr-caps-lg);
  text-transform: uppercase;
  color: var(--ink-soft);
}

p { margin: 0; }

ul, ol { margin: 0; padding: 0; list-style: none; }

/* ── Container util ─────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ── Helpers ────────────────────────────────────────────────── */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.text-orange  { color: var(--orange-500); }
.text-ink     { color: var(--ink); }
.text-muted   { color: var(--ink-muted); }
.bg-orange    { background: var(--orange-500); }
.bg-cream     { background: var(--cream); }

/* ── Focus ring (accesibilidad) ──────────────────────────────── */
:focus-visible {
  outline: 3px solid var(--orange-500);
  outline-offset: 2px;
  border-radius: 4px;
}