/* ==========================================================================
   Tokens de diseño — skin clara
   ==========================================================================
   El sitio usa una escala neutra clara sobre fondo blanco/gris muy claro,
   con el purple de marca reservado para acción/foco (no para decorar
   superficies). --primary es el único valor de identidad que branding.js
   pisa en runtime (ver /shared/branding.json); todo lo demás (hover, soft,
   focus-ring, etc.) se deriva de él con color-mix(), así que cambiar el
   color de marca sigue recoloreando todo el sitio sin tocar este archivo.
   Se carga ANTES que base.css y que el CSS de cada página.
   ========================================================================== */

:root {
  /* ---- Fondo y superficies: canvas gris muy claro, superficies blancas.
     El gris no es neutro puro — lleva un tinte deliberado del azul de
     marca (color-mix con --primary) para que la paleta se sienta
     cohesiva con el acento en vez de una escala "slate" genérica
     desconectada del color principal. Sin gradientes — el salto de nivel
     lo da el borde y una sombra casi imperceptible, no un fondo decorado. ---- */
  --bg-canvas: color-mix(in oklab, var(--primary) 3%, #f7f8fa);
  --surface: #ffffff;
  --bg-hover: color-mix(in oklab, var(--primary) 4%, #eef0f4);
  --border: color-mix(in oklab, var(--primary) 5%, #e3e6ec);
  --border-input: color-mix(in oklab, var(--primary) 6%, #cfd3dc);
  --divider: color-mix(in oklab, var(--primary) 4%, #ebedf1);

  /* ---- Texto: mismo criterio — un tinte leve de --primary en vez de
     una escala de grises desconectada del color de marca. El texto
     principal queda casi negro puro (necesita el contraste máximo);
     secundario y tenue sí llevan el tinte, ya notorio a esos niveles
     de claridad. ---- */
  --text-primary: #111318;
  --text-secondary: color-mix(in oklab, var(--primary) 7%, #48505c);
  --text-muted: color-mix(in oklab, var(--primary) 8%, #8890a0);
  --text-on-primary: #ffffff;

  /* ---- Identidad: el purple de marca es el único color con peso —
     botones primarios, estados activos, foco, selección. El rojo
     (--critico) queda desacoplado, reservado para error/urgencia. Ojo con
     la dirección: "hover/active" OSCURECEN en vez de aclarar, y los fondos
     "soft" aclaran hacia blanco en vez de oscurecer hacia el canvas. ---- */
  --primary: #2b6bff;
  --primary-hover: color-mix(in oklab, var(--primary) 88%, black);
  --primary-active: color-mix(in oklab, var(--primary) 75%, black);
  --primary-soft: color-mix(in oklab, var(--primary) 8%, white);
  --primary-soft-fuerte: color-mix(in oklab, var(--primary) 16%, white);
  --focus-ring: 0 0 0 1px color-mix(in srgb, var(--primary) 55%, transparent), 0 0 0 4px color-mix(in srgb, var(--primary) 16%, transparent);

  /* Celeste: identidad fija del fisio (notas, ícono, toggle) — fija en vez
     de derivada de --primary para que siempre se distinga del purple de
     marca aunque --primary cambie, y del ámbar que ya usan los
     comentarios del cliente en las mismas cards. */
  --celeste: oklch(58.5% 0.233 277.117);
  --celeste-soft: color-mix(in oklab, var(--celeste) 14%, white);

  --critico: oklch(0.62 0.19 25);
  --critico-dark: color-mix(in oklab, var(--critico) 80%, black);
  --critico-soft: color-mix(in oklab, var(--critico) 10%, white);

  /* Verde: accent secundario / estados positivos puntuales — nunca color
     de acción principal, ese rol es del purple de marca. También el color
     de todo mensaje de éxito/satisfacción (toasts, formularios), en vez
     del purple de marca que se presta a leerse como azul. */
  --success: oklch(64% 0.15 152);
  --success-dark: color-mix(in oklab, var(--success) 75%, black);
  --success-soft: color-mix(in oklab, var(--success) 14%, white);

  /* Ámbar: destacar comentarios/avisos que no son ni error ni parte del
     flujo principal (comentario de un cliente, cambio puntual de turno). */
  --amber: oklch(76.9% 0.188 70.08);
  --amber-soft: color-mix(in oklab, var(--amber) 16%, white);

  /* ---- Espaciado: escala 8/12/16/24/32/40/48 ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ---- Tipografía: Inter (Google Fonts).
     El link/preconnect va en el <head> de cada página. ---- */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --fs-xs: 0.75rem;
  --fs-sm: 0.8125rem;
  --fs-base: 0.875rem;
  --fs-md: 0.9375rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.25rem;
  --fs-2xl: 1.375rem;
  --fs-3xl: 1.75rem;

  /* ---- Radios: 12–16px en cards, más chico en controles ---- */
  --radius-sm: 6px;
  --radius: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 999px;

  /* ---- Altura estándar de controles: todo input de texto/fecha/select y
     los botones sueltos (nav, accion, modal) usan esta misma altura, para
     que nunca queden desalineados entre sí en una misma fila. ---- */
  --control-h: 38px;

  /* ---- Elevación: capa doble (sombra ajustada + una más larga y difusa)
     para que las cards se sientan apoyadas sobre el canvas, no solo
     delimitadas por el borde — sigue siendo un empuje de profundidad, no
     un efecto decorativo, pero ahora se nota sin tener que buscarlo. ---- */
  --elevation-sm: 0 1px 2px oklch(0 0 0 / 0.06), 0 4px 10px oklch(0 0 0 / 0.05);
  --elevation-sm-hover: 0 2px 4px oklch(0 0 0 / 0.07), 0 10px 22px oklch(0 0 0 / 0.09);
  --elevation-md: 0 4px 10px oklch(0 0 0 / 0.08), 0 16px 36px oklch(0 0 0 / 0.12);
  --elevation-lg: 0 8px 20px oklch(0 0 0 / 0.12), 0 32px 72px oklch(0 0 0 / 0.20);

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 150ms;
  --duration: 200ms;
}