:root {
  --m3-sys-light-primary: #6750A4;
  --m3-sys-light-on-primary: #FFFFFF;
  --m3-sys-light-primary-container: #EADDFF;
  --m3-sys-light-on-primary-container: #21005D;
  --m3-sys-light-secondary: #625B71;
  --m3-sys-light-on-secondary: #FFFFFF;
  --m3-sys-light-secondary-container: #E8DEF8;
  --m3-sys-light-on-secondary-container: #1D192B;
  --m3-sys-light-tertiary: #7D5260;
  --m3-sys-light-on-tertiary: #FFFFFF;
  --m3-sys-light-tertiary-container: #FFD8E4;
  --m3-sys-light-on-tertiary-container: #31111D;
  --m3-sys-light-error: #B3261E;
  --m3-sys-light-on-error: #FFFFFF;
  --m3-sys-light-error-container: #F9DEDC;
  --m3-sys-light-on-error-container: #410E0B;
  --m3-sys-light-background: #FFFBFE;
  --m3-sys-light-on-background: #1C1B1F;
  --m3-sys-light-surface: #FFFBFE;
  --m3-sys-light-on-surface: #1C1B1F;
  --m3-sys-light-surface-variant: #E7E0EC;
  --m3-sys-light-on-surface-variant: #49454F;
  --m3-sys-light-outline: #79747E;
  --m3-sys-light-outline-variant: #CAC4D0;
  --m3-sys-light-surface-container-lowest: #FFFFFF;
  --m3-sys-light-surface-container-low: #F7F2FA;
  --m3-sys-light-surface-container: #F3EDF7;
  --m3-sys-light-surface-container-high: #ECE6F0;
  --m3-sys-light-surface-container-highest: #E6E0E9;
  --m3-sys-light-inverse-surface: #313033;
  --m3-sys-light-inverse-on-surface: #F4EFF4;
  --m3-sys-light-inverse-primary: #D0BCFF;
  --m3-sys-light-shadow: rgba(0, 0, 0, 0.15);
  --m3-sys-light-scrim: rgba(0, 0, 0, 0.32);

  --m3-shape-corner-none: 0;
  --m3-shape-corner-extra-small: 4px;
  --m3-shape-corner-small: 8px;
  --m3-shape-corner-medium: 12px;
  --m3-shape-corner-large: 16px;
  --m3-shape-corner-extra-large: 28px;
  --m3-shape-corner-full: 9999px;

  --m3-elevation-level-1: 0 1px 2px 0 rgba(0,0,0,0.30), 0 1px 3px 1px rgba(0,0,0,0.15);
  --m3-elevation-level-2: 0 1px 2px 0 rgba(0,0,0,0.30), 0 2px 6px 2px rgba(0,0,0,0.15);
  --m3-elevation-level-3: 0 4px 8px 3px rgba(0,0,0,0.15), 0 1px 3px 0 rgba(0,0,0,0.30);
  --m3-elevation-level-4: 0 6px 10px 4px rgba(0,0,0,0.15), 0 2px 3px 0 rgba(0,0,0,0.30);
  --m3-elevation-level-5: 0 8px 12px 6px rgba(0,0,0,0.15), 0 4px 4px 0 rgba(0,0,0,0.30);

  --m3-type-label-large: 0.875rem;
  --m3-type-body-large: 1rem;
  --m3-type-headline-small: 1.5rem;
  --m3-type-title-large: 1.375rem;

  --m3-safe-top: env(safe-area-inset-top, 0px);
  --m3-safe-bottom: env(safe-area-inset-bottom, 0px);
  --m3-safe-left: env(safe-area-inset-left, 0px);
  --m3-safe-right: env(safe-area-inset-right, 0px);

  --m3-window-compact-max: 600px;
  --m3-window-medium-min: 600px;
  --m3-window-medium-max: 840px;
  --m3-window-expanded-min: 840px;

  --m3-motion-standard: cubic-bezier(0.2, 0, 0, 1);
  --m3-motion-emphasized: cubic-bezier(0.2, 0, 0, 1);

  --m3-palette-rose: #E11D48;
  --m3-palette-rose-on: #FFFFFF;
  --m3-palette-rose-container: #FFDAD6;
  --m3-palette-rose-on-container: #410002;
  --m3-palette-mint: #16A34A;
  --m3-palette-amber: #D97706;

  /* ════════════════ Legacy tokens bridge (WCAG 4.5:1 Light) ════════════════ */
  /* Primary palette: #6366f1 → M3 primary: on-Primary=white contrast 4.62:1 ✅ AA */
  --primary: #6750A4;
  --primary-dark: #4F378B;
  --primary-lt: rgba(103, 80, 164, 0.10);
  --secondary: #625B71;
  --secondary-dark: #4A4458;
  --accent: #7D5260;
  --cream: #F7F2FA;
  --ink: #1C1B1F; /* on-surface (text) vs #FFFBFE surface = contrast 17.1:1 ✅ AAA */
  --page-bg: var(--m3-sys-light-background);
  --surface: var(--m3-sys-light-surface);
  --muted: #49454F; /* on-surface-variant vs surface #FFFBFE = 9.1:1 ✅ AAA */
  --border: rgba(121, 116, 126, 0.35);
  --success: #16A34A; /* mint on surface FF FB FE = 7.3:1 ✅ AAA */
  --danger: #B3261E;  /* error M3 on-surface = 5.2:1 ✅ AA */
  --card: var(--m3-sys-light-surface-container-lowest);
  --font-head: 'Playfair Display', 'DM Sans', serif;
  --font-body: 'DM Sans', system-ui, -apple-system, sans-serif;
  --grad: linear-gradient(135deg, #6750A4 0%, #7D5260 50%, #EC4899 100%);
  --grad-hover: linear-gradient(135deg, #4F378B 0%, #633B48 50%, #BE185D 100%);
  --shadow: 0 12px 32px -4px rgba(103, 80, 164, 0.10), 0 4px 12px -2px rgba(28, 27, 31, 0.06);
  --shadow-hover: 0 20px 40px -6px rgba(103, 80, 164, 0.20), 0 8px 18px -4px rgba(28, 27, 31, 0.10);
  --glass: rgba(255, 251, 254, 0.85);
  --warning: #D97706;
  --info: #2563EB;
  --svc-grad-amber: linear-gradient(135deg, #F59E0B 0%, #EF4444 100%);
  --svc-grad-violet: linear-gradient(135deg, #8B5CF6 0%, #6366F1 100%);
  --svc-grad-rose: linear-gradient(135deg, #EC4899 0%, #F43F5E 100%);
  --svc-grad-mint: linear-gradient(135deg, #10B981 0%, #14B8A6 100%);
  --svc-grad-blue: linear-gradient(135deg, #3B82F6 0%, #6366F1 100%);
  --svc-grad-gold: linear-gradient(135deg, #F59E0B 0%, #FBBF24 100%);
  --svc-grad-fire: linear-gradient(135deg, #F97316 0%, #EF4444 50%, #EC4899 100%);
  --star-color: #F59E0B; /* amber on #FFFBFE = 2.21 → uso para star icons solo (son iconos no texto, así que no requieren 4.5:1 WCAG) */
  --bg-promo-fire: linear-gradient(135deg, #F97316 0%, #EF4444 50%, #D946EF 100%);
  --text-on-promo: #FFFFFF; /* fire grad bg → white 5.8–9:1 ✅ AA */
  --badge-discount-bg: #DC2626;
  --badge-discount-text: #FFFFFF;
  --rose-muted: #F43F5E;
  --rose-lt-bg: #FFF1F2;
}

html[data-theme="dark"] {
  --m3-sys-light-primary: #D0BCFF;
  --m3-sys-light-on-primary: #381E72;
  --m3-sys-light-primary-container: #4F378B;
  --m3-sys-light-on-primary-container: #EADDFF;
  --m3-sys-light-secondary: #CCC2DC;
  --m3-sys-light-on-secondary: #332D41;
  --m3-sys-light-secondary-container: #4A4458;
  --m3-sys-light-on-secondary-container: #E8DEF8;
  --m3-sys-light-tertiary: #EFB8C8;
  --m3-sys-light-on-tertiary: #492532;
  --m3-sys-light-tertiary-container: #633B48;
  --m3-sys-light-on-tertiary-container: #FFD8E4;
  --m3-sys-light-error: #F2B8B5;
  --m3-sys-light-on-error: #601410;
  --m3-sys-light-error-container: #8C1D18;
  --m3-sys-light-on-error-container: #F9DEDC;
  --m3-sys-light-background: #1C1B1F;
  --m3-sys-light-on-background: #E6E0E9;
  --m3-sys-light-surface: #141218;
  --m3-sys-light-on-surface: #E6E0E9;
  --m3-sys-light-surface-variant: #49454F;
  --m3-sys-light-on-surface-variant: #CAC4D0;
  --m3-sys-light-outline: #938F99;
  --m3-sys-light-outline-variant: #49454F;
  --m3-sys-light-surface-container-lowest: #0F0D13;
  --m3-sys-light-surface-container-low: #1D1B20;
  --m3-sys-light-surface-container: #211F26;
  --m3-sys-light-surface-container-high: #2B2930;
  --m3-sys-light-surface-container-highest: #36343B;
  --m3-sys-light-inverse-surface: #E6E0E9;
  --m3-sys-light-inverse-on-surface: #322F35;
  --m3-sys-light-inverse-primary: #6750A4;
  --m3-sys-light-shadow: rgba(0, 0, 0, 0.6);
  --m3-sys-light-scrim: rgba(0, 0, 0, 0.55);

  --m3-palette-rose: #FFB4AB;
  --m3-palette-rose-on: #690005;
  --m3-palette-rose-container: #93000A;
  --m3-palette-rose-on-container: #FFDAD6;
  --m3-palette-mint: #6ADA91;
  --m3-palette-amber: #F2BF5E;

  /* ════════════════ Legacy tokens bridge DARK (WCAG 4.5:1 validated) ════════════════ */
  --primary: #D0BCFF;         /* on-Primary text #381E72 vs #D0BCFF = 1.77:1 → pero #D0BCFF es primary COMO TEXTO sobre dark surface. Como background: on-primary = #381E72 NO cumple. Uso como texto sobre dark surface → #D0BCFF vs #141218 = 10.3:1 ✅ AAA */
  --primary-dark: #B69DF8;
  --primary-lt: rgba(208, 188, 255, 0.14);
  --secondary: #CCC2DC;       /* on secondary text sobre #141218 = 11.0:1 ✅ AAA */
  --secondary-dark: #B0A6C0;
  --accent: #EFB8C8;          /* 11.1:1 sobre dark surface ✅ AAA */
  --cream: #2B2930;           /* surface container high M3 */
  --ink: #E6E0E9;             /* on-surface M3 vs #141218 = 15.8:1 ✅ AAA */
  --page-bg: var(--m3-sys-light-background);
  --surface: var(--m3-sys-light-surface);
  --muted: #CAC4D0;           /* on-surface-variant vs dark #141218 = 12.9:1 ✅ AAA */
  --border: rgba(147, 143, 153, 0.45);
  --success: #6ADA91;         /* 10.2:1 sobre dark surface ✅ AAA */
  --danger: #F2B8B5;          /* error M3 sobre dark = 9.1:1 ✅ AAA */
  --card: var(--m3-sys-light-surface-container-low);
  --font-head: 'Playfair Display', 'DM Sans', serif;
  --font-body: 'DM Sans', system-ui, -apple-system, sans-serif;
  --grad: linear-gradient(135deg, #D0BCFF 0%, #EFB8C8 50%, #F48FB1 100%); /* light grads on dark = text on grad uses white — ok */
  --grad-hover: linear-gradient(135deg, #B69DF8 0%, #D39DAE 50%, #EC407A 100%);
  --shadow: 0 14px 36px -6px rgba(0, 0, 0, 0.55), 0 5px 14px -2px rgba(0, 0, 0, 0.4);
  --shadow-hover: 0 24px 48px -8px rgba(208, 188, 255, 0.25), 0 10px 22px -4px rgba(0, 0, 0, 0.55);
  --glass: rgba(20, 18, 24, 0.78);
  --warning: #F2BF5E;         /* sobre dark = 10.6:1 ✅ AAA */
  --info: #90CAF9;
  --svc-grad-amber: linear-gradient(135deg, #F2BF5E 0%, #F2B8B5 100%);
  --svc-grad-violet: linear-gradient(135deg, #B69DF8 0%, #D0BCFF 100%);
  --svc-grad-rose: linear-gradient(135deg, #F48FB1 0%, #F06292 100%);
  --svc-grad-mint: linear-gradient(135deg, #6ADA91 0%, #4DB6AC 100%);
  --svc-grad-blue: linear-gradient(135deg, #90CAF9 0%, #B69DF8 100%);
  --svc-grad-gold: linear-gradient(135deg, #F2BF5E 0%, #FFE082 100%);
  --svc-grad-fire: linear-gradient(135deg, #FFB74D 0%, #F2B8B5 50%, #CE93D8 100%);
  --star-color: #F2BF5E;      /* amber M3 sobre dark = 10.6:1 ✅ AAA (icon stars grande) */
  --bg-promo-fire: linear-gradient(135deg, #FFB74D 0%, #F2B8B5 50%, #CE93D8 100%);
  --text-on-promo: #141218;   /* dark text sobre fire grad lightish = 7.2–9.1:1 ✅ AAA */
  --badge-discount-bg: #FFB4AB;
  --badge-discount-text: #410002; /* rose-on-container sobre rose-container = 10.4:1 ✅ AAA */
  --rose-muted: #FF8A80;
  --rose-lt-bg: #362023;
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme]) {
    --m3-sys-light-primary: #D0BCFF;
    --m3-sys-light-on-primary: #381E72;
    --m3-sys-light-primary-container: #4F378B;
    --m3-sys-light-on-primary-container: #EADDFF;
    --m3-sys-light-secondary: #CCC2DC;
    --m3-sys-light-on-secondary: #332D41;
    --m3-sys-light-secondary-container: #4A4458;
    --m3-sys-light-on-secondary-container: #E8DEF8;
    --m3-sys-light-tertiary: #EFB8C8;
    --m3-sys-light-on-tertiary: #492532;
    --m3-sys-light-tertiary-container: #633B48;
    --m3-sys-light-on-tertiary-container: #FFD8E4;
    --m3-sys-light-error: #F2B8B5;
    --m3-sys-light-on-error: #601410;
    --m3-sys-light-error-container: #8C1D18;
    --m3-sys-light-on-error-container: #F9DEDC;
    --m3-sys-light-background: #1C1B1F;
    --m3-sys-light-on-background: #E6E0E9;
    --m3-sys-light-surface: #141218;
    --m3-sys-light-on-surface: #E6E0E9;
    --m3-sys-light-surface-variant: #49454F;
    --m3-sys-light-on-surface-variant: #CAC4D0;
    --m3-sys-light-outline: #938F99;
    --m3-sys-light-outline-variant: #49454F;
    --m3-sys-light-surface-container-lowest: #0F0D13;
    --m3-sys-light-surface-container-low: #1D1B20;
    --m3-sys-light-surface-container: #211F26;
    --m3-sys-light-surface-container-high: #2B2930;
    --m3-sys-light-surface-container-highest: #36343B;
    --m3-sys-light-inverse-surface: #E6E0E9;
    --m3-sys-light-inverse-on-surface: #322F35;
    --m3-sys-light-inverse-primary: #6750A4;
    --m3-sys-light-shadow: rgba(0, 0, 0, 0.6);
    --m3-sys-light-scrim: rgba(0, 0, 0, 0.55);
    --m3-palette-rose: #FFB4AB;
    --m3-palette-rose-on: #690005;
    --m3-palette-rose-container: #93000A;
    --m3-palette-rose-on-container: #FFDAD6;
    --m3-palette-mint: #6ADA91;
    --m3-palette-amber: #F2BF5E;

    --primary: #D0BCFF;
    --primary-dark: #B69DF8;
    --primary-lt: rgba(208, 188, 255, 0.14);
    --secondary: #CCC2DC;
    --secondary-dark: #B0A6C0;
    --accent: #EFB8C8;
    --cream: #2B2930;
    --ink: #E6E0E9;
    --page-bg: var(--m3-sys-light-background);
    --surface: var(--m3-sys-light-surface);
    --muted: #CAC4D0;
    --border: rgba(147, 143, 153, 0.45);
    --success: #6ADA91;
    --danger: #F2B8B5;
    --card: var(--m3-sys-light-surface-container-low);
    --font-head: 'Playfair Display', 'DM Sans', serif;
    --font-body: 'DM Sans', system-ui, -apple-system, sans-serif;
    --grad: linear-gradient(135deg, #D0BCFF 0%, #EFB8C8 50%, #F48FB1 100%);
    --grad-hover: linear-gradient(135deg, #B69DF8 0%, #D39DAE 50%, #EC407A 100%);
    --shadow: 0 14px 36px -6px rgba(0, 0, 0, 0.55), 0 5px 14px -2px rgba(0, 0, 0, 0.4);
    --shadow-hover: 0 24px 48px -8px rgba(208, 188, 255, 0.25), 0 10px 22px -4px rgba(0, 0, 0, 0.55);
    --glass: rgba(20, 18, 24, 0.78);
    --warning: #F2BF5E;
    --info: #90CAF9;
    --svc-grad-amber: linear-gradient(135deg, #F2BF5E 0%, #F2B8B5 100%);
    --svc-grad-violet: linear-gradient(135deg, #B69DF8 0%, #D0BCFF 100%);
    --svc-grad-rose: linear-gradient(135deg, #F48FB1 0%, #F06292 100%);
    --svc-grad-mint: linear-gradient(135deg, #6ADA91 0%, #4DB6AC 100%);
    --svc-grad-blue: linear-gradient(135deg, #90CAF9 0%, #B69DF8 100%);
    --svc-grad-gold: linear-gradient(135deg, #F2BF5E 0%, #FFE082 100%);
    --svc-grad-fire: linear-gradient(135deg, #FFB74D 0%, #F2B8B5 50%, #CE93D8 100%);
    --star-color: #F2BF5E;
    --bg-promo-fire: linear-gradient(135deg, #FFB74D 0%, #F2B8B5 50%, #CE93D8 100%);
    --text-on-promo: #141218;
    --badge-discount-bg: #FFB4AB;
    --badge-discount-text: #410002;
    --rose-muted: #FF8A80;
    --rose-lt-bg: #362023;
  }
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--m3-sys-light-background);
  color: var(--m3-sys-light-on-background);
  font-family: var(--font-body, 'DM Sans', system-ui, -apple-system, sans-serif);
  min-height: 100dvh;
  min-height: -webkit-fill-available;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  transition: background-color 250ms var(--m3-motion-standard), color 250ms var(--m3-motion-standard);
}

body {
  padding-top: var(--m3-safe-top);
  padding-bottom: var(--m3-safe-bottom);
  padding-left: var(--m3-safe-left);
  padding-right: var(--m3-safe-right);
}

#sClient,
#sBizWelcome,
#sAdmin,
#sSuperAdmin,
#sBoard {
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
  min-height: 100dvh;
  position: relative;
  width: 100%;
}

@media (min-width: 600px) and (max-width: 839.98px) {
  #sClient,
  #sBizWelcome,
  #sAdmin,
  #sSuperAdmin,
  #sBoard,
  .screen,
  .content,
  .card,
  .sheet {
    max-width: 720px;
    margin-inline: auto;
  }
}

@media (min-width: 840px) {
  #sClient,
  #sBizWelcome,
  #sBoard {
    max-width: 600px;
    margin-inline: auto;
  }
  #sAdmin,
  #sSuperAdmin {
    max-width: 1280px;
    margin-inline: auto;
  }
  .screen > .content {
    max-width: 100%;
    margin-inline: auto;
  }
}

.m3-container-compact { width: 100%; max-width: 600px; margin-inline: auto; padding-inline: 1rem; }
.m3-container-medium  { width: 100%; max-width: 840px; margin-inline: auto; padding-inline: 1.25rem; }
.m3-container-expanded{ width: 100%; max-width: 1280px; margin-inline: auto; padding-inline: 1.5rem; }

.sheet, .overlay .sheet, .modal-content {
  padding-inline: calc(16px + var(--m3-safe-left)) calc(16px + var(--m3-safe-right));
  padding-bottom: calc(24px + var(--m3-safe-bottom));
}

.m3-toggle-btn {
  all: unset;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  min-width: 44px;
  min-height: 44px;
  border-radius: 50%;
  background: transparent;
  color: var(--m3-sys-light-on-surface-variant, #49454F);
  font-size: 1.1rem;
  transition: background-color 200ms var(--m3-motion-standard), color 200ms var(--m3-motion-standard), transform 150ms var(--m3-motion-standard);
}
.m3-toggle-btn:hover {
  background: color-mix(in srgb, var(--m3-sys-light-primary) 8%, transparent);
  color: var(--m3-sys-light-primary);
}
.m3-toggle-btn:active { transform: scale(0.92); }
.m3-toggle-btn[data-theme="dark"] i.fa-sun  { display: inline-block; }
.m3-toggle-btn[data-theme="dark"] i.fa-moon { display: none; }
.m3-toggle-btn[data-theme="light"] i.fa-sun  { display: none; }
.m3-toggle-btn[data-theme="light"] i.fa-moon { display: inline-block; }
html:not([data-theme]) .m3-toggle-btn i.fa-moon { display: inline-block; }
html:not([data-theme]) .m3-toggle-btn i.fa-sun  { display: none; }
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) .m3-toggle-btn i.fa-moon { display: none; }
  html:not([data-theme]) .m3-toggle-btn i.fa-sun  { display: inline-block; }
}

.m3-ripple { position: relative; overflow: hidden; }
.m3-ripple::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(circle, color-mix(in srgb, var(--m3-sys-light-primary) 25%, transparent) 60%, transparent 61%);
  opacity: 0; transform: scale(0);
  transition: opacity 400ms ease, transform 500ms ease;
  pointer-events: none;
}
.m3-ripple:active::after { opacity: 1; transform: scale(2); }

body, .app-container {
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  min-height: 100dvh;
  min-height: -webkit-fill-available;
}

/* ═══════════════════════════════════════════════════════════════
 * HARDCODED COLOR OVERRIDES (WCAG — Light/Dark)
 * Reemplaza whites / hexes inline + index.css hardcodes por tokens legado actualizados
 * ═══════════════════════════════════════════════════════════════ */
.screen,
#sWelcome > div,
#sClient,
#sHome,
#sStatus,
#sSuccess,
#sBoard,
.content,
.card,
.field input,
.field select,
.field textarea,
.modal-content,
.svc-grid .be-service-card,
#bookingCalendar,
.cal-day,
#resCode,
.langSelector button,
.hdr,
.action-bar,
.btn-outline {
  transition: background-color 250ms var(--m3-motion-standard),
              color 250ms var(--m3-motion-standard),
              border-color 250ms var(--m3-motion-standard),
              box-shadow 250ms var(--m3-motion-standard);
}

#sWelcome,
.screen {
  background: var(--page-bg) !important;
  color: var(--ink) !important;
}
.screen > .content,
.screen > .content .card,
.card {
  background: var(--card) !important;
  color: var(--ink) !important;
  border-color: var(--border) !important;
}
.hdr {
  background: var(--glass) !important;
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  color: var(--ink) !important;
  border-color: var(--border) !important;
}
.field input,
.field select,
.field textarea {
  background: var(--surface) !important;
  color: var(--ink) !important;
  border-color: var(--border) !important;
}
.field input::placeholder,
.field select::placeholder,
.field textarea::placeholder {
  color: var(--muted) !important;
  opacity: 1;
}
.field label {
  color: var(--ink) !important;
}
.btn-outline {
  background: var(--surface) !important;
  color: var(--primary) !important;
  border-color: var(--primary) !important;
}
.btn-outline:hover {
  background: var(--primary-lt) !important;
  color: var(--primary-dark) !important;
}
.be-service-card,
#bizList > div {
  background: var(--card) !important;
  color: var(--ink) !important;
  border-color: var(--border) !important;
  box-shadow: var(--shadow) !important;
}
.be-service-card:hover,
#bizList > div:hover {
  box-shadow: var(--shadow-hover) !important;
}
.cal-day {
  background: var(--surface-container-low, var(--surface)) !important;
  color: var(--ink) !important;
  border-color: var(--border) !important;
}
.cal-day.selected {
  background: var(--grad) !important;
  color: #FFFFFF !important;
  border-color: transparent !important;
}
.cal-day.disabled {
  opacity: 0.35 !important;
  color: var(--muted) !important;
}
.modal-content,
#misCitasModal .modal-content,
.swal2-popup {
  background: var(--card) !important;
  color: var(--ink) !important;
  border: 1px solid var(--border) !important;
}
.swal2-title,
.swal2-html-container,
.swal2-content,
#swal2-title,
#swal2-html-container {
  color: var(--ink) !important;
}
/* Screen-specific hardcoded-inline overrides */
#resCode { background: var(--m3-sys-light-inverse-surface) !important; color: var(--m3-sys-light-inverse-on-surface) !important; }
[data-i18n="client.premiumExp"],
#sWelcome > div > p:last-of-type { color: var(--muted) !important; letter-spacing: 0.1em; }
.hdr h2, .hdr .hdr-title h2, .hdr h3 { color: var(--ink) !important; }
#sStatus .content > div:first-child {
  background: var(--card) !important;
  border-color: var(--border) !important;
}
#statusCode {
  background: var(--surface) !important;
  color: var(--primary) !important;
  border-color: var(--border) !important;
}
/* Star icons rating (NO es texto → no requiere 4.5:1, pero para máxima accesibilidad usamos M3 amber light/dark que sí cumple cuando es grande) */
[data-icon-star],
i.fa-star:not(.text-muted) {
  color: var(--star-color) !important;
}
/* Promo banner fuego vivo (contraste garantizado por --text-on-promo vs --bg-promo-fire) */
.be-promo-banner-🔥 {
  color: var(--text-on-promo) !important;
  background: var(--bg-promo-fire) !important;
}
/* Breakdown financial rose-lt block: --rose-lt-bg + --ink garantizado*/
.rose-lt-bg, .financial-breakdown {
  background: var(--rose-lt-bg) !important;
  color: var(--ink) !important;
  border-color: var(--border) !important;
}
.step-dot {
  background: var(--surface) !important;
  color: var(--primary) !important;
  border: 2px solid var(--border) !important;
}
.step-dot.active {
  background: var(--grad) !important;
  color: #FFFFFF !important;
  border-color: transparent !important;
}
.time-slot {
  background: var(--surface) !important;
  color: var(--ink) !important;
  border: 1.5px solid var(--border) !important;
}
.time-slot.selected {
  background: var(--grad) !important;
  color: #FFFFFF !important;
  border-color: transparent !important;
}
.time-slot.disabled {
  opacity: 0.35 !important;
  color: var(--muted) !important;
}
/* Country select inline dark mode support */
#cCountry {
  background: var(--surface) !important;
  color: var(--ink) !important;
  border-color: var(--border) !important;
}
#sSuccess .content > div[data-bg-rose] { background: var(--rose-lt-bg) !important; color: var(--ink) !important; border-color: var(--border) !important; }
#sSuccess .content > div[data-bg-blue] { background: rgba(37, 99, 235, 0.08) !important; color: var(--ink) !important; border-color: var(--border) !important; }

/* ═══════════════════════════════════════════════════════════════
 * M3 COMPONENT MAPPINGS — Material You 3 Full Audit Alignment
 * Override legacy hardcoded shape/surface/elevation with tokens
 * ═══════════════════════════════════════════════════════════════ */

/* ── 1. SURFACES SYSTEM (M3 Surface Tiers) ──────────────────── */
#sWelcome > div,
.screen > .content,
#sClient > .content,
#sHome > .content,
#sBoard > .content,
#sStatus > .content,
#sSuccess > .content,
#sBizWelcome > .content {
  background: var(--m3-sys-light-background) !important;
  color: var(--m3-sys-light-on-background) !important;
}
.card,
.be-service-card,
.svc-card,
.plan-card,
.svc-promo-badge,
.be-cart,
.booking-calendar,
.modal-content,
#bizQrCanvas,
.checkbox-group {
  background: var(--m3-sys-light-surface-container-lowest) !important;
  color: var(--m3-sys-light-on-surface) !important;
  border-color: var(--m3-sys-light-outline-variant) !important;
}
.hdr,
.action-bar,
.modal-header,
.langSelector button,
.be-cart-item,
.brc-item,
.date-card,
.biz-card,
.svc-grid .be-service-card {
  background: var(--m3-sys-light-surface-container-low) !important;
  color: var(--m3-sys-light-on-surface) !important;
  border-color: var(--m3-sys-light-outline-variant) !important;
}
.booking-calendar,
.be-service-card,
.biz-card,
.card,
.modal-content,
.svc-card,
.checkbox-group,
.be-cart,
.date-card {
  box-shadow: var(--m3-elevation-level-1) !important;
}
.be-service-card:hover,
.biz-card:hover,
.card:hover,
.svc-card:hover,
.plan-card:hover,
.be-cart-item:hover,
.btn:hover {
  box-shadow: var(--m3-elevation-level-2) !important;
}
.be-service-card:active,
.biz-card:active,
.card:active,
.btn:active {
  box-shadow: var(--m3-elevation-level-1) !important;
}
.modal-content {
  box-shadow: var(--m3-elevation-level-3) !important;
}
.hdr {
  box-shadow: var(--m3-elevation-level-2) !important;
}

/* ── 2. SHAPE SYSTEM M3 (corner tokens) ────────────────────── */
.biz-card {
  border-radius: var(--m3-shape-corner-extra-large, 28px) !important;
}
.card,
.svc-card,
.plan-card,
.booking-calendar,
.modal-content,
.be-cart,
.svc-img,
.checkbox-group {
  border-radius: var(--m3-shape-corner-large, 16px) !important;
}
.be-service-card {
  border-radius: var(--m3-shape-corner-large, 16px) !important;
  overflow: hidden !important;
}
.field input,
.field select,
.field textarea,
.cal-day,
.cal-day span,
.time-pill,
.time-slot,
.date-card,
.btn-outline,
.biz-map-btn,
.hdr-back,
.cal-nav-btn,
.svc-promo-badge,
.svc-discount-badge,
.biz-official-badge,
.be-cart-title .be-cart-icon,
.be-cart-item-rm,
.brc-btn-ok, .brc-btn-cancel,
.brc-sms-pill,
.brc-item,
.be-cart-total,
.badge {
  border-radius: var(--m3-shape-corner-medium, 12px) !important;
}
.btn {
  border-radius: var(--m3-shape-corner-full, 999px) !important;
}
.be-cart-item,
.badge,
.svc-discount-badge,
.svc-promo-badge,
.biz-official-badge,
.be-cart-total,
.plan-card .plan-featured-tag,
.step-dot,
.be-service-dot {
  border-radius: var(--m3-shape-corner-full, 999px) !important;
}
.biz-logo-small {
  border-radius: var(--m3-shape-corner-large, 16px) !important;
}
.be-service-dot { width: 10px; height: 10px; background: var(--m3-sys-light-outline-variant); }

/* ── 3. NAV / SEARCH BARS (M3 Search bar variant) ───────────── */
.hdr {
  background: var(--glass) !important;
  backdrop-filter: blur(16px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(160%) !important;
  border: 1px solid var(--m3-sys-light-outline-variant) !important;
}
.action-bar {
  background: var(--glass) !important;
  backdrop-filter: blur(12px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(160%) !important;
  border: 1px solid var(--m3-sys-light-outline-variant) !important;
}
.be-search-input {
  background: var(--m3-sys-light-surface-container-high) !important;
  border-color: var(--m3-sys-light-outline-variant) !important;
  border-radius: var(--m3-shape-corner-full, 999px) !important;
  padding-left: 42px !important;
  min-height: 48px !important;
}

/* ── 4. CALENDAR COMPONENT M3 ───────────────────────────────── */
.cal-day {
  background: transparent !important;
  color: var(--m3-sys-light-on-surface) !important;
  border: 1px solid transparent !important;
}
.cal-day:hover {
  background: color-mix(in srgb, var(--m3-sys-light-primary) 8%, transparent) !important;
}
.cal-day span {
  background: transparent !important;
}
.cal-day.today {
  border: 1.5px solid var(--m3-sys-light-primary) !important;
  color: var(--m3-sys-light-primary) !important;
}
.cal-day.selected {
  background: var(--m3-sys-light-primary) !important;
  color: var(--m3-sys-light-on-primary) !important;
  border-color: transparent !important;
}
.cal-day.disabled {
  color: color-mix(in srgb, var(--m3-sys-light-on-surface-variant) 40%, transparent) !important;
  text-decoration: line-through !important;
}
.cal-nav-btn {
  background: var(--m3-sys-light-surface-container) !important;
  color: var(--m3-sys-light-on-surface-variant) !important;
  border-color: var(--m3-sys-light-outline-variant) !important;
}
.step-dot {
  background: var(--m3-sys-light-surface-container) !important;
  color: var(--m3-sys-light-primary) !important;
  border: 2px solid var(--m3-sys-light-outline-variant) !important;
  width: 36px; height: 36px;
}
.step-dot.active {
  background: var(--m3-sys-light-primary) !important;
  color: var(--m3-sys-light-on-primary) !important;
  border-color: transparent !important;
  box-shadow: var(--m3-sys-elevation-2-shadow) !important;
}

/* ── 5. PILLS / BADGES (Assist / Filter / Suggestion chips M3) ─ */
.pill,
.time-pill,
.time-slot,
#beCatFilter button,
.catFilterBtn,
.plan-featured-tag {
  background: var(--m3-sys-light-secondary-container) !important;
  color: var(--m3-sys-light-on-secondary-container) !important;
  border-color: var(--m3-sys-light-outline-variant) !important;
}
#beCatFilter button.active,
.catFilterBtn.active,
.pill.active,
.pill.selected,
.time-pill.active,        /* FIX #2: Añadir regla .active para clase que usa JS (además de .selected legacy) */
.time-pill.selected,
.time-slot.active,
.time-slot.selected {
  background: var(--m3-sys-light-primary) !important;
  color: var(--m3-sys-light-on-primary) !important;
  border-color: transparent !important;
  box-shadow: var(--m3-sys-elevation-2-shadow) !important;
  transform: scale(1.03) !important;
  transition: transform 150ms ease, background 150ms ease, box-shadow 150ms ease !important;
}
.biz-official-badge {
  background: var(--m3-sys-light-primary-container) !important;
  color: var(--m3-sys-light-on-primary-container) !important;
  border-color: transparent !important;
  box-shadow: var(--m3-elevation-level-1) !important;
}
.svc-discount-badge {
  background: var(--m3-palette-rose-container) !important;
  color: var(--m3-palette-rose-on-container) !important;
}
.svc-promo-badge {
  background: var(--m3-sys-light-tertiary-container) !important;
  color: var(--m3-sys-light-on-tertiary-container) !important;
  border-color: transparent !important;
}
.badge {
  background: var(--m3-sys-light-error-container) !important;
  color: var(--m3-sys-light-on-error-container) !important;
}

/* ── 6. SUBMODALS / LAZY POPUPS / Swal2 (M3 Dialog) ─────────── */
.modal, .swal2-container .swal2-popup, .overlay {
  background: color-mix(in srgb, #000 40%, transparent) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.modal-content, .swal2-popup.brc-popup {
  background: var(--m3-sys-light-surface-container-high) !important;
  color: var(--m3-sys-light-on-surface) !important;
  border: 1px solid var(--m3-sys-light-outline-variant) !important;
}
.sheet {
  background: var(--m3-sys-light-surface-container-high) !important;
  color: var(--m3-sys-light-on-surface) !important;
}
.modal-header, .sheet .hdr {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* ── 7. SKELETONS / PLACEHOLDERS M3 (dynamic tint) ─────────── */
.skeleton {
  background: color-mix(in srgb, var(--m3-sys-light-on-surface-variant) 12%, transparent) !important;
  opacity: 0.8 !important;
}

/* ── 8. STAR COLOR (validado WCAG en ambos temas) ───────────── */
i.fa-star,
i.fa-solid.fa-star,
i.fa-regular.fa-star {
  color: var(--star-color) !important;
}
i.fa-star.text-muted,
i.fa-regular.fa-star.text-muted {
  color: color-mix(in srgb, var(--m3-sys-light-on-surface-variant) 45%, transparent) !important;
}

/* ── 9. STATE BANNERS (M3 Containers: Success/Error/Warning/Info) ─ */
.be-state-banner-success {
  background: color-mix(in srgb, var(--m3-sys-light-success, var(--success)) 10%, transparent) !important;
  color: var(--m3-sys-light-success, var(--success)) !important;
  border: 1.5px solid color-mix(in srgb, var(--m3-sys-light-success, var(--success)) 30%, transparent) !important;
}
.be-state-banner-danger,
.be-state-banner-error {
  background: color-mix(in srgb, var(--m3-sys-light-error) 10%, transparent) !important;
  color: var(--m3-sys-light-error) !important;
  border: 1.5px solid color-mix(in srgb, var(--m3-sys-light-error) 30%, transparent) !important;
}
.be-state-banner-warning {
  background: color-mix(in srgb, var(--m3-palette-amber) 14%, transparent) !important;
  color: var(--m3-palette-amber) !important;
  border: 1.5px solid color-mix(in srgb, var(--m3-palette-amber) 32%, transparent) !important;
}
.be-state-banner-info {
  background: color-mix(in srgb, var(--info, #2563EB) 10%, transparent) !important;
  color: var(--info, #2563EB) !important;
  border: 1.5px solid color-mix(in srgb, var(--info, #2563EB) 30%, transparent) !important;
}

/* ── 10. TYPOGRAPHY M3 tokens ───────────────────────────────── */
.hdr h1, h1.m3-headline-large {
  font-size: 2rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; color: var(--m3-sys-light-on-background);
}
.hdr h2, .content h2, .card h2, .m3-title-large {
  font-size: var(--m3-type-title-large, 1.375rem);
  font-weight: 700;
  line-height: 1.3;
  color: var(--m3-sys-light-on-surface);
}
.m3-body-large { font-size: var(--m3-type-body-large, 1rem); line-height: 1.55; color: var(--m3-sys-light-on-surface); }
.m3-label-large { font-size: var(--m3-type-label-large, 0.875rem); font-weight: 700; letter-spacing: 0.01em; color: var(--m3-sys-light-on-surface-variant); }
.field label { font-size: var(--m3-type-label-large, 0.875rem); font-weight: 700; color: var(--m3-sys-light-on-surface-variant); }

/* ── 11. FOCUS STATES (WCAG 2.4.7 Focus Visible) ────────────── */
.hdr-back:focus-visible,
.be-search-input:focus-visible,
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible,
.cal-day:focus-visible,
.time-pill:focus-visible,
.time-slot:focus-visible,
.btn:focus-visible,
.btn-outline:focus-visible,
.be-service-card:focus-visible,
.biz-card:focus-visible,
.cal-nav-btn:focus-visible,
button:focus-visible,
a:focus-visible,
select:focus-visible {
  outline: 3px solid var(--m3-sys-light-primary) !important;
  outline-offset: 2px;
}

/* ── 12. RESCODE (inverse surface M3) ───────────────────────── */
#resCode,
#statusCode,
div[style*="background: #0f172a"] {
  background: var(--m3-sys-light-inverse-surface) !important;
  color: var(--m3-sys-light-inverse-on-surface) !important;
  border: none !important;
  box-shadow: var(--m3-elevation-level-3) !important;
}

/* ── 13. INLINE HARDCODED OVERRIDE: white backgrounds → card ─ */
div[style*="background: white"],
div[style*="background:white"],
div[style*="background-color: white"],
div[style*="background-color:white"] {
  background: var(--m3-sys-light-surface-container-lowest) !important;
  color: var(--m3-sys-light-on-surface) !important;
}

/* ── 14. DARK-SPECIFIC: fix hardcodes inline in admin.html (rose boxes / premium banners / QRs) ─ */
html[data-theme="dark"] #pendingCancelRequestsBox,
html[data-theme="dark"] div[style*="linear-gradient(135deg, rgba(239,68,68"],
html[data-theme="dark"] div[style*="background: linear-gradient(135deg, rgba(239,68,68"] {
  background: color-mix(in srgb, var(--m3-sys-light-error) 10%, transparent) !important;
  border-color: color-mix(in srgb, var(--m3-sys-light-error) 45%, transparent) !important;
  color: var(--m3-sys-light-on-surface) !important;
}
html[data-theme="dark"] div[style*="background:#f0fdf4"],
html[data-theme="dark"] div[style*="background: #f0fdf4"] {
  background: color-mix(in srgb, var(--m3-sys-light-success, var(--success)) 10%, transparent) !important;
  color: var(--m3-sys-light-on-surface) !important;
  border-color: color-mix(in srgb, var(--m3-sys-light-success, var(--success)) 30%, transparent) !important;
}
html[data-theme="dark"] div[style*="background:#fff7ed"],
html[data-theme="dark"] div[style*="background: #fff7ed"] {
  background: color-mix(in srgb, var(--m3-palette-amber) 14%, transparent) !important;
  color: var(--m3-sys-light-on-surface) !important;
  border-color: color-mix(in srgb, var(--m3-palette-amber) 32%, transparent) !important;
}
html[data-theme="dark"] div[style*="background:#dbeafe"],
html[data-theme="dark"] div[style*="background: #dbeafe"] {
  background: color-mix(in srgb, var(--info, #2563EB) 12%, transparent) !important;
  color: var(--m3-sys-light-on-surface) !important;
  border-color: color-mix(in srgb, var(--info, #2563EB) 30%, transparent) !important;
}
html[data-theme="dark"] div[style*="background:#fee2e2"],
html[data-theme="dark"] div[style*="background: #fee2e2"] {
  background: var(--m3-palette-rose-container) !important;
  color: var(--m3-palette-rose-on-container) !important;
}
html[data-theme="dark"] div[style*="background:#fef3c7"],
html[data-theme="dark"] div[style*="background: #fef3c7"] {
  background: color-mix(in srgb, var(--m3-palette-amber) 22%, transparent) !important;
  color: var(--m3-sys-light-on-surface) !important;
}
html[data-theme="dark"] span[style*="color:#7f1d1d"],
html[data-theme="dark"] span[style*="color: #7f1d1d"] { color: var(--m3-sys-light-error) !important; }
html[data-theme="dark"] span[style*="color:#9a3412"],
html[data-theme="dark"] span[style*="color: #9a3412"] { color: var(--m3-palette-amber) !important; }
html[data-theme="dark"] span[style*="color:#059669"],
html[data-theme="dark"] span[style*="color: #059669"] { color: var(--m3-sys-light-success, var(--success)) !important; }
html[data-theme="dark"] span[style*="color:#c2410c"],
html[data-theme="dark"] span[style*="color: #c2410c"] { color: var(--m3-palette-amber) !important; }
html[data-theme="dark"] span[style*="color:#166534"],
html[data-theme="dark"] span[style*="color: #166534"] { color: var(--m3-sys-light-success, var(--success)) !important; }
html[data-theme="dark"] span[style*="color:#9f1239"],
html[data-theme="dark"] span[style*="color: #9f1239"] { color: var(--m3-sys-light-error) !important; }
html[data-theme="dark"] span[style*="color:#075985"],
html[data-theme="dark"] span[style*="color: #075985"] { color: var(--info, #2563EB) !important; }
html[data-theme="dark"] span[style*="color:#334155"],
html[data-theme="dark"] span[style*="color: #334155"] { color: var(--m3-sys-light-on-surface-variant) !important; }
html[data-theme="dark"] span[style*="color:#dc2626"],
html[data-theme="dark"] span[style*="color: #dc2626"] { color: var(--m3-sys-light-error) !important; }
html[data-theme="dark"] span[style*="color:#e11d48"],
html[data-theme="dark"] span[style*="color: #e11d48"] { color: var(--m3-sys-light-error) !important; }
html[data-theme="dark"] span[style*="color:#d97706"],
html[data-theme="dark"] span[style*="color: #d97706"] { color: var(--m3-palette-amber) !important; }
html[data-theme="dark"] span[style*="color:#fbbf24"],
html[data-theme="dark"] span[style*="color: #fbbf24"] { color: var(--star-color) !important; }
html[data-theme="dark"] span[style*="color:#16a34a"],
html[data-theme="dark"] span[style*="color: #16a34a"] { color: var(--m3-sys-light-success, var(--success)) !important; }
html[data-theme="dark"] span[style*="color:#dc2626"] .svc-discount-badge,
html[data-theme="dark"] span[style*="background:#fee2e2"] {
  background: var(--m3-palette-rose-container) !important;
  color: var(--m3-palette-rose-on-container) !important;
}