/* tokens.css — Sistema de diseño "clínica esmeralda" (v2).
 * Toda decisión de color/tipografía/espaciado del frontend pasa por aquí.
 * Ningún componente debe usar valores de color/tipografía "sueltos".
 *
 * Dirección visual: superficie de trabajo clara y legible (blanco / verde
 * muy pálido), con la marca esmeralda concentrada en la barra lateral,
 * botones primarios y acentos de sección. Un sistema de colores semánticos
 * (azul, morado, ámbar, rojo, naranja) da personalidad y permite escanear
 * información de un vistazo — igual función que en el sistema anterior.
 * El serif itálico ("Playfair Display") se reserva como firma de marca:
 * login y nombre de marca en la barra lateral, nada más.
 */

:root {
  /* --- Marca esmeralda --- */
  --marca-900: #0B3B2C;   /* barra lateral — verde profundo sólido */
  --marca-700: #12563F;   /* textos/iconos de marca sobre superficie clara */
  --marca-500: #1E9C6E;   /* acento brillante — botones primarios, activos */
  --marca-500-hover: #178058;
  --marca-100: #E3F3EA;   /* tinte suave — hover, fondos de insignia */

  /* --- Superficie y texto --- */
  --paper: #F5F8F6;            /* fondo de página — blanco cálido con un toque verde */
  --superficie: #FFFFFF;       /* tarjetas y paneles */
  --superficie-hover: #F1F5F2;

  --ink: #16261F;          /* texto principal */
  --ink-soft: #56685D;     /* texto secundario */
  --ink-tenue: #93A69B;    /* texto terciario — pies de página, placeholders */

  --mist: #EEF3F0;             /* superficies secundarias, divisores suaves */
  --mist-strong: #DCE6E0;      /* bordes */

  --sidebar-bg: var(--marca-900);
  --sidebar-texto: rgba(255, 255, 255, 0.72);
  --sidebar-texto-activo: #FFFFFF;
  --sidebar-hover-bg: rgba(255, 255, 255, 0.08);
  --sidebar-activo-bg: rgba(255, 255, 255, 0.14);

  /* --- Colores semánticos (estado, alerta, categoría) --- */
  --amber-alert: #C9822B;
  --amber-alert-bg: #FBEEDD;
  --signal-red: #B5473A;
  --signal-red-bg: #F8E7E4;
  --success: #1E9C6E;
  --success-bg: var(--marca-100);
  --info: #3E7DC1;
  --info-bg: #E9F1FB;
  --violeta: #8C55B8;
  --violeta-bg: #F2EAF9;
  --naranja: #C96A2C;
  --naranja-bg: #FAE9DB;
  --white: #FFFFFF;

  --boton-gradiente: linear-gradient(180deg, #24AC7C 0%, var(--marca-500) 100%);
  --boton-gradiente-hover: linear-gradient(180deg, #2BBE89 0%, var(--marca-500-hover) 100%);

  /* --- Login / momentos de marca (fondo oscuro deliberado) --- */
  --login-bg-profundo: #081B16;
  --login-bg-medio: #0E2B23;
  --login-gradiente: radial-gradient(ellipse 1200px 800px at 15% -10%, #17493B 0%, transparent 55%),
                     radial-gradient(ellipse 1000px 700px at 100% 10%, #103A2E 0%, transparent 50%),
                     linear-gradient(160deg, var(--login-bg-medio) 0%, var(--login-bg-profundo) 100%);
  --login-vidrio-bg: rgba(255, 255, 255, 0.07);
  --login-vidrio-borde: rgba(255, 255, 255, 0.16);
  --login-ink: #F2F7F4;
  --login-ink-soft: #A9C7BB;
  --login-ink-tenue: #6E8D82;

  /* --- Tipografía --- */
  --fuente-display: "Playfair Display", "Georgia", "Times New Roman", serif;
  --fuente-cuerpo: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --fuente-datos: "IBM Plex Mono", "SF Mono", Consolas, monospace;

  --tamano-xs: 0.75rem;
  --tamano-sm: 0.875rem;
  --tamano-base: 1rem;
  --tamano-md: 1.125rem;
  --tamano-lg: 1.375rem;
  --tamano-xl: 1.75rem;

  /* --- Espaciado (escala de 4px) --- */
  --espacio-1: 4px;
  --espacio-2: 8px;
  --espacio-3: 12px;
  --espacio-4: 16px;
  --espacio-5: 24px;
  --espacio-6: 32px;
  --espacio-7: 48px;

  /* --- Forma --- */
  --radio-sm: 6px;
  --radio-md: 10px;
  --radio-lg: 20px;
  --sombra-sutil: 0 1px 2px rgba(22, 38, 31, 0.06), 0 4px 14px rgba(22, 38, 31, 0.06);
  --sombra-vidrio: 0 1px 1px rgba(255, 255, 255, 0.08) inset, 0 16px 40px rgba(2, 12, 9, 0.45);
  --borde: 1px solid var(--mist-strong);

  /* --- Layout --- */
  --ancho-barra-lateral: 244px;
  --alto-barra-inferior-movil: 64px;
}