/* ============================================================
   Dentalplus · tokens.css
   Nombre de trabajo; marca comercial por definir.
   Producción: https://dental.morgado2.com
   Etapa 1 — fundamentos. CSS puro, sin dependencias.

   IMPORTANTE PARA EL DESARROLLADOR
   Las tres variables de marca (--color-primario, --color-secundario,
   --color-acento) y --texto-sobre-primario las inyecta el backend por
   clínica en un <style> dentro del <head>, DESPUÉS de este archivo.
   Los valores de aquí son solo el default de una clínica sin personalizar.
   Ningún otro archivo CSS debe escribir un color de marca a mano.
   ============================================================ */

/* ---------- Tipografía ---------- */
/* IBM Plex Sans + IBM Plex Mono, font-display: swap.
   Justificación: cifras tabulares y 1/I/l/0 distinguibles, indispensable
   en montos, folios y fechas. Fallback al stack del sistema. */
/* REGRESIÓN CORREGIDA (2a vez): el @import a fonts.googleapis.com se eliminó en
   la Fase 1 y volvió a aparecer. Un @import de CSS SIEMPRE se resuelve: cada
   visita filtraría la IP del dispositivo del paciente a un tercero. Las fuentes
   se sirven localmente vía @font-face en app.css. NO REINTRODUCIR. */

:root {
  /* --- MARCA (inyectada por clínica) --- */
  --color-primario: #0F766E;
  --color-secundario: #0891B2;
  --color-acento: #F59E0B;
  --texto-sobre-primario: #ffffff; /* el sistema lo calcula y lo envía */

  /* Dirección de mezcla según el tema. En claro se oscurece contra negro,
     en oscuro se aclara contra blanco: el derivado siempre se aleja del
     fondo y el contraste AA se sostiene con cualquier paleta de clínica. */
  --hacia: #000000;
  --mezcla-texto: 88%;

  /* --- Derivados de marca: nunca escribir estos a mano --- */
  --primario-hover:  color-mix(in oklab, var(--color-primario) 84%, var(--hacia));
  --primario-activo: color-mix(in oklab, var(--color-primario) 70%, var(--hacia));
  /* Color de marca CUANDO ES TEXTO o ícono sobre superficie neutra.
     Nunca usar --color-primario crudo como color de texto. */
  --primario-texto:  color-mix(in oklab, var(--color-primario) var(--mezcla-texto), var(--hacia));
  --primario-borde:  color-mix(in oklab, var(--color-primario) 32%, var(--lienzo));
  --primario-suave:  color-mix(in oklab, var(--color-primario) 14%, var(--lienzo));
  --primario-tenue:  color-mix(in oklab, var(--color-primario)  7%, var(--lienzo));
  --primario-foco:   color-mix(in oklab, var(--color-primario) 45%, transparent);
  --secundario-suave: color-mix(in oklab, var(--color-secundario) 14%, var(--lienzo));
  --acento-suave:     color-mix(in oklab, var(--color-acento) 18%, var(--lienzo));

  /* --- Neutros fríos --- */
  --n-0:  #ffffff;
  --n-50: #f8fafc;
  --n-100:#f1f5f9;
  --n-200:#e2e8f0;
  --n-300:#cbd5e1;
  --n-400:#94a3b8;
  --n-500:#64748b;
  --n-600:#475569;
  --n-700:#334155;
  --n-800:#1e293b;
  --n-900:#0f172a;
  --n-950:#020617;

  /* --- Superficies y texto (modo claro) --- */
  --lienzo:      var(--n-50);
  --superficie:  var(--n-0);
  --superficie-2:var(--n-100);
  --superficie-3:var(--n-200);
  --borde:       var(--n-200);
  --borde-fuerte:var(--n-300);
  --texto-fuerte:var(--n-900);
  --texto-medio: var(--n-600);
  --texto-suave: var(--n-500);
  --texto-inverso: var(--n-0);

  /* --- Semánticos: FIJOS, no personalizables --- */
  --exito: #15803d;  --exito-suave: #dcfce7;  --exito-borde: #86efac;
  --aviso: #b45309;  --aviso-suave: #fef3c7;  --aviso-borde: #fcd34d;
  --error: #b91c1c;  --error-suave: #fee2e2;  --error-borde: #fca5a5;
  --info:  #1d4ed8;  --info-suave:  #dbeafe;  --info-borde:  #93c5fd;
  --alerta-medica: var(--error); /* franja de alergia: siempre roja */

  /* --- Tipografía --- */
  --fuente: 'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system,
            'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  --fuente-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo,
                 Consolas, monospace;

  --txt-xs:   clamp(11px, .70rem + .1vw, 12px);
  --txt-sm:   clamp(13px, .80rem + .1vw, 14px);
  --txt-base: clamp(15px, .92rem + .1vw, 16px);
  --txt-lg:   clamp(17px, 1.02rem + .2vw, 18px);
  --txt-xl:   clamp(19px, 1.10rem + .4vw, 22px);
  --txt-2xl:  clamp(23px, 1.30rem + .8vw, 28px);
  --txt-3xl:  clamp(28px, 1.55rem + 1.4vw, 40px);
  --txt-4xl:  clamp(34px, 1.80rem + 2.2vw, 52px);

  --peso-normal: 400;
  --peso-medio:  500;
  --peso-semi:   600;
  --peso-fuerte: 700;

  --alt-apretada: 1.15;  /* títulos */
  --alt-normal:   1.45;  /* interfaz */
  --alt-comoda:   1.65;  /* nota clínica, texto largo */

  --track-titulo: -.025em;
  --track-etiqueta: .09em;

  /* --- Espaciado, base 4px --- */
  --e-0: 0;      --e-1: 4px;   --e-2: 8px;   --e-3: 12px;
  --e-4: 16px;   --e-5: 20px;  --e-6: 24px;  --e-8: 32px;
  --e-10:40px;   --e-12:48px;  --e-16:64px;  --e-20:80px;

  /* --- Radios --- */
  --r-sm: 4px;  --r-md: 8px;  --r-lg: 12px;  --r-xl: 16px;  --r-full: 999px;

  /* --- Sombras --- */
  --sombra-1: 0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.06);
  --sombra-2: 0 2px 6px rgba(15,23,42,.08), 0 4px 12px rgba(15,23,42,.06);
  --sombra-3: 0 8px 24px rgba(15,23,42,.10);
  --sombra-4: 0 20px 48px rgba(15,23,42,.18);
  --anillo-foco: 0 0 0 3px var(--primario-foco);

  /* --- Movimiento --- */
  --t-rapida: 120ms;
  --t-media:  200ms;
  --t-lenta:  320ms;
  --curva: cubic-bezier(.2,.8,.3,1);

  /* --- Capas --- */
  --z-base: 0; --z-sticky: 50; --z-menu: 100;
  --z-drawer: 200; --z-modal: 300; --z-toast: 400;

  /* --- Táctil --- */
  --toque-min: 44px;
}

/* ---------- Modo oscuro ----------
   Automático por preferencia del sistema y forzable con
   <html data-tema="oscuro"> desde la configuración del usuario. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --hacia: #ffffff;
    --mezcla-texto: 52%;
    --lienzo:       #0b1220;
    --superficie:   #111c2e;
    --superficie-2: #16233a;
    --superficie-3: #1d2c46;
    --borde:        #22314c;
    --borde-fuerte: #2f4062;
    --texto-fuerte: #e8eef7;
    --texto-medio:  #a8b6cc;
    --texto-suave:  #7d8ca6;
    --texto-inverso:#0b1220;

    --exito: #4ade80;  --exito-suave: #12301f;  --exito-borde: #1c5334;
    --aviso: #fbbf24;  --aviso-suave: #33260a;  --aviso-borde: #6b4d0d;
    --error: #f87171;  --error-suave: #3a1414;  --error-borde: #7f2626;
    --info:  #93b4fd;  --info-suave:  #15203f;  --info-borde:  #2a3f78;

    --sombra-1: 0 1px 2px rgba(0,0,0,.4);
    --sombra-2: 0 2px 6px rgba(0,0,0,.45), 0 4px 12px rgba(0,0,0,.35);
    --sombra-3: 0 8px 24px rgba(0,0,0,.5);
    --sombra-4: 0 20px 48px rgba(0,0,0,.6);
  }
}

:root[data-tema="oscuro"] {
  --hacia: #ffffff;
  --mezcla-texto: 52%;
  --lienzo:       #0b1220;
  --superficie:   #111c2e;
  --superficie-2: #16233a;
  --superficie-3: #1d2c46;
  --borde:        #22314c;
  --borde-fuerte: #2f4062;
  --texto-fuerte: #e8eef7;
  --texto-medio:  #a8b6cc;
  --texto-suave:  #7d8ca6;
  --texto-inverso:#0b1220;

  --exito: #4ade80;  --exito-suave: #12301f;  --exito-borde: #1c5334;
  --aviso: #fbbf24;  --aviso-suave: #33260a;  --aviso-borde: #6b4d0d;
  --error: #f87171;  --error-suave: #3a1414;  --error-borde: #7f2626;
  --info:  #93b4fd;  --info-suave:  #15203f;  --info-borde:  #2a3f78;

  --sombra-1: 0 1px 2px rgba(0,0,0,.4);
  --sombra-2: 0 2px 6px rgba(0,0,0,.45), 0 4px 12px rgba(0,0,0,.35);
  --sombra-3: 0 8px 24px rgba(0,0,0,.5);
  --sombra-4: 0 20px 48px rgba(0,0,0,.6);
}

/* Contraste automático del texto sobre el color primario, donde el
   navegador ya lo soporta. La variable enviada por el backend queda
   como valor seguro para el resto. */
@supports (color: contrast-color(#000 vs white, black)) {
  :root { --texto-sobre-primario: contrast-color(var(--color-primario) vs white, #0f172a); }
}

@media (prefers-reduced-motion: reduce) {
  :root { --t-rapida: 1ms; --t-media: 1ms; --t-lenta: 1ms; }
}

/* ── Alias de compatibilidad ────────────────────────────────────────────────
   Nombres usados en las vistas que no existían en el sistema de diseño. Una
   variable CSS inexistente NO da error: simplemente no aplica nada, así que
   `background: var(--fondo)` dejaba el panel del odontograma transparente y el
   texto ilegible sobre el contenido de atrás. Definirlas aquí como alias
   corrige todos los usos de una vez y evita que vuelva a pasar. */
:root {
  --fondo:              var(--superficie);
  --fondo-suave:        var(--lienzo);
  --radio:              var(--r-md);
  --radio-sm:           var(--r-sm);
  --texto-base:         var(--texto-fuerte);
  --e-7:                28px;
  --advertencia-suave:  var(--aviso-suave, color-mix(in srgb, #f59e0b 18%, transparent));
}

/* Alias añadidos tras la auditoría de variables de la Fase 4.
   --texto y --txt-md se usaban en el odontograma y no existían: una var()
   inexistente no da error, simplemente no aplica nada. */
:root {
  --texto:   var(--texto-fuerte);
  --txt-md:  var(--txt-base);
}