/* ============================================================================
   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 {
  /* ── 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;

  /* ── 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 ── */
  --surface-page:var(--palette-neu-50);
  --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);

  /* ── 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(--palette-teal-400);
  --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;

  /* ── SHADOW TOKENS ── */
  --shadow-sm:0 1px 3px rgba(30,60,56,.08),0 1px 2px rgba(30,60,56,.05);
  --shadow-md:0 4px 14px rgba(30,60,56,.10),0 2px 4px rgba(30,60,56,.06);
  --shadow-lg:0 10px 32px rgba(30,60,56,.14),0 4px 10px rgba(30,60,56,.07);

  /* ── TYPOGRAPHY TOKENS ── */
  --font-family:'DM Sans',system-ui,sans-serif;
  --font-size-xs:11px;--font-size-sm:13px;--font-size-base:14px;
  --font-size-md:15px;--font-size-lg:18px;--font-size-xl:22px;
  --font-size-2xl:28px;--font-size-3xl:36px;
  --font-weight-normal:400;--font-weight-medium:500;--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 ── */
  --transition:.16s ease;--transition-slow:.28s ease;

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

  /* ── 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: 246,247,247;            /* --palette-neu-50 #F6F7F7 */
  --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);
}