/* ============================================================================
   Júbilo — Capa de tokens + puente a Bootstrap (reskin 2026)
   ----------------------------------------------------------------------------
   SSOT de la paleta/escala del design system. Se carga DESPUÉS de base.css y
   de Bootstrap para recolorear el sistema sin reescribir el monolito.
   Origen de los valores: marca oficial de la landing (Júbilo web 2.0).

   Dos partes:
     1. Tokens del design system (paleta cruda → brand/status/surface/...).
     2. Puente: mapeo de esos tokens a las variables --bs-* de Bootstrap 5.3,
        de modo que botones/cards/tablas/forms/alerts/badges recoloreen solos.

   Rebrand 2026-06-26: paleta lavanda → turquesa (teal). Marca oficial:
     primary #498C86 · secondary #7EBFB3 · light #C9F2EB (de la web pública).
   ========================================================================== */

:root {
  /* Sistema claro: sin esto los controles nativos (date picker) salían oscuros
     cuando el SO está en modo oscuro. */
  color-scheme: light;
  /* ── PALETTE (cruda — no usar directo en componentes) ── */
  /* Rampa teal derivada de la marca: -600 = primary #498C86, -300 = secondary
     #7EBFB3, -100 = light #C9F2EB. -900/-800 = chrome oscuro (sidebar/navbar). */
  --palette-teal-50:#E9F6F3;--palette-teal-100:#C9F2EB;--palette-teal-200:#9FDCD2;
  --palette-teal-300:#7EBFB3;--palette-teal-400:#5BA295;--palette-teal-600:#498C86;
  --palette-teal-700:#3D7A74;--palette-teal-800:#2F5C56;--palette-teal-900:#1E3C38;
  --palette-sage-50:#EDF4EE;--palette-sage-100:#C8DFC9;--palette-sage-200:#A1C4A3;
  --palette-sage-400:#5E9960;--palette-sage-600:#3A7040;--palette-sage-800:#234D28;
  --palette-rose-50:#FCF0EF;--palette-rose-100:#F5CECA;--palette-rose-200:#EDA9A4;
  --palette-rose-400:#D46B64;--palette-rose-600:#A84540;--palette-rose-800:#7A2B27;
  --palette-neu-50:#F6F7F7;--palette-neu-100:#EAEDEC;--palette-neu-200:#D4DAD8;
  --palette-neu-600:#707A78;--palette-neu-800:#333B39;--palette-neu-900:#404040;
  --palette-white:#FFFFFF;
  /* Canvas de la escalera light: neutro con tinte teal (hue de marca, chroma bajo). */
  --palette-canvas:#EDF1F0;

  /* ── BRAND TOKENS — editar solo estos para rebrandear ── */
  --brand-primary:var(--palette-teal-600);
  --brand-primary-hover:var(--palette-teal-800);
  --brand-primary-soft:var(--palette-teal-50);
  --brand-primary-mid:var(--palette-teal-200);
  --brand-secondary:var(--palette-teal-900);
  --brand-secondary-hover:var(--palette-teal-800);
  --brand-secondary-soft:var(--palette-teal-100);
  --brand-accent:var(--palette-teal-400);
  --brand-accent-hover:var(--palette-teal-600);
  --brand-accent-soft:var(--palette-teal-50);

  /* ── STATUS TOKENS ── */
  --status-success:var(--palette-sage-600);
  --status-success-soft:var(--palette-sage-50);
  --status-success-mid:var(--palette-sage-200);
  --status-success-dark:var(--palette-sage-800);
  --status-success-border:var(--palette-sage-100);
  --status-danger:var(--palette-rose-600);
  --status-danger-soft:var(--palette-rose-50);
  --status-danger-mid:var(--palette-rose-200);
  --status-danger-dark:var(--palette-rose-800);
  --status-danger-border:var(--palette-rose-100);
  --status-danger-icon:var(--palette-rose-400);
  --status-warning:#B87010;
  --status-warning-soft:#FDF3DC;
  --status-warning-border:#F5E0A0;
  --status-warning-text:#7A4F00;
  --status-warning-icon:#F5BC44;
  --status-warning-hover:#a66517;
  --status-info:var(--brand-accent);
  --status-info-soft:var(--brand-primary-soft);
  --status-info-dark:var(--palette-teal-800);

  /* ── SURFACE TOKENS ── (escalera light, guía ÍTERA §2: el canvas recede y la
     card POPea a blanco puro; la forma la da la elevación, no un borde claro) */
  --surface-page:var(--palette-canvas);
  --surface-card:var(--palette-white);
  --surface-card-alt:var(--palette-neu-50);
  /* Chrome = teal de marca, un punto más profundo (#3D7A74) para que el texto
     blanco del menú pase AA. El #498C86 puro queda para acentos/botones. */
  --surface-sidebar:var(--palette-teal-700);
  --surface-navbar:var(--palette-teal-700);
  --surface-hover:var(--palette-teal-50);
  --surface-input:var(--palette-white);
  --surface-raised:var(--palette-white);   /* popover, dropdown, menú */
  --surface-track:var(--palette-neu-100);  /* superficies hundidas */

  /* ── TEXT TOKENS ── */
  --text-primary:var(--palette-neu-800);
  --text-secondary:var(--palette-neu-600);
  --text-muted:#929997;
  --text-on-dark:var(--palette-white);
  --text-on-dark-muted:rgba(255,255,255,0.45);

  /* ── BORDER TOKENS ── */
  --border-default:var(--palette-neu-200);
  --border-strong:var(--palette-teal-200);
  --border-focus:var(--brand-primary);
  --border-error:var(--palette-rose-400);

  /* ── RADIUS TOKENS ── */
  --radius-xs:4px;--radius-sm:6px;--radius-md:10px;--radius-lg:16px;--radius-xl:22px;--radius-full:9999px;

  /* ── ELEVATION TOKENS ── (guía ÍTERA §1-§3)
     Ink = teal-900 (sombra tintada, no negra). Cada nivel: aro-sombra 1px de
     grounding + contacto + difusión. El inset-top es la primera capa de toda
     superficie raised: transparente en light (firma del sistema, queda lista
     para un modo oscuro). */
  --elevation-ink:30,60,56;
  --elevation-inset-top:inset 0 1px 0 rgba(255,255,255,0);
  --elevation-subtle:var(--elevation-inset-top),0 0 0 1px rgba(var(--elevation-ink),.07),0 1px 2px rgba(var(--elevation-ink),.06);
  --elevation-soft:var(--elevation-inset-top),0 0 0 1px rgba(var(--elevation-ink),.05),0 1px 2px rgba(var(--elevation-ink),.06),0 3px 8px rgba(var(--elevation-ink),.05);
  --elevation-1:var(--elevation-inset-top),0 0 0 1px rgba(var(--elevation-ink),.06),0 1px 2px rgba(var(--elevation-ink),.07),0 4px 12px rgba(var(--elevation-ink),.07),0 14px 32px -10px rgba(var(--elevation-ink),.10);
  --elevation-2:var(--elevation-inset-top),0 0 0 1px rgba(var(--elevation-ink),.07),0 2px 4px rgba(var(--elevation-ink),.08),0 10px 24px rgba(var(--elevation-ink),.11),0 22px 48px -12px rgba(var(--elevation-ink),.14);
  --elevation-3:var(--elevation-inset-top),0 0 0 1px rgba(var(--elevation-ink),.08),0 6px 12px rgba(var(--elevation-ink),.10),0 28px 64px rgba(var(--elevation-ink),.22);
  --button-lift:inset 0 1px 0 rgba(255,255,255,.16),0 1px 2px rgba(var(--elevation-ink),.20),0 3px 8px rgba(73,140,134,.24);
  --button-lift-hover:inset 0 1px 0 rgba(255,255,255,.16),0 2px 4px rgba(var(--elevation-ink),.22),0 8px 18px rgba(73,140,134,.30);
  --control-shadow:0 1px 2px rgba(var(--elevation-ink),.06);
  /* Campos (inputs, buscador, filtros, selects): superficie blanca, borde
     tintado muy suave y sombra mínima. Nunca relleno gris. */
  --field-bg:var(--surface-card);
  --field-border:rgba(var(--elevation-ink),.14);
  --field-border-hover:rgba(var(--elevation-ink),.26);
  --field-shadow:0 1px 2px rgba(var(--elevation-ink),.05);
  --field-focus-ring:0 0 0 3px rgba(73,140,134,.16);
  --track-inset:inset 0 1px 2px rgba(var(--elevation-ink),.08);

  /* Alias legacy: los componentes que ya usaban --shadow-* heredan la escala. */
  --shadow-sm:var(--elevation-1);
  --shadow-md:var(--elevation-2);
  --shadow-lg:var(--elevation-3);

  /* ── TYPOGRAPHY TOKENS ── */
  --font-family:'Mona Sans',system-ui,sans-serif;
  /* Escala 2026-10: el piso legible es 12px y el cuerpo 15px (antes 11/14:
     el sistema se leía "con lupa" comparado con las referencias ÍTERA). */
  --font-size-xs:12px;--font-size-sm:14px;--font-size-base:15px;
  --font-size-md:16px;--font-size-lg:19px;--font-size-xl:24px;
  --font-size-2xl:30px;--font-size-3xl:36px;
  --font-size-meta:13px;      /* fecha, autor, detalle bajo un título */
  --font-size-page-title:22px; /* título de la vista en la topbar */
  --control-height:40px;      /* botones e inputs estándar */
  --control-height-sm:36px;
  --font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;

  /* ── SPACING TOKENS ── */
  --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;

  /* ── MOTION TOKENS ── escala canónica ÍTERA (guía de motion): ≤300ms, ease-out,
     sin bounce. Reduced-motion las lleva a 0ms abajo (self-zeroing). */
  --duration-fast:120ms;      /* micro-feedback: hover, tints */
  --duration-base:180ms;      /* DEFAULT: fades, overlays, cambios de estado */
  --duration-moderate:220ms;  /* layout: colapsar/abrir, sidebar, modales */
  --duration-slow:300ms;      /* TECHO */
  --ease-out:cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out:cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast:var(--duration-fast) var(--ease-out);
  --transition-base:var(--duration-base) var(--ease-out);
  --transition-moderate:var(--duration-moderate) var(--ease-out);
  /* Alias legacy (los componentes existentes usan --transition / --transition-slow). */
  --transition:var(--transition-base);--transition-slow:var(--transition-moderate);

  /* ── LAYOUT TOKENS ── */
  --sidebar-width:240px;--navbar-height:64px;

  /* ── EVA PAIN SCALE (dolor 0-10) — escala clínica, NO marca ── */
  --eva-0:#4DB6E0;--eva-1:#5ABCDF;--eva-2:#68C6DA;--eva-3:#6CBECC;
  --eva-4:#5EAF6A;--eva-5:#8ABF55;--eva-6:#CDDC3A;
  --eva-7:#FFC107;--eva-8:#FF9800;--eva-9:#FF5722;--eva-10:#D32F2F;

  /* ── ROLE BADGES — categóricos (distinguir roles), NO marca ── */
  --role-admin-bg:#D7EFEA;--role-admin-text:var(--palette-teal-800);
  --role-gen-bg:#DDF3DE;--role-gen-text:var(--palette-sage-800);
  --role-ger-bg:#FDE8D5;--role-ger-text:#7A3510;
  --role-medico-bg:#E0F0FC;--role-medico-text:#1A5A8A;
  --role-gero-bg:var(--palette-rose-50);--role-gero-text:var(--palette-rose-800);

  /* ── TURNO SURFACES ── */
  --turno-manana-bg-start:#FEF9EC;--turno-manana-bg-end:#FDF0C8;
  --turno-manana-border:#F5E0A0;
  --turno-tarde-bg-start:#EDF6F4;--turno-tarde-bg-end:#E1F0EC;
  --turno-tarde-border:var(--palette-teal-200);
  --turno-noche-bg-start:var(--palette-teal-900);--turno-noche-bg-end:#152B28;
}

/* ============================================================================
   PUENTE → Bootstrap 5.3
   Mapea los tokens del design system a las variables --bs-* globales.
   Las *-rgb son necesarias porque Bootstrap arma rgba() con ellas → NO cascadean
   desde los tokens, hay que mantenerlas en sync a mano con el brand.
   ========================================================================== */

:root {
  /* Tipografía */
  --bs-body-font-family: var(--font-family);
  --bs-body-font-size: var(--font-size-base);
  --bs-body-color: var(--text-primary);
  --bs-body-color-rgb: 51,59,57;            /* --palette-neu-800 #333B39 */
  --bs-body-bg: var(--surface-page);
  --bs-body-bg-rgb: 237,241,240;            /* --palette-canvas #EDF1F0 */
  --bs-secondary-color: var(--text-secondary);
  --bs-tertiary-color: var(--text-muted);

  /* Colores de marca / semánticos */
  --bs-primary: var(--brand-primary);
  --bs-primary-rgb: 73,140,134;             /* #498C86 */
  --bs-secondary: var(--brand-secondary);
  --bs-secondary-rgb: 30,60,56;             /* #1E3C38 */
  --bs-success: var(--status-success);
  --bs-success-rgb: 58,112,64;              /* #3A7040 */
  --bs-danger: var(--status-danger);
  --bs-danger-rgb: 168,69,64;               /* #A84540 */
  --bs-warning: var(--status-warning);
  --bs-warning-rgb: 184,112,16;             /* #B87010 */
  --bs-info: var(--status-info);
  --bs-info-rgb: 91,162,149;                /* #5BA295 */
  --bs-light: var(--palette-neu-50);
  --bs-light-rgb: 246,247,247;
  --bs-dark: var(--palette-teal-900);
  --bs-dark-rgb: 30,60,56;

  /* Subtle backgrounds / emphasis (badges, alerts soft) */
  --bs-primary-bg-subtle: var(--brand-primary-soft);
  --bs-primary-text-emphasis: var(--brand-primary-hover);
  --bs-success-bg-subtle: var(--status-success-soft);
  --bs-success-text-emphasis: var(--status-success-dark);
  --bs-danger-bg-subtle: var(--status-danger-soft);
  --bs-danger-text-emphasis: var(--status-danger-dark);
  --bs-warning-bg-subtle: var(--status-warning-soft);
  --bs-warning-text-emphasis: var(--status-warning-text);
  --bs-info-bg-subtle: var(--status-info-soft);
  --bs-info-text-emphasis: var(--status-info-dark);

  /* Bordes y radios */
  --bs-border-color: var(--border-default);
  --bs-border-color-translucent: var(--border-default);
  --bs-border-radius: var(--radius-md);
  --bs-border-radius-sm: var(--radius-sm);
  --bs-border-radius-lg: var(--radius-lg);
  --bs-border-radius-xl: var(--radius-xl);
  --bs-border-radius-pill: var(--radius-full);

  /* Links */
  --bs-link-color: var(--brand-primary);
  --bs-link-color-rgb: 73,140,134;          /* #498C86 */
  --bs-link-hover-color: var(--brand-primary-hover);
  --bs-link-hover-color-rgb: 47,92,86;      /* #2F5C56 */

  /* Sombras */
  --bs-box-shadow-sm: var(--shadow-sm);
  --bs-box-shadow: var(--shadow-md);
  --bs-box-shadow-lg: var(--shadow-lg);

  /* Inputs (form-control usa estas) */
  --bs-emphasis-color: var(--text-primary);
}

/* Fuente del body: base.css carga antes, así que esta regla (más tardía) gana
   a igual especificidad. Refuerza el font-family por si el monolito lo fija. */
body {
  font-family: var(--font-family);
  color: var(--text-primary);
  background-color: var(--surface-page);
}

/* Foco accesible y de marca para controles Bootstrap */
:root {
  --bs-focus-ring-color: rgba(73,140,134,.25);
}
.form-control:focus,
.form-select:focus,
.btn:focus-visible {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 .2rem rgba(73,140,134,.20);
}

@media (prefers-reduced-motion: reduce) {
  :root { --duration-fast:0ms; --duration-base:0ms; --duration-moderate:0ms; --duration-slow:0ms; }
}