/* ==========================================================================
   CURATIO HMS — DESIGN TOKENS
   Fuente única de verdad del Design System. Ningún archivo debe declarar
   un color, radio o sombra literal: todo se consume desde aquí.
   Ref: INFOGENERAL/HMS_PRO_Guia_Oficial_Design_System.docx
   ========================================================================== */

:root {
  /* ---------- Marca ---------- */
  --hms-primary:        #0D6EFD;   /* Primary Blue   */
  --hms-cyan:           #14B8D4;   /* Medical Cyan   */
  --hms-purple:         #7C3AED;   /* Purple AI      */

  --hms-primary-600:    #0B5ED7;
  --hms-primary-300:    #6EA8FE;
  --hms-cyan-300:       #67D8EC;

  /* ---------- Semánticos (máx. 6 funcionales) ---------- */
  --hms-success:        #16A34A;
  --hms-warning:        #F59E0B;
  --hms-critical:       #DC2626;
  --hms-info:           var(--hms-cyan);

  /* ---------- Superficies — modo oscuro (interfaz principal) ---------- */
  --hms-bg:             #0B1220;   /* Dark Navy */
  --hms-surface:        #162033;
  --hms-surface-2:      #1D2A42;
  --hms-surface-3:      #24334F;
  --hms-border:         #2A3B55;
  --hms-border-soft:    #1F2C42;

  /* ---------- Superficies — modo claro (formularios, impresión) ---------- */
  --hms-light-bg:       #FFFFFF;
  --hms-light-surface:  #F8FAFC;
  --hms-light-border:   #DCE4EF;
  --hms-light-text:     #172235;
  --hms-light-muted:    #64748B;

  /* ---------- Texto ---------- */
  --hms-text:           #F8FAFC;
  --hms-text-muted:     #94A3B8;
  --hms-text-soft:      #CBD5E1;

  /* ---------- Tipografía ---------- */
  --hms-font: "Inter", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --hms-font-mono: "Consolas", "Cascadia Mono", monospace;

  --hms-fs-titulo:      2.375rem;  /* 38px — Título 36-42 Bold */
  --hms-fs-pantalla:    1.875rem;  /* 30px — Pantalla 28-32    */
  --hms-fs-subtitulo:   1.375rem;  /* 22px — Subtítulo 22-24   */
  --hms-fs-texto:       1rem;      /* 16px — Texto             */
  --hms-fs-etiqueta:    0.8125rem; /* 13px — Etiqueta 13-14    */
  --hms-fs-kpi:         3rem;      /* 48px — KPI 40-56         */

  --hms-fw-regular:     400;
  --hms-fw-medium:      500;
  --hms-fw-semibold:    600;
  --hms-fw-bold:        700;
  --hms-fw-extrabold:   800;

  /* ---------- Espaciado ----------
     Escala densa: en un sistema hospitalario la pantalla se usa a diario y
     cada píxel de aire es información que no cabe. Se mantiene la progresión
     de la escala de 8px pero comprimida un escalón. */
  --hms-sp-1: 8px;
  --hms-sp-2: 6px;
  --hms-sp-3: 4px;
  --hms-sp-4: 12px;
  --hms-sp-5: 16px;
  --hms-sp-6: 22px;
  --hms-sp-7: 32px;
  --hms-sp-8: 44px;

  /* ---------- Radios ---------- */
  --hms-radio-boton:    12px;
  --hms-radio-campo:    12px;
  --hms-radio-tarjeta:  16px;
  --hms-radio-pill:     999px;

  /* ---------- Alturas de control ----------
     El login conserva 48px (pantalla de marca, sin densidad de datos);
     dentro del sistema se usa 38px para que quepa más en pantalla. */
  --hms-alto-campo:     38px;
  --hms-alto-boton:     38px;
  --hms-alto-campo-xl:  48px;   /* login y pantallas de acceso */

  /* ---------- Sombras ---------- */
  --hms-sombra-sm:  0 2px 8px rgba(0,0,0,.18);
  --hms-sombra-md:  0 8px 24px rgba(0,0,0,.24);
  --hms-sombra-lg:  0 20px 60px rgba(0,0,0,.28);
  --hms-sombra-foco: 0 0 0 3px rgba(20,184,212,.20);

  /* ---------- Gradientes ---------- */
  --hms-grad-marca:  linear-gradient(135deg, var(--hms-primary), var(--hms-cyan));
  --hms-grad-ai:     linear-gradient(135deg, var(--hms-cyan), var(--hms-purple));
  --hms-grad-accion: linear-gradient(100deg, var(--hms-primary), var(--hms-purple));

  /* ---------- Movimiento — oficial 150-250ms ---------- */
  --hms-t-rapida: 150ms;
  --hms-t-media:  200ms;
  --hms-t-lenta:  250ms;
  --hms-ease:     cubic-bezier(.4, 0, .2, 1);

  /* ---------- Capas ---------- */
  --hms-z-sidebar: 100;
  --hms-z-topbar:  200;
  --hms-z-dropdown:300;
  --hms-z-modal:   400;
  --hms-z-toast:   500;

  /* ==========================================================================
     CAPA PREMIUM
     Lo anterior define la paleta; esto define la MATERIA. La diferencia entre
     una interfaz correcta y una que se siente cara está casi toda aquí:
     profundidad creíble, tipografía que no baila y movimiento con intención.
     ========================================================================== */

  /* ---------- Elevación en dos partes ----------
     Una sola sombra difusa se lee como mancha. Las superficies reales
     proyectan un contacto corto y nítido MÁS una difusión larga y suave;
     al superponerlas el elemento parece apoyado, no flotando. */
  --hms-elev-1: 0 1px 2px rgba(16,24,40,.05),  0 1px 3px rgba(16,24,40,.05);
  --hms-elev-2: 0 1px 2px rgba(16,24,40,.06),  0 4px 12px rgba(16,24,40,.07);
  --hms-elev-3: 0 2px 4px rgba(16,24,40,.06),  0 12px 28px rgba(16,24,40,.10);
  --hms-elev-4: 0 4px 8px rgba(16,24,40,.07),  0 24px 56px rgba(16,24,40,.14);

  /* Filo superior claro: simula luz cenital sobre el borde de la tarjeta.
     Es el detalle que separa "caja gris" de "superficie". */
  --hms-brillo: inset 0 1px 0 rgba(255,255,255,.75);

  /* ---------- Anillo de foco ----------
     Doble: un halo de color y un separador del color de fondo, para que el
     foco se distinga tanto sobre superficie clara como sobre una fila
     seleccionada. Accesible sin recurrir al outline del navegador. */
  --hms-anillo: 0 0 0 2px var(--app-superficie, #fff), 0 0 0 4px rgba(13,110,253,.35);

  /* ---------- Tipografía de datos ----------
     `tabular-nums` fija el ancho de los dígitos: sin esto una columna de
     importes se desalinea al cambiar de valor y la tabla "tiembla" al
     refrescar. Obligatorio en cifras, horas y contadores. */
  --hms-cifras: "tnum" 1, "lnum" 1;

  /* Los títulos grandes necesitan tracking negativo; a 30px+ el espaciado
     por defecto de Inter se ve suelto. */
  --hms-track-titulo: -.02em;
  --hms-track-cifra:  -.015em;

  /* ---------- Movimiento con intención ----------
     `salida` es la curva de entrada estándar. `entrada` sobrepasa un poco al
     final: se usa SOLO en elementos que aparecen (una línea nueva de receta),
     nunca en los que desaparecen — rebotar al salir se lee como error. */
  --hms-ease-salida:  cubic-bezier(.32, .72, 0, 1);
  --hms-ease-entrada: cubic-bezier(.34, 1.35, .64, 1);
}

/* En oscuro la luz no viene de arriba sino del propio material: el filo
   blanco se apaga y las sombras se endurecen, porque sobre fondo oscuro una
   sombra suave sencillamente no se ve. */
:root[data-tema="oscuro"] {
  --hms-elev-1: 0 1px 2px rgba(0,0,0,.30),  0 1px 3px rgba(0,0,0,.24);
  --hms-elev-2: 0 2px 4px rgba(0,0,0,.34),  0 6px 16px rgba(0,0,0,.30);
  --hms-elev-3: 0 4px 8px rgba(0,0,0,.38),  0 16px 36px rgba(0,0,0,.36);
  --hms-elev-4: 0 8px 16px rgba(0,0,0,.44), 0 32px 72px rgba(0,0,0,.48);
  --hms-brillo: inset 0 1px 0 rgba(255,255,255,.06);
  --hms-anillo: 0 0 0 2px var(--app-superficie, #111C2E), 0 0 0 4px rgba(110,168,254,.45);
}

/* Respetar a quien pide menos movimiento (accesibilidad) */
@media (prefers-reduced-motion: reduce) {
  :root {
    --hms-t-rapida: 1ms;
    --hms-t-media:  1ms;
    --hms-t-lenta:  1ms;
  }
}