/* ============================================================================
   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: #F6F3EA;               /* ADR-0090 (M-068): la app en la paleta salvia y oliva de la marca (ADR-BRAND-09) desde v2.81: crema */
  --surface: #FCFBF7;
  --surface-2: #EEF2E5;
  --text: #2F3528;
  --text-2: #5E6455;
  --text-3: #6A6E63;           /* M-073: 4,5:1 o más sobre --bg, --surface y --surface-2 en los ocho temas claros (antes ~2,9:1) */
  --border: #E2E2D2;
  --primary: #4F5B38;          /* el musgo de las piezas; el verde pino #1E7066 (ADR-BRAND-07, v2.44 a v2.78) sigue como tema «verde» */
  --primary-ink: #FFFFFF;
  --primary-soft: #D6E0C4;
  --accent: #5E9C7A;
  --accent-soft: #E6F2EA;
  --warning: #D98E04;
  --warning-soft: #FFF3DC;
  --danger: #D9485F;
  --danger-soft: #FDE7EC;
  /* M5 (ronda 3): el texto de un error o de un aviso de campo, más oscuro que el color del estado para leerse (≥ 4,5 a 1 sobre el fondo) */
  --danger-texto: #B3263D;
  --warning-texto: #8F5B00;
  --info: #2F6FED;
  --info-soft: #E7EEFD;
  --birthday: #E58CA6;
  --birthday-soft: #FCE9EF;
  --neutral: #8A8D9F;
  --neutral-soft: #ECEBE3;
  --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) */
  --aviso-ink: #FFFFFF;       /* M-072 (C): la cifra sobre el aviso; nunca un blanco escrito a mano en el CSS */
  --accent-ink: #FFFFFF;      /* M-072 (C): el texto sobre --accent (botón Agendar) y sobre --info */
  --info-ink: #FFFFFF;
  --wa: #25D366;              /* M-072 (C): el verde oficial de WhatsApp, solo para su glifo (ADR-BRAND-06) */
  --wa-bubble: #DCF8C6;
  --wa-bubble-in: #FFFFFF;
  --wa-bg: #ECE5DD;
  --wa-tick: #53BDEB;
  --shadow: 0 8px 24px rgba(79, 91, 56, 0.10);
  --shadow-sm: 0 2px 8px rgba(47, 53, 40, 0.06);
  --overlay: rgba(47, 53, 40, 0.40);
  --escritorio-bg: linear-gradient(160deg, #F6F3EA 0%, #E2E6CD 100%);

  /* M-041 (2026-11-02, pedido del dueño): la fuente del sistema. SF Pro en iPhone y Mac, Roboto en Android, Segoe UI en Windows.
     Sin archivos de fuente que descargar; Outfit y Plus Jakarta Sans quedan solo para la guía (guia.css). */
  --font-display: -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --font-ui: -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Segoe UI', 'Helvetica Neue', Arial, 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: #171A12;
  --surface: #20241A;
  --surface-2: #2A2F22;
  --text: #F2F1EA;
  --text-2: #BDC0B2;
  --text-3: #858A7B;
  --border: #363C2C;
  --primary: #A9C285;
  --primary-ink: #171A12;
  --primary-soft: #2E3A22;
  --accent: #7FC4A0;
  --accent-soft: #1F3A2D;
  --warning: #F0B241;
  --warning-soft: #3D3016;
  --danger: #F27A8C;
  --danger-soft: #43222A;
  --danger-texto: #F27A8C;
  --warning-texto: #F0B241;
  --info: #7AA3FF;
  --info-soft: #1E2A4A;
  --birthday: #F3A9BE;
  --birthday-soft: #452833;
  --neutral: #9A9DB0;
  --neutral-soft: #2A2D24;
  --aviso: #FF3B30;
  --aviso-ink: #FFFFFF;
  --accent-ink: #171A12;       /* M-072 (C): sobre el verde claro del modo oscuro el texto va oscuro (el blanco no pasaba AA) */
  --info-ink: #121519;
  --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, #1D2117 0%, #11130D 100%);
  color-scheme: dark;
}

/* ---------------------------------------------------------------------------
   M5 (ronda 3): «Letra grande» (Ajustes › Apariencia), de cada persona en su celular, como el modo (data-letra en <html>).
   El texto que se lee queda en 16 px o más (los rótulos pequeños, en 15) y lo que se toca, en 48 px. Las pantallas no cambian:
   toda letra de la app usa estos tokens (el guardián G6 no deja escribir un tamaño a mano).
   ------------------------------------------------------------------------- */
[data-letra="grande"] {
  --fs-xs: 15px; --lh-xs: 20px;
  --fs-sm: 16px; --lh-sm: 22px;
  --fs-md: 18px; --lh-md: 26px;
  --fs-lg: 20px; --lh-lg: 28px;
  --fs-xl: 24px; --lh-xl: 30px;
  --fs-2xl: 30px; --lh-2xl: 36px;
  --fs-3xl: 36px; --lh-3xl: 42px;
  --tap: 48px;
}

/* ---------------------------------------------------------------------------
   Temas de color por centro (M-016, ADR-0045; M-022; ADR-0090, v2.81): un grupo cerrado de temas completos con la misma
   estética de la marca. Cada tema cambia el fondo, las superficies, el texto y el primario; nunca los colores de estado
   (--accent, --warning, --danger, --info, --birthday, --aviso). El atributo es data-tema (data-theme es el modo oscuro) y va
   en <html> con el tema del centro activo. El salvia es :root (sin atributo); su bloque y los selectores
   «[data-theme="dark"] [data-tema]» sirven a las muestras de Ajustes › Apariencia, que pintan un tema dentro de otro.
   Los valores salen de tools/temas (M-068) y los revisa tools/contraste_temas.py: todos pasan AA.
   ------------------------------------------------------------------------- */
:root { --primary-glow: rgba(79, 91, 56, 0.35); }
[data-theme="dark"] { --primary-glow: rgba(169, 194, 133, 0.30); }
/* Salvia: el oficial desde v2.81 (ADR-0090). Son los valores de :root; el bloque sirve a las muestras de Apariencia */
[data-tema="salvia"] {
  --bg: #F6F3EA; --surface: #FCFBF7; --surface-2: #EEF2E5; --border: #E2E2D2;
  --text: #2F3528; --text-2: #5E6455; --text-3: #6A6E63; --neutral-soft: #ECEBE3;
  --primary: #4F5B38; --primary-ink: #FFFFFF; --primary-soft: #D6E0C4;
  --shadow: 0 8px 24px rgba(79, 91, 56, 0.10); --shadow-sm: 0 2px 8px rgba(47, 53, 40, 0.06); --overlay: rgba(47, 53, 40, 0.40); --primary-glow: rgba(79, 91, 56, 0.35);
  --escritorio-bg: linear-gradient(160deg, #F6F3EA 0%, #E2E6CD 100%);
}
[data-tema="salvia"][data-theme="dark"],
[data-theme="dark"] [data-tema="salvia"] {
  --bg: #171A12; --surface: #20241A; --surface-2: #2A2F22; --border: #363C2C;
  --text: #F2F1EA; --text-2: #BDC0B2; --text-3: #858A7B; --neutral-soft: #2A2D24;
  --primary: #A9C285; --primary-ink: #171A12; --primary-soft: #2E3A22;
  --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); --primary-glow: rgba(169, 194, 133, 0.30);
  --escritorio-bg: linear-gradient(160deg, #171A12 0%, #11130D 100%);
}
/* Pino: niebla fría y el verde pino que fue el oficial de v2.44 a v2.78 (ADR-BRAND-07) */
[data-tema="verde"] {
  --bg: #F3F6F4; --surface: #FBFCFB; --surface-2: #E8EFEC; --border: #DCE5E1;
  --text: #1F2A28; --text-2: #56635F; --text-3: #626D6A; --neutral-soft: #E9ECEA;
  --primary: #1E7066; --primary-ink: #FFFFFF; --primary-soft: #DCEDE8;
  --shadow: 0 8px 24px rgba(30, 112, 102, 0.10); --shadow-sm: 0 2px 8px rgba(31, 42, 40, 0.06); --overlay: rgba(31, 42, 40, 0.40); --primary-glow: rgba(30, 112, 102, 0.35);
  --escritorio-bg: linear-gradient(160deg, #F3F6F4 0%, #DCEBE6 100%);
}
[data-tema="verde"][data-theme="dark"],
[data-theme="dark"] [data-tema="verde"] {
  --bg: #121917; --surface: #1A2320; --surface-2: #243029; --border: #30403A;
  --text: #EEF3F1; --text-2: #B3C2BC; --text-3: #7E8E88; --neutral-soft: #273530;
  --primary: #8EDCCB; --primary-ink: #121917; --primary-soft: #173A36;
  --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); --primary-glow: rgba(142, 220, 203, 0.30);
  --escritorio-bg: linear-gradient(160deg, #121917 0%, #0C1210 100%);
}
/* Lavanda: lino y lavanda, para el centro que eligió el morado de antes (ADR-BRAND-01) */
[data-tema="morado"] {
  --bg: #F5F3F9; --surface: #FCFBFE; --surface-2: #ECE8F4; --border: #E0DBEA;
  --text: #2A2638; --text-2: #5F5A72; --text-3: #6B657E; --neutral-soft: #ECEAF1;
  --primary: #5E4FB8; --primary-ink: #FFFFFF; --primary-soft: #E6E1F4;
  --shadow: 0 8px 24px rgba(94, 79, 184, 0.10); --shadow-sm: 0 2px 8px rgba(42, 38, 56, 0.06); --overlay: rgba(42, 38, 56, 0.40); --primary-glow: rgba(94, 79, 184, 0.35);
  --escritorio-bg: linear-gradient(160deg, #F5F3F9 0%, #E4DFF0 100%);
}
[data-tema="morado"][data-theme="dark"],
[data-theme="dark"] [data-tema="morado"] {
  --bg: #15131C; --surface: #1E1B27; --surface-2: #282434; --border: #363046;
  --text: #F1EFF6; --text-2: #B8B3C8; --text-3: #837D96; --neutral-soft: #2A2636;
  --primary: #B3A6F0; --primary-ink: #15131C; --primary-soft: #2B2747;
  --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); --primary-glow: rgba(179, 166, 240, 0.30);
  --escritorio-bg: linear-gradient(160deg, #15131C 0%, #0F0D14 100%);
}
/* Rosa viejo: rubor y rosa viejo */
[data-tema="rosa"] {
  --bg: #F9F2F2; --surface: #FDF9F9; --surface-2: #F2E5E7; --border: #E8D8DB;
  --text: #352A2D; --text-2: #6B5A5F; --text-3: #736368; --neutral-soft: #EFE8E9;
  --primary: #94475E; --primary-ink: #FFFFFF; --primary-soft: #F3E0E4;
  --shadow: 0 8px 24px rgba(148, 71, 94, 0.10); --shadow-sm: 0 2px 8px rgba(53, 42, 45, 0.06); --overlay: rgba(53, 42, 45, 0.40); --primary-glow: rgba(148, 71, 94, 0.35);
  --escritorio-bg: linear-gradient(160deg, #F9F2F2 0%, #F0DFE2 100%);
}
[data-tema="rosa"][data-theme="dark"],
[data-theme="dark"] [data-tema="rosa"] {
  --bg: #1B1416; --surface: #251C1F; --surface-2: #30262A; --border: #40333A;
  --text: #F5EFF0; --text-2: #C6B6BB; --text-3: #91818A; --neutral-soft: #312529;
  --primary: #E4A7B9; --primary-ink: #1B1416; --primary-soft: #43222A;
  --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); --primary-glow: rgba(228, 167, 185, 0.30);
  --escritorio-bg: linear-gradient(160deg, #1B1416 0%, #120D0F 100%);
}
/* Rosado: pétalo y frambuesa, el más femenino (pedido del dueño, 2026-11-06) */
[data-tema="rosado"] {
  --bg: #FBF3F6; --surface: #FEFAFB; --surface-2: #F7E6EC; --border: #EED9E1;
  --text: #3B2A33; --text-2: #6F5A64; --text-3: #77646E; --neutral-soft: #F1E8EC;
  --primary: #A83068; --primary-ink: #FFFFFF; --primary-soft: #F9E0EA;
  --shadow: 0 8px 24px rgba(168, 48, 104, 0.10); --shadow-sm: 0 2px 8px rgba(59, 42, 51, 0.06); --overlay: rgba(59, 42, 51, 0.40); --primary-glow: rgba(168, 48, 104, 0.35);
  --escritorio-bg: linear-gradient(160deg, #FBF3F6 0%, #F4DEE7 100%);
}
[data-tema="rosado"][data-theme="dark"],
[data-theme="dark"] [data-tema="rosado"] {
  --bg: #1E1317; --surface: #291B21; --surface-2: #35242C; --border: #46313B;
  --text: #F7EFF2; --text-2: #CBB6BF; --text-3: #96838B; --neutral-soft: #36262D;
  --primary: #F2A3C6; --primary-ink: #1E1317; --primary-soft: #4A2436;
  --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); --primary-glow: rgba(242, 163, 198, 0.30);
  --escritorio-bg: linear-gradient(160deg, #1E1317 0%, #150D10 100%);
}
/* Grafito: perla y azul grafito, sobrio */
[data-tema="azul"] {
  --bg: #F3F4F7; --surface: #FBFBFD; --surface-2: #E9ECF2; --border: #DCE0E8;
  --text: #242933; --text-2: #585F6E; --text-3: #636A7A; --neutral-soft: #E9EBEF;
  --primary: #3E567A; --primary-ink: #FFFFFF; --primary-soft: #DEE5F0;
  --shadow: 0 8px 24px rgba(62, 86, 122, 0.10); --shadow-sm: 0 2px 8px rgba(36, 41, 51, 0.06); --overlay: rgba(36, 41, 51, 0.40); --primary-glow: rgba(62, 86, 122, 0.35);
  --escritorio-bg: linear-gradient(160deg, #F3F4F7 0%, #E1E6EE 100%);
}
[data-tema="azul"][data-theme="dark"],
[data-theme="dark"] [data-tema="azul"] {
  --bg: #121519; --surface: #1B1F26; --surface-2: #252A33; --border: #333A46;
  --text: #EFF1F5; --text-2: #B6BCC8; --text-3: #808796; --neutral-soft: #282D37;
  --primary: #A7BEDC; --primary-ink: #121519; --primary-soft: #223044;
  --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); --primary-glow: rgba(167, 190, 220, 0.30);
  --escritorio-bg: linear-gradient(160deg, #121519 0%, #0C0E12 100%);
}
/* Terracota: arena y terracota, cálido */
[data-tema="terracota"] {
  --bg: #F8F2EA; --surface: #FDFAF6; --surface-2: #F1E7DA; --border: #E6DACB;
  --text: #382C25; --text-2: #6D5C50; --text-3: #756559; --neutral-soft: #EFE8DF;
  --primary: #924F33; --primary-ink: #FFFFFF; --primary-soft: #F2E0D5;
  --shadow: 0 8px 24px rgba(146, 79, 51, 0.10); --shadow-sm: 0 2px 8px rgba(56, 44, 37, 0.06); --overlay: rgba(56, 44, 37, 0.40); --primary-glow: rgba(146, 79, 51, 0.35);
  --escritorio-bg: linear-gradient(160deg, #F8F2EA 0%, #EEDFCF 100%);
}
[data-tema="terracota"][data-theme="dark"],
[data-theme="dark"] [data-tema="terracota"] {
  --bg: #1B1512; --surface: #251E1A; --surface-2: #312822; --border: #43372F;
  --text: #F5EFEA; --text-2: #C8B9AE; --text-3: #92837A; --neutral-soft: #32281F;
  --primary: #E2A88E; --primary-ink: #1B1512; --primary-soft: #43271C;
  --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); --primary-glow: rgba(226, 168, 142, 0.30);
  --escritorio-bg: linear-gradient(160deg, #1B1512 0%, #120E0B 100%);
}
/* Carbón: marfil y carbón, el más sobrio */
[data-tema="carbon"] {
  --bg: #F6F4EF; --surface: #FCFBF8; --surface-2: #ECE9E2; --border: #DEDACF;
  --text: #24252A; --text-2: #5A5C63; --text-3: #666870; --neutral-soft: #ECEAE4;
  --primary: #3B3E46; --primary-ink: #FFFFFF; --primary-soft: #E3E1DB;
  --shadow: 0 8px 24px rgba(59, 62, 70, 0.10); --shadow-sm: 0 2px 8px rgba(36, 37, 42, 0.06); --overlay: rgba(36, 37, 42, 0.40); --primary-glow: rgba(59, 62, 70, 0.35);
  --escritorio-bg: linear-gradient(160deg, #F6F4EF 0%, #E6E2D8 100%);
}
[data-tema="carbon"][data-theme="dark"],
[data-theme="dark"] [data-tema="carbon"] {
  --bg: #141517; --surface: #1D1E21; --surface-2: #27292D; --border: #373A40;
  --text: #F2F2F0; --text-2: #BDBEC2; --text-3: #868990; --neutral-soft: #2B2D32;
  --primary: #C8CAD0; --primary-ink: #141517; --primary-soft: #2C2E34;
  --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); --primary-glow: rgba(200, 202, 208, 0.30);
  --escritorio-bg: linear-gradient(160deg, #141517 0%, #0E0F11 100%);
}