/* ============================================================================
   Lumina CRM · tokens.css — sistema "Clínica luminosa" (ADR-0003)
   Variables de color, tipografía, espaciado y radios. Modo claro por defecto,
   oscuro con [data-theme="dark"] o con la preferencia del sistema.
   Debe coincidir con docs/06-diseno/sistema-de-diseno.md.
   ========================================================================== */
:root {
  --bg: #FFFFFF;
  --surface: #F3F8F6;
  --surface-2: #EAF2EF;
  --text: #1F2230;
  --text-2: #5B5F73;
  --text-3: #9A9DB0;
  --border: #E0EAE6;
  --primary: #1E7066;          /* ADR-BRAND-07: el verde pino es el color oficial desde v2.44 (antes el lavanda #6E5BD6, que sigue como tema «Morado») */
  --primary-ink: #FFFFFF;
  --primary-soft: #E1F1EE;
  --accent: #5E9C7A;
  --accent-soft: #E6F2EA;
  --warning: #D98E04;
  --warning-soft: #FFF3DC;
  --danger: #D9485F;
  --danger-soft: #FDE7EC;
  --info: #2F6FED;
  --info-soft: #E7EEFD;
  --birthday: #E58CA6;
  --birthday-soft: #FCE9EF;
  --neutral: #8A8D9F;
  --neutral-soft: #EEEEF2;
  --aviso: #FF3B30;           /* M-028: el aviso rojo de las burbujas y de la pestaña Hoy (como iOS; cifra en blanco, sin borde; igual en claro y oscuro) */
  --wa-bubble: #DCF8C6;
  --wa-bubble-in: #FFFFFF;
  --wa-bg: #ECE5DD;
  --wa-tick: #53BDEB;
  --shadow: 0 8px 24px rgba(30, 112, 102, 0.10);
  --shadow-sm: 0 2px 8px rgba(31, 34, 48, 0.06);
  --overlay: rgba(31, 34, 48, 0.40);
  --escritorio-bg: linear-gradient(160deg, #F3F8F6 0%, #DCEBE6 100%);

  --font-display: 'Outfit', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-ui: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --fs-xs: 12px; --lh-xs: 16px;
  --fs-sm: 13px; --lh-sm: 18px;
  --fs-md: 16px; --lh-md: 24px;
  --fs-lg: 18px; --lh-lg: 26px;
  --fs-xl: 22px; --lh-xl: 28px;
  --fs-2xl: 28px; --lh-2xl: 34px;
  --fs-3xl: 34px; --lh-3xl: 40px;

  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px;
  --radius-s: 12px; --radius-m: 16px; --radius-l: 20px; --radius-xl: 24px; --radius-pill: 999px;
  --tap: 44px;
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --dur: 180ms;
  --dur-fast: 120ms;

  --telefono-ancho: 390px;
  --telefono-alto: 844px;
  --tabbar-alto: 64px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);

  /* colores por profesional (agenda) */
  --pro-1: #6E5BD6; --pro-2: #2F6FED; --pro-3: #E58CA6; --pro-4: #5E9C7A; --pro-5: #D98E04;
  color-scheme: light;
}

[data-theme="dark"] {
  --bg: #14161F;
  --surface: #1C1F2B;
  --surface-2: #262A38;
  --text: #F2F1F7;
  --text-2: #B4B7C7;
  --text-3: #7F8396;
  --border: #303445;
  --primary: #8EDCCB;
  --primary-ink: #14161F;
  --primary-soft: #173A36;
  --accent: #7FC4A0;
  --accent-soft: #1F3A2D;
  --warning: #F0B241;
  --warning-soft: #3D3016;
  --danger: #F27A8C;
  --danger-soft: #43222A;
  --info: #7AA3FF;
  --info-soft: #1E2A4A;
  --birthday: #F3A9BE;
  --birthday-soft: #452833;
  --neutral: #9A9DB0;
  --neutral-soft: #2A2D3A;
  --aviso: #FF3B30;
  --wa-bubble: #1F3A2D;
  --wa-bubble-in: #262A38;
  --wa-bg: #0F1A14;
  --shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
  --overlay: rgba(0, 0, 0, 0.60);
  --escritorio-bg: linear-gradient(160deg, #1A1D29 0%, #0F1118 100%);
  color-scheme: dark;
}

/* ---------------------------------------------------------------------------
   Temas de color por centro (M-016, ADR-0045). Valores del kit de identidad (ADR-BRAND-05).
   El atributo es data-tema (data-theme es el modo oscuro) y va en <html> con el tema del centro activo.
   Solo cambian los tokens de marca: el acento (--accent, la salvia de «al día») y los colores de estado
   son iguales en todos. El verde es :root desde v2.44 (ADR-BRAND-07); cada tema tiene su bloque explícito y los
   selectores «[data-theme="dark"] [data-tema]» sirven a las muestras de Ajustes › Apariencia, que pintan un tema dentro de otro.
   ------------------------------------------------------------------------- */
:root { --primary-glow: rgba(30, 112, 102, 0.35); }
[data-theme="dark"] { --primary-glow: rgba(142, 220, 203, 0.30); }
/* Morado: el lavanda que fue el oficial hasta v2.42; sigue como opción para el centro que lo eligió */
[data-tema="morado"] {
  --primary: #6E5BD6;
  --primary-ink: #FFFFFF;
  --primary-soft: #EEEBFB;
  --surface: #F6F5FA;
  --surface-2: #EEEDF5;
  --border: #E9E8F0;
  --shadow: 0 8px 24px rgba(110, 91, 214, 0.10);
  --primary-glow: rgba(110, 91, 214, 0.35);
}
[data-tema="morado"][data-theme="dark"],
[data-theme="dark"] [data-tema="morado"] {
  --primary: #9C8CF2;
  --primary-ink: #14161F;
  --primary-soft: #2B2747;
  --surface: #1C1F2B;
  --surface-2: #262A38;
  --border: #303445;
  --shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  --primary-glow: rgba(156, 140, 242, 0.30);
}
/* Rosa: un rosa frambuesa, nunca pastel en el botón */
[data-tema="rosa"] {
  --primary: #B53D7A;
  --primary-ink: #FFFFFF;
  --primary-soft: #FBEAF3;
  --surface: #FAF5F8;
  --surface-2: #F4ECF1;
  --border: #EFE4EA;
  --shadow: 0 8px 24px rgba(181, 61, 122, 0.10);
  --primary-glow: rgba(181, 61, 122, 0.35);
}
[data-tema="rosa"][data-theme="dark"],
[data-theme="dark"] [data-tema="rosa"] {
  --primary: #F29AC4;
  --primary-ink: #14161F;
  --primary-soft: #43223A;
  --surface: #1C1F2B;
  --surface-2: #262A38;
  --border: #303445;
  --shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  --primary-glow: rgba(242, 154, 196, 0.30);
}
/* Azul grafito: azul acero con grises fríos */
[data-tema="azul"] {
  --primary: #43608A;
  --primary-ink: #FFFFFF;
  --primary-soft: #E7EDF5;
  --surface: #F4F6F9;
  --surface-2: #ECEFF4;
  --border: #E3E7EE;
  --shadow: 0 8px 24px rgba(67, 96, 138, 0.10);
  --primary-glow: rgba(67, 96, 138, 0.35);
}
[data-tema="azul"][data-theme="dark"],
[data-theme="dark"] [data-tema="azul"] {
  --primary: #9DB4D6;
  --primary-ink: #14161F;
  --primary-soft: #223044;
  --surface: #1C1F2B;
  --surface-2: #262A38;
  --border: #303445;
  --shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  --primary-glow: rgba(157, 180, 214, 0.30);
}
/* Verde: el oficial (los valores de :root, ADR-BRAND-07): un verde pino, más azulado que la salvia de «al día» */
[data-tema="verde"] {
  --primary: #1E7066;
  --primary-ink: #FFFFFF;
  --primary-soft: #E1F1EE;
  --surface: #F3F8F6;
  --surface-2: #EAF2EF;
  --border: #E0EAE6;
  --shadow: 0 8px 24px rgba(30, 112, 102, 0.10);
  --primary-glow: rgba(30, 112, 102, 0.35);
}
[data-tema="verde"][data-theme="dark"],
[data-theme="dark"] [data-tema="verde"] {
  --primary: #8EDCCB;
  --primary-ink: #14161F;
  --primary-soft: #173A36;
  --surface: #1C1F2B;
  --surface-2: #262A38;
  --border: #303445;
  --shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  --primary-glow: rgba(142, 220, 203, 0.30);
}
/* Terracota: barro cálido (M-022, ADR-BRAND-06) */
[data-tema="terracota"] {
  --primary: #A3472A;
  --primary-ink: #FFFFFF;
  --primary-soft: #FBECE6;
  --surface: #FBF6F3;
  --surface-2: #F4EEEC;
  --border: #EDE5E3;
  --shadow: 0 8px 24px rgba(163, 71, 42, 0.10);
  --primary-glow: rgba(163, 71, 42, 0.35);
}
[data-tema="terracota"][data-theme="dark"],
[data-theme="dark"] [data-tema="terracota"] {
  --primary: #F2A58A;
  --primary-ink: #14161F;
  --primary-soft: #3E241B;
  --surface: #1C1F2B;
  --surface-2: #262A38;
  --border: #303445;
  --shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  --primary-glow: rgba(242, 165, 138, 0.30);
}
/* Ciruela: morado profundo (M-022, ADR-BRAND-06) */
[data-tema="ciruela"] {
  --primary: #7B3F87;
  --primary-ink: #FFFFFF;
  --primary-soft: #F3E9F6;
  --surface: #F8F4F9;
  --surface-2: #F2ECF4;
  --border: #EBE3ED;
  --shadow: 0 8px 24px rgba(123, 63, 135, 0.10);
  --primary-glow: rgba(123, 63, 135, 0.35);
}
[data-tema="ciruela"][data-theme="dark"],
[data-theme="dark"] [data-tema="ciruela"] {
  --primary: #D3A6E0;
  --primary-ink: #14161F;
  --primary-soft: #33223A;
  --surface: #1C1F2B;
  --surface-2: #262A38;
  --border: #303445;
  --shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  --primary-glow: rgba(211, 166, 224, 0.30);
}
/* Dorado: ocre y miel (M-022, ADR-BRAND-06) */
[data-tema="dorado"] {
  --primary: #7A5A12;
  --primary-ink: #FFFFFF;
  --primary-soft: #F6EFDD;
  --surface: #FAF7EF;
  --surface-2: #F4F1EC;
  --border: #EDEAE3;
  --shadow: 0 8px 24px rgba(122, 90, 18, 0.10);
  --primary-glow: rgba(122, 90, 18, 0.35);
}
[data-tema="dorado"][data-theme="dark"],
[data-theme="dark"] [data-tema="dorado"] {
  --primary: #E3C36E;
  --primary-ink: #14161F;
  --primary-soft: #3A311A;
  --surface: #1C1F2B;
  --surface-2: #262A38;
  --border: #303445;
  --shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  --primary-glow: rgba(227, 195, 110, 0.30);
}
/* Carbón: grafito sobrio (M-022, ADR-BRAND-06) */
[data-tema="carbon"] {
  --primary: #3A3F4F;
  --primary-ink: #FFFFFF;
  --primary-soft: #ECEDF1;
  --surface: #F5F6F8;
  --surface-2: #ECEEF4;
  --border: #E3E5ED;
  --shadow: 0 8px 24px rgba(58, 63, 79, 0.10);
  --primary-glow: rgba(58, 63, 79, 0.35);
}
[data-tema="carbon"][data-theme="dark"],
[data-theme="dark"] [data-tema="carbon"] {
  --primary: #BFC4D3;
  --primary-ink: #14161F;
  --primary-soft: #2A2D38;
  --surface: #1C1F2B;
  --surface-2: #262A38;
  --border: #303445;
  --shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  --primary-glow: rgba(191, 196, 211, 0.30);
}