/* ===== Tokens de diseño compartidos =====
   Valores del portal de testers (portal.css) para que el portal y el formulario de tests
   (formulario_tests_v2.css) usen los mismos colores, esquinas, sombras, tipografía y movimiento.
   Cambiar un valor aquí lo cambia en los dos. */

:root {
  /* ── Colores ── */
  --color-primary: #111; /* botón principal, pestaña y opción seleccionadas */
  --color-primary-hover: #333;
  --color-primary-soft: #f4f4f4; /* hover de controles */
  --color-ink: #111; /* títulos y texto fuerte */
  --color-text: #374151;
  --color-muted: #6b7280;
  --color-label: #888; /* etiquetas en mayúsculas */
  --color-placeholder: #c0c0c0;
  --color-bg: #f8f9fa; /* fondo de página */
  --color-surface: #fff; /* tarjetas y controles */
  --color-surface-soft: #fafafa; /* bloques dentro de tarjetas */
  --color-border: #e5e7eb; /* borde de tarjetas */
  --color-divider: #ddd; /* líneas de títulos de sección */
  --color-border-input: #ddd; /* campos de texto */
  --color-border-control: #ccc; /* chips, pestañas y opciones */
  --color-border-button: #d1d5db; /* botón secundario */
  --color-border-hover: #9ca3af;
  --color-border-subtle: rgba(0, 0, 0, 0.06); /* elementos flotantes */
  --color-surface-glass: rgba(255, 255, 255, 0.85); /* flotantes con desenfoque */
  /* ── Recomendación final (Apto / Revisar / No apto) ──
     Única definición: la usan las opciones del formulario y las etiquetas del portal.
     Texto, fondo y borde de la opción; su hover; y el color lleno de la opción seleccionada. */
  --color-rec-apto: #1a6b2a;
  --color-rec-apto-bg: #f2fbf4;
  --color-rec-apto-line: #7bc98a;
  --color-rec-apto-bg-hover: #e2f5e7;
  --color-rec-apto-line-hover: #3aab55;
  --color-rec-apto-solid: #16a34a;
  --shadow-rec-apto-hover: 0 2px 8px rgba(26, 107, 42, 0.12);
  --shadow-rec-apto-active: 0 2px 10px rgba(26, 107, 42, 0.25);

  --color-rec-revisar: #92570a;
  --color-rec-revisar-bg: #fdf8ee;
  --color-rec-revisar-line: #f5c96a;
  --color-rec-revisar-bg-hover: #fdf0d0;
  --color-rec-revisar-line-hover: #e0a020;
  --color-rec-revisar-solid: #f59e0b;
  --shadow-rec-revisar-hover: 0 2px 8px rgba(146, 87, 10, 0.12);
  --shadow-rec-revisar-active: 0 2px 10px rgba(146, 87, 10, 0.25);

  --color-rec-noapto: #a01820;
  --color-rec-noapto-bg: #fdf2f3;
  --color-rec-noapto-line: #f09098;
  --color-rec-noapto-bg-hover: #fce4e6;
  --color-rec-noapto-line-hover: #d03040;
  --color-rec-noapto-solid: #dc2626;
  --shadow-rec-noapto-hover: 0 2px 8px rgba(160, 24, 32, 0.12);
  --shadow-rec-noapto-active: 0 2px 10px rgba(160, 24, 32, 0.25);

  /* Estados (Finalizado, Pendiente, errores): los colores de la recomendación final */
  --color-ok: var(--color-rec-apto);
  --color-ok-bg: var(--color-rec-apto-bg);
  --color-ok-line: var(--color-rec-apto-line);
  --color-warn: var(--color-rec-revisar);
  --color-warn-bg: var(--color-rec-revisar-bg);
  --color-warn-line: var(--color-rec-revisar-line);
  --color-bad: var(--color-rec-noapto);
  --color-bad-bg: var(--color-rec-noapto-bg);
  --color-bad-line: var(--color-rec-noapto-line);

  /* ── Esquinas ── */
  --radius-sm: 4px; /* casillas */
  --radius-md: 8px; /* controles: botones, pestañas, campos, chips */
  --radius-lg: 12px; /* tarjetas, avisos y toast */
  --radius-pill: 999px;
  --radius-round: 50%; /* avatar, puntuaciones, iconos de estado */

  /* ── Sombras ── */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02); /* tarjetas */
  --shadow-hover: 0 2px 8px rgba(0, 0, 0, 0.08); /* tarjeta al pasar el ratón */
  --shadow-button: 0 2px 8px rgba(0, 0, 0, 0.18); /* botón principal al pasar el ratón */
  --shadow-lg: 0 4px 24px rgba(0, 0, 0, 0.07); /* tarjeta principal de acceso */
  --shadow-toast: 0 8px 24px rgba(0, 0, 0, 0.18);
  --shadow-float: 0 4px 16px rgba(0, 0, 0, 0.08); /* cápsula de autoguardado */
  /* Foco de los campos de texto (portal y formulario): borde gris medio y halo suave, sin contorno.
     #8a8a8a contrasta 3,4:1 con el blanco (WCAG pide 3:1) y se distingue del borde de hover. */
  --focus-border: #8a8a8a;
  --focus-ring: 0 0 0 4px rgba(0, 0, 0, 0.06);
  --blur-glass: blur(12px);

  /* ── Tipografía ── */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-size-base: 14px;
  --font-size-sm: 13px; /* botones, campos y textos secundarios */
  --font-size-xs: 12px;
  --font-size-label: 10px; /* etiquetas en mayúsculas */
  --line-height-base: 1.6;
  --letter-spacing-label: 0.1em;
  --letter-spacing-button: 0.03em;

  /* ── Espaciado ── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  /* ── Movimiento ── */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* pequeño rebote al seleccionar */
  --duration-fast: 0.15s;
  --duration-base: 0.2s;
  --duration-slow: 0.3s;
  --press-scale: 0.97; /* escala al pulsar botones y opciones */
}