/* ============================================================
   VENDORIZADO del canon — NO editar aquí (se regenera desde el origen):
   ~/Proyectos/Design-System/design-tokens/tokens.css
   Sistema Dr. Otoniel Colorado · Paleta 2.22 @ commit 01193c1
   (tokens.css idéntico en HEAD 599f21b; los commits posteriores solo tocaron docs).
   Registro de pwa-samuel = CLÍNICO (azul + salvia, lienzo #F7F6F2).
   ============================================================ */
/* ============================================================
   Sistema de diseño Dr. Otoniel Colorado — Paleta 2.22
   GENERADO por build-tokens.js desde brand.js. NO editar a mano:
   editar brand.js y correr `node build-tokens.js`. Las reglas de
   combinación viven en brand.js; este archivo solo expone valores.
   ============================================================ */
:root {
  /* --- capa cruda: un hex se escribe una vez --- */
  --c-crema: #F9F7F0;
  --c-au-lait: #DCD7C9;
  --c-grafito: #4A4A47;
  --c-grafito-suave: #6A6965;
  --c-lunar: #3F4E4F;
  --c-blanco: #FFFFFF;
  --c-banda: #F7F7F8;
  --c-banda-alt: #F4F4F5;
  --c-filete: #EDEDEF;
  --c-borde: #E2E2E5;
  --c-chip-gris: #F0F0F2;
  --c-grafito-medio: #5A5955;
  --c-gris-control: #D8D8DB;
  --c-lienzo-clinico: #F7F6F2;
  --c-piedra-tarjeta: #D7D2CC;
  --c-piedra-filete: #DCD6CC;
  --c-piedra-chip: #E3DED3;
  --c-piedra-filete-tarjeta: #C4BEB6;
  --c-piedra-hover: #DDD8D3;
  --c-gris-frio: #9A9AA0;
  --c-gris-inactivo: #E9E9EC;
  --c-gris-inactivo-texto: #70707A;
  --c-azul-claro-texto: #D6DCE4;
  --c-navy: #28374A;
  --c-navy-hover: #1E2B3B;
  --c-navy-pressed: #16202C;
  --c-navy-accento: #5E6C7E;
  --c-navy-marcador: #78899F;
  --c-navy-tinte: #8FA1B2;
  --c-verde: #5A7765;
  --c-verde-texto: #41594A;
  --c-verde-tinte: #E5EBE6;
  --c-ambar: #DA9525;
  --c-ambar-texto: #8A5600;
  --c-ambar-tinte: #FBEEDA;
  --c-rojo: #9E2A2B;
  --c-rojo-tinte: #F9EBEA;
  --c-rojo-sobre-solido: #F6D5D5;
  --c-lunar-texto: #33403F;
  --c-lunar-tinte: #E4E8E8;
  --c-lunar-fila: #F4F6F6;
  --c-teal: #1E5A78;
  --c-teal-hover: #16465D;
  --c-teal-on-dark: #9FC4D8;
  --c-pet-texto: #00595E;
  --c-pet-solido: #004449;
  --c-pet-accento: #317F84;
  --c-pet-tinte: #D0E2E4;
  --c-pet-on-dark: #89B8BB;
  --c-pet-hover: #004549;
  --c-pet-pressed: #003437;
  --c-tc-texto: #8B5339;
  --c-tc-solido: #6F3F29;
  --c-tc-accento: #9F6348;
  --c-tc-medio: #C08A72;
  --c-tc-tinte: #EBDAD2;
  --c-tc-on-dark: #CDA492;
  --c-oro: #BF9A66;
  --c-sv-texto: #5D6B56;
  --c-sv-solido: #47543F;
  --c-sv-accento: #657359;
  --c-sv-medio: #92A088;
  --c-sv-on-dark: #A9B69F;
  --c-sv-tinte: #CBD3C4;
  --c-bronce: #8F5A22;
  --c-sv-rampa3: #8A9B7E;
  --c-sv-rampa4: #6A7D5E;
  --c-navy-solido: #18222F;
  --c-navy-on-dark: #A8B8C9;
  --c-sv-on-dark-texto: #CFD8C4;
  --c-navy-on-dark-texto: #CBD6E2;
  --c-rojo-on-dark: #F5B5AE;
  --c-verde-on-dark: #AEC4B4;
  --c-ambar-on-dark: #EFC178;

  /* --- grosores --- */
  --trazo-pelo: 1px;
  --trazo-anillo: 2px;
  --trazo-barra: 3px;
  --trazo-regla: 4px;
  --trazo-alerta: 6px;

  /* --- espaciado (escala; micro es el único paso sub-4) --- */
  --espacio-micro: 2px;
  --espacio-xs: 4px;
  --espacio-sm: 8px;
  --espacio-md: 12px;
  --espacio-lg: 16px;
  --espacio-xl: 24px;
  --espacio-xxl: 32px;
  --espacio-h1: 40px;
  --espacio-h2: 48px;
  --espacio-h3: 56px;
  --espacio-h4: 64px;
  --espacio-h5: 96px;

  /* --- radios (el sistema es de esquina recta) --- */
  --radio-recto: 0;
  --radio-circulo: 9999px;
  --radio-pastilla: 9999px;
  --radio-sistema: 12px;
  --radio-bisel: 32px;

  /* --- movimiento --- */
  --dur-instante: 0ms;
  --dur-rapido: 120ms;
  --dur-salida: 160ms;
  --dur-normal: 180ms;
  --dur-lento: 260ms;
  --curva-entrada: cubic-bezier(0.2, 0, 0.2, 1);
  --curva-salida: cubic-bezier(0.4, 0, 1, 1);

  /* --- elevación --- */
  --elev-1: 0 1px 3px rgba(74,74,71,0.07);
  --elev-2: 0 3px 9px rgba(74,74,71,0.1);
  --elev-3: 0 8px 28px rgba(74,74,71,0.24);
  --scrim: rgba(31,35,40,.55);

  /* --- tipografía --- */
  --font-titulo: 'Newsreader', Georgia, serif;
  --font-cuerpo: 'Plus Jakarta Sans', Arial, sans-serif;
  --font-dato: 'IBM Plex Mono', monospace;
  --font-titulo-produccion: Georgia, serif;
  --font-cuerpo-produccion: Arial, sans-serif;

  /* --- retícula --- */
  --col: 80px;
  --canal: var(--espacio-xl);
  --web-max: 1224px;
  --ancho-texto: 496px;
  --medida-13: 453px;
  --medida-135: 471px;
  --medida-14: 488px;
  --medida-16: 558px;
  --medida-17: 593px;

  /* --- capa semántica: referencia, nunca duplica --- */
  --texto-principal: var(--c-grafito);
  --texto-secundario: var(--c-grafito-medio);
  --texto-terciario: var(--c-grafito-suave);
  --texto-inverso: var(--c-blanco);
  --texto-enlace: var(--c-teal);
  --web-surface: var(--c-blanco);
  --web-band: var(--c-banda);
  --web-band-alt: var(--c-banda-alt);
  --web-hairline: var(--c-filete);
  --web-border: var(--c-borde);
  --web-chip: var(--c-chip-gris);
  --web-on-dark: var(--c-azul-claro-texto);
  /* --- lienzo: fondo de página por dominio (2.21) --- */
  --lienzo-clinico: var(--c-lienzo-clinico);
  --lienzo-general: var(--c-crema);
  --piedra-tarjeta: var(--c-piedra-tarjeta);
  --piedra-filete: var(--c-piedra-filete);
  --piedra-filete-tarjeta: var(--c-piedra-filete-tarjeta);
  --piedra-chip: var(--c-piedra-chip);
  --piedra-hover: var(--c-piedra-hover);
  --azul-texto: var(--c-navy);
  --azul-solido: var(--c-navy-solido);
  --azul-accento: var(--c-navy-accento);
  --azul-marcador: var(--c-navy-marcador);
  --azul-on-dark: var(--c-navy-on-dark);
  --azul-on-dark-texto: var(--c-navy-on-dark-texto);
  --azul-tinte: var(--c-navy-tinte);
  --teal-texto: var(--c-pet-texto);
  --teal-solido: var(--c-pet-solido);
  --teal-accento: var(--c-pet-accento);
  --teal-on-dark: var(--c-pet-on-dark);
  --teal-tinte: var(--c-pet-tinte);
  --teal-hover: var(--c-pet-hover);
  --teal-pressed: var(--c-pet-pressed);
  --terracota-texto: var(--c-tc-texto);
  --terracota-solido: var(--c-tc-solido);
  --terracota-accento: var(--c-tc-accento);
  --terracota-medio: var(--c-tc-medio);
  --terracota-on-dark: var(--c-tc-on-dark);
  --terracota-tinte: var(--c-tc-tinte);
  --oro: var(--c-oro);
  --salvia-texto: var(--c-sv-solido);
  --salvia-solido: var(--c-sv-solido);
  --salvia-accento: var(--c-sv-accento);
  --salvia-marcador: var(--c-sv-medio);
  --salvia-on-dark: var(--c-sv-on-dark);
  --salvia-on-dark-texto: var(--c-sv-on-dark-texto);
  --salvia-tinte: var(--c-sv-tinte);
  --foco-anillo: var(--c-navy);
  --foco-anillo-on-dark: var(--c-azul-claro-texto);
  --enlace-texto: var(--c-teal);
  --enlace-hover: var(--c-teal-hover);
  --enlace-on-dark: var(--c-teal-on-dark);
  --enlace-inactivo: var(--c-gris-frio);
  --interaccion-hover: var(--c-navy-hover);
  --interaccion-pressed: var(--c-navy-pressed);
  --interaccion-hover-superficie: var(--c-chip-gris);
  --interaccion-pressed-superficie: var(--c-borde);
  --interaccion-inactivo-fondo: var(--c-gris-inactivo);
  --interaccion-inactivo-texto: var(--c-gris-inactivo-texto);
  --interaccion-inactivo-borde: var(--c-borde);
  --interaccion-pista-apagada: var(--c-gris-control);
  --estado-info-texto: var(--c-lunar-texto);
  --estado-info-tinte: var(--c-lunar-tinte);
  --estado-info-fila: var(--c-lunar-fila);
  --estado-info-on-dark: var(--c-azul-claro-texto);
  --estado-exito-solido: var(--c-verde);
  --estado-exito-texto: var(--c-verde-texto);
  --estado-exito-tinte: var(--c-verde-tinte);
  --estado-exito-on-dark: var(--c-verde-on-dark);
  --estado-pendiente-solido: var(--c-ambar);
  --estado-pendiente-texto: var(--c-ambar-texto);
  --estado-pendiente-tinte: var(--c-ambar-tinte);
  --estado-pendiente-on-dark: var(--c-ambar-on-dark);
  --estado-alerta-solido: var(--c-rojo);
  --estado-alerta-texto: var(--c-rojo);
  --estado-alerta-tinte: var(--c-rojo-tinte);
  --estado-alerta-on-solido: var(--c-blanco);
  --estado-alerta-on-solido-suave: var(--c-rojo-sobre-solido);
  --estado-alerta-on-dark: var(--c-rojo-on-dark);
}

/* Obligatorio, no una mejora (regla 19). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0ms !important;
    animation-duration: 0ms !important;
  }
}

/* Toda columna numérica: consecuencia de elegir Plus Jakarta Sans,
   cuyas cifras son proporcionales (regla 16). */
.num { font-variant-numeric: tabular-nums; text-align: right; }