/* Al modificar este archivo, actualizar ?v= en las páginas (script scripts/bump-asset-version.sh). */
/* ═══════════════════════════════════════════════════════════════
   CITERI — Liquid Glass system skin
   Shared tokens and components for public web and business app.
   Class names and variable names are intentionally preserved.
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter+Tight:wght@400;500;600;700&display=swap');

/* ═══════════════════════════════════════════════════════════════
   LIGHT SCHEME — neutral base, restrained Citeri green accent
   ═══════════════════════════════════════════════════════════════ */
:root {
  color-scheme: light;

  --md-sys-color-primary:                  #5D9571;
  --md-sys-color-on-primary:               #FFFFFF;
  --md-sys-color-primary-container:        rgba(93,149,113,.14);
  --md-sys-color-on-primary-container:     #095C34;

  --md-sys-color-secondary:                #86868B;
  --md-sys-color-on-secondary:             #FFFFFF;
  --md-sys-color-secondary-container:      rgba(120,120,128,.12);
  --md-sys-color-on-secondary-container:   #1D1D1F;

  --md-sys-color-tertiary:                 #4E9EFA;
  --md-sys-color-on-tertiary:              #FFFFFF;
  --md-sys-color-tertiary-container:       rgba(78,158,250,.12);
  --md-sys-color-on-tertiary-container:    #095C34;

  --md-sys-color-error:                    #FF3B30;
  --md-sys-color-on-error:                 #FFFFFF;
  --md-sys-color-error-container:          rgba(255,59,48,.12);
  --md-sys-color-on-error-container:       #B42318;

  --md-sys-color-background:               #F2F2F7;
  --md-sys-color-on-background:            #1D1D1F;
  --md-sys-color-surface:                  #FFFFFF;
  --md-sys-color-on-surface:               #1D1D1F;
  --md-sys-color-surface-variant:          rgba(120,120,128,.12);
  --md-sys-color-on-surface-variant:       #6E6E73;

  --md-sys-color-outline:                  #86868B;
  --md-sys-color-outline-variant:          rgba(60,60,67,.29);
  --md-sys-color-shadow:                   #000000;
  --md-sys-color-scrim:                    #000000;

  --md-sys-color-inverse-surface:          #1C1C21;
  --md-sys-color-inverse-on-surface:       #F7F7F9;
  --md-sys-color-inverse-primary:          #5AC97A;

  --md-sys-color-surface-dim:              #F2F2F7;
  --md-sys-color-surface-bright:           #FFFFFF;
  --md-sys-color-surface-container-lowest: #FFFFFF;
  --md-sys-color-surface-container-low:    #FFFFFF;
  --md-sys-color-surface-container:        rgba(120,120,128,.12);
  --md-sys-color-surface-container-high:   rgba(120,120,128,.16);
  --md-sys-color-surface-container-highest:rgba(120,120,128,.20);

  /* ── Typeface ── */
  --md-ref-typeface-brand: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', system-ui, sans-serif;
  --md-ref-typeface-plain: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', system-ui, sans-serif;

  /* Shapes */
  --md-shape-none:               0px;
  --md-shape-extra-small:        10px;
  --md-shape-extra-small-top:    10px 10px 0 0;
  --md-shape-small:              14px;
  --md-shape-medium:             18px;
  --md-shape-large:              22px;
  --md-shape-large-end:          0 22px 22px 0;
  --md-shape-large-top:          22px 22px 0 0;
  --md-shape-extra-large:        28px;
  --md-shape-extra-large-top:    28px 28px 0 0;
  --md-shape-extra-extra-large:  34px;
  --md-shape-full:               9999px;
  /* Extended shapes */
  --md-shape-squircle-sm:        18px;
  --md-shape-squircle-md:        24px;
  --md-shape-squircle-lg:        28px;
  --md-shape-hero:               32px;
  --md-shape-pill:               9999px;

  /* ══ ELEVATION ══ */
  --md-elevation-0: none;
  --md-elevation-1: 0 8px 30px rgba(0,0,0,.08);
  --md-elevation-2: 0 18px 54px rgba(0,0,0,.10);
  --md-elevation-3: 0 28px 76px rgba(0,0,0,.12);
  --md-elevation-4: 0 36px 96px rgba(0,0,0,.14);
  --md-elevation-5: 0 46px 120px rgba(0,0,0,.16);

  /* Motion */
  --md-motion-spring-standard: cubic-bezier(.22, .61, .36, 1);
  --md-motion-spring-enter:    cubic-bezier(.16, 1, .3, 1);
  --md-motion-spring-bounce:   cubic-bezier(.22, .61, .36, 1);
  --md-motion-standard:   cubic-bezier(.22, .61, .36, 1);
  --md-motion-emphasized: cubic-bezier(.16, 1, .3, 1);
  --md-motion-decelerate: cubic-bezier(0, 0, 0, 1);
  --md-motion-accelerate: cubic-bezier(0.3, 0, 1, 1);
  --md-duration-short:   200ms;
  --md-duration-short1:   50ms;
  --md-duration-short2:  100ms;
  --md-duration-short3:  150ms;
  --md-duration-short4:  200ms;
  --md-duration-medium:  300ms;
  --md-duration-medium1: 250ms;
  --md-duration-medium2: 300ms;
  --md-duration-medium3: 350ms;
  --md-duration-medium4: 400ms;
  --md-duration-long:    500ms;
  --md-duration-long1:   450ms;
  --md-duration-long2:   500ms;
  --md-duration-extra-long: 900ms;

  /* ── Legacy aliases ── */
  --bg:        var(--md-sys-color-background);
  --surface:   var(--md-sys-color-surface-container);
  --t1:        var(--md-sys-color-on-surface);
  --t2:        var(--md-sys-color-on-surface-variant);
  --t3:        var(--md-sys-color-outline);
  --accent:    var(--md-sys-color-primary);
  --accent-hover: var(--md-sys-color-primary);
  --accent-bg: var(--md-sys-color-primary-container);
  --border:    var(--md-sys-color-outline-variant);
  --border-2:  var(--md-sys-color-outline);
  --green:     #5D9571;
  --green-bg:  var(--md-sys-color-primary-container);
  --red:       var(--md-sys-color-error);
  --red-bg:    var(--md-sys-color-error-container);
  --yellow:    #FFAE42;
  --yellow-bg: rgba(255,174,66,.12);
  --blue:      #4E9EFA;
  --blue-bg:   var(--md-sys-color-tertiary-container);
  --purple:    #6E6E73;
  --purple-bg: rgba(120,120,128,.12);
  --shadow-xs: var(--md-elevation-1);
  --shadow-sm: var(--md-elevation-2);
  --shadow:    var(--md-elevation-3);
  --shadow-md: var(--md-elevation-4);
  --shadow-lg: var(--md-elevation-5);
  --r-xs:  var(--md-shape-extra-small);
  --r-sm:  var(--md-shape-small);
  --r:     var(--md-shape-medium);
  --r-lg:  var(--md-shape-large);
  --r-xl:  var(--md-shape-extra-large);
  --r-2xl: var(--md-shape-extra-extra-large);
  --sp-xs: 4px;
  --sp-sm: 8px;
  --sp:    16px;
  --sp-md: 24px;
  --sp-lg: 32px;
  --sp-xl: 48px;
  --sidebar-w: 272px;
  --t: var(--md-duration-medium) var(--md-motion-standard);
  --c-text:    var(--md-sys-color-on-surface);
  --c-text2:   var(--md-sys-color-on-surface-variant);
  --c-text3:   var(--md-sys-color-outline);
  --c-primary: var(--md-sys-color-primary);
  --c-danger:  var(--md-sys-color-error);
  --c-success: #5D9571;
  --c-warn:    #FFAE42;
  --c-info:    #4E9EFA;
  --glass:     rgba(250,250,252,.46);
  --glass-strong: rgba(250,250,252,.66);
  --glass-blur: blur(28px) saturate(190%);
  --glass-card-blur: blur(22px) saturate(185%);
  --glass-border: rgba(0,0,0,.10);
  --glass-border-color: rgba(0,0,0,.10);
  --glass-shadow: 0 12px 36px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.80);
  --glass-scrim: rgba(250,250,252,.58);
  --focus-glow: 0 0 0 4px rgba(93,149,113,.18);
  --t-inv: var(--md-sys-color-on-primary);
}

/* ═══════════════════════════════════════════════════════════════
   DARK SCHEME
   ═══════════════════════════════════════════════════════════════ */
.dark, [data-theme="dark"] {
  color-scheme: dark;

  --md-sys-color-primary:                  #7BCC98;
  --md-sys-color-on-primary:               #04280F;
  --md-sys-color-primary-container:        rgba(123,204,152,.22);
  --md-sys-color-on-primary-container:     #7BCC98;

  --md-sys-color-secondary:                #98989D;
  --md-sys-color-on-secondary:             #000000;
  --md-sys-color-secondary-container:      #2C2C2E;
  --md-sys-color-on-secondary-container:   #F5F5F7;

  --md-sys-color-tertiary:                 #2793FF;
  --md-sys-color-on-tertiary:              #FFFFFF;
  --md-sys-color-tertiary-container:       rgba(39,147,255,.22);
  --md-sys-color-on-tertiary-container:    #2793FF;

  --md-sys-color-error:                    #FF453A;
  --md-sys-color-on-error:                 #FFFFFF;
  --md-sys-color-error-container:          rgba(255,69,58,.24);
  --md-sys-color-on-error-container:       #FFDAD6;

  --md-sys-color-background:               #000000;
  --md-sys-color-on-background:            #F5F5F7;
  --md-sys-color-surface:                  #1C1C1E;
  --md-sys-color-on-surface:               #F5F5F7;
  --md-sys-color-surface-variant:          #2C2C2E;
  --md-sys-color-on-surface-variant:       #98989D;

  --md-sys-color-outline:                  #98989D;
  --md-sys-color-outline-variant:          rgba(84,84,88,.60);

  --md-sys-color-inverse-surface:          #F5F5F7;
  --md-sys-color-inverse-on-surface:       #000000;
  --md-sys-color-inverse-primary:          #5D9571;

  --md-sys-color-surface-dim:              #000000;
  --md-sys-color-surface-bright:           #2C2C2E;
  --md-sys-color-surface-container-lowest: #000000;
  --md-sys-color-surface-container-low:    #1C1C1E;
  --md-sys-color-surface-container:        #2C2C2E;
  --md-sys-color-surface-container-high:   #2C2C2E;
  --md-sys-color-surface-container-highest:#3A3A3C;

  --md-elevation-1: 0 10px 28px rgba(0,0,0,.34), 0 1px 2px rgba(0,0,0,.28);
  --md-elevation-2: 0 18px 48px rgba(0,0,0,.38), 0 2px 8px rgba(0,0,0,.30);
  --md-elevation-3: 0 28px 72px rgba(0,0,0,.44), 0 6px 18px rgba(0,0,0,.34);
  --md-elevation-4: 0 36px 96px rgba(0,0,0,.50), 0 10px 28px rgba(0,0,0,.38);
  --md-elevation-5: 0 46px 120px rgba(0,0,0,.58), 0 14px 38px rgba(0,0,0,.44);

  --green:     #7BCC98;  --green-bg:  rgba(123,204,152,.22);
  --red:       #FF453A;  --red-bg:    rgba(255,69,58,.24);
  --yellow:    #FFAE42;  --yellow-bg: rgba(255,174,66,.22);
  --blue:      #2793FF;  --blue-bg:   rgba(39,147,255,.22);
  --purple:    #98989D;  --purple-bg: #2C2C2E;
  --glass:     rgba(24,24,28,.52);
  --glass-strong: rgba(24,24,28,.68);
  --glass-blur: blur(28px) saturate(190%);
  --glass-card-blur: blur(22px) saturate(185%);
  --glass-border: rgba(255,255,255,.15);
  --glass-border-color: rgba(255,255,255,.15);
  --glass-shadow: 0 12px 36px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.16);
  --glass-scrim: rgba(11,11,15,.62);
  --focus-glow: 0 0 0 4px rgba(123,204,152,.22);
}

/* ═══════════════════════════════════════════════════════════════
   BASE RESET
   ═══════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
body {
  font-family: var(--md-ref-typeface-plain);
  background:
    radial-gradient(circle at 12% 0%, rgba(93,149,113,.10), transparent 34rem),
    radial-gradient(circle at 86% 12%, rgba(78,158,250,.05), transparent 36rem),
    radial-gradient(circle at 48% 88%, rgba(123,204,152,.07), transparent 40rem),
    var(--md-sys-color-background);
  background-attachment: fixed;
  color: var(--md-sys-color-on-background);

  min-height: 100vh;
  line-height: 1.5;
  overflow-x: hidden;
}

/* Checkbox & radio focus rings for custom controls */
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
  outline: none;
  box-shadow: var(--focus-glow);
  border-radius: var(--md-shape-extra-small);
}

/* ═══════════════════════════════════════════════════════════════
   TYPESCALE

   Shared type utilities using Inter/system UI.
   ═══════════════════════════════════════════════════════════════ */
.md-typescale-display-large    { font-size:57px;  line-height:64px;  font-weight:700; letter-spacing:0; font-variation-settings:'wght' 700; }
.md-typescale-display-medium   { font-size:45px;  line-height:52px;  font-weight:400; letter-spacing:0;       font-variation-settings:'wght' 400; }
.md-typescale-display-small    { font-size:36px;  line-height:44px;  font-weight:400; letter-spacing:0;       font-variation-settings:'wght' 400; }
.md-typescale-headline-large   { font-size:32px;  line-height:40px;  font-weight:400; letter-spacing:0;       font-variation-settings:'wght' 400; }
.md-typescale-headline-medium  { font-size:28px;  line-height:36px;  font-weight:400; letter-spacing:0;       font-variation-settings:'wght' 400; }
.md-typescale-headline-small   { font-size:24px;  line-height:32px;  font-weight:400; letter-spacing:0;       font-variation-settings:'wght' 400; }
.md-typescale-title-large      { font-size:22px;  line-height:28px;  font-weight:400; letter-spacing:0;       font-variation-settings:'wght' 400; }
.md-typescale-title-medium     { font-size:16px;  line-height:24px;  font-weight:500; letter-spacing:0.15px;  font-variation-settings:'wght' 500; }
.md-typescale-title-small      { font-size:14px;  line-height:20px;  font-weight:500; letter-spacing:0.1px;   font-variation-settings:'wght' 500; }
.md-typescale-body-large       { font-size:16px;  line-height:24px;  font-weight:400; letter-spacing:0.5px;   font-variation-settings:'wght' 400; }
.md-typescale-body-medium      { font-size:14px;  line-height:20px;  font-weight:400; letter-spacing:0.25px;  font-variation-settings:'wght' 400; }
.md-typescale-body-small       { font-size:12px;  line-height:16px;  font-weight:400; letter-spacing:0.4px;   font-variation-settings:'wght' 400; }
.md-typescale-label-large      { font-size:14px;  line-height:20px;  font-weight:500; letter-spacing:0.1px;   font-variation-settings:'wght' 500; }
.md-typescale-label-medium     { font-size:12px;  line-height:16px;  font-weight:500; letter-spacing:0.5px;   font-variation-settings:'wght' 500; }
.md-typescale-label-small      { font-size:11px;  line-height:16px;  font-weight:500; letter-spacing:0.5px;   font-variation-settings:'wght' 500; }

/* Emphasized type utilities */
.md-typescale-emphasized-display-large   { font-size:57px;  line-height:64px;  font-weight:800; letter-spacing:0;  font-variation-settings:'wght' 800; }
.md-typescale-emphasized-display-medium  { font-size:45px;  line-height:52px;  font-weight:800; letter-spacing:0; font-variation-settings:'wght' 800; }
.md-typescale-emphasized-display-small   { font-size:36px;  line-height:44px;  font-weight:700; letter-spacing:0;       font-variation-settings:'wght' 700; }
.md-typescale-emphasized-headline-large  { font-size:32px;  line-height:40px;  font-weight:700; letter-spacing:0;       font-variation-settings:'wght' 700; }
.md-typescale-emphasized-headline-medium { font-size:28px;  line-height:36px;  font-weight:700; letter-spacing:0;       font-variation-settings:'wght' 700; }
.md-typescale-emphasized-headline-small  { font-size:24px;  line-height:32px;  font-weight:700; letter-spacing:0;       font-variation-settings:'wght' 700; }
.md-typescale-emphasized-title-large     { font-size:22px;  line-height:28px;  font-weight:700; letter-spacing:0;       font-variation-settings:'wght' 700; }
.md-typescale-emphasized-title-medium    { font-size:16px;  line-height:24px;  font-weight:700; letter-spacing:0.15px;  font-variation-settings:'wght' 700; }
.md-typescale-emphasized-title-small     { font-size:14px;  line-height:20px;  font-weight:700; letter-spacing:0.1px;   font-variation-settings:'wght' 700; }
.md-typescale-emphasized-body-large      { font-size:16px;  line-height:24px;  font-weight:700; letter-spacing:0.5px;   font-variation-settings:'wght' 700; }
.md-typescale-emphasized-body-medium     { font-size:14px;  line-height:20px;  font-weight:700; letter-spacing:0.25px;  font-variation-settings:'wght' 700; }
.md-typescale-emphasized-body-small      { font-size:12px;  line-height:16px;  font-weight:700; letter-spacing:0.4px;   font-variation-settings:'wght' 700; }
.md-typescale-emphasized-label-large     { font-size:14px;  line-height:20px;  font-weight:700; letter-spacing:0.1px;   font-variation-settings:'wght' 700; }
.md-typescale-emphasized-label-medium    { font-size:12px;  line-height:16px;  font-weight:700; letter-spacing:0.5px;   font-variation-settings:'wght' 700; }
.md-typescale-emphasized-label-small     { font-size:11px;  line-height:16px;  font-weight:700; letter-spacing:0.5px;   font-variation-settings:'wght' 700; }

/* HTML semántico */
h1 { font-size:2.125rem; font-weight:700; letter-spacing:0; color:var(--md-sys-color-on-surface); line-height:1.12; font-variation-settings:'wght' 700; }
h2 { font-size:1.5rem;   font-weight:600; letter-spacing:0;color:var(--md-sys-color-on-surface); line-height:1.2;  font-variation-settings:'wght' 600; }
h3 { font-size:1.25rem;  font-weight:600; letter-spacing:0; color:var(--md-sys-color-on-surface); line-height:1.28; font-variation-settings:'wght' 600; }
h4 { font-size:1rem;     font-weight:600;                         color:var(--md-sys-color-on-surface);                   font-variation-settings:'wght' 600; }
p  { color:var(--md-sys-color-on-surface-variant); }
a  { color:var(--apple-link, #095C34); text-decoration:none; }

.text-muted { color:var(--md-sys-color-on-surface-variant) !important; }
.text-faint { color:var(--md-sys-color-on-surface-variant) !important; }
.text-xs    { font-size:0.75rem; }
.text-sm    { font-size:0.875rem; }
.label {
  font-size:0.75rem;
  font-weight:600;
  letter-spacing:0;
  text-transform:uppercase;
  color:var(--md-sys-color-on-surface-variant);
  font-variation-settings:'wght' 600;
}

/* ── Utility ── */
.flex            { display:flex; }
.items-center    { align-items:center; }
.justify-between { justify-content:space-between; }
.gap-sm          { gap:8px; }
.gap-md          { gap:16px; }
.mt-sm           { margin-top:8px; }
.mb-md           { margin-bottom:24px; }
.w-full          { width:100%; }
.grid-2          { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.grid-3          { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.hidden          { display:none !important; }

/* ═══════════════════════════════════════════════════════════════
   LAYOUT
   ═══════════════════════════════════════════════════════════════ */
.app-layout   { display:flex; min-height:100vh; background:var(--md-sys-color-background); }
.main-content {
  flex:1;
  margin-left:var(--sidebar-w);
  padding:42px 48px;
  overflow-x:hidden;
  background:var(--md-sys-color-background);
  min-height:100vh;
}
@media (max-width:900px) {
  .main-content { margin-left:0; padding:20px 16px 80px; }
}

.page-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin-bottom:36px;
  padding-bottom:0;
  border-bottom:none;
}
/* Page title */
.page-title {
  font-size:2.125rem;
  font-weight:700;
  color:var(--md-sys-color-on-surface);
  letter-spacing:0;
  font-variation-settings:'wght' 700;
  line-height:1.1;
}
.page-sub { font-size:1rem; color:var(--md-sys-color-on-surface-variant); margin-top:6px; }

/* ═══════════════════════════════════════════════════════════════
   SIDEBAR
   ═══════════════════════════════════════════════════════════════ */
.sidebar {
  position:fixed;
  top:0; left:0; bottom:0;
  width:var(--sidebar-w);
  display:flex;
  flex-direction:column;
  background:var(--glass);
  backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);
  z-index:100;
  padding:16px 0;
  overflow-y:auto;
  border-right:1px solid var(--glass-border-color);
  box-shadow:var(--glass-shadow);
}

.sidebar-brand {
  display:flex;
  align-items:center;
  gap:14px;
  padding:16px 24px 28px;
  text-decoration:none;
}
.sidebar-brand .brand-icon {
  width:44px; height:44px;
  border-radius:var(--md-shape-large);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; flex-shrink:0;
  background:var(--glass-strong);
  border:1px solid var(--glass-border-color);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.42);
}
.sidebar-brand .brand-icon img { width:100%; height:100%; object-fit:contain; display:block; }
.sidebar-brand .brand-name {
  font-size:1.125rem;
  font-weight:700;
  color:var(--md-sys-color-on-surface);
  letter-spacing:0;
  font-variation-settings:'wght' 700;
}

.sidebar-section {
  font-size:0.6875rem;
  font-weight:600;
  letter-spacing:0;
  text-transform:uppercase;
  color:var(--md-sys-color-on-surface-variant);
  padding:20px 24px 6px;
  font-variation-settings:'wght' 600;
}

.nav-item, a.nav-item {
  display:flex;
  align-items:center;
  gap:14px;
  padding:0 18px;
  height:56px;
  border-radius:var(--md-shape-full);
  margin:1px 12px;
  font-size:0.9375rem;
  font-weight:500;
  letter-spacing:0.1px;
  color:var(--md-sys-color-on-surface-variant);
  text-decoration:none;
  transition:
    background var(--md-duration-short) var(--md-motion-spring-standard),
    color var(--md-duration-short) var(--md-motion-spring-standard),
    transform var(--md-duration-short4) var(--md-motion-spring-standard);
  cursor:pointer;
  border:none;
  background:transparent;
  font-family:var(--md-ref-typeface-plain);
  width:calc(100% - 24px);
  text-align:left;
  position:relative;
  font-variation-settings:'wght' 500;
}
/* Active navigation state */
.nav-item.active, a.nav-item.active {
  background:color-mix(in srgb, var(--md-sys-color-primary) 13%, transparent);
  color:var(--md-sys-color-primary);
  font-weight:600;
  font-variation-settings:'wght' 600;
  transform:none;
}
.nav-item svg, a.nav-item svg,
.nav-item [data-lucide], a.nav-item [data-lucide] {
  width:24px; height:24px; font-size:24px; flex-shrink:0;
}
/* Icon container active */
.nav-item.active .nav-icon-wrap,
a.nav-item.active .nav-icon-wrap {
  background:var(--md-sys-color-primary);
  color:var(--md-sys-color-on-primary);
  border-radius:var(--md-shape-large);
  width:36px; height:36px;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}

.sidebar-footer {
  margin-top:auto;
  padding:16px 12px;
  border-top:1px solid var(--glass-border-color);
}
.org-selector {
  display:flex; align-items:center; gap:14px;
  padding:12px 16px;
  border-radius:var(--md-shape-extra-large);
  cursor:pointer;
  transition:
    background var(--md-duration-short) var(--md-motion-spring-standard),
    transform var(--md-duration-short) var(--md-motion-spring-standard);
  margin:0 12px 4px;
}
.org-selector .org-name {
  font-size:0.9375rem; font-weight:700;
  color:var(--md-sys-color-on-surface);
  flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-variation-settings:'wght' 700;
}
.org-selector .org-badge {
  font-size:0.6875rem;
  background:var(--md-sys-color-primary-container);
  color:var(--md-sys-color-on-primary-container);
  padding:4px 12px;
  border-radius:var(--md-shape-full);
  font-weight:800;
  font-variation-settings:'wght' 800;
}

.citeri-shell-org { padding:0 12px 8px; }
.citeri-org-card  { background:color-mix(in srgb, var(--md-sys-color-surface) 70%, transparent); border:1px solid var(--glass-border-color); border-radius:var(--md-shape-large); padding:10px 14px; }
.citeri-org-label { font-size:0.75rem; color:var(--md-sys-color-on-surface-variant); margin-bottom:4px; }

/* ═══════════════════════════════════════════════════════════════
   CARDS
   ═══════════════════════════════════════════════════════════════ */
.card {
  background:var(--glass-strong);
  backdrop-filter:var(--glass-card-blur);
  -webkit-backdrop-filter:var(--glass-card-blur);
  border:1px solid var(--glass-border-color);
  box-shadow:var(--glass-shadow);
  border-radius:26px;
  padding:28px;
  position:relative; overflow:hidden;
  transition:
    box-shadow var(--md-duration-medium) var(--md-motion-spring-standard),
    transform var(--md-duration-medium) var(--md-motion-spring-standard);
}
.card-sm  { padding:18px; border-radius:var(--md-shape-large); }
.card-lg  { padding:36px; border-radius:var(--md-shape-extra-large); }
.card-title {
  font-size:0.8125rem; font-weight:600; letter-spacing:0;
  text-transform:uppercase; color:var(--md-sys-color-on-surface-variant);
  margin-bottom:12px; font-variation-settings:'wght' 600;
}
.card-value { font-size:2.375rem; font-weight:700; letter-spacing:0; color:var(--md-sys-color-on-surface); line-height:1; font-variation-settings:'wght' 700; }
.card-sub   { font-size:0.875rem; color:var(--md-sys-color-on-surface-variant); margin-top:8px; }

.card-elevated {
  background:var(--md-sys-color-surface);
  border:1px solid color-mix(in srgb, var(--md-sys-color-outline-variant) 65%, transparent);
  border-radius:var(--md-shape-extra-large); padding:28px;
  box-shadow:var(--md-elevation-1);
  transition:
    box-shadow var(--md-duration-medium) var(--md-motion-spring-standard),
    transform var(--md-duration-medium) var(--md-motion-spring-standard);
}

/* KPI cards */
.kpi-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:16px; }
.kpi-card {
  background:var(--glass-strong);
  backdrop-filter:var(--glass-card-blur);
  -webkit-backdrop-filter:var(--glass-card-blur);
  border:1px solid var(--glass-border-color);
  box-shadow:var(--glass-shadow);
  border-radius:26px;
  border-top:none;
  padding:24px 22px 22px;
  position:relative;
  transition:
    box-shadow var(--md-duration-medium) var(--md-motion-spring-standard),
    transform var(--md-duration-medium) var(--md-motion-spring-bounce);
}
.kpi-card::before {
  content:'';
  position:absolute;
  top:18px; left:22px;
  width:8px; height:8px;
  border-radius:50%;
  background:var(--md-sys-color-primary);
}

.kpi-label {
  font-size:0.8125rem; font-weight:600; text-transform:none;
  letter-spacing:0; color:var(--md-sys-color-on-surface-variant);
  margin-bottom:14px; padding-left:16px; display:flex; align-items:center; gap:6px;
  font-variation-settings:'wght' 600;
}
/* KPI value */
.kpi-value { font-size:2.375rem; font-weight:700; letter-spacing:0; color:var(--md-sys-color-on-surface); line-height:1; font-variation-settings:'wght' 700; }
.kpi-meta  { font-size:0.8125rem; color:var(--md-sys-color-on-surface-variant); margin-top:8px; }

/* ═══════════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════════ */
.btn {
  display:inline-flex; align-items:center; gap:10px;
  padding:0 24px; min-height:44px; height:44px;
  border-radius:var(--md-shape-full);
  font-size:0.9375rem; font-weight:600; letter-spacing:0;
  font-variation-settings:'wght' 600;
  border:none; cursor:pointer;
  transition:
    box-shadow var(--md-duration-short) var(--md-motion-spring-standard),
    background var(--md-duration-short) var(--md-motion-standard),
    transform var(--md-duration-short4) var(--md-motion-spring-bounce);
  text-decoration:none; white-space:nowrap; line-height:1;
  font-family:var(--md-ref-typeface-plain);
  position:relative; overflow:hidden;
}
.btn:active { transform:scale(0.97); }
.btn svg, .btn [data-lucide] { width:20px; height:20px; font-size:20px; }

.btn-primary   { background:var(--md-sys-color-primary); color:var(--md-sys-color-on-primary); box-shadow:0 8px 24px color-mix(in srgb, var(--md-sys-color-primary) 22%, transparent); }

.btn-secondary { background:color-mix(in srgb, var(--md-sys-color-on-surface) 7%, transparent); color:var(--md-sys-color-on-surface); border:1px solid color-mix(in srgb, var(--md-sys-color-outline-variant) 70%, transparent); }

.btn-ghost  { background:transparent; border:1px solid color-mix(in srgb, var(--md-sys-color-outline) 44%, transparent); color:var(--md-sys-color-primary); }

.btn-text   { background:transparent; color:var(--md-sys-color-primary); padding:0 14px; }

.btn-danger { background:color-mix(in srgb, var(--md-sys-color-error) 12%, transparent); color:var(--md-sys-color-error); }

.btn-danger-filled { background:var(--md-sys-color-error); color:var(--md-sys-color-on-error); }
.btn-black  { background:var(--md-sys-color-inverse-surface); color:var(--md-sys-color-inverse-on-surface); }

/* Button sizes */
.btn-xs  { height:32px; padding:0 14px; font-size:0.8125rem; }
.btn-sm  { height:36px; padding:0 20px; font-size:0.875rem; }
.btn-lg  { height:52px; padding:0 36px; font-size:1rem; font-weight:700; font-variation-settings:'wght' 700; }
.btn-xl  { height:60px; padding:0 48px; font-size:1.125rem; font-weight:700; font-variation-settings:'wght' 700; border-radius:var(--md-shape-full); }
.btn-icon    { padding:0; width:44px; height:44px; justify-content:center; border-radius:var(--md-shape-full); }
.btn-icon-sm { padding:0; width:36px; height:36px; justify-content:center; border-radius:var(--md-shape-full); display:inline-flex; align-items:center; }

/* Button group */
.btn-group { display:inline-flex; border-radius:var(--md-shape-full); overflow:hidden; border:1.5px solid var(--md-sys-color-outline); }
.btn-group .btn { border-radius:0; border:none; border-right:1px solid var(--md-sys-color-outline-variant); }
.btn-group .btn:first-child { border-radius:var(--md-shape-full) 0 0 var(--md-shape-full); }
.btn-group .btn:last-child  { border-radius:0 var(--md-shape-full) var(--md-shape-full) 0; border-right:none; }

/* FAB */
.fab {
  display:inline-flex; align-items:center; justify-content:center;
  width:56px; height:56px;
  border-radius:var(--md-shape-full);
  background:var(--glass-strong);
  color:var(--md-sys-color-primary);
  border:1px solid var(--glass-border-color); cursor:pointer;
  backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);
  box-shadow:var(--glass-shadow);
  transition:
    box-shadow var(--md-duration-medium) var(--md-motion-spring-standard),
    transform var(--md-duration-medium) var(--md-motion-spring-bounce);
  font-family:var(--md-ref-typeface-plain); font-size:24px;
}
.fab:active { transform:scale(0.97); }
.fab-lg { width:80px; height:80px; border-radius:var(--md-shape-full); font-size:32px; }
.fab-extended { width:auto; padding:0 20px; gap:10px; font-size:0.9375rem; font-weight:700; font-variation-settings:'wght' 700; letter-spacing:0.1px; }

/* Loading indicator */
.loading-indicator { display:inline-block; width:48px; height:48px; position:relative; }
.loading-indicator::before {
  content:'';
  position:absolute; inset:0;
  background:var(--md-sys-color-primary);
  border-radius:50%;
  animation:loading-morph 1.2s var(--md-motion-spring-standard) infinite alternate;
}
@keyframes loading-morph {
  0%   { border-radius:50%;                                                        transform:scale(0.6) rotate(0deg); }
  25%  { border-radius:var(--md-shape-large) 50% 50% var(--md-shape-large);        transform:scale(0.8) rotate(45deg); }
  50%  { border-radius:var(--md-shape-large);                                      transform:scale(1)   rotate(90deg); }
  75%  { border-radius:50% var(--md-shape-large) var(--md-shape-large) 50%;        transform:scale(0.8) rotate(135deg); }
  100% { border-radius:50%;                                                        transform:scale(0.6) rotate(180deg); }
}
.loading-indicator-sm { width:24px; height:24px; }

/* Divider */
.divider { border:none; border-top:1px solid var(--md-sys-color-outline-variant); margin:20px 0; }

/* Avatar — squircle para brand, pill para personas */
.avatar {
  width:44px; height:44px;
  border-radius:var(--md-shape-full);
  background:var(--md-sys-color-primary-container);
  color:var(--md-sys-color-on-primary-container);
  display:flex; align-items:center; justify-content:center;
  font-size:1rem; font-weight:800; flex-shrink:0;
  font-variation-settings:'wght' 800;
}
.avatar-sm    { width:36px; height:36px; font-size:0.875rem; border-radius:var(--md-shape-full); }
.avatar-round { border-radius:var(--md-shape-full); }

/* ═══════════════════════════════════════════════════════════════
   FORMS
   ═══════════════════════════════════════════════════════════════ */
.form-group   { margin-bottom:22px; }
.form-label   { display:block; font-size:0.875rem; font-weight:700; color:var(--md-sys-color-on-surface-variant); margin-bottom:6px; font-variation-settings:'wght' 700; }

.form-input, .form-select, .form-textarea {
  width:100%; padding:10px 18px; min-height:44px; height:50px;
  background:var(--md-sys-color-surface);
  border:1px solid color-mix(in srgb, var(--md-sys-color-outline-variant) 80%, transparent);
  border-radius:var(--md-shape-full);
  font-size:1rem; color:var(--md-sys-color-on-surface);
  outline:none; font-family:var(--md-ref-typeface-plain);
  transition:border-color var(--md-duration-short) var(--md-motion-standard),
             box-shadow var(--md-duration-short) var(--md-motion-standard),
             background var(--md-duration-short) var(--md-motion-standard);
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color:color-mix(in srgb, var(--md-sys-color-primary) 65%, transparent);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
}
.form-input::placeholder { color:var(--md-sys-color-on-surface-variant); }

.form-input.outlined, .form-select.outlined, .form-textarea.outlined {
  background:transparent; border:1px solid color-mix(in srgb, var(--md-sys-color-outline) 55%, transparent);
  border-radius:var(--md-shape-full); height:50px;
}
.form-input.outlined:focus, .form-select.outlined:focus, .form-textarea.outlined:focus {
  border:1px solid color-mix(in srgb, var(--md-sys-color-primary) 65%, transparent);
}

.form-select {
  appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235A6360' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 16px center; padding-right:40px;
}
.form-textarea { resize:vertical; min-height:96px; height:auto; padding:14px 18px; border-radius:var(--md-shape-large); }
.form-error { color:var(--md-sys-color-error); font-size:0.8125rem; margin-top:6px; font-weight:700; font-variation-settings:'wght' 700; }
.form-hint  { color:var(--md-sys-color-on-surface-variant); font-size:0.8125rem; margin-top:6px; }
input[type="color"] { padding:2px 4px; height:44px; cursor:pointer; }

/* ═══════════════════════════════════════════════════════════════
   TABLES
   ═══════════════════════════════════════════════════════════════ */
.table-wrap {
  background:var(--md-sys-color-surface);
  border:1px solid color-mix(in srgb, var(--md-sys-color-outline-variant) 72%, transparent);
  border-radius:var(--md-shape-extra-large); overflow:hidden;
}
.table { width:100%; border-collapse:collapse; font-size:0.9375rem; }
.table thead th {
  background:color-mix(in srgb, var(--md-sys-color-on-surface) 3%, transparent);
  padding:16px 18px; text-align:left;
  font-size:0.75rem; font-weight:600; text-transform:uppercase;
  letter-spacing:0; color:var(--md-sys-color-on-surface-variant);
  border-bottom:1px solid color-mix(in srgb, var(--md-sys-color-outline-variant) 72%, transparent);
  font-variation-settings:'wght' 600;
}
.table tbody td {
  padding:14px 18px; color:var(--md-sys-color-on-surface);
  border-bottom:1px solid color-mix(in srgb, var(--md-sys-color-outline-variant) 62%, transparent); vertical-align:middle;
}
.table tbody tr:last-child td { border-bottom:none; }
.table-empty { text-align:center; padding:56px 16px; color:var(--md-sys-color-on-surface-variant); font-size:0.9375rem; }

/* ═══════════════════════════════════════════════════════════════
   BADGES / CHIPS — peso 800, padding generoso
   ═══════════════════════════════════════════════════════════════ */
.badge {
  display:inline-flex; align-items:center; gap:5px;
  padding:5px 12px; border-radius:var(--md-shape-full);
  font-size:0.75rem; font-weight:600; font-variation-settings:'wght' 600; border:1px solid transparent;
}
.badge-green,  .badge-ok,   .badge-done    { background:color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent); color:var(--md-sys-color-primary); border-color:color-mix(in srgb, var(--md-sys-color-primary) 18%, transparent); }
.badge-red,    .badge-cancelled            { background:color-mix(in srgb, var(--md-sys-color-error) 12%, transparent); color:var(--md-sys-color-error); border-color:color-mix(in srgb, var(--md-sys-color-error) 18%, transparent); }
.badge-blue,   .badge-booked              { background:color-mix(in srgb, var(--md-sys-color-tertiary) 12%, transparent); color:var(--md-sys-color-tertiary); border-color:color-mix(in srgb, var(--md-sys-color-tertiary) 18%, transparent); }
.badge-yellow, .badge-noshow              { background:color-mix(in srgb, #FFAE42 12%, transparent); color:var(--md-sys-color-on-surface-variant); border-color:color-mix(in srgb, #FFAE42 18%, transparent); }
.badge-purple, .badge-confirmed           { background:color-mix(in srgb, var(--md-sys-color-primary) 10%, transparent); color:var(--md-sys-color-primary); border-color:color-mix(in srgb, var(--md-sys-color-primary) 16%, transparent); }
.badge-gray                               { background:color-mix(in srgb, var(--md-sys-color-on-surface) 7%, transparent); color:var(--md-sys-color-on-surface-variant); border-color:color-mix(in srgb, var(--md-sys-color-outline-variant) 60%, transparent); }

.dark .badge-yellow,.dark .badge-noshow,
[data-theme="dark"] .badge-yellow,[data-theme="dark"] .badge-noshow { background:rgba(120,120,128,.24); color:var(--md-sys-color-on-surface-variant); }
.dark .badge-purple,.dark .badge-confirmed,
[data-theme="dark"] .badge-purple,[data-theme="dark"] .badge-confirmed { background:var(--md-sys-color-primary-container); color:var(--md-sys-color-on-primary-container); }

/* ═══════════════════════════════════════════════════════════════
   MODAL / DIALOG — squircle shape, spring enter animation
   ═══════════════════════════════════════════════════════════════ */
.modal-overlay {
  position:fixed; inset:0;
  background:color-mix(in srgb, var(--md-sys-color-scrim) 30%, transparent);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  z-index:500; display:none; align-items:center; justify-content:center; padding:20px;
}
.modal-overlay.open { display:flex; }
.modal-box {
  background:var(--glass-strong);
  backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border-color);
  border-radius:var(--md-shape-extra-large);
  box-shadow:var(--glass-shadow);
  width:100%; max-width:580px; max-height:90vh; overflow-y:auto; padding:32px;
  animation:modal-enter var(--md-duration-medium) var(--md-motion-spring-enter);
}
@keyframes modal-enter {
  from { opacity:0; transform:scale(0.92) translateY(16px); }
  to   { opacity:1; transform:scale(1) translateY(0); }
}
.modal-header  { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
.modal-title   { font-size:1.5rem; font-weight:700; letter-spacing:0; color:var(--md-sys-color-on-surface); font-variation-settings:'wght' 700; }
.modal-close   {
  background:transparent; border:none; border-radius:var(--md-shape-full);
  width:44px; height:44px; display:flex; align-items:center; justify-content:center;
  cursor:pointer; color:var(--md-sys-color-on-surface-variant); font-size:20px;
  transition:background var(--md-duration-short) var(--md-motion-spring-standard);
}
.modal-body    { color:var(--md-sys-color-on-surface-variant); font-size:0.9375rem; line-height:1.65; }
.modal-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:28px; }

dialog {
  background:var(--glass-strong);
  backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border-color); border-radius:var(--md-shape-extra-large);
  box-shadow:var(--glass-shadow); padding:32px;
  color:var(--md-sys-color-on-surface); max-width:580px; width:100%;
  animation:modal-enter var(--md-duration-medium) var(--md-motion-spring-enter);
}
dialog::backdrop { background:color-mix(in srgb, var(--md-sys-color-scrim) 30%, transparent); backdrop-filter:blur(8px); }

/* Todos los editores nativos se abren centrados, también en navegadores que
   aplican una posición por defecto distinta a showModal(). */
dialog[open] {
  position: fixed;
  inset: auto;
  top: 50%;
  left: 50%;
  margin: 0;
  transform: translate(-50%, -50%);
  max-height: min(88vh, 760px);
  overflow-y: auto;
}

/* ═══════════════════════════════════════════════════════════════
   SNACKBAR / TOAST
   ═══════════════════════════════════════════════════════════════ */
.toast {
  position:fixed; bottom:28px; left:50%;
  transform:translateX(-50%) translateY(80px);
  background:var(--md-sys-color-inverse-surface);
  color:var(--md-sys-color-inverse-on-surface);
  box-sizing:border-box;
  width:max-content; max-width:min(480px, calc(100vw - 32px));
  padding:12px 20px; border-radius:var(--md-shape-small);
  font-size:0.9375rem; font-weight:500; font-variation-settings:'wght' 500;
  line-height:1.35; text-align:center; overflow:hidden; text-overflow:ellipsis;
  box-shadow:var(--md-elevation-4); z-index:9999; opacity:0;
  transition:
    transform var(--md-duration-medium) var(--md-motion-spring-enter),
    opacity var(--md-duration-medium) var(--md-motion-standard);
  white-space:nowrap; pointer-events:none;
}
.toast.show { transform:translateX(-50%) translateY(0); opacity:1; }

/* ═══════════════════════════════════════════════════════════════
   TABS — active peso 800, indicador 3px
   ═══════════════════════════════════════════════════════════════ */
.tabs { display:flex; gap:0; border-bottom:1px solid var(--md-sys-color-outline-variant); margin-bottom:28px; }
.tab-btn {
  padding:0 28px; height:52px;
  border:none; border-bottom:2px solid transparent; background:transparent;
  font-size:0.9375rem; font-weight:600; letter-spacing:0;
  color:var(--md-sys-color-on-surface-variant);
  cursor:pointer;
  transition:
    color var(--md-duration-short) var(--md-motion-spring-standard),
    border-color var(--md-duration-short) var(--md-motion-spring-standard);
  font-family:var(--md-ref-typeface-plain); font-variation-settings:'wght' 600;
}
.tab-btn.active {
  color:var(--md-sys-color-primary);
  border-bottom-color:var(--md-sys-color-primary);
  font-weight:700; font-variation-settings:'wght' 700;
}
.section { display:none; }
.section.active { display:block; }

/* ═══════════════════════════════════════════════════════════════
   TOOLBAR / SEARCH
   ═══════════════════════════════════════════════════════════════ */
.toolbar { display:flex; align-items:center; gap:10px; margin-bottom:20px; flex-wrap:wrap; }
.search-wrap { position:relative; flex:1; min-width:220px; max-width:380px; }
.search-wrap svg,
.search-wrap [data-lucide] {
  position:absolute; left:16px; top:50%; transform:translateY(-50%);
  width:20px; height:20px; font-size:20px; color:var(--md-sys-color-on-surface); pointer-events:none;
}
.search-input {
  width:100%; padding:0 18px 0 48px; height:48px;
  background:var(--md-sys-color-surface);
  border:1px solid color-mix(in srgb, var(--md-sys-color-outline-variant) 80%, transparent);
  border-radius:var(--md-shape-full);
  font-size:0.9375rem; color:var(--md-sys-color-on-surface);
  outline:none; font-family:var(--md-ref-typeface-plain);
  transition:
    border-color var(--md-duration-short) var(--md-motion-spring-standard),
    box-shadow var(--md-duration-short) var(--md-motion-spring-standard);
}
.search-input:focus {
  border-color:var(--md-sys-color-primary);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--md-sys-color-primary) 16%, transparent);
}
.search-input::placeholder { color:var(--md-sys-color-on-surface-variant); }

/* ═══════════════════════════════════════════════════════════════
   STAT MINI
   ═══════════════════════════════════════════════════════════════ */
.stat-mini { text-align:center; padding:18px; background:var(--md-sys-color-surface-container-high); border-radius:var(--md-shape-extra-large); }
.stat-mini .stat-label { font-size:0.75rem; font-weight:600; text-transform:uppercase; letter-spacing:0; color:var(--md-sys-color-on-surface-variant); margin-bottom:6px; font-variation-settings:'wght' 600; }
.stat-mini .stat-val   { font-size:1.875rem; font-weight:700; letter-spacing:0; color:var(--md-sys-color-on-surface); line-height:1; font-variation-settings:'wght' 700; }
.stat-mini .stat-sub   { font-size:0.75rem; color:var(--md-sys-color-on-surface-variant); margin-top:4px; }
.stat-mini.green .stat-val { color:var(--md-sys-color-primary); }

/* ═══════════════════════════════════════════════════════════════
   CHIPS
   ═══════════════════════════════════════════════════════════════ */
.chip {
  display:inline-flex; align-items:center; gap:8px;
  min-height:36px; height:36px; padding:0 16px; border-radius:var(--md-shape-full);
  border:1px solid color-mix(in srgb, var(--md-sys-color-outline) 42%, transparent); background:transparent;
  font-size:0.875rem; color:var(--md-sys-color-on-surface-variant);
  cursor:pointer; font-family:var(--md-ref-typeface-plain);
  transition:
    background var(--md-duration-short) var(--md-motion-spring-standard),
    transform var(--md-duration-short) var(--md-motion-spring-standard),
    border-color var(--md-duration-short) var(--md-motion-standard);
  font-weight:500; font-variation-settings:'wght' 500;
}
.chip.selected { background:color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent); color:var(--md-sys-color-primary); border-color:color-mix(in srgb, var(--md-sys-color-primary) 18%, transparent); font-weight:700; font-variation-settings:'wght' 700; }

/* ═══════════════════════════════════════════════════════════════
   PROGRESS
   ═══════════════════════════════════════════════════════════════ */
.progress-linear { height:6px; background:var(--md-sys-color-surface-container-highest); border-radius:var(--md-shape-full); overflow:hidden; }
.progress-linear-fill { height:100%; background:var(--md-sys-color-primary); border-radius:var(--md-shape-full); transition:width 0.45s var(--md-motion-spring-standard); }

/* ═══════════════════════════════════════════════════════════════
   FILTER BAR & DELTAS
   ═══════════════════════════════════════════════════════════════ */
.filter-bar { display:flex; align-items:center; gap:10px; margin-bottom:20px; flex-wrap:wrap; }
.filter-bar label { font-size:0.8125rem; font-weight:700; color:var(--md-sys-color-on-surface-variant); font-variation-settings:'wght' 700; }
.filter-bar input, .filter-bar select {
  min-height:40px;
  padding:0 14px;
  border-radius:var(--md-shape-full);
  border:1px solid color-mix(in srgb, var(--md-sys-color-outline-variant) 80%, transparent);
  background:var(--md-sys-color-surface);
  color:var(--md-sys-color-on-surface);
  font:inherit;
  outline:none;
}
.filter-bar input:focus, .filter-bar select:focus {
  border-color:color-mix(in srgb, var(--md-sys-color-primary) 65%, transparent);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
}

.kpi-delta          { font-size:0.8125rem; color:var(--md-sys-color-on-surface-variant); margin-top:8px; font-weight:600; font-variation-settings:'wght' 600; }
.kpi-delta.positive { color:var(--md-sys-color-primary); font-weight:800; font-variation-settings:'wght' 800; }
.kpi-delta.negative { color:var(--md-sys-color-error);   font-weight:800; font-variation-settings:'wght' 800; }
.kpi-delta.neutral  { color:var(--md-sys-color-on-surface-variant); }

/* ═══════════════════════════════════════════════════════════════
   SHORTCUTS GRID
   ═══════════════════════════════════════════════════════════════ */
.shortcuts-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.shortcut-item {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:22px 10px;
  background:var(--md-sys-color-surface);
  border-radius:var(--md-shape-extra-large);
  text-decoration:none; color:var(--md-sys-color-on-surface-variant);
  font-size:0.8125rem; font-weight:700; gap:10px;
  transition:
    background var(--md-duration-medium) var(--md-motion-spring-standard),
    color var(--md-duration-medium) var(--md-motion-spring-standard),
    transform var(--md-duration-medium) var(--md-motion-spring-bounce),
    box-shadow var(--md-duration-medium) var(--md-motion-spring-standard);
  text-align:center;
  border:1px solid color-mix(in srgb, var(--md-sys-color-outline-variant) 70%, transparent);
  font-variation-settings:'wght' 700;
}
.shortcut-icon {
  display:flex; align-items:center; justify-content:center;
  width:44px; height:44px;
  background:var(--md-sys-color-primary-container);
  border-radius:var(--md-shape-large);
  color:var(--md-sys-color-primary);
  transition:
    background var(--md-duration-short) var(--md-motion-spring-standard),
    transform var(--md-duration-short) var(--md-motion-spring-bounce);
}
.shortcut-icon svg, .shortcut-icon [data-lucide] { width:22px; height:22px; font-size:22px; }

/* ═══════════════════════════════════════════════════════════════
   BOOKING LINK CARD
   ═══════════════════════════════════════════════════════════════ */
.booking-link-card {
  background:var(--md-sys-color-primary);
  border-radius:var(--md-shape-extra-large);
  padding:22px; margin-bottom:16px;
  box-shadow:0 18px 46px color-mix(in srgb, var(--md-sys-color-primary) 22%, transparent);
}
.booking-link-card p { color:var(--md-sys-color-on-primary); margin:0 0 10px; font-size:0.875rem; font-weight:700; font-variation-settings:'wght' 700; }

/* ═══════════════════════════════════════════════════════════════
   ONBOARDING
   ═══════════════════════════════════════════════════════════════ */
.onboarding-card {
  background:var(--md-sys-color-surface);
  border:1px solid color-mix(in srgb, var(--md-sys-color-outline-variant) 70%, transparent);
  border-radius:var(--md-shape-extra-large);
  padding:28px; margin-bottom:28px;
}
.onboarding-steps { display:flex; flex-direction:column; gap:10px; }
.onboarding-step {
  display:flex; align-items:center; gap:18px;
  padding:14px 18px;
  background:color-mix(in srgb, var(--md-sys-color-on-surface) 3%, transparent);
  border-radius:var(--md-shape-large);
  text-decoration:none; color:var(--md-sys-color-on-surface-variant);
  border:1px solid color-mix(in srgb, var(--md-sys-color-outline-variant) 70%, transparent);
  transition:
    background var(--md-duration-short) var(--md-motion-spring-standard),
    transform var(--md-duration-short) var(--md-motion-spring-standard);
}
.onboarding-step .step-num {
  width:32px; height:32px; border-radius:var(--md-shape-full);
  background:var(--md-sys-color-primary-container);
  color:var(--md-sys-color-on-primary-container);
  display:flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:800; flex-shrink:0; font-variation-settings:'wght' 800;
}
.onboarding-step strong { font-size:14px; font-weight:700; color:var(--md-sys-color-on-surface); font-variation-settings:'wght' 700; }
.onboarding-step span  { font-size:12px; color:var(--md-sys-color-on-surface-variant); }
.setup-progress { height:6px; background:var(--md-sys-color-surface-container-highest); border-radius:var(--md-shape-full); overflow:hidden; margin:0 0 16px; }
.setup-progress-fill { height:100%; width:0; background:var(--md-sys-color-primary); transition:width 0.5s var(--md-motion-spring-standard); }
.template-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin-top:14px; }
.template-btn {
  border:1px solid color-mix(in srgb, var(--md-sys-color-outline-variant) 70%, transparent);
  background:var(--md-sys-color-surface);
  border-radius:var(--md-shape-large); padding:14px;
  text-align:left; cursor:pointer; font:inherit; color:var(--md-sys-color-on-surface);
  transition:
    background var(--md-duration-short) var(--md-motion-spring-standard),
    transform var(--md-duration-short) var(--md-motion-spring-standard);
}
.template-btn strong { display:block; font-size:0.875rem; font-weight:700; color:var(--md-sys-color-on-surface); margin-bottom:3px; font-variation-settings:'wght' 700; }
.template-btn span   { font-size:0.75rem; color:var(--md-sys-color-on-surface-variant); }


/* ═══════════════════════════════════════════════════════════════
   DRAWER — panel lateral deslizante
   ═══════════════════════════════════════════════════════════════ */
.drawer {
  position: fixed; top: 0; right: 0;
  width: min(960px, 95vw); height: 100vh;
  background: var(--glass-strong);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-left: 1px solid var(--glass-border-color);
  box-shadow: var(--glass-shadow);
  transform: translateX(100%);
  transition: transform .3s var(--md-motion-spring-standard, cubic-bezier(.4,0,.2,1));
  z-index: 200; display: flex; flex-direction: column;
}
.drawer.open { transform: translateX(0); }
.drawer-head {
  display: flex; align-items: center; gap: 10px;
  padding: var(--sp-md, 20px);
  border-bottom: 1px solid var(--glass-border-color);
  flex-shrink: 0;
}
.drawer-title { font-size: 1.1rem; font-weight: 700; color: var(--md-sys-color-on-surface); margin: 0; }
.drawer-body  { flex: 1; overflow-y: auto; padding: var(--sp-md, 20px); }
.drawer-backdrop {
  position: fixed; inset: 0;
  background: color-mix(in srgb, var(--md-sys-color-scrim) 30%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 199;
  display: none;
}

/* ═══════════════════════════════════════════════════════════════
   EMPTY STATE
   ═══════════════════════════════════════════════════════════════ */
.empty-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 48px 24px; text-align: center;
  color: var(--md-sys-color-on-surface-variant);
  gap: 8px;
}
.empty-state i, .empty-state svg, .empty-state span[data-lucide] {
  width: 40px; height: 40px; opacity: .3;
}

/* ═══════════════════════════════════════════════════════════════
   MODAL FOOTER (complemento a .modal-actions)
   ═══════════════════════════════════════════════════════════════ */
.modal-footer {
  display: flex; justify-content: flex-end; gap: 10px;
  margin-top: 24px; padding-top: 16px;
  border-top: 1px solid color-mix(in srgb, var(--md-sys-color-outline-variant) 70%, transparent);
}

/* ═══════════════════════════════════════════════════════════════
   LIQUID GLASS COMPATIBILITY LAYER
   Covers page-level variants without changing their class names.
   ═══════════════════════════════════════════════════════════════ */
.header,
.topbar,
.navbar,
.filters-card,
.chat-form {
  background:var(--glass) !important;
  backdrop-filter:var(--glass-blur) !important;
  -webkit-backdrop-filter:var(--glass-blur) !important;
  border-color:var(--glass-border-color) !important;
  box-shadow:var(--glass-shadow);
}

.filters-card,
.calendar-wrapper,
.conversation-list,
.chat-panel,
.login-card,
.pricing-card,
.hero-mockup,
.device,
.slide,
.mini-card,
.loyalty-form,
.list-item,
.ops-card,
.big-btn,
.appt-card,
.client-result,
.emp-col,
.preview-box,
.block-card,
.email-preview,
.confirm-preview,
.automation-row,
.endpoint,
.sell-preview,
.svc-check,
.star-btn,
.wizard-card,
.service-card,
.location-card {
  background:var(--md-sys-color-surface) !important;
  border:1px solid color-mix(in srgb, var(--md-sys-color-outline-variant) 70%, transparent) !important;
  border-radius:var(--md-shape-extra-large) !important;
  box-shadow:none !important;
}.week-nav, .pair-code, .conversation-item.active, .bubble.client, .mini-surface, .copy-row .code-lite, .mutedchip, .logo-preview, .step-circle.pending { background:color-mix(in srgb, var(--md-sys-color-on-surface) 5%, transparent) !important; }

.week-picker,
.filter-select,
.input,
.search-input input,
.field-input,
.date-input,
.time-input,
.editor-tab,
.var-btn,
.mini-btn,
.loyalty-blocks label {
  min-height:44px !important;
  border-radius:var(--md-shape-full) !important;
  border:1px solid color-mix(in srgb, var(--md-sys-color-outline-variant) 80%, transparent) !important;
  background:var(--md-sys-color-surface) !important;
  color:var(--md-sys-color-on-surface) !important;
  box-shadow:none !important;
}

.field-input:focus,
.input:focus,
.week-picker:focus,
.filter-select:focus,
.search-input input:focus {
  border-color:color-mix(in srgb, var(--md-sys-color-primary) 65%, transparent) !important;
  box-shadow:0 0 0 4px color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent) !important;
}

.modal,
.drawer-backdrop {
  background:color-mix(in srgb, var(--md-sys-color-scrim) 30%, transparent) !important;
  backdrop-filter:blur(8px) !important;
  -webkit-backdrop-filter:blur(8px) !important;
}

.modal-content {
  background:var(--glass-strong) !important;
  backdrop-filter:var(--glass-blur) !important;
  -webkit-backdrop-filter:var(--glass-blur) !important;
  border:1px solid var(--glass-border-color) !important;
  border-radius:var(--md-shape-extra-large) !important;
  box-shadow:var(--glass-shadow) !important;
}

.right-panel,
.biz-section {
  background:var(--md-sys-color-primary) !important;
  color:var(--md-sys-color-on-primary);
}

.right-panel *,
.biz-section .section-headline,
.biz-section .section-body,
.biz-section .section-eyebrow,
.biz-bullet {
  color:var(--md-sys-color-on-primary) !important;
}

.biz-bullet,
.right-panel .icon-chip {
  background:rgba(255,255,255,.14) !important;
  border:1px solid rgba(255,255,255,.18);
}

.bubble.business {
  background:var(--md-sys-color-primary) !important;
  color:var(--md-sys-color-on-primary) !important;
}

.status,
.status-booked,
.status-completed,
.status-confirmed,
.status-done,
.status-pending,
.status-no_show,
.status-cancelled {
  border-radius:var(--md-shape-full) !important;
  background:color-mix(in srgb, var(--md-sys-color-primary) 10%, transparent) !important;
  color:var(--md-sys-color-primary) !important;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root {
    --glass: #FFFFFF;
    --glass-strong: #FFFFFF;
    --glass-blur: none;
    --glass-border: var(--md-sys-color-outline-variant);
    --glass-border-color: var(--md-sys-color-outline-variant);
    --glass-shadow: var(--md-elevation-2);
  }
  .dark, [data-theme="dark"] {
    --glass: #17181E;
    --glass-strong: #202128;
    --glass-blur: none;
    --glass-border: var(--md-sys-color-outline-variant);
    --glass-border-color: var(--md-sys-color-outline-variant);
    --glass-shadow: var(--md-elevation-2);
  }
}

/* APPLE DISCIPLINE SUPPORT OVERRIDES */
.page-title {
  font-size:34px !important;
  line-height:40px !important;
  font-weight:700 !important;
  letter-spacing:-0.02em !important;
  color:var(--apple-text, #1D1D1F) !important;
}

.page-sub,
.page-header .text-sm.text-muted {
  font-size:15px !important;
  line-height:21px !important;
  font-weight:400 !important;
  color:var(--apple-gray, #86868B) !important;
}

.section-title,
.card-title,
.table thead th,
.sidebar-section,
.small,
.kv-label,
.section-eyebrow {
  font-size:13px !important;
  line-height:18px !important;
  font-weight:600 !important;
  letter-spacing:.06em !important;
  text-transform:uppercase !important;
  color:var(--apple-gray, #86868B) !important;
}

svg,
[data-lucide],
.btn svg,
.btn [data-lucide],
.nav-item svg,
.nav-item [data-lucide] {
  width:20px !important;
  height:20px !important;
  stroke-width:1.75 !important;
}

.btn-primary,
.cta-primary,
.btn-submit,
.btn-black,
.btn[style*="background:#5D9571"],
button[style*="background:#5D9571"] {
  background:var(--apple-green, #5D9571) !important;
  color:#FFFFFF !important;
  border:0 !important;
  box-shadow:none !important;
}

.btn-secondary,
.btn-ghost,
.cta-secondary,
.filter-tab,
.chip {
  background:var(--apple-control, rgba(120,120,128,.12)) !important;
  color:var(--apple-green-text, #095C34) !important;
  border:0 !important;
  box-shadow:none !important;
}

.btn-text {
  background:transparent !important;
  color:var(--apple-green-text, #095C34) !important;
  border:0 !important;
  box-shadow:none !important;
}

.search-input,
.search-input input,
.form-input,
.form-select,
.form-textarea,
.input,
.field-input,
.date-input,
.time-input,
.week-picker,
.filter-select {
  border:0 !important;
  background:var(--apple-control, rgba(120,120,128,.12)) !important;
  color:var(--apple-text, #1D1D1F) !important;
  box-shadow:none !important;
}

.search-input,
.search-input input {
  padding-left:44px !important;
}

.search-wrap svg,
.search-wrap [data-lucide],
.search-input svg {
  color:var(--apple-gray, #86868B) !important;
}

.badge,
.status,
.status-booked,
.status-completed,
.status-confirmed,
.status-done,
.status-pending,
.status-no_show,
.status-cancelled,
.org-badge,
.mutedchip {
  background:rgba(120,120,128,.10) !important;
  color:var(--apple-gray-2, #6E6E73) !important;
  border:0 !important;
  box-shadow:none !important;
}

.kpi-value,
.card-value,
.stat-mini .stat-val {
  font-weight:700 !important;
  letter-spacing:-0.02em !important;
  font-variant-numeric:tabular-nums !important;
  font-feature-settings:"tnum" 1 !important;
}

/* FINAL COLOR PASS — iOS system palette, color only where it carries interaction/state */
a,
.btn-text,
.btn-ghost,
.cta-secondary,
.btn-outlined-sm {
  color: var(--apple-green-text, #095C34) !important;
}

.btn-primary,
.cta-primary,
.btn-submit,
.btn-black,
.progress-linear-fill,
.setup-progress-fill,
input[type="checkbox"]:checked,
.btn[style*="background:#5D9571"],
button[style*="background:#5D9571"],
.btn[style*="background:#5D9571"],
button[style*="background:#5D9571"] {
  background: var(--apple-green, #5D9571) !important;
  color: #FFFFFF !important;
  border-color: transparent !important;
}

.nav-item.active,
a.nav-item.active,
.chip.selected,
.filter-tab.active,
.tab-btn.active,
.tab.active,
.auth-tab.active {
  color: var(--apple-green-text, #095C34) !important;
  border-color: var(--apple-green, #5D9571) !important;
}

.nav-item.active,
a.nav-item.active,
.chip.selected,
.filter-tab.active {
  background: color-mix(in srgb, var(--apple-green, #5D9571) 12%, transparent) !important;
}

.dark .nav-item.active,
.dark a.nav-item.active,
.dark .chip.selected,
.dark .filter-tab.active,
[data-theme="dark"] .nav-item.active,
[data-theme="dark"] a.nav-item.active,
[data-theme="dark"] .chip.selected,
[data-theme="dark"] .filter-tab.active {
  color: var(--apple-green, #7BCC98) !important;
  background: color-mix(in srgb, var(--apple-green, #7BCC98) 18%, transparent) !important;
}

.section-eyebrow,
.card-title,
.label,
.form-label,
.field-label,
.kpi-label,
.stat-mini .stat-label,
.table thead th,
.sidebar-section,
.quick-section-label {
  color: var(--apple-gray, #86868B) !important;
}

.kpi-label svg,
.kpi-label [data-lucide],
.shortcut-icon,
.shortcut-icon svg,
.shortcut-icon [data-lucide],
.feature-icon,
.feature-icon svg,
.feature-icon [data-lucide],
.step-icon,
.step-icon svg,
.step-icon [data-lucide],
.section-icon,
.section-icon svg,
.section-icon [data-lucide],
.mockup-stat-num,
.stat-mini.green .stat-val,
.kpi-delta,
.kpi-delta.positive,
.kpi-delta.negative {
  color: var(--apple-gray-2, #6E6E73) !important;
}

.shortcut-icon,
.feature-icon,
.step-icon,
.section-icon,
.onboarding-step .step-num {
  background: var(--apple-control, rgba(120,120,128,.12)) !important;
  border-color: var(--apple-separator, rgba(60,60,67,.29)) !important;
}

.badge,
.status,
.status-booked,
.status-completed,
.status-confirmed,
.status-done,
.status-pending,
.status-no_show,
.status-cancelled,
.org-badge,
.mutedchip,
.status-chip {
  background: var(--apple-control, rgba(120,120,128,.12)) !important;
  color: var(--apple-gray-2, #6E6E73) !important;
  border-color: transparent !important;
}

.badge-green::before,
.badge-ok::before,
.badge-done::before,
.badge-paid::before,
.status-completed::before,
.status-done::before,
.status-chip.success::before {
  background: #5D9571 !important;
}

.badge-blue::before,
.badge-booked::before,
.status-booked::before {
  background: #4E9EFA !important;
}

.badge-purple::before,
.badge-confirmed::before,
.status-confirmed::before {
  background: #5D9571 !important;
}

.badge-yellow::before,
.badge-pending::before,
.badge-noshow::before,
.status-pending::before,
.status-no_show::before {
  background: #FFAE42 !important;
}

.badge-red::before,
.badge-cancelled::before,
.badge-overdue::before,
.status-cancelled::before,
.status-chip.error::before {
  background: #FF3B30 !important;
}

.unread-dot,
.notification-badge,
.notif-badge,
.alert-badge {
  background: #FF3B30 !important;
  color: #FFFFFF !important;
}

body {
  background:
    radial-gradient(circle at 12% 0%, rgba(93,149,113,.075), transparent 34rem),
    radial-gradient(circle at 86% 12%, rgba(78,158,250,.035), transparent 36rem),
    radial-gradient(circle at 48% 88%, rgba(93,149,113,.055), transparent 40rem),
    var(--md-sys-color-background) !important;
}

.dark body,
[data-theme="dark"] body {
  background:
    radial-gradient(circle at 14% 0%, rgba(123,204,152,.060), transparent 32rem),
    radial-gradient(circle at 88% 12%, rgba(39,147,255,.035), transparent 34rem),
    radial-gradient(circle at 48% 90%, rgba(123,204,152,.045), transparent 38rem),
    #000000 !important;
}

/* CITERI F1 LOCK — final light-only Apple system cascade. */
:root,
.dark,
[data-theme="dark"] {
  color-scheme: light !important;
  --apple-text: #1d1d1f;
  --apple-gray: #86868b;
  --apple-gray-2: #6e6e73;
  --apple-separator: rgba(60,60,67,.18);
  --apple-control: rgba(118,118,128,.12);
  --apple-control-hover: rgba(118,118,128,.18);
  --apple-green: #5D9571;
  --apple-green-text: #095C34;
  --apple-link: #095C34;
  --md-sys-color-primary: #5D9571;
  --md-sys-color-on-primary: #ffffff;
  --md-sys-color-primary-container: rgba(93,149,113,.12);
  --md-sys-color-on-primary-container: #095C34;
  --md-sys-color-background: #f5f5f7;
  --md-sys-color-on-background: #1d1d1f;
  --md-sys-color-surface: #ffffff;
  --md-sys-color-on-surface: #1d1d1f;
  --md-sys-color-surface-container: rgba(118,118,128,.10);
  --md-sys-color-surface-container-high: rgba(118,118,128,.14);
  --md-sys-color-surface-container-highest: rgba(118,118,128,.18);
  --md-sys-color-on-surface-variant: #6e6e73;
  --md-sys-color-outline: #86868b;
  --md-sys-color-outline-variant: rgba(60,60,67,.18);
  --md-ref-typeface-brand: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", 'Inter Tight', system-ui, sans-serif;
  --md-ref-typeface-plain: -apple-system, BlinkMacSystemFont, "SF Pro Text", 'Inter Tight', system-ui, sans-serif;
  --md-motion-spring-standard: cubic-bezier(.2, .8, .2, 1);
  --md-motion-spring-enter: cubic-bezier(.16, 1, .3, 1);
  --md-motion-spring-bounce: cubic-bezier(.18, .89, .32, 1.18);
  --md-motion-standard: cubic-bezier(.2, .8, .2, 1);
  --bg: #f5f5f7;
  --surface: rgba(255,255,255,.72);
  --t1: #1d1d1f;
  --t2: #6e6e73;
  --t3: #86868b;
  --accent: #5D9571;
  --accent-hover: #005846;
  --accent-bg: rgba(93,149,113,.12);
  --border: rgba(60,60,67,.18);
  --green: #5D9571;
  --green-bg: rgba(93,149,113,.12);
  --red: #ff3b30;
  --yellow: #ff9f0a;
  --blue: #007aff;
  --purple: #6e6e73;
  --glass: rgba(255,255,255,.58);
  --glass-strong: rgba(255,255,255,.76);
  --glass-blur: blur(28px) saturate(180%);
  --glass-card-blur: blur(22px) saturate(170%);
  --glass-border-color: rgba(60,60,67,.12);
  --glass-shadow: 0 1px 1px rgba(0,0,0,.03), 0 18px 50px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.72);
  --focus-glow: 0 0 0 4px rgba(93,149,113,.16);
}

body,
.dark body,
[data-theme="dark"] body {
  font-family: var(--md-ref-typeface-plain) !important;
  font-optical-sizing: auto;
  background:
    radial-gradient(circle at 14% -8%, rgba(93,149,113,.08), transparent 34rem),
    radial-gradient(circle at 88% 4%, rgba(0,122,255,.045), transparent 32rem),
    #f5f5f7 !important;
  color: #1d1d1f !important;
}

.page-title,
h1 {
  letter-spacing: -.035em !important;
  line-height: 1.06 !important;
  font-weight: 700 !important;
  font-variation-settings: "wght" 700 !important;
}

h2 { letter-spacing: -.025em !important; }
h3 { letter-spacing: -.016em !important; }
p, .text-muted, .text-faint, .page-sub, .card-sub, .form-hint { line-height: 1.55 !important; }

.sidebar {
  background: rgba(255,255,255,.62) !important;
  backdrop-filter: blur(30px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(30px) saturate(180%) !important;
  border-right: 1px solid rgba(60,60,67,.12) !important;
  box-shadow: 1px 0 0 rgba(255,255,255,.58), 18px 0 48px rgba(0,0,0,.055) !important;
}

.nav-item,
a.nav-item {
  height: 44px !important;
  margin: 2px 10px !important;
  padding: 0 12px !important;
  border-radius: 14px !important;
  gap: 10px !important;
  color: #545458 !important;
  transition: background 140ms var(--md-motion-standard), color 140ms var(--md-motion-standard), transform 120ms var(--md-motion-spring-bounce), box-shadow 180ms var(--md-motion-standard) !important;
}

.nav-icon-wrap {
  width: 28px !important;
  height: 28px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 9px !important;
  color: #1d1d1f !important;
  flex: 0 0 auto !important;
}

.nav-item.active,
a.nav-item.active {
  background: rgba(93,149,113,.105) !important;
  color: #1d1d1f !important;
  box-shadow: inset 0 0 0 1px rgba(93,149,113,.08) !important;
}

.nav-item.active .nav-icon-wrap,
a.nav-item.active .nav-icon-wrap {
  color: #5D9571 !important;
  background: rgba(93,149,113,.12) !important;
}

.card,
.card-elevated,
.kpi-card,
.table-wrap,
.onboarding-card,
.public-site-card,
.modal-box,
.drawer,
dialog {
  background: rgba(255,255,255,.74) !important;
  backdrop-filter: blur(22px) saturate(170%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(170%) !important;
  border: 1px solid rgba(60,60,67,.11) !important;
  border-radius: 22px !important;
  box-shadow: 0 1px 1px rgba(0,0,0,.025), 0 18px 48px rgba(0,0,0,.065), inset 0 1px 0 rgba(255,255,255,.72) !important;
}

.btn,
.copy-btn,
.chip,
.filter-tab {
  border-radius: 9999px !important;
  transition: background 140ms var(--md-motion-standard), color 140ms var(--md-motion-standard), transform 120ms var(--md-motion-spring-bounce), box-shadow 180ms var(--md-motion-standard) !important;
}

.btn:active,
.copy-btn:active,
.nav-item:active,
.chip:active,
.filter-tab:active,
.shortcut-item:active,
.template-btn:active,
.onboarding-step:active,
.ios-row:active {
  transform: scale(.97) !important;
  transition-duration: 80ms !important;
}

.btn-primary,
.copy-btn,
.cta-primary,
.btn-submit {
  background: linear-gradient(180deg, #6258D8, #5D9571) !important;
  color: #ffffff !important;
  border: 0 !important;
  box-shadow: 0 10px 24px rgba(93,149,113,.20) !important;
}

.btn-secondary,
.btn-ghost,
.btn-text,
.chip,
.filter-tab {
  background: rgba(118,118,128,.12) !important;
  color: #095C34 !important;
  border: 0 !important;
  box-shadow: none !important;
}

.form-input,
.form-select,
.form-textarea,
.input,
.search-input,
.field-input,
.date-input,
.time-input,
.week-picker,
.filter-select,
input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]),
select,
textarea {
  min-height: 42px !important;
  border-radius: 13px !important;
  background: rgba(118,118,128,.10) !important;
  border: 1px solid transparent !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.52) !important;
  color: #1d1d1f !important;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus,
.input:focus,
.search-input:focus,
.field-input:focus,
.date-input:focus,
.time-input:focus,
.week-picker:focus,
.filter-select:focus,
input:focus,
select:focus,
textarea:focus {
  background: rgba(255,255,255,.82) !important;
  border-color: rgba(93,149,113,.30) !important;
  box-shadow: var(--focus-glow), inset 0 1px 0 rgba(255,255,255,.72) !important;
}

.modal-overlay,
.drawer-backdrop {
  background: rgba(10,10,15,.24) !important;
  backdrop-filter: blur(12px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(140%) !important;
}

@media (prefers-reduced-transparency: reduce) {
  :root,
  .dark,
  [data-theme="dark"] {
    --glass: #ffffff;
    --glass-strong: #ffffff;
    --glass-blur: none;
    --glass-card-blur: none;
  }
  .sidebar,
  .card,
  .kpi-card,
  .modal-box,
  .drawer {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: #ffffff !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition-duration: .001ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  .btn:active,
  .copy-btn:active,
  .nav-item:active,
  .chip:active,
  .filter-tab:active,
  .shortcut-item:active,
  .template-btn:active,
  .onboarding-step:active,
  .ios-row:active {
    transform: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.citeri-salon-ui .sidebar,
  .citeri-shell-backdrop,
  .citeri-shell-mobile-toggle {
    transition: none !important;
  }
}

/* ── PWA negocio · navegación de una mano ───────────────────────
   La aplicación instalada arranca en Agenda. En móvil los módulos no se
   esconden dentro del dashboard: esta barra es la navegación primaria y el
   menú lateral queda reservado para las tareas menos frecuentes. */
@media (max-width: 900px) {
  body.citeri-salon-ui .main-content {
    padding-bottom: calc(112px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .citeri-mobile-tabbar {
    position: fixed;
    z-index: 1001;
    left: 12px;
    right: 12px;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    min-height: 62px;
    padding: 5px 7px;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 2px;
    border: 1px solid rgba(255,255,255,.7);
    border-radius: 22px;
    background: rgba(255,255,255,.78);
    -webkit-backdrop-filter: blur(22px) saturate(165%);
    backdrop-filter: blur(22px) saturate(165%);
    box-shadow: 0 8px 30px rgba(29,29,31,.14), inset 0 1px 0 rgba(255,255,255,.8);
  }
  .citeri-mobile-tabbar a {
    min-width: 0;
    min-height: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    border-radius: 16px;
    color: var(--apple-gray-2, #6e6e73);
    text-decoration: none;
    font: 600 10px/1 var(--md-ref-typeface-plain, system-ui, sans-serif);
    letter-spacing: -.01em;
    transition: transform 120ms ease-out, background 160ms ease, color 160ms ease;
  }
  .citeri-mobile-tabbar a svg,
  .citeri-mobile-tabbar a > span:first-child svg { width: 20px; height: 20px; }
  .citeri-mobile-tabbar a.active { color: var(--apple-green-text, #095c34); background: rgba(93,149,113,.15); }
  .citeri-mobile-tabbar a:active { transform: scale(.94); background: rgba(93,149,113,.11); }
  .citeri-mobile-tabbar a:focus-visible { outline: 2px solid var(--apple-link, #095c34); outline-offset: 2px; }

  .citeri-mobile-fab {
    position: fixed;
    right: 20px;
    bottom: calc(84px + env(safe-area-inset-bottom, 0px));
    z-index: 1000;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 17px;
    border-radius: 999px;
    background: var(--apple-green, #5D9571);
    color: white;
    box-shadow: 0 8px 20px rgba(9,92,52,.28);
    text-decoration: none;
    font: 650 13px/1 var(--md-ref-typeface-plain, system-ui, sans-serif);
    transition: transform 120ms ease-out, box-shadow 160ms ease;
  }
  .citeri-mobile-fab svg { width: 19px; height: 19px; }
  .citeri-mobile-fab:active { transform: scale(.96); box-shadow: 0 4px 10px rgba(9,92,52,.24); }
}

@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .citeri-mobile-tabbar { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; border-color: rgba(29,29,31,.25); }
}

@media (prefers-reduced-motion: reduce) {
  .citeri-mobile-tabbar a, .citeri-mobile-fab { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════
   CITERI F1 — Apple-inspired light system foundation
   Keep selector/API compatibility; this final cascade defines the shipped skin.
   ═══════════════════════════════════════════════════════════════ */
:root,
.dark,
[data-theme="dark"] {
  color-scheme: light;
  --apple-text: #1d1d1f;
  --apple-gray: #86868b;
  --apple-gray-2: #6e6e73;
  --apple-separator: rgba(60,60,67,.18);
  --apple-control: rgba(118,118,128,.12);
  --apple-control-hover: rgba(118,118,128,.18);
  --apple-green: #5D9571;
  --apple-green-text: #095C34;
  --apple-link: #095C34;
  --md-sys-color-primary: #5D9571;
  --md-sys-color-on-primary: #ffffff;
  --md-sys-color-primary-container: rgba(93,149,113,.12);
  --md-sys-color-on-primary-container: #095C34;
  --md-sys-color-secondary: #86868b;
  --md-sys-color-on-secondary: #ffffff;
  --md-sys-color-tertiary: #4E9EFA;
  --md-sys-color-error: #ff3b30;
  --md-sys-color-background: #f5f5f7;
  --md-sys-color-on-background: #1d1d1f;
  --md-sys-color-surface: #ffffff;
  --md-sys-color-on-surface: #1d1d1f;
  --md-sys-color-surface-variant: rgba(118,118,128,.12);
  --md-sys-color-on-surface-variant: #6e6e73;
  --md-sys-color-outline: #86868b;
  --md-sys-color-outline-variant: rgba(60,60,67,.18);
  --md-sys-color-scrim: #000000;
  --md-sys-color-inverse-surface: #1d1d1f;
  --md-sys-color-inverse-on-surface: #ffffff;
  --md-sys-color-surface-dim: #eeeeef;
  --md-sys-color-surface-bright: #ffffff;
  --md-sys-color-surface-container-lowest: #ffffff;
  --md-sys-color-surface-container-low: rgba(255,255,255,.72);
  --md-sys-color-surface-container: rgba(118,118,128,.10);
  --md-sys-color-surface-container-high: rgba(118,118,128,.14);
  --md-sys-color-surface-container-highest: rgba(118,118,128,.18);
  --md-ref-typeface-brand: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", 'Inter Tight', system-ui, sans-serif;
  --md-ref-typeface-plain: -apple-system, BlinkMacSystemFont, "SF Pro Text", 'Inter Tight', system-ui, sans-serif;
  --md-shape-extra-small: 12px;
  --md-shape-small: 14px;
  --md-shape-medium: 16px;
  --md-shape-large: 18px;
  --md-shape-extra-large: 22px;
  --md-shape-extra-extra-large: 28px;
  --md-elevation-1: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.06);
  --md-elevation-2: 0 2px 6px rgba(0,0,0,.05), 0 16px 42px rgba(0,0,0,.08);
  --md-elevation-3: 0 8px 20px rgba(0,0,0,.07), 0 28px 72px rgba(0,0,0,.10);
  --md-elevation-4: 0 12px 28px rgba(0,0,0,.08), 0 38px 96px rgba(0,0,0,.12);
  --md-elevation-5: 0 16px 36px rgba(0,0,0,.10), 0 46px 120px rgba(0,0,0,.14);
  --md-motion-spring-standard: cubic-bezier(.2, .8, .2, 1);
  --md-motion-spring-enter: cubic-bezier(.16, 1, .3, 1);
  --md-motion-spring-bounce: cubic-bezier(.18, .89, .32, 1.18);
  --md-motion-standard: cubic-bezier(.2, .8, .2, 1);
  --md-duration-short: 160ms;
  --md-duration-medium: 260ms;
  --md-duration-long: 420ms;
  --bg: #f5f5f7;
  --surface: rgba(255,255,255,.72);
  --t1: #1d1d1f;
  --t2: #6e6e73;
  --t3: #86868b;
  --accent: #5D9571;
  --accent-hover: #005846;
  --accent-bg: rgba(93,149,113,.12);
  --border: rgba(60,60,67,.18);
  --green: #5D9571;
  --green-bg: rgba(93,149,113,.12);
  --red: #ff3b30;
  --red-bg: rgba(255,59,48,.12);
  --yellow: #ff9f0a;
  --yellow-bg: rgba(255,159,10,.14);
  --blue: #007aff;
  --blue-bg: rgba(0,122,255,.12);
  --purple: #6e6e73;
  --purple-bg: rgba(118,118,128,.12);
  --shadow-xs: var(--md-elevation-1);
  --shadow-sm: var(--md-elevation-1);
  --shadow: var(--md-elevation-2);
  --shadow-md: var(--md-elevation-3);
  --shadow-lg: var(--md-elevation-4);
  --r-xs: 12px;
  --r-sm: 14px;
  --r: 16px;
  --r-lg: 18px;
  --r-xl: 22px;
  --r-2xl: 28px;
  --sp-xs: 4px;
  --sp-sm: 8px;
  --sp: 16px;
  --sp-md: 24px;
  --sp-lg: 32px;
  --sp-xl: 48px;
  --glass: rgba(255,255,255,.58);
  --glass-strong: rgba(255,255,255,.76);
  --glass-blur: blur(28px) saturate(180%);
  --glass-card-blur: blur(22px) saturate(170%);
  --glass-border: rgba(255,255,255,.62);
  --glass-border-color: rgba(60,60,67,.12);
  --glass-shadow: 0 1px 1px rgba(0,0,0,.03), 0 18px 50px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.72);
  --glass-scrim: rgba(245,245,247,.72);
  --focus-glow: 0 0 0 4px rgba(93,149,113,.16);
}

body,
.dark body,
[data-theme="dark"] body {
  font-family: var(--md-ref-typeface-plain) !important;
  font-optical-sizing: auto;
  line-height: 1.55;
  letter-spacing: 0;
  background:
    radial-gradient(circle at 14% -8%, rgba(93,149,113,.08), transparent 34rem),
    radial-gradient(circle at 88% 4%, rgba(0,122,255,.045), transparent 32rem),
    #f5f5f7 !important;
  color: #1d1d1f !important;
}

h1, .page-title {
  font-size: clamp(2rem, 3vw, 2.75rem) !important;
  line-height: 1.06 !important;
  letter-spacing: -.035em !important;
  font-weight: 700 !important;
  font-variation-settings: "wght" 700 !important;
}

h2 { letter-spacing: -.025em !important; line-height: 1.14 !important; }
h3 { letter-spacing: -.016em !important; line-height: 1.2 !important; }
p, .text-muted, .text-faint, .page-sub, .card-sub, .form-hint { line-height: 1.55 !important; }

.app-layout,
.main-content {
  background: transparent !important;
}

.main-content {
  padding: 40px 48px 56px !important;
}

.sidebar {
  background: rgba(255,255,255,.62) !important;
  backdrop-filter: blur(30px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(30px) saturate(180%) !important;
  border-right: 1px solid rgba(60,60,67,.12) !important;
  box-shadow: 1px 0 0 rgba(255,255,255,.58), 18px 0 48px rgba(0,0,0,.055) !important;
}

.sidebar-brand {
  padding: 18px 22px 18px !important;
}

.sidebar-brand .brand-icon {
  width: 40px !important;
  height: 40px !important;
  border-radius: 13px !important;
  background: rgba(255,255,255,.74) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.74), 0 8px 22px rgba(0,0,0,.07) !important;
}

.sidebar-brand .brand-name {
  letter-spacing: -.018em !important;
}

.citeri-shell-nav {
  padding: 2px 0 12px;
}

.citeri-shell-group {
  display: block;
}

.citeri-shell-group-toggle {
  width: calc(100% - 20px);
  margin: 12px 10px 4px;
  padding: 10px 12px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: #86868b;
  font-size: 11px;
  line-height: 14px;
  letter-spacing: .06em;
  font-weight: 700;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
  transition: background 140ms var(--md-motion-standard), color 140ms var(--md-motion-standard);
}

.citeri-shell-group-toggle:focus-visible {
  outline: 2px solid var(--primary, #0071e3);
  outline-offset: 2px;
}

.citeri-shell-group-label {
  min-width: 0;
}

.citeri-shell-group-chevron {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: #8a8a8e;
  transition: transform 180ms var(--md-motion-standard);
}

.citeri-shell-group[data-open="true"] .citeri-shell-group-chevron {
  transform: rotate(180deg);
}

.citeri-shell-group-items {
  display: block;
}

.citeri-shell-group[data-open="false"] .citeri-shell-group-items {
  display: none;
}

.sidebar-section {
  padding: 18px 24px 7px !important;
  color: #86868b !important;
  font-size: 11px !important;
  line-height: 14px !important;
  letter-spacing: .06em !important;
  font-weight: 700 !important;
}

.nav-item,
a.nav-item {
  height: 44px !important;
  margin: 2px 10px !important;
  padding: 0 12px !important;
  border-radius: 14px !important;
  gap: 10px !important;
  color: #545458 !important;
  font-size: 14px !important;
  letter-spacing: 0 !important;
  transition: background 140ms var(--md-motion-standard), color 140ms var(--md-motion-standard), transform 140ms var(--md-motion-spring-bounce), box-shadow 180ms var(--md-motion-standard) !important;
}

.nav-item:active,
a.nav-item:active,
.btn:active,
.fab:active,
.chip:active,
.filter-tab:active,
.shortcut-item:active,
.template-btn:active,
.onboarding-step:active,
.ios-row:active {
  transform: scale(.97) !important;
  transition-duration: 80ms !important;
}

.nav-icon-wrap {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  color: #1d1d1f;
  flex: 0 0 auto;
}

.nav-item.active,
a.nav-item.active {
  background: rgba(93,149,113,.105) !important;
  color: #1d1d1f !important;
  box-shadow: inset 0 0 0 1px rgba(93,149,113,.08) !important;
}

.nav-item.active .nav-icon-wrap,
a.nav-item.active .nav-icon-wrap {
  width: 28px !important;
  height: 28px !important;
  color: #5D9571 !important;
  background: rgba(93,149,113,.12) !important;
  border-radius: 9px !important;
}

.card,
.card-elevated,
.kpi-card,
.table-wrap,
.onboarding-card,
.public-site-card,
.modal-box,
.drawer,
dialog {
  background: rgba(255,255,255,.74) !important;
  backdrop-filter: blur(22px) saturate(170%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(170%) !important;
  border: 1px solid rgba(60,60,67,.11) !important;
  border-radius: 22px !important;
  box-shadow: 0 1px 1px rgba(0,0,0,.025), 0 18px 48px rgba(0,0,0,.065), inset 0 1px 0 rgba(255,255,255,.72) !important;
}

.card,
.kpi-card,
.onboarding-card {
  padding: 24px !important;
}

.btn,
.copy-btn,
.chip,
.filter-tab {
  min-height: 40px !important;
  height: 40px;
  border-radius: 9999px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  transition: background 140ms var(--md-motion-standard), color 140ms var(--md-motion-standard), transform 120ms var(--md-motion-spring-bounce), box-shadow 180ms var(--md-motion-standard) !important;
}

.btn-primary,
.copy-btn,
.cta-primary,
.btn-submit {
  background: linear-gradient(180deg, #6258D8, #5D9571) !important;
  color: #ffffff !important;
  border: 0 !important;
  box-shadow: 0 10px 24px rgba(93,149,113,.20) !important;
}

.btn-secondary,
.btn-ghost,
.btn-text,
.chip,
.filter-tab {
  background: rgba(118,118,128,.12) !important;
  color: #095C34 !important;
  border: 0 !important;
  box-shadow: none !important;
}

.btn-danger {
  background: rgba(255,59,48,.12) !important;
  color: #c22a22 !important;
}

.form-input,
.form-select,
.form-textarea,
.input,
.search-input,
.field-input,
.date-input,
.time-input,
.week-picker,
.filter-select,
input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]),
select,
textarea {
  min-height: 42px !important;
  border-radius: 13px !important;
  background: rgba(118,118,128,.10) !important;
  border: 1px solid transparent !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.52) !important;
  color: #1d1d1f !important;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus,
.input:focus,
.search-input:focus,
.field-input:focus,
.date-input:focus,
.time-input:focus,
.week-picker:focus,
.filter-select:focus,
input:focus,
select:focus,
textarea:focus {
  background: rgba(255,255,255,.82) !important;
  border-color: rgba(93,149,113,.30) !important;
  box-shadow: var(--focus-glow), inset 0 1px 0 rgba(255,255,255,.72) !important;
}

.kpi-value,
.card-value,
.stat-mini .stat-val {
  letter-spacing: -.035em !important;
  font-variant-numeric: tabular-nums !important;
  font-feature-settings: "tnum" 1 !important;
}

.kpi-label,
.card-title,
.section-title,
.table thead th,
.stat-mini .stat-label,
.label,
.form-label {
  color: #86868b !important;
  letter-spacing: .045em !important;
  font-weight: 650 !important;
}

.table-wrap {
  padding: 0 !important;
  overflow: hidden !important;
}

.table tbody tr,
.appt-item,
.ios-row,
.onboarding-step {
  transition: background 120ms var(--md-motion-standard), transform 100ms var(--md-motion-spring-bounce) !important;
}

.badge,
.status,
.status-booked,
.status-completed,
.status-confirmed,
.status-done,
.status-pending,
.status-no_show,
.status-cancelled,
.org-badge,
.mutedchip,
.status-chip {
  min-height: 24px !important;
  border-radius: 9999px !important;
  background: rgba(118,118,128,.12) !important;
  color: #6e6e73 !important;
  border: 0 !important;
  box-shadow: none !important;
  font-size: 12px !important;
  letter-spacing: 0 !important;
}

.modal-overlay,
.drawer-backdrop {
  background: rgba(10,10,15,.24) !important;
  backdrop-filter: blur(12px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(140%) !important;
}

.modal-box {
  animation: modal-materialize 260ms var(--md-motion-spring-enter) both !important;
}

@keyframes modal-materialize {
  from { opacity: 0; transform: translateY(12px) scale(.97); filter: blur(2px); }
  to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

.drawer {
  border-radius: 24px 0 0 24px !important;
}

.drawer-head {
  background: rgba(255,255,255,.52) !important;
  border-bottom: 1px solid rgba(60,60,67,.10) !important;
}

.toast {
  border-radius: 9999px !important;
}

@media (prefers-reduced-transparency: reduce) {
  :root,
  .dark,
  [data-theme="dark"] {
    --glass: #ffffff;
    --glass-strong: #ffffff;
    --glass-blur: none;
    --glass-card-blur: none;
  }
  .sidebar,
  .card,
  .kpi-card,
  .modal-box,
  .drawer {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: #ffffff !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition-duration: .001ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  .btn:active,
  .nav-item:active,
  .chip:active,
  .filter-tab:active,
  .shortcut-item:active,
  .template-btn:active,
  .onboarding-step:active,
  .ios-row:active {
    transform: none !important;
  }
  .drawer,
  .modal-box {
    transform: none !important;
  }
}

/* FINAL COLOR PASS — iOS system palette, color only where it carries interaction/state */
a,
.btn-text,
.btn-ghost,
.cta-secondary,
.btn-outlined-sm {
  color: var(--apple-green-text, #095C34) !important;
}

.btn-primary,
.cta-primary,
.btn-submit,
.btn-black,
.progress-linear-fill,
.setup-progress-fill,
input[type="checkbox"]:checked,
.btn[style*="background:#5D9571"],
button[style*="background:#5D9571"],
.btn[style*="background:#5D9571"],
button[style*="background:#5D9571"] {
  background: var(--apple-green, #5D9571) !important;
  color: #FFFFFF !important;
  border-color: transparent !important;
}

.nav-item.active,
a.nav-item.active,
.chip.selected,
.filter-tab.active,
.tab-btn.active,
.tab.active,
.auth-tab.active {
  color: var(--apple-green-text, #095C34) !important;
  border-color: var(--apple-green, #5D9571) !important;
}

.nav-item.active,
a.nav-item.active,
.chip.selected,
.filter-tab.active {
  background: color-mix(in srgb, var(--apple-green, #5D9571) 12%, transparent) !important;
}

.dark .nav-item.active,
.dark a.nav-item.active,
.dark .chip.selected,
.dark .filter-tab.active,
[data-theme="dark"] .nav-item.active,
[data-theme="dark"] a.nav-item.active,
[data-theme="dark"] .chip.selected,
[data-theme="dark"] .filter-tab.active {
  color: var(--apple-green, #7BCC98) !important;
  background: color-mix(in srgb, var(--apple-green, #7BCC98) 18%, transparent) !important;
}

.section-eyebrow,
.card-title,
.label,
.form-label,
.field-label,
.kpi-label,
.stat-mini .stat-label,
.table thead th,
.sidebar-section,
.quick-section-label {
  color: var(--apple-gray, #86868B) !important;
}

.kpi-label svg,
.kpi-label [data-lucide],
.shortcut-icon,
.shortcut-icon svg,
.shortcut-icon [data-lucide],
.feature-icon,
.feature-icon svg,
.feature-icon [data-lucide],
.step-icon,
.step-icon svg,
.step-icon [data-lucide],
.section-icon,
.section-icon svg,
.section-icon [data-lucide],
.mockup-stat-num,
.stat-mini.green .stat-val,
.kpi-delta,
.kpi-delta.positive,
.kpi-delta.negative {
  color: var(--apple-gray-2, #6E6E73) !important;
}

.shortcut-icon,
.feature-icon,
.step-icon,
.section-icon,
.onboarding-step .step-num {
  background: var(--apple-control, rgba(120,120,128,.12)) !important;
  border-color: var(--apple-separator, rgba(60,60,67,.29)) !important;
}

.badge,
.status,
.status-booked,
.status-completed,
.status-confirmed,
.status-done,
.status-pending,
.status-no_show,
.status-cancelled,
.org-badge,
.mutedchip,
.status-chip {
  background: var(--apple-control, rgba(120,120,128,.12)) !important;
  color: var(--apple-gray-2, #6E6E73) !important;
  border-color: transparent !important;
}

.badge-green::before,
.badge-ok::before,
.badge-done::before,
.badge-paid::before,
.status-completed::before,
.status-done::before,
.status-chip.success::before {
  background: #5D9571 !important;
}

.badge-blue::before,
.badge-booked::before,
.status-booked::before {
  background: #4E9EFA !important;
}

.badge-purple::before,
.badge-confirmed::before,
.status-confirmed::before {
  background: #5D9571 !important;
}

.badge-yellow::before,
.badge-pending::before,
.badge-noshow::before,
.status-pending::before,
.status-no_show::before {
  background: #FFAE42 !important;
}

.badge-red::before,
.badge-cancelled::before,
.badge-overdue::before,
.status-cancelled::before,
.status-chip.error::before {
  background: #FF3B30 !important;
}

.unread-dot,
.notification-badge,
.notif-badge,
.alert-badge {
  background: #FF3B30 !important;
  color: #FFFFFF !important;
}

body {
  background:
    radial-gradient(circle at 12% 0%, rgba(93,149,113,.075), transparent 34rem),
    radial-gradient(circle at 86% 12%, rgba(78,158,250,.035), transparent 36rem),
    radial-gradient(circle at 48% 88%, rgba(93,149,113,.055), transparent 40rem),
    var(--md-sys-color-background) !important;
}

.dark body,
[data-theme="dark"] body {
  background:
    radial-gradient(circle at 14% 0%, rgba(123,204,152,.060), transparent 32rem),
    radial-gradient(circle at 88% 12%, rgba(39,147,255,.035), transparent 34rem),
    radial-gradient(circle at 48% 90%, rgba(123,204,152,.045), transparent 38rem),
    #000000 !important;
}

/* ═══════════════════════════════════════════════════════════════
   APPLE DISCIPLINE POLISH — final shared cascade
   ═══════════════════════════════════════════════════════════════ */
:root {
  --apple-text: #1D1D1F;
  --apple-text-dark: #F5F5F7;
  --apple-gray: #86868B;
  --apple-gray-2: #6E6E73;
  --apple-separator: rgba(60,60,67,.29);
  --apple-control: rgba(120,120,128,.12);
  --apple-control-hover: rgba(120,120,128,.16);
  --apple-green: #5D9571;
  --apple-green-text: #095C34;
  --apple-link: #095C34;
  --apple-red: #FF3B30;
  --apple-orange: #FFAE42;
  --apple-blue: #4E9EFA;
  --md-sys-color-primary: #5D9571;
  --md-sys-color-on-primary: #FFFFFF;
  --md-sys-color-primary-container: rgba(93,149,113,.14);
  --md-sys-color-on-primary-container: #095C34;
  --md-sys-color-background: #F2F2F7;
  --md-sys-color-surface: #FFFFFF;
  --md-sys-color-surface-container: rgba(120,120,128,.12);
  --md-sys-color-surface-container-high: rgba(120,120,128,.16);
  --md-sys-color-surface-container-highest: rgba(120,120,128,.20);
  --md-sys-color-outline-variant: rgba(60,60,67,.29);
  --md-sys-color-on-background: #1D1D1F;
  --md-sys-color-on-surface: #1D1D1F;
  --md-sys-color-on-surface-variant: #6E6E73;
  --md-sys-color-outline: #86868B;
  --accent: #5D9571;
  --accent-hover: #5D9571;
  --accent-bg: rgba(93,149,113,.14);
  --green: #5D9571;
  --green-bg: rgba(93,149,113,.14);
  --red: #FF3B30;
  --red-bg: rgba(255,59,48,.12);
  --yellow: #FFAE42;
  --yellow-bg: rgba(255,174,66,.12);
  --blue: #4E9EFA;
  --blue-bg: rgba(78,158,250,.12);
  --purple: #6E6E73;
  --purple-bg: rgba(120,120,128,.12);
  --c-primary: #5D9571;
  --c-danger: #FF3B30;
  --c-success: #5D9571;
  --c-warn: #FFAE42;
  --c-info: #4E9EFA;
  --t1: #1D1D1F;
  --t2: #6E6E73;
  --t3: #86868B;
  --t: 200ms ease-out;
  --focus-glow: 0 0 0 3px rgba(93,149,113,.18);
}

.dark,
[data-theme="dark"] {
  --apple-text: #F5F5F7;
  --apple-gray: #98989D;
  --apple-gray-2: #98989D;
  --apple-separator: rgba(84,84,88,.60);
  --apple-control: rgba(120,120,128,.24);
  --apple-control-hover: rgba(120,120,128,.30);
  --apple-green: #7BCC98;
  --apple-green-text: #7BCC98;
  --apple-link: #7BCC98;
  --apple-red: #FF453A;
  --apple-orange: #FFAE42;
  --apple-blue: #2793FF;
  --md-sys-color-primary: #7BCC98;
  --md-sys-color-on-primary: #04280F;
  --md-sys-color-primary-container: rgba(123,204,152,.22);
  --md-sys-color-on-primary-container: #7BCC98;
  --md-sys-color-background: #000000;
  --md-sys-color-surface: #1C1C1E;
  --md-sys-color-surface-container: #2C2C2E;
  --md-sys-color-surface-container-low: #1C1C1E;
  --md-sys-color-surface-container-high: #2C2C2E;
  --md-sys-color-surface-container-highest: #3A3A3C;
  --md-sys-color-outline-variant: rgba(84,84,88,.60);
  --md-sys-color-on-background: #F5F5F7;
  --md-sys-color-on-surface: #F5F5F7;
  --md-sys-color-on-surface-variant: #98989D;
  --md-sys-color-outline: #98989D;
  --accent: #7BCC98;
  --accent-hover: #7BCC98;
  --accent-bg: rgba(123,204,152,.22);
  --green: #7BCC98;
  --green-bg: rgba(123,204,152,.22);
  --red: #FF453A;
  --red-bg: rgba(255,69,58,.24);
  --yellow: #FFAE42;
  --yellow-bg: rgba(255,174,66,.22);
  --blue: #2793FF;
  --blue-bg: rgba(39,147,255,.22);
  --purple: #98989D;
  --purple-bg: #2C2C2E;
  --c-primary: #7BCC98;
  --c-danger: #FF453A;
  --c-success: #7BCC98;
  --c-warn: #FFAE42;
  --c-info: #2793FF;
  --t1: #F5F5F7;
  --t2: #98989D;
  --t3: #98989D;
  --focus-glow: 0 0 0 3px rgba(123,204,152,.22);
}

html {
  scrollbar-color: rgba(120,120,128,.45) transparent;
  scrollbar-width: thin;
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(120,120,128,.38);
  border: 2px solid transparent;
  border-radius: 999px;
  background-clip: padding-box;
}

body {
  color: var(--apple-text);
  letter-spacing: 0;
}

body,
button,
input,
select,
textarea {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

* {
  transition-timing-function: ease-out;
}

svg,
[data-lucide] {
  width: 20px;
  height: 20px;
  stroke-width: 1.75;
  color: currentColor;
}

p,
.text-muted,
.text-faint,
.page-sub,
.card-sub,
.kpi-meta,
.form-hint,
.table-empty {
  color: var(--apple-gray) !important;
}

h1,
h2,
h3,
h4,
.page-title,
.card-value,
.kpi-value,
.stat-mini .stat-val {
  color: var(--apple-text) !important;
}

.main-content {
  padding: 40px 48px 56px;
}

.page-header,
citeri-page-header.page-header {
  align-items: flex-start;
  margin-bottom: 32px;
}

.page-title {
  font-size: 34px !important;
  line-height: 40px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  font-variation-settings: 'wght' 700 !important;
}

.page-sub,
.page-header .text-sm.text-muted {
  margin-top: 4px !important;
  font-size: 15px !important;
  line-height: 21px !important;
  font-weight: 400 !important;
}

.section-title,
.card-title,
.label,
.table thead th,
.stat-mini .stat-label,
.sidebar-section,
.small,
.kv-label,
.pricing-eyebrow,
.section-eyebrow,
.day-header .day-name,
.quick-section-label {
  font-size: 13px !important;
  line-height: 18px !important;
  font-weight: 600 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  color: var(--apple-gray) !important;
  font-variation-settings: 'wght' 600 !important;
}

.section-title,
.card-title {
  margin: 0 0 8px !important;
}

.card h3:not(.modal-title):not(.drawer-title):not(.section-title),
.panel h3,
.table-wrap h3 {
  font-size: 13px !important;
  line-height: 18px !important;
  font-weight: 600 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  color: var(--apple-gray) !important;
  margin-bottom: 8px !important;
}

.kpi-value,
.card-value,
.stat-mini .stat-val,
.pricing-price {
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.kpi-label,
.mockup-stat-lbl {
  font-size: 13px !important;
  line-height: 18px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  color: var(--apple-gray) !important;
  text-transform: none !important;
}

.sidebar-section {
  padding: 18px 24px 8px !important;
}

.nav-item,
a.nav-item {
  height: 52px !important;
  color: var(--apple-gray-2) !important;
  transition: background 200ms ease-out, color 200ms ease-out !important;
}

.nav-item svg,
a.nav-item svg,
.nav-item [data-lucide],
a.nav-item [data-lucide] {
  width: 20px !important;
  height: 20px !important;
  color: var(--apple-gray-2);
}

.nav-item.active,
a.nav-item.active {
  background: rgba(93,149,113,.12) !important;
  color: var(--apple-green-text) !important;
}

.nav-item.active svg,
a.nav-item.active svg,
.nav-item.active [data-lucide],
a.nav-item.active [data-lucide] {
  color: var(--apple-green) !important;
}

.card,
.card-elevated,
.kpi-card,
.table-wrap,
.onboarding-card,
.filters-card,
.calendar-wrapper,
.conversation-list,
.chat-panel,
.login-card,
.pricing-card,
.hero-mockup,
.device,
.slide,
.mini-card,
.loyalty-form,
.ops-card,
.appt-card,
.client-result,
.emp-col,
.preview-box,
.block-card,
.email-preview,
.confirm-preview,
.automation-row,
.endpoint,
.sell-preview,
.svc-check,
.wizard-card,
.service-card,
.location-card,
.modal-content,
.modal-box,
dialog {
  border-radius: 26px !important;
  padding: 24px;
  transition: background 200ms ease-out, box-shadow 200ms ease-out, border-color 200ms ease-out !important;
}

.card-sm,
.mini-card {
  padding: 20px !important;
}

.kpi-grid,
.grid,
.left-col,
.right-col,
.dashboard-grid,
.features-grid,
.steps-grid {
  gap: 16px;
}

.dashboard-grid,
.lp-section,
.section,
.card + .card,
.table-wrap + .card {
  margin-top: 32px;
}

.btn,
.cta-primary,
.cta-secondary,
.btn-submit,
.btn-on-container,
.copy-btn,
.filter-tab,
.chip {
  min-height: 44px;
  border-radius: 999px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  transition: background 200ms ease-out, color 200ms ease-out, box-shadow 200ms ease-out, transform 200ms ease-out !important;
}

.btn-primary,
.cta-primary,
.btn-submit,
.btn-black,
.btn[style*="background:#5D9571"],
button[style*="background:#5D9571"] {
  background: var(--apple-green) !important;
  color: #FFFFFF !important;
  border: 0 !important;
  box-shadow: none !important;
}

.btn-secondary,
.btn-ghost,
.cta-secondary,
.chip,
.filter-tab,
.btn:not(.btn-primary):not(.btn-danger):not(.btn-danger-filled):not(.btn-black):not(.btn-text) {
  background: var(--apple-control) !important;
  color: var(--apple-green-text) !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.btn-text {
  background: transparent !important;
  color: var(--apple-green-text) !important;
  border: 0 !important;
  box-shadow: none !important;
}

.btn-danger {
  background: var(--apple-control) !important;
  color: var(--md-sys-color-error) !important;
  border: 0 !important;
  box-shadow: none !important;
}

.search-wrap,
.search-input {
  position: relative;
}

.search-wrap {
  max-width: 420px;
}

.search-wrap svg,
.search-wrap [data-lucide],
.search-input svg {
  left: 14px !important;
  width: 18px !important;
  height: 18px !important;
  color: var(--apple-gray) !important;
}

.search-input,
.search-input input,
.form-input,
.form-select,
.form-textarea,
.input,
.field-input,
.date-input,
.time-input,
.week-picker,
.filter-select,
input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]),
select,
textarea {
  min-height: 44px !important;
  border-radius: 999px !important;
  border: 0 !important;
  background: var(--apple-control) !important;
  color: var(--apple-text) !important;
  box-shadow: none !important;
  outline: none !important;
}

.form-textarea,
textarea {
  border-radius: 18px !important;
}

.search-input,
.search-input input {
  background: var(--apple-control) !important;
  padding-left: 44px !important;
}

.search-input::placeholder,
.search-input input::placeholder,
.form-input::placeholder,
.input::placeholder,
.field-input::placeholder,
textarea::placeholder {
  color: var(--apple-gray) !important;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus,
.input:focus,
.search-input:focus,
.search-input input:focus,
.field-input:focus,
.date-input:focus,
.time-input:focus,
.week-picker:focus,
.filter-select:focus,
input:focus,
select:focus,
textarea:focus {
  box-shadow: var(--focus-glow) !important;
  background: color-mix(in srgb, var(--apple-control) 74%, #FFFFFF 26%) !important;
}

input[type="checkbox"] {
  appearance: none;
  width: 48px;
  height: 28px;
  border-radius: 999px;
  background: rgba(120,120,128,.22);
  border: 0;
  display: inline-grid;
  align-items: center;
  padding: 2px;
  cursor: pointer;
  vertical-align: middle;
  transition: background 200ms ease-out;
  flex: 0 0 auto;
}

input[type="checkbox"]::before {
  content: "";
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 1px 3px rgba(0,0,0,.22);
  transform: translateX(0);
  transition: transform 200ms ease-out;
}

input[type="checkbox"]:checked {
  background: #5D9571;
}

input[type="checkbox"]:checked::before {
  transform: translateX(20px);
}

.conversation-list,
.appt-list,
.onboarding-steps,
.list {
  overflow: hidden;
}

/* Un botón dentro de una fila flex no debe encogerse hasta recortar su etiqueta
   ("Emparejar nueva T…", "Nueva clav…"): que se encoja el texto de al lado. */
.page-header .btn,
.between .btn,
.card-head .btn,
.card-header .btn,
.toolbar .btn,
.actions .btn,
/* Muchas cabeceras de tarjeta usan style="display:flex" inline, sin clase */
[style*="display:flex"] > .btn {
  flex: 0 0 auto;
  white-space: nowrap;
}

.table-wrap {
  padding: 0 !important;
  /* Antes era overflow:hidden y una tabla más ancha que su tarjeta se recortaba
     sin remedio (se comían la última columna). Con scroll horizontal la tabla
     sigue siendo usable; overflow-y:hidden conserva las esquinas redondeadas. */
  overflow-x: auto;
  overflow-y: hidden;
}

.table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

.table thead th {
  background: transparent !important;
  padding: 14px 20px 8px !important;
  border-bottom: 0 !important;
}

.table tbody tr,
.conversation-item,
.appt-item,
.list-item,
.kv-row,
.onboarding-step,
.ios-row {
  min-height: 54px;
  position: relative;
  transition: background 200ms ease-out !important;
}

.table tbody td {
  height: 54px;
  padding: 12px 20px !important;
  border-bottom: 0 !important;
  color: var(--apple-text) !important;
  vertical-align: middle;
}

.table tbody tr:not(:last-child)::after,
.conversation-item:not(:last-child)::after,
.appt-item:not(:last-child)::after,
.list-item:not(:last-child)::after,
.kv-row:not(:last-child)::after,
.onboarding-step:not(:last-child)::after,
.ios-row:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--apple-separator);
  transform: scaleY(.5);
  transform-origin: bottom;
  pointer-events: none;
}

.ios-row-nav {
  padding-right: 28px;
}

/* En una <tr> el pseudo-elemento genera una celda anónima extra que desplaza
   todas las columnas una posición y descuadra la tabla: sin chevron ahí. */
tr.ios-row-nav::before {
  content: none !important;
}

.ios-row-nav::before {
  content: "›";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #C7C7CC;
  font-size: 24px;
  line-height: 1;
  font-weight: 400;
  pointer-events: none;
}

.badge,
.status,
.status-booked,
.status-completed,
.status-confirmed,
.status-done,
.status-pending,
.status-no_show,
.status-cancelled,
.org-badge,
.mutedchip {
  gap: 7px !important;
  min-height: 26px;
  padding: 4px 10px !important;
  border: 0 !important;
  background: rgba(120,120,128,.10) !important;
  color: var(--apple-gray-2) !important;
  box-shadow: none !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
}

.badge::before,
.status::before,
.status-booked::before,
.status-completed::before,
.status-confirmed::before,
.status-done::before,
.status-pending::before,
.status-no_show::before,
.status-cancelled::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--apple-gray);
  flex: 0 0 auto;
}

.badge-green::before,
.badge-ok::before,
.badge-done::before,
.badge-paid::before,
.status-completed::before,
.status-done::before {
  background: #5D9571;
}

.badge-blue::before,
.badge-booked::before,
.status-booked::before {
  background: #4E9EFA;
}

.badge-purple::before,
.badge-confirmed::before,
.status-confirmed::before {
  background: var(--apple-green);
}

.badge-yellow::before,
.badge-pending::before,
.badge-noshow::before,
.status-pending::before,
.status-no_show::before {
  background: #FFAE42;
}

.badge-red::before,
.badge-cancelled::before,
.badge-overdue::before,
.status-cancelled::before {
  background: #FF3B30;
}

.kpi-card::before {
  display: none;
}

.kpi-label {
  padding-left: 0 !important;
}

.kpi-label svg,
.kpi-label [data-lucide] {
  width: 18px !important;
  height: 18px !important;
  color: var(--apple-gray) !important;
}

.tab-btn,
.tab,
.auth-tab {
  transition: background 200ms ease-out, color 200ms ease-out, border-color 200ms ease-out !important;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 1px solid var(--apple-green) !important;
  outline-offset: 3px !important;
  box-shadow: var(--focus-glow) !important;
}

/* Landing: apple.com cadence, large centered hero and quiet sections */
body:has(.hero) {
  background: #F2F2F7 !important;
}

.navbar {
  box-shadow: none !important;
}

.hero {
  min-height: auto !important;
  padding: clamp(72px, 10vw, 132px) 24px clamp(44px, 7vw, 84px) !important;
  align-items: flex-start !important;
}

.hero-inner {
  max-width: 1080px !important;
}

.hero h1 {
  font-size: clamp(56px, 8.6vw, 112px) !important;
  line-height: .94 !important;
  letter-spacing: -0.055em !important;
  font-weight: 700 !important;
  color: #1D1D1F !important;
}

.hero p {
  max-width: 760px !important;
  color: #6E6E73 !important;
}

.hero-mockup {
  max-width: 1040px !important;
  margin-top: 18px !important;
  box-shadow: 0 18px 54px rgba(0,0,0,.10) !important;
}

.lp-section {
  padding: clamp(96px, 11vw, 152px) 24px !important;
}

.lp-section-inner {
  max-width: 1180px !important;
}

.section-headline {
  color: #1D1D1F !important;
  letter-spacing: -0.045em !important;
}

.footer {
  background: #F2F2F7 !important;
  border-top: 1px solid rgba(60,60,67,.29) !important;
  padding: 34px 24px !important;
}

.footer-inner {
  align-items: flex-start !important;
  text-align: left !important;
  gap: 14px !important;
}

.footer-links a,
.footer-copy,
.footer-tagline {
  color: #6E6E73 !important;
}

/* Login: typography-only refinement on top of existing glass layout */
.login-card .brand-title {
  color: #1D1D1F !important;
  letter-spacing: -0.02em !important;
  font-weight: 700 !important;
}

.login-card .brand-sub,
.field-label,
.remember-row,
.status-chip {
  color: #86868B !important;
}

.login-card .panel-title {
  letter-spacing: -0.045em !important;
  font-weight: 700 !important;
}

@media (max-width: 900px) {
  .main-content {
    padding: 24px 18px 116px !important;
  }

  .page-header,
  citeri-page-header.page-header {
    flex-direction: column;
    gap: 16px;
  }

  .page-header .citeri-ph-actions,
  .page-header > .btn,
  .page-header > a.btn {
    width: 100%;
  }

  .page-title {
    font-size: 34px !important;
    line-height: 40px !important;
  }

  .hero h1 {
    font-size: clamp(46px, 14vw, 64px) !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   CITERI PRODUCT SHELL V2
   Hierarchical navigation, wayfinding and global utilities.
   ═══════════════════════════════════════════════════════════════ */
body.citeri-salon-ui {
  --sidebar-w: 252px;
  --shell-purple-soft: #eeecff;
  --shell-purple-border: #d8d4ff;
  --shell-ease-out: cubic-bezier(.23, 1, .32, 1);
  font-optical-sizing: auto;
}

body.citeri-salon-ui.citeri-nav-compact {
  --sidebar-w: 72px;
}

body.citeri-salon-ui .citeri-sidebar-brand-row {
  min-height: 64px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px;
  padding: 0 10px 0 12px;
  border-bottom: 1px solid var(--salon-border);
}

body.citeri-salon-ui .citeri-sidebar-brand-row .sidebar-brand {
  min-width: 0;
  min-height: 0;
  padding: 0 !important;
  border: 0 !important;
}

body.citeri-salon-ui .citeri-sidebar-actions {
  display: flex;
  align-items: center;
  gap: 2px;
}

body.citeri-salon-ui .citeri-sidebar-actions button,
body.citeri-salon-ui .citeri-notification-panel header button {
  position: relative;
  width: 30px;
  height: 30px;
  min-height: 30px !important;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #71717a;
  cursor: pointer;
  transition: background-color 140ms ease, color 140ms ease, transform 100ms var(--shell-ease-out);
}

@media (hover: hover) and (pointer: fine) {
  body.citeri-salon-ui .citeri-sidebar-actions button:hover,
  body.citeri-salon-ui .citeri-notification-panel header button:hover {
    background: #ececee;
    color: var(--salon-foreground);
  }
}

body.citeri-salon-ui .citeri-sidebar-actions button:active,
body.citeri-salon-ui .citeri-notification-panel header button:active {
  transform: scale(.97);
}

body.citeri-salon-ui .citeri-sidebar-actions svg,
body.citeri-salon-ui .citeri-notification-panel header button svg {
  width: 16px;
  height: 16px;
}

body.citeri-salon-ui .citeri-notification-dot {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 6px;
  height: 6px;
  border: 1.5px solid var(--salon-sidebar);
  border-radius: 50%;
  background: var(--salon-primary);
}

body.citeri-salon-ui .citeri-location-label {
  margin-top: 8px;
}

body.citeri-salon-ui .citeri-org-card select + .citeri-org-label {
  display: block;
}

body.citeri-salon-ui .citeri-shell-search {
  width: calc(100% - 16px);
  height: 34px;
  min-height: 34px;
  margin: 8px 8px 2px;
  padding: 0 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--salon-border);
  border-radius: 7px;
  background: #ffffff;
  color: #71717a;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  text-align: left;
  transition: border-color 140ms ease, background-color 140ms ease, color 140ms ease, transform 100ms var(--shell-ease-out);
}

body.citeri-salon-ui .citeri-shell-search > span:nth-child(2) {
  min-width: 0;
  flex: 1;
}

body.citeri-salon-ui .citeri-shell-search svg {
  width: 15px;
  height: 15px;
}

body.citeri-salon-ui .citeri-shell-search kbd,
body.citeri-salon-ui .citeri-command kbd {
  min-width: 22px;
  padding: 2px 5px;
  border: 1px solid #d4d4d8;
  border-bottom-color: #c4c4c8;
  border-radius: 5px;
  background: #fafafa;
  color: #71717a;
  box-shadow: 0 1px 0 #e4e4e7;
  font: 500 10px/1.35 ui-monospace, SFMono-Regular, Menlo, monospace;
  text-align: center;
}

@media (hover: hover) and (pointer: fine) {
  body.citeri-salon-ui .citeri-shell-search:hover {
    border-color: #d4d4d8;
    background: #fafafa;
    color: #3f3f46;
  }
}

body.citeri-salon-ui .citeri-shell-search:active {
  transform: scale(.98);
}

body.citeri-salon-ui .citeri-shell-nav {
  padding: 5px 8px 8px;
}

body.citeri-salon-ui .citeri-nav-group {
  display: block;
}

body.citeri-salon-ui .citeri-nav-parent-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 27px;
  align-items: center;
  gap: 1px;
}

body.citeri-salon-ui .citeri-nav-group:not(:has(.citeri-nav-expand)) .citeri-nav-parent-row {
  grid-template-columns: minmax(0, 1fr);
}

body.citeri-salon-ui .citeri-nav-parent-row .nav-item {
  min-width: 0;
}

body.citeri-salon-ui .citeri-nav-expand {
  width: 27px;
  height: 31px;
  min-height: 31px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #a1a1aa;
  cursor: pointer;
  transition: background-color 140ms ease, color 140ms ease, transform 160ms var(--shell-ease-out);
}

body.citeri-salon-ui .citeri-nav-expand svg {
  width: 13px;
  height: 13px;
  transition: transform 160ms var(--shell-ease-out);
}

body.citeri-salon-ui .citeri-nav-group.is-open .citeri-nav-expand svg {
  transform: rotate(90deg);
}

@media (hover: hover) and (pointer: fine) {
  body.citeri-salon-ui .citeri-nav-expand:hover {
    background: #ececee;
    color: #52525b;
  }
}

/* Acordeón sin salto: grid-template-rows 0fr→1fr anima la altura sin medirla
   por JS, y el envoltorio interno (overflow:hidden, min-height:0) es lo que
   de verdad se recorta durante la transición. display queda siempre en
   grid (nunca none), así opacity/grid-template-rows pueden animar. */
body.citeri-salon-ui .citeri-nav-children {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 200ms var(--shell-ease-out), opacity 160ms ease;
}

body.citeri-salon-ui .citeri-nav-group.is-open .citeri-nav-children {
  grid-template-rows: 1fr;
  opacity: 1;
}

body.citeri-salon-ui .citeri-nav-children-inner {
  min-height: 0;
  overflow: hidden;
  display: grid;
  gap: 1px;
  padding: 2px 0 4px 29px;
}

body.citeri-salon-ui .citeri-nav-child {
  position: relative;
  min-width: 0;
  min-height: 29px;
  padding: 6px 8px 6px 13px;
  display: flex;
  align-items: center;
  border-radius: 6px;
  color: #71717a;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  text-decoration: none;
  transition: background-color 140ms ease, color 140ms ease;
}

body.citeri-salon-ui .citeri-nav-child::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #d4d4d8;
  transform: translateY(-50%);
}

@media (hover: hover) and (pointer: fine) {
  body.citeri-salon-ui .citeri-nav-child:hover {
    background: #f0f0f1;
    color: var(--salon-foreground);
  }
}

body.citeri-salon-ui .citeri-nav-child.active {
  background: var(--shell-purple-soft);
  color: #095C34;
  font-weight: 650;
}

body.citeri-salon-ui .citeri-nav-child.active::before {
  background: var(--salon-primary);
}

body.citeri-salon-ui .sidebar-footer {
  padding-top: 5px !important;
  border-top: 1px solid var(--salon-border) !important;
}

body.citeri-salon-ui .citeri-breadcrumbs {
  min-height: 20px;
  margin: 0 0 8px;
  display: flex;
  align-items: center;
  gap: 4px;
  color: #a1a1aa;
  font-size: 11px;
  line-height: 1.4;
}

body.citeri-salon-ui .citeri-breadcrumbs a {
  color: #71717a;
  text-decoration: none;
}

body.citeri-salon-ui .citeri-breadcrumbs svg {
  width: 12px;
  height: 12px;
}

/* Segmented control real (como los de iOS): pastillas dentro de una pista
   gris, la activa se despega en blanco con sombra propia. Antes era una fila
   de enlaces con línea inferior y colores que dependían de que el body ya
   tuviera la clase `citeri-salon-ui` (la añade citeri-shell.js por JS, así
   que en el primer pintado — o si algo impedía que se añadiera — los
   enlaces sin `.active` caían en el azul genérico `a{color:var(--blue)}` de
   citeri-panel.css). El selector ya no depende de esa clase del body, y el
   color se fuerza con !important para no volver a heredarlo por accidente. */
.citeri-section-tabs {
  position: sticky;
  top: 0;
  z-index: 30;
  margin: -7px 0 20px;
  padding: 4px;
  display: flex;
  align-items: center;
  gap: 2px;
  overflow-x: auto;
  background: rgba(118,118,128,.10);
  border: 1px solid rgba(60,60,67,.08);
  border-radius: 14px;
  scrollbar-width: none;
}

.citeri-section-tabs::-webkit-scrollbar {
  display: none;
}

.citeri-section-tabs a {
  min-height: 34px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  border-radius: 10px;
  color: #6e6e73 !important;
  font-size: 13px;
  font-weight: 550;
  text-decoration: none !important;
  white-space: nowrap;
  transition: background-color 140ms ease, color 140ms ease, box-shadow 140ms ease, transform 100ms var(--shell-ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .citeri-section-tabs a:not(.active):hover {
    background: rgba(118,118,128,.16);
    color: var(--salon-foreground, #1d1d1f) !important;
  }
}

.citeri-section-tabs a:active {
  transform: scale(.97);
}

.citeri-section-tabs a.active {
  background: #ffffff;
  color: #1d1d1f !important;
  font-weight: 700;
  box-shadow: 0 1px 1px rgba(0,0,0,.04), 0 1px 4px rgba(0,0,0,.10);
}

body.citeri-salon-ui.citeri-nav-compact .citeri-sidebar-brand-row {
  grid-template-columns: 34px 26px;
  gap: 2px;
  padding: 0 5px;
}

body.citeri-salon-ui.citeri-nav-compact .sidebar-brand .brand-name,
body.citeri-salon-ui.citeri-nav-compact .citeri-sidebar-actions [data-shell-notifications],
body.citeri-salon-ui.citeri-nav-compact .citeri-shell-org,
body.citeri-salon-ui.citeri-nav-compact .citeri-shell-search > span:nth-child(2),
body.citeri-salon-ui.citeri-nav-compact .citeri-shell-search kbd,
body.citeri-salon-ui.citeri-nav-compact .nav-item-label,
body.citeri-salon-ui.citeri-nav-compact .citeri-nav-badge,
body.citeri-salon-ui.citeri-nav-compact .citeri-nav-expand,
body.citeri-salon-ui.citeri-nav-compact .citeri-nav-children,
body.citeri-salon-ui.citeri-nav-compact .citeri-shell-summary {
  display: none !important;
}

body.citeri-salon-ui.citeri-nav-compact .sidebar-brand {
  width: 34px !important;
}

body.citeri-salon-ui.citeri-nav-compact .citeri-shell-search {
  width: 36px;
  margin: 8px auto 3px;
  padding: 0;
  justify-content: center;
}

body.citeri-salon-ui.citeri-nav-compact .citeri-nav-parent-row {
  grid-template-columns: 1fr;
}

body.citeri-salon-ui.citeri-nav-compact .nav-item,
body.citeri-salon-ui.citeri-nav-compact a.nav-item {
  width: 42px !important;
  margin: 1px auto !important;
  padding: 0 !important;
  justify-content: center !important;
}

body.citeri-salon-ui.citeri-nav-compact .nav-icon-wrap {
  margin: 0 !important;
}

body.citeri-salon-ui.citeri-nav-compact .sidebar-footer {
  padding: 6px !important;
}

.citeri-command-layer,
.citeri-notification-layer {
  position: fixed;
  inset: 0;
  z-index: 1400;
  padding: min(14vh, 120px) 18px 18px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  background: rgba(24,24,27,.42);
}

.citeri-command-layer[hidden],
.citeri-notification-layer[hidden] {
  display: none !important;
}

body.citeri-command-open,
body.citeri-notifications-open {
  overflow: hidden;
}

.citeri-command {
  width: min(620px, 100%);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 24px 70px rgba(24,24,27,.22), 0 2px 10px rgba(24,24,27,.08);
}

.citeri-command-input-wrap {
  height: 58px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--salon-border, #e4e4e7);
}

.citeri-command-input-wrap > svg {
  width: 19px;
  height: 19px;
  flex: 0 0 auto;
  color: #71717a;
}

.citeri-command .citeri-command-input {
  min-height: 0 !important;
  height: 56px !important;
  flex: 1;
  padding: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #18181b !important;
  font-size: 15px !important;
}

.citeri-command-close {
  min-height: 26px;
  padding: 0 7px;
  border: 1px solid #d4d4d8;
  border-radius: 6px;
  background: #fafafa;
  color: #71717a;
  font: 600 10px/1 system-ui, sans-serif;
  cursor: pointer;
}

.citeri-command-results {
  max-height: min(58vh, 500px);
  padding: 8px;
  overflow-y: auto;
}

.citeri-command-group + .citeri-command-group {
  margin-top: 7px;
  padding-top: 7px;
  border-top: 1px solid #f0f0f1;
}

.citeri-command-group > p {
  margin: 0;
  padding: 5px 8px;
  color: #a1a1aa;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.citeri-command-result {
  min-height: 46px;
  padding: 6px 9px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 9px;
  border-radius: 8px;
  color: #3f3f46;
  text-decoration: none;
}

.citeri-command-result.is-active {
  background: var(--shell-purple-soft, #eeecff);
  color: #352d91;
}

.citeri-command-result-icon {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e4e4e7;
  border-radius: 7px;
  background: #ffffff;
  color: #71717a;
}

.citeri-command-result-icon svg,
.citeri-command-result > svg {
  width: 14px;
  height: 14px;
}

.citeri-command-result strong,
.citeri-command-result small {
  display: block;
}

.citeri-command-result strong {
  font-size: 13px;
  font-weight: 650;
}

.citeri-command-result small {
  margin-top: 2px;
  color: #a1a1aa;
  font-size: 10px;
}

.citeri-command-result > svg {
  color: #a1a1aa;
}

.citeri-command-empty,
.citeri-notification-empty {
  min-height: 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #a1a1aa;
  text-align: center;
}

.citeri-command-empty svg,
.citeri-notification-empty svg {
  width: 28px;
  height: 28px;
  margin-bottom: 10px;
}

.citeri-command-empty strong,
.citeri-notification-empty strong {
  color: #3f3f46;
  font-size: 13px;
}

.citeri-command-empty span,
.citeri-notification-empty span {
  margin-top: 3px;
  font-size: 11px;
}

.citeri-command > footer {
  min-height: 36px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  gap: 16px;
  border-top: 1px solid var(--salon-border, #e4e4e7);
  background: #fafafa;
  color: #a1a1aa;
  font-size: 10px;
}

.citeri-command > footer span {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.citeri-notification-layer {
  padding: 0;
  justify-content: flex-end;
  background: rgba(24,24,27,.36);
}

.citeri-notification-panel {
  width: min(390px, 100%);
  height: 100dvh;
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--salon-border, #e4e4e7);
  background: #ffffff;
  box-shadow: -18px 0 50px rgba(24,24,27,.13);
  transform: translateX(0);
  transition: transform 220ms cubic-bezier(.32,.72,0,1);
  @starting-style { transform: translateX(100%); }
}

.citeri-notification-panel > header {
  min-height: 74px;
  padding: 14px 16px 13px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--salon-border, #e4e4e7);
}

.citeri-panel-kicker {
  display: block;
  margin-bottom: 3px;
  color: #a1a1aa;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.citeri-notification-panel h2 {
  margin: 0;
  color: #18181b;
  font-size: 17px;
  line-height: 1.2;
  letter-spacing: -.02em;
}

.citeri-notification-list {
  flex: 1;
  padding: 10px;
  overflow-y: auto;
}

.citeri-notification-item {
  min-height: 50px;
  padding: 7px 8px;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) 14px;
  align-items: center;
  gap: 8px;
  border-radius: 9px;
  color: #3f3f46;
  text-decoration: none;
  transition: background-color 140ms ease, transform 100ms var(--shell-ease-out, ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .citeri-notification-item:hover { background: #f4f4f5; }
}

.citeri-notification-item:active { transform: scale(.99); }

.citeri-notification-item > span:first-child {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  background: #f4f4f5;
  color: #71717a;
}

.citeri-notification-item.is-warning > span:first-child { background: #fff7ed; color: #c2410c; }
.citeri-notification-item.is-info > span:first-child { background: var(--shell-purple-soft, #eeecff); color: #5D9571; }
.citeri-notification-item.is-success > span:first-child { background: #ecfdf5; color: #047857; }

.citeri-notification-item svg { width: 13px; height: 13px; }
.citeri-notification-item > svg { color: #a1a1aa; }
.citeri-notification-item strong,
.citeri-notification-item small { display: block; }
.citeri-notification-item strong { color: #3f3f46; font-size: 11.5px; font-weight: 650; line-height: 1.3; }
.citeri-notification-item small { margin-top: 1px; color: #a1a1aa; font-size: 9.5px; line-height: 1.3; }

.citeri-notification-panel > footer {
  padding: 12px 16px;
  border-top: 1px solid var(--salon-border, #e4e4e7);
}

.citeri-notification-panel > footer button {
  width: 100%;
  min-height: 36px;
  border: 1px solid var(--salon-border, #e4e4e7);
  border-radius: 7px;
  background: #ffffff;
  color: #52525b;
  font: 600 12px/1 system-ui, sans-serif;
  cursor: pointer;
}

.citeri-nav-tooltip {
  position: fixed;
  z-index: 1600;
  padding: 5px 8px;
  border-radius: 6px;
  background: #18181b;
  color: #ffffff;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  pointer-events: none;
}

@media (max-width: 900px) {
  body.citeri-salon-ui,
  body.citeri-salon-ui.citeri-nav-compact {
    --sidebar-w: 280px;
  }

  body.citeri-salon-ui .citeri-sidebar-actions [data-shell-compact] {
    display: none;
  }

  body.citeri-salon-ui.citeri-nav-compact .citeri-sidebar-brand-row {
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 0 10px 0 12px;
  }

  body.citeri-salon-ui.citeri-nav-compact .sidebar-brand {
    width: auto !important;
  }

  body.citeri-salon-ui.citeri-nav-compact .sidebar-brand .brand-name,
  body.citeri-salon-ui.citeri-nav-compact .citeri-sidebar-actions [data-shell-notifications],
  body.citeri-salon-ui.citeri-nav-compact .citeri-shell-org,
  body.citeri-salon-ui.citeri-nav-compact .citeri-shell-search > span:nth-child(2),
  body.citeri-salon-ui.citeri-nav-compact .citeri-shell-search kbd,
  body.citeri-salon-ui.citeri-nav-compact .nav-item-label,
  body.citeri-salon-ui.citeri-nav-compact .citeri-nav-badge,
  body.citeri-salon-ui.citeri-nav-compact .citeri-nav-expand,
  body.citeri-salon-ui.citeri-nav-compact .citeri-shell-summary {
    display: revert !important;
  }

  body.citeri-salon-ui.citeri-nav-compact .citeri-shell-org,
  body.citeri-salon-ui.citeri-nav-compact .citeri-shell-summary {
    display: grid !important;
  }

  body.citeri-salon-ui.citeri-nav-compact .citeri-sidebar-actions [data-shell-notifications],
  body.citeri-salon-ui.citeri-nav-compact .citeri-nav-expand {
    display: inline-flex !important;
  }

  body.citeri-salon-ui.citeri-nav-compact .citeri-shell-search {
    width: calc(100% - 16px);
    margin: 8px 8px 2px;
    padding: 0 8px;
    justify-content: flex-start;
  }

  body.citeri-salon-ui.citeri-nav-compact .citeri-nav-parent-row {
    grid-template-columns: minmax(0, 1fr) 27px;
  }

  body.citeri-salon-ui.citeri-nav-compact .nav-item,
  body.citeri-salon-ui.citeri-nav-compact a.nav-item {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 8px !important;
    justify-content: flex-start !important;
  }

  body.citeri-salon-ui.citeri-nav-compact .citeri-nav-group.is-open .citeri-nav-children {
    display: grid !important;
  }

  .citeri-command-layer {
    padding: 72px 10px 10px;
  }

  .citeri-command {
    border-radius: 11px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .citeri-notification-panel {
    transition: opacity 160ms ease;
    transform: none !important;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .citeri-section-tabs {
    background: #ececef;
  }

  .citeri-command-layer,
  .citeri-notification-layer {
    background: rgba(24,24,27,.68);
  }
}

@media (prefers-reduced-transparency: reduce) {
  :root {
    --glass: #FFFFFF;
    --glass-strong: #FFFFFF;
    --glass-blur: none;
  }
  .dark, [data-theme="dark"] {
    --glass: #17181E;
    --glass-strong: #202128;
    --glass-blur: none;
  }
  .modal,
  .modal-overlay,
  .drawer-backdrop {
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    scroll-behavior:auto !important;
    transition-duration:.001ms !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   LIQUID GLASS V2 — Apple-leaning final cascade
   ═══════════════════════════════════════════════════════════════ */
html { background:var(--md-sys-color-background); }

.dark body,
[data-theme="dark"] body {
  background:
    radial-gradient(circle at 14% 0%, rgba(123,204,152,.070), transparent 32rem),
    radial-gradient(circle at 88% 12%, rgba(39,147,255,.045), transparent 34rem),
    radial-gradient(circle at 48% 90%, rgba(123,204,152,.055), transparent 38rem),
    #000000;
  background-attachment:fixed;
}

body,
button,
input,
select,
textarea {
  font-family:'Inter Tight', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', 'Segoe UI', system-ui, sans-serif !important;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline:1px solid color-mix(in srgb, var(--md-sys-color-primary) 72%, transparent) !important;
  outline-offset:3px;
  box-shadow:var(--focus-glow) !important;
}

.app-layout,
.main-content {
  background:transparent !important;
}

.header,
.topbar,
.navbar,
.sidebar,
.bottom-nav,
.mobile-nav,
.drawer-head,
.modal-header,
.filters-card,
.chat-form {
  background:var(--glass) !important;
  backdrop-filter:var(--glass-blur) !important;
  -webkit-backdrop-filter:var(--glass-blur) !important;
  border-color:var(--glass-border-color) !important;
  box-shadow:var(--glass-shadow) !important;
}

.header,
.topbar,
.navbar {
  position:sticky;
  top:0;
  z-index:100;
}

.app-layout > .sidebar {
  background:var(--glass) !important;
  backdrop-filter:var(--glass-blur) !important;
  -webkit-backdrop-filter:var(--glass-blur) !important;
  border-right:1px solid var(--glass-border-color) !important;
  box-shadow:var(--glass-shadow) !important;
}

.card,
.card-elevated,
.kpi-card,
.table-wrap,
.onboarding-card,
.filters-card,
.calendar-wrapper,
.conversation-list,
.chat-panel,
.login-card,
.pricing-card,
.hero-mockup,
.device,
.slide,
.mini-card,
.loyalty-form,
.list-item,
.ops-card,
.appt-card,
.client-result,
.emp-col,
.preview-box,
.block-card,
.email-preview,
.confirm-preview,
.automation-row,
.endpoint,
.sell-preview,
.svc-check,
.wizard-card,
.service-card,
.location-card,
.modal-content,
.modal-box,
dialog {
  background:var(--glass-strong) !important;
  backdrop-filter:var(--glass-card-blur) !important;
  -webkit-backdrop-filter:var(--glass-card-blur) !important;
  border:1px solid var(--glass-border-color) !important;
  border-radius:28px !important;
  box-shadow:var(--glass-shadow) !important;
}

.btn,
.cta-primary,
.cta-secondary,
.btn-submit,
.btn-on-container,
.copy-btn,
.filter-tab,
.chip {
  border-radius:9999px !important;
}

.btn-primary,
.cta-primary,
.btn-submit {
  background:linear-gradient(180deg, color-mix(in srgb, var(--md-sys-color-primary) 88%, #ffffff 12%), var(--md-sys-color-primary)) !important;
  color:var(--md-sys-color-on-primary) !important;
  border:0 !important;
  box-shadow:0 12px 32px color-mix(in srgb, var(--md-sys-color-primary) 24%, transparent) !important;
}

.btn-secondary,
.btn-ghost,
.cta-secondary,
.btn-text,
.chip,
.filter-tab {
  background:rgba(255,255,255,.42) !important;
  backdrop-filter:blur(18px) saturate(170%);
  -webkit-backdrop-filter:blur(18px) saturate(170%);
  border:1px solid var(--glass-border-color) !important;
  color:var(--md-sys-color-on-surface) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55);
}

.dark .btn-secondary,
.dark .btn-ghost,
.dark .cta-secondary,
.dark .btn-text,
.dark .chip,
.dark .filter-tab,
[data-theme="dark"] .btn-secondary,
[data-theme="dark"] .btn-ghost,
[data-theme="dark"] .cta-secondary,
[data-theme="dark"] .btn-text,
[data-theme="dark"] .chip,
[data-theme="dark"] .filter-tab {
  background:rgba(28,28,32,.46) !important;
}

.form-input,
.form-select,
.form-textarea,
.input,
.search-input,
.search-input input,
.field-input,
.date-input,
.time-input,
.week-picker,
.filter-select,
.editor-tab,
.var-btn,
.mini-btn {
  background:rgba(255,255,255,.58) !important;
  border:1px solid rgba(0,0,0,.08) !important;
  border-radius:9999px !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.58) !important;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus,
.input:focus,
.search-input:focus,
.search-input input:focus,
.field-input:focus,
.date-input:focus,
.time-input:focus,
.week-picker:focus,
.filter-select:focus {
  border-color:color-mix(in srgb, var(--md-sys-color-primary) 62%, transparent) !important;
  box-shadow:var(--focus-glow), inset 0 1px 0 rgba(255,255,255,.70) !important;
}

.badge,
.status,
.status-booked,
.status-completed,
.status-confirmed,
.status-done,
.status-pending,
.status-no_show,
.status-cancelled,
.org-badge {
  border-radius:9999px !important;
  background:rgba(255,255,255,.42) !important;
  border:1px solid var(--glass-border-color) !important;
  color:var(--md-sys-color-on-surface) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.52);
}

.nav-item.active,
a.nav-item.active,
.chip.selected,
.filter-tab.active {
  background:rgba(93,149,113,.12) !important;
  color:var(--apple-green-text) !important;
  border-color:rgba(93,149,113,.18) !important;
}

.modal,
.modal-overlay,
.drawer-backdrop {
  background:rgba(10,10,15,.24) !important;
  backdrop-filter:blur(12px) saturate(140%) !important;
  -webkit-backdrop-filter:blur(12px) saturate(140%) !important;
}

@media (max-width:900px) {
  .app-layout {
    display:block !important;
    min-height:100vh;
  }

  .main-content {
    margin-left:0 !important;
    padding:24px 18px 116px !important;
    width:100% !important;
    min-height:100vh;
  }

  .app-layout > .sidebar,
  .sidebar {
    position:fixed !important;
    left:12px !important;
    right:12px !important;
    top:auto !important;
    bottom:12px !important;
    width:auto !important;
    height:72px !important;
    min-height:0 !important;
    padding:8px !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    flex-direction:row !important;
    align-items:center !important;
    border:1px solid var(--glass-border-color) !important;
    border-radius:28px !important;
    z-index:300 !important;
    scrollbar-width:none;
  }

  .sidebar::-webkit-scrollbar { display:none; }
  .sidebar-brand,
  .sidebar-section,
  .sidebar-footer,
  .citeri-shell-org {
    display:none !important;
  }

  .citeri-shell-group {
    display: contents !important;
  }

  .citeri-shell-group-toggle,
  .citeri-shell-group-chevron {
    display:none !important;
  }

  .citeri-shell-group-items,
  .citeri-shell-group[data-open="false"] .citeri-shell-group-items {
    display: contents !important;
  }

  .citeri-shell-nav {
    display:flex !important;
    align-items:center !important;
    gap:6px !important;
    width:max-content !important;
    min-width:100%;
  }

  .nav-item,
  a.nav-item {
    width:auto !important;
    min-width:62px !important;
    height:56px !important;
    margin:0 !important;
    padding:0 14px !important;
    flex:0 0 auto !important;
    justify-content:center !important;
    gap:6px !important;
    font-size:.72rem !important;
    border:1px solid transparent !important;
  }

  .nav-item svg,
  a.nav-item svg,
  .nav-item [data-lucide],
  a.nav-item [data-lucide] {
    width:20px !important;
    height:20px !important;
  }

  .nav-item span:not([data-lucide]),
  a.nav-item span:not([data-lucide]) {
    display:none !important;
  }

  .nav-item.active,
  a.nav-item.active {
    background:rgba(255,255,255,.58) !important;
    border-color:rgba(0,0,0,.06) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.60), 0 8px 24px rgba(0,0,0,.08) !important;
  }
}

/* APPLE DISCIPLINE FINAL OVERRIDES — must stay last */
.page-title {
  font-size:34px !important;
  line-height:40px !important;
  font-weight:700 !important;
  letter-spacing:-0.02em !important;
  color:var(--apple-text, #1D1D1F) !important;
}

.page-sub,
.page-header .text-sm.text-muted {
  font-size:15px !important;
  line-height:21px !important;
  font-weight:400 !important;
  color:var(--apple-gray, #86868B) !important;
}

.section-title,
.card-title,
.table thead th,
.sidebar-section,
.small,
.kv-label,
.section-eyebrow {
  font-size:13px !important;
  line-height:18px !important;
  font-weight:600 !important;
  letter-spacing:.06em !important;
  text-transform:uppercase !important;
  color:var(--apple-gray, #86868B) !important;
}

svg,
[data-lucide],
.btn svg,
.btn [data-lucide],
.nav-item svg,
.nav-item [data-lucide] {
  width:20px !important;
  height:20px !important;
  stroke-width:1.75 !important;
}

.btn-primary,
.cta-primary,
.btn-submit,
.btn-black,
.btn[style*="background:#5D9571"],
button[style*="background:#5D9571"] {
  background:var(--apple-green, #5D9571) !important;
  color:#FFFFFF !important;
  border:0 !important;
  box-shadow:none !important;
}

.btn-secondary,
.btn-ghost,
.cta-secondary,
.filter-tab,
.chip {
  background:var(--apple-control, rgba(120,120,128,.12)) !important;
  color:var(--apple-green-text, #095C34) !important;
  border:0 !important;
  box-shadow:none !important;
}

.btn-text {
  background:transparent !important;
  color:var(--apple-green-text, #095C34) !important;
  border:0 !important;
  box-shadow:none !important;
}

.search-input,
.search-input input,
.form-input,
.form-select,
.form-textarea,
.input,
.field-input,
.date-input,
.time-input,
.week-picker,
.filter-select {
  border:0 !important;
  background:var(--apple-control, rgba(120,120,128,.12)) !important;
  color:var(--apple-text, #1D1D1F) !important;
  box-shadow:none !important;
}

.search-input,
.search-input input {
  padding-left:44px !important;
}

.search-wrap svg,
.search-wrap [data-lucide],
.search-input svg {
  color:var(--apple-gray, #86868B) !important;
}

.badge,
.status,
.status-booked,
.status-completed,
.status-confirmed,
.status-done,
.status-pending,
.status-no_show,
.status-cancelled,
.org-badge,
.mutedchip {
  background:rgba(120,120,128,.10) !important;
  color:var(--apple-gray-2, #6E6E73) !important;
  border:0 !important;
  box-shadow:none !important;
}

.kpi-value,
.card-value,
.stat-mini .stat-val {
  font-weight:700 !important;
  letter-spacing:-0.02em !important;
  font-variant-numeric:tabular-nums !important;
  font-feature-settings:"tnum" 1 !important;
}

/* TRUE FINAL COLOR PASS — keep after legacy Apple overrides */
a,
.btn-text,
.btn-ghost,
.cta-secondary,
.btn-outlined-sm {
  color: var(--apple-green-text, #095C34) !important;
}

.btn-primary,
.cta-primary,
.btn-submit,
.btn-black,
.progress-linear-fill,
.setup-progress-fill,
input[type="checkbox"]:checked,
.btn[style*="background:#5D9571"],
button[style*="background:#5D9571"],
.btn[style*="background:#5D9571"],
button[style*="background:#5D9571"] {
  background: var(--apple-green, #5D9571) !important;
  color: #FFFFFF !important;
  border-color: transparent !important;
}

.nav-item.active,
a.nav-item.active,
.chip.selected,
.filter-tab.active,
.tab-btn.active,
.tab.active,
.auth-tab.active {
  color: var(--apple-green-text, #095C34) !important;
  border-color: var(--apple-green, #5D9571) !important;
}

.nav-item.active,
a.nav-item.active,
.chip.selected,
.filter-tab.active {
  background: color-mix(in srgb, var(--apple-green, #5D9571) 12%, transparent) !important;
}

.dark .nav-item.active,
.dark a.nav-item.active,
.dark .chip.selected,
.dark .filter-tab.active,
[data-theme="dark"] .nav-item.active,
[data-theme="dark"] a.nav-item.active,
[data-theme="dark"] .chip.selected,
[data-theme="dark"] .filter-tab.active {
  color: var(--apple-green, #7BCC98) !important;
  background: color-mix(in srgb, var(--apple-green, #7BCC98) 18%, transparent) !important;
}

.section-eyebrow,
.card-title,
.label,
.form-label,
.field-label,
.kpi-label,
.stat-mini .stat-label,
.table thead th,
.sidebar-section,
.quick-section-label {
  color: var(--apple-gray, #86868B) !important;
}

.kpi-label svg,
.kpi-label [data-lucide],
.shortcut-icon,
.shortcut-icon svg,
.shortcut-icon [data-lucide],
.feature-icon,
.feature-icon svg,
.feature-icon [data-lucide],
.step-icon,
.step-icon svg,
.step-icon [data-lucide],
.section-icon,
.section-icon svg,
.section-icon [data-lucide],
.mockup-stat-num,
.stat-mini.green .stat-val,
.kpi-delta,
.kpi-delta.positive,
.kpi-delta.negative {
  color: var(--apple-gray-2, #6E6E73) !important;
}

.shortcut-icon,
.feature-icon,
.step-icon,
.section-icon,
.onboarding-step .step-num {
  background: var(--apple-control, rgba(120,120,128,.12)) !important;
  border-color: var(--apple-separator, rgba(60,60,67,.29)) !important;
}

.badge,
.status,
.status-booked,
.status-completed,
.status-confirmed,
.status-done,
.status-pending,
.status-no_show,
.status-cancelled,
.org-badge,
.mutedchip,
.status-chip {
  background: var(--apple-control, rgba(120,120,128,.12)) !important;
  color: var(--apple-gray-2, #6E6E73) !important;
  border-color: transparent !important;
}

.badge-green::before,
.badge-ok::before,
.badge-done::before,
.badge-paid::before,
.status-completed::before,
.status-done::before,
.status-chip.success::before {
  background: #5D9571 !important;
}

.badge-blue::before,
.badge-booked::before,
.status-booked::before {
  background: #4E9EFA !important;
}

.badge-purple::before,
.badge-confirmed::before,
.status-confirmed::before {
  background: #5D9571 !important;
}

.badge-yellow::before,
.badge-pending::before,
.badge-noshow::before,
.status-pending::before,
.status-no_show::before {
  background: #FFAE42 !important;
}

.badge-red::before,
.badge-cancelled::before,
.badge-overdue::before,
.status-cancelled::before,
.status-chip.error::before {
  background: #FF3B30 !important;
}

.unread-dot,
.notification-badge,
.notif-badge,
.alert-badge {
  background: #FF3B30 !important;
  color: #FFFFFF !important;
}

body {
  background:
    radial-gradient(circle at 12% 0%, rgba(93,149,113,.075), transparent 34rem),
    radial-gradient(circle at 86% 12%, rgba(78,158,250,.035), transparent 36rem),
    radial-gradient(circle at 48% 88%, rgba(93,149,113,.055), transparent 40rem),
    var(--md-sys-color-background) !important;
}

.dark body,
[data-theme="dark"] body {
  background:
    radial-gradient(circle at 14% 0%, rgba(123,204,152,.060), transparent 32rem),
    radial-gradient(circle at 88% 12%, rgba(39,147,255,.035), transparent 34rem),
    radial-gradient(circle at 48% 90%, rgba(123,204,152,.045), transparent 38rem),
    #000000 !important;
}

/* CITERI F1 EOF LOCK — light-only final winner. */
:root,.dark,[data-theme="dark"]{color-scheme:light!important;--apple-text:#1d1d1f;--apple-gray:#86868b;--apple-gray-2:#6e6e73;--apple-control:rgba(118,118,128,.12);--apple-control-hover:rgba(118,118,128,.18);--apple-green:#5D9571;--apple-green-text:#095C34;--apple-link:#095C34;--md-sys-color-primary:#5D9571;--md-sys-color-on-primary:#fff;--md-sys-color-primary-container:rgba(93,149,113,.12);--md-sys-color-on-primary-container:#095C34;--md-sys-color-background:#f5f5f7;--md-sys-color-on-background:#1d1d1f;--md-sys-color-surface:#fff;--md-sys-color-on-surface:#1d1d1f;--md-sys-color-on-surface-variant:#6e6e73;--md-sys-color-outline:#86868b;--md-sys-color-outline-variant:rgba(60,60,67,.18);--md-ref-typeface-brand:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display",'Inter Tight',system-ui,sans-serif;--md-ref-typeface-plain:-apple-system,BlinkMacSystemFont,"SF Pro Text",'Inter Tight',system-ui,sans-serif;--md-motion-spring-standard:cubic-bezier(.2,.8,.2,1);--md-motion-spring-enter:cubic-bezier(.16,1,.3,1);--md-motion-spring-bounce:cubic-bezier(.18,.89,.32,1.18);--glass:rgba(255,255,255,.58);--glass-strong:rgba(255,255,255,.76);--glass-blur:blur(28px) saturate(180%);--glass-card-blur:blur(22px) saturate(170%);--glass-border-color:rgba(60,60,67,.12);--glass-shadow:0 1px 1px rgba(0,0,0,.03),0 18px 50px rgba(0,0,0,.08),inset 0 1px 0 rgba(255,255,255,.72);--focus-glow:0 0 0 4px rgba(93,149,113,.16)}
body,.dark body,[data-theme="dark"] body{font-family:var(--md-ref-typeface-plain)!important;font-optical-sizing:auto;background:radial-gradient(circle at 14% -8%,rgba(93,149,113,.08),transparent 34rem),radial-gradient(circle at 88% 4%,rgba(0,122,255,.045),transparent 32rem),#f5f5f7!important;color:#1d1d1f!important}.page-title,h1{letter-spacing:-.035em!important;line-height:1.06!important;font-weight:700!important;font-variation-settings:"wght" 700!important}h2{letter-spacing:-.025em!important}h3{letter-spacing:-.016em!important}p,.text-muted,.text-faint,.page-sub,.card-sub,.form-hint{line-height:1.55!important}.sidebar{background:rgba(255,255,255,.62)!important;backdrop-filter:blur(30px) saturate(180%)!important;-webkit-backdrop-filter:blur(30px) saturate(180%)!important;border-right:1px solid rgba(60,60,67,.12)!important;box-shadow:1px 0 0 rgba(255,255,255,.58),18px 0 48px rgba(0,0,0,.055)!important}.nav-item,a.nav-item{height:44px!important;margin:2px 10px!important;padding:0 12px!important;border-radius:14px!important;gap:10px!important;color:#545458!important;transition:background 140ms var(--md-motion-standard),color 140ms var(--md-motion-standard),transform 120ms var(--md-motion-spring-bounce),box-shadow 180ms var(--md-motion-standard)!important}.nav-icon-wrap{width:28px!important;height:28px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;border-radius:9px!important;color:#6e6e73!important;flex:0 0 auto!important}.nav-item.active,a.nav-item.active{background:rgba(93,149,113,.105)!important;color:#1d1d1f!important;box-shadow:inset 0 0 0 1px rgba(93,149,113,.08)!important}.nav-item.active .nav-icon-wrap,a.nav-item.active .nav-icon-wrap{color:#5D9571!important;background:rgba(93,149,113,.12)!important}.card,.card-elevated,.kpi-card,.table-wrap,.onboarding-card,.public-site-card,.modal-box,.drawer,dialog{background:rgba(255,255,255,.74)!important;backdrop-filter:blur(22px) saturate(170%)!important;-webkit-backdrop-filter:blur(22px) saturate(170%)!important;border:1px solid rgba(60,60,67,.11)!important;border-radius:22px!important;box-shadow:0 1px 1px rgba(0,0,0,.025),0 18px 48px rgba(0,0,0,.065),inset 0 1px 0 rgba(255,255,255,.72)!important}.btn,.copy-btn,.chip,.filter-tab{border-radius:9999px!important;transition:background 140ms var(--md-motion-standard),color 140ms var(--md-motion-standard),transform 120ms var(--md-motion-spring-bounce),box-shadow 180ms var(--md-motion-standard)!important}.btn:active,.copy-btn:active,.nav-item:active,.chip:active,.filter-tab:active,.shortcut-item:active,.template-btn:active,.onboarding-step:active,.ios-row:active{transform:scale(.97)!important;transition-duration:80ms!important}.btn-primary,.copy-btn,.cta-primary,.btn-submit{background:linear-gradient(180deg,#6258D8,#5D9571)!important;color:#fff!important;border:0!important;box-shadow:0 10px 24px rgba(93,149,113,.20)!important}.btn-secondary,.btn-ghost,.btn-text,.chip,.filter-tab{background:rgba(118,118,128,.12)!important;color:#095C34!important;border:0!important;box-shadow:none!important}.form-input,.form-select,.form-textarea,.input,.search-input,.field-input,.date-input,.time-input,.week-picker,.filter-select,input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]),select,textarea{min-height:42px!important;border-radius:13px!important;background:rgba(118,118,128,.10)!important;border:1px solid transparent!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.52)!important;color:#1d1d1f!important}.form-input:focus,.form-select:focus,.form-textarea:focus,.input:focus,.search-input:focus,.field-input:focus,.date-input:focus,.time-input:focus,.week-picker:focus,.filter-select:focus,input:focus,select:focus,textarea:focus{background:rgba(255,255,255,.82)!important;border-color:rgba(93,149,113,.30)!important;box-shadow:var(--focus-glow),inset 0 1px 0 rgba(255,255,255,.72)!important}.modal-overlay,.drawer-backdrop{background:rgba(10,10,15,.24)!important;backdrop-filter:blur(12px) saturate(140%)!important;-webkit-backdrop-filter:blur(12px) saturate(140%)!important}@media (prefers-reduced-transparency:reduce){:root,.dark,[data-theme="dark"]{--glass:#fff;--glass-strong:#fff;--glass-blur:none;--glass-card-blur:none}.sidebar,.card,.kpi-card,.modal-box,.drawer{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:#fff!important}}@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition-duration:.001ms!important;transition-delay:0ms!important;scroll-behavior:auto!important}.btn:active,.copy-btn:active,.nav-item:active,.chip:active,.filter-tab:active,.shortcut-item:active,.template-btn:active,.onboarding-step:active,.ios-row:active{transform:none!important}}

/* CITERI DESIGN PRESCRIPTIONS — canonical shadow/radius/button layer. */
:root,
.dark,
[data-theme="dark"] {
  --md-shape-card: 18px;
  --md-shape-control: 12px;
  --md-elevation-hairline: 0 0 0 1px rgba(60,60,67,.11), 0 8px 24px rgba(0,0,0,.055);
  --md-elevation-medium: 0 0 0 1px rgba(60,60,67,.12), 0 18px 48px rgba(0,0,0,.085);
  --md-elevation-modal: 0 0 0 1px rgba(60,60,67,.14), 0 28px 76px rgba(0,0,0,.14);
  --md-elevation-1: var(--md-elevation-hairline);
  --md-elevation-2: var(--md-elevation-medium);
  --md-elevation-3: var(--md-elevation-modal);
  --md-elevation-4: var(--md-elevation-modal);
  --md-elevation-5: var(--md-elevation-modal);
  --shadow-xs: var(--md-elevation-hairline);
  --shadow-sm: var(--md-elevation-hairline);
  --shadow: var(--md-elevation-medium);
  --shadow-md: var(--md-elevation-medium);
  --shadow-lg: var(--md-elevation-modal);
  --glass-shadow: var(--md-elevation-hairline);
  --focus-glow: 0 0 0 3px color-mix(in srgb, var(--md-sys-color-primary) 25%, transparent);
}

.card,
.card-sm,
.card-lg,
.card-elevated,
.kpi-card,
.table-wrap,
.onboarding-card,
.public-site-card,
.modal-box,
.drawer,
dialog,
.login-card,
.right-panel,
.biz-profile,
.booking-flow-card,
.summary-card,
.status-chip {
  border-radius: var(--md-shape-card) !important;
  box-shadow: var(--md-elevation-hairline) !important;
}

.modal-box,
dialog {
  box-shadow: var(--md-elevation-modal) !important;
}

.btn,
.btn-primary,
.btn-submit,
.copy-btn,
.cta-primary,
.template-btn,
.shortcut-item,
.filter-tab,
.chip,
.form-input,
.form-select,
.form-textarea,
.input,
.search-input,
.field-input,
.date-input,
.time-input,
.week-picker,
.filter-select,
input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]),
select,
textarea,
.service-item,
.emp-item,
.slot-btn,
.cal-btn,
.biz-action,
.auth-tab,
.btn-outlined-sm,
.citeri-cookie-banner button {
  border-radius: var(--md-shape-control) !important;
}

.btn-primary,
.btn-submit,
.cta-primary,
.copy-btn {
  min-height: 44px !important;
  height: 44px !important;
  background: var(--md-sys-color-primary) !important;
  color: var(--md-sys-color-on-primary) !important;
  border: 0 !important;
  font-weight: 600 !important;
  font-variation-settings: "wght" 600 !important;
  box-shadow: none !important;
  transition:
    background 160ms var(--md-motion-standard),
    transform 120ms var(--md-motion-standard),
    box-shadow 160ms var(--md-motion-standard) !important;
}

.btn-primary:active,
.btn-submit:active,
.cta-primary:active,
.copy-btn:active {
  transform: scale(.97) !important;
  transition-duration: 120ms !important;
}

.btn-primary:focus-visible,
.btn-submit:focus-visible,
.cta-primary:focus-visible,
.copy-btn:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--md-sys-color-primary) 25%, transparent) !important;
}

@media (prefers-reduced-motion: reduce) {
  .btn-primary,
  .btn-submit,
  .cta-primary,
  .copy-btn,
  .progress-dot,
  .remember-row input[type="checkbox"],
  .remember-row input[type="checkbox"]::before,
  .service-item,
  .emp-item,
  .slot-btn,
  .biz-action {
    transition: none !important;
    transform: none !important;
  }

  .btn-primary:active,
  .btn-submit:active,
  .cta-primary:active,
  .copy-btn:active {
    transform: none !important;
  }
}

/* CITERI APPLE DASHBOARD CANON — reusable opaque surfaces + measured Liquid Glass chrome. */
:root,
.dark,
[data-theme="dark"] {
  color-scheme: light !important;
  --apple-text: #1d1d1f;
  --apple-gray: #86868b;
  --apple-gray-2: #6e6e73;
  --apple-separator: rgba(60,60,67,.18);
  --apple-control: rgba(118,118,128,.12);
  --apple-control-hover: rgba(118,118,128,.18);
  --apple-green: #5D9571;
  --apple-green-text: #095C34;
  --apple-link: #095C34;

  --md-sys-color-primary: #5D9571;
  --md-sys-color-on-primary: #ffffff;
  --md-sys-color-primary-container: rgba(93,149,113,.12);
  --md-sys-color-on-primary-container: #095C34;
  --md-sys-color-background: #f5f5f7;
  --md-sys-color-on-background: #1d1d1f;
  --md-sys-color-surface: #ffffff;
  --md-sys-color-on-surface: #1d1d1f;
  --md-sys-color-surface-container: rgba(118,118,128,.10);
  --md-sys-color-surface-container-high: rgba(118,118,128,.14);
  --md-sys-color-surface-container-highest: rgba(118,118,128,.18);
  --md-sys-color-on-surface-variant: #6e6e73;
  --md-sys-color-outline: #86868b;
  --md-sys-color-outline-variant: rgba(60,60,67,.18);

  --citeri-radius-card: 20px;
  --citeri-radius-card-sm: 18px;
  --citeri-radius-control: 12px;
  --citeri-radius-nav: 9px;
  --citeri-radius-pill: 9999px;
  --md-shape-card: var(--citeri-radius-card);
  --md-shape-control: var(--citeri-radius-control);
  --md-shape-extra-small: 10px;
  --md-shape-small: 12px;
  --md-shape-medium: 18px;
  --md-shape-large: 20px;
  --md-shape-extra-large: 20px;

  --citeri-border-soft: rgba(0,0,0,.06);
  --citeri-shadow-1: 0 1px 3px rgba(0,0,0,.04);
  --citeri-shadow-2: 0 8px 24px rgba(0,0,0,.07);
  --citeri-shadow-3: 0 24px 68px rgba(0,0,0,.12);
  --md-elevation-1: var(--citeri-shadow-1);
  --md-elevation-2: var(--citeri-shadow-2);
  --md-elevation-3: var(--citeri-shadow-3);
  --shadow-xs: var(--citeri-shadow-1);
  --shadow-sm: var(--citeri-shadow-1);
  --shadow: var(--citeri-shadow-2);
  --shadow-md: var(--citeri-shadow-2);
  --shadow-lg: var(--citeri-shadow-3);

  --glass: rgba(255,255,255,.28);
  --glass-strong: rgba(255,255,255,.42);
  --glass-blur: blur(38px) saturate(180%) brightness(1.04);
  --glass-card-blur: none;
  --glass-border: rgba(255,255,255,.90);
  --glass-border-color: rgba(255,255,255,.90);
  --glass-shadow:
    inset 0 .5px 0 rgba(255,255,255,.90),
    inset 0 1.5px 3px rgba(255,255,255,.55),
    inset 0 -10px 16px -12px rgba(0,0,0,.16),
    inset -.5px -.5px 0 rgba(0,0,0,.05),
    0 12px 34px rgba(0,0,0,.10);
  --focus-glow: 0 0 0 3px rgba(93,149,113,.18);
}

html,
body,
.app-layout,
.main-content {
  background: #f5f5f7 !important;
}

body,
button,
input,
select,
textarea {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", 'Inter Tight', system-ui, sans-serif !important;
  letter-spacing: 0;
}

.sidebar,
.app-layout > .sidebar {
  background: rgba(246,246,248,.94) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-right: 1px solid rgba(0,0,0,.06) !important;
  box-shadow: none !important;
}

.sidebar-section {
  color: rgba(0,0,0,.36) !important;
  font-size: 11px !important;
  line-height: 14px !important;
  letter-spacing: .06em !important;
  font-weight: 700 !important;
}

.nav-item,
a.nav-item {
  height: 40px !important;
  border-radius: var(--citeri-radius-nav) !important;
  color: #3a3a3c !important;
  font-size: 14px !important;
  gap: 10px !important;
  transition:
    background 140ms var(--md-motion-standard),
    color 140ms var(--md-motion-standard),
    transform 100ms var(--md-motion-standard) !important;
}

.nav-item svg,
a.nav-item svg,
.nav-item [data-lucide],
a.nav-item [data-lucide] {
  color: #6e6e73 !important;
}

.nav-item.active,
a.nav-item.active {
  background: rgba(93,149,113,.12) !important;
  color: #5D9571 !important;
  box-shadow: none !important;
}

.nav-item.active svg,
a.nav-item.active svg,
.nav-item.active [data-lucide],
a.nav-item.active [data-lucide] {
  color: #5D9571 !important;
}

.card,
.card-elevated,
.kpi-card,
.table-wrap,
.onboarding-card,
.public-site-card,
.filters-card,
.calendar-wrapper,
.conversation-list,
.chat-panel,
.pricing-card,
.mini-card,
.loyalty-form,
.list-item,
.ops-card,
.appt-card,
.client-result,
.emp-col,
.preview-box,
.block-card,
.email-preview,
.confirm-preview,
.automation-row,
.endpoint,
.sell-preview,
.svc-check,
.wizard-card,
.service-card,
.location-card,
.modal-content,
.modal-box,
dialog {
  background: #ffffff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid var(--citeri-border-soft) !important;
  border-radius: var(--citeri-radius-card) !important;
  box-shadow: var(--citeri-shadow-1) !important;
}

.card,
.kpi-card,
.onboarding-card {
  padding: 22px !important;
}

.glass {
  position: relative;
  isolation: isolate;
  background: var(--glass) !important;
  border: .5px solid var(--glass-border-color) !important;
  box-shadow: var(--glass-shadow) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
}

.glass::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(120% 90% at 18% -10%, rgba(255,255,255,.85) 0%, rgba(255,255,255,0) 44%);
  mix-blend-mode: screen;
}

.glass > * {
  position: relative;
  z-index: 1;
}

.btn,
.copy-btn,
.chip,
.filter-tab,
.template-btn,
.shortcut-item,
.form-input,
.form-select,
.form-textarea,
.input,
.search-input,
.field-input,
.date-input,
.time-input,
.week-picker,
.filter-select,
input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]),
select,
textarea {
  border-radius: var(--citeri-radius-control) !important;
}

.btn-primary,
.btn-submit,
.cta-primary,
.copy-btn {
  background: #5D9571 !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

.btn-secondary,
.btn-ghost,
.btn-text,
.chip,
.filter-tab {
  background: rgba(118,118,128,.12) !important;
  color: #095C34 !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.kpi-label,
.card-title,
.section-title,
.table thead th,
.stat-mini .stat-label,
.label,
.form-label {
  color: #86868b !important;
}

.kpi-value,
.card-value,
.stat-mini .stat-val {
  letter-spacing: -.02em !important;
  font-weight: 600 !important;
  font-variant-numeric: tabular-nums !important;
  font-feature-settings: "tnum" 1 !important;
}

.badge-booked,
.badge-blue {
  color: #5D9571 !important;
  background: rgba(93,149,113,.10) !important;
}

.badge-booked::before,
.badge-blue::before {
  background: #5D9571 !important;
}

.badge-done,
.badge-green,
.badge-confirmed,
.badge-purple {
  color: #248a3d !important;
  background: rgba(36,138,61,.10) !important;
}

.badge-done::before,
.badge-green::before,
.badge-confirmed::before,
.badge-purple::before {
  background: #248a3d !important;
}

.badge-yellow {
  color: #c76a00 !important;
  background: rgba(199,106,0,.10) !important;
}

.badge-yellow::before {
  background: #c76a00 !important;
}

.shortcut-icon,
.onboarding-step .step-num {
  color: #5D9571 !important;
  background: rgba(93,149,113,.10) !important;
}

.stat-mini.green {
  background: #5D9571 !important;
}

.stat-mini.green .stat-label,
.stat-mini.green .stat-val {
  color: #ffffff !important;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: none !important;
  box-shadow: var(--focus-glow) !important;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root,
  .dark,
  [data-theme="dark"] {
    --glass: rgba(255,255,255,.92);
    --glass-strong: rgba(255,255,255,.92);
    --glass-blur: none;
    --glass-border-color: rgba(0,0,0,.08);
    --glass-shadow: var(--citeri-shadow-2);
  }
}

@media (prefers-reduced-transparency: reduce) {
  :root,
  .dark,
  [data-theme="dark"] {
    --glass: #ffffff;
    --glass-strong: #ffffff;
    --glass-blur: none;
    --glass-border-color: rgba(0,0,0,.10);
  }

  .glass {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .glass,
  .glass::before,
  .btn,
  .copy-btn,
  .nav-item,
  .shortcut-item,
  .template-btn,
  .onboarding-step,
  .ios-row {
    transition: none !important;
    animation: none !important;
  }

  .btn:active,
  .copy-btn:active,
  .nav-item:active,
  .shortcut-item:active,
  .template-btn:active,
  .onboarding-step:active,
  .ios-row:active {
    transform: none !important;
  }
}

/* Panel Apple parity layer: visual-only normalization for legacy panel pages. */
.main-content {
  max-width: 1440px;
  padding-top: 34px !important;
}

.page-header,
citeri-page-header {
  margin-bottom: 22px !important;
}

.page-title,
citeri-page-header::part(title) {
  font-size: 30px !important;
  line-height: 36px !important;
  letter-spacing: -.02em !important;
}

.header,
.toolbar,
citeri-toolbar,
.filter-bar,
.filters-card,
.week-nav,
.tabs,
.toptabs,
.wallet-bar,
.chat-header,
.calendar-tools {
  background: #ffffff !important;
  border: 1px solid var(--citeri-border-soft) !important;
  border-radius: var(--citeri-radius-card-sm) !important;
  box-shadow: var(--citeri-shadow-1) !important;
}

.header {
  border-bottom: 1px solid var(--citeri-border-soft) !important;
}

.filter-bar,
.filters-card,
.toolbar,
citeri-toolbar {
  padding: 10px !important;
}

.calendar-wrapper,
.conversation-list,
.chat-panel,
.pricing-card,
.plan-card,
.flow-card,
.template-card,
.trigger-card,
.channel-card,
.summary-card,
.metric-card,
.rating-summary,
.class-card,
.attendee,
.big-btn,
.summary-chip,
.conversation-item,
.bubble,
.line-list,
.invoice-table-wrap,
.banner,
.tpl-card,
.upsell-card,
.editor-topbar,
.palette,
.canvas-viewport,
.flow-node,
.inspector,
.zoom-ctrl,
.wa-provider-btn,
.steps-list li,
.risk-box,
.doc-nav,
.progress-bar,
.alert-item,
.scenario,
.stat-card,
.package-card,
.purchase-card,
.domain-row,
.setting-highlight,
.subscription-metric,
.disabled-note,
.logo-preview,
.key-row,
.copy-row .code-lite,
#monthTotalBar,
#fieldModal > div,
#confirmModal > div {
  background: #ffffff !important;
  border: 1px solid var(--citeri-border-soft) !important;
  border-radius: var(--citeri-radius-card-sm) !important;
  box-shadow: var(--citeri-shadow-1) !important;
}

.preview-card,
.mini-card,
.loyalty-form,
.list-item,
.svc-check,
.emp-check,
.block-card,
.email-preview,
.confirm-preview,
.automation-row,
.endpoint,
.sell-preview,
.wallet-bar,
.flow-card,
.plan-card {
  border-radius: var(--citeri-radius-card-sm) !important;
}

.calendar-header,
.items-table th,
.stat-mini,
.week-nav,
.tabs,
.toptabs,
.heat-cell,
.code-lite,
.inline-code {
  background: var(--apple-control) !important;
}

.table tbody tr,
.appt-item,
.automation-row,
.flow-card,
.plan-card,
.endpoint,
.key-row,
.svc-check,
.emp-check,
.chip,
.editor-tab,
.var-btn,
.mini-btn,
.toptab,
.tab,
.tab-btn,
.filter-tab,
.class-card,
.big-btn,
.act-btn,
.summary-chip,
.conversation-item,
.tpl-card,
.flow-node,
.wa-provider-btn,
.pal-item,
.zoom-ctrl button,
.switch .slider,
.toggle .slider,
.wa-btn {
  transition:
    background 140ms var(--md-motion-standard),
    color 140ms var(--md-motion-standard),
    border-color 140ms var(--md-motion-standard),
    transform 100ms var(--md-motion-standard),
    box-shadow 180ms var(--md-motion-standard) !important;
}.conversation-item.active, .wa-provider-btn.active { background: rgba(118,118,128,.08) !important;
  border-color: var(--citeri-border-soft) !important;
  box-shadow: none !important;
  transform: none !important; }

.btn,
.copy-btn,
.editor-tab,
.var-btn,
.mini-btn,
.tab,
.tab-btn,
.toptab,
.filter-tab,
.act-btn,
.wa-btn,
button[style*="background:#5D9571"],
button[style*="background:#f5f5f7"],
a[style*="background:#fff"] {
  min-height: 44px !important;
  border-radius: var(--citeri-radius-control) !important;
}

.btn-primary,
.btn-submit,
.btn-black,
.cta-primary,
.copy-btn,
button[style*="background:#5D9571"],
button[style*="background:#9a3412"],
.filter-tab.active,
.editor-tab.active,
.tab.active,
.tab-btn.active,
.toptab.active {
  background: var(--apple-green) !important;
  color: #ffffff !important;
  border-color: transparent !important;
}

.btn:active,
.copy-btn:active,
button:active,
.chip:active,
.filter-tab:active,
.editor-tab:active,
.var-btn:active,
.mini-btn:active,
.tab:active,
.tab-btn:active,
.toptab:active,
.class-card:active,
.big-btn:active,
.act-btn:active,
.conversation-item:active,
.tpl-card:active,
.flow-node:active,
.wa-provider-btn:active,
.pal-item:active,
.zoom-ctrl button:active,
.wa-btn:active,
.table tbody tr:active,
.svc-check:active,
.emp-check:active {
  transform: scale(.97) !important;
}

.btn:disabled,
.copy-btn:disabled,
button:disabled,
input:disabled,
select:disabled,
textarea:disabled,
[aria-disabled="true"] {
  cursor: not-allowed !important;
  opacity: .45 !important;
  box-shadow: none !important;
}

.btn:disabled:active,
.copy-btn:disabled:active,
button:disabled:active,
[aria-disabled="true"]:active {
  transform: none !important;
}

.empty-state,
.table-empty,
[id="empty"],
[id="noOrg"] {
  color: var(--apple-gray) !important;
}

.empty-state svg,
.empty-state [data-lucide],
[id="empty"] svg,
[id="empty"] [data-lucide],
[id="noOrg"] svg,
[id="noOrg"] [data-lucide] {
  color: var(--apple-gray-2) !important;
  opacity: .55 !important;
}

.modal-overlay,
#confirmModal,
#fieldModal {
  background: rgba(10,10,15,.24) !important;
  backdrop-filter: blur(12px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(140%) !important;
}

.drawer,
citeri-drawer::part(panel) {
  background: #ffffff !important;
  border-left: 1px solid var(--citeri-border-soft) !important;
  box-shadow: var(--citeri-shadow-3) !important;
}

.drawer-head,
.modal-header {
  border-bottom: 1px solid var(--citeri-border-soft) !important;
}

.form-error,
.badge-overdue,
.alert-item.red {
  background: rgba(255,59,48,.10) !important;
  color: #b42318 !important;
}

.badge-draft,
.badge-muted {
  background: var(--apple-control) !important;
  color: var(--apple-gray-2) !important;
}

.badge-sent,
.badge-good,
.code-pill,
.review-reply,
.act-confirm,
.summary-chip.chip-total,
.summary-chip.chip-done,
.badge-waiting,
.banner-ok,
.current-pill,
.status-active,
.bubble.business,
.flow-trigger,
.tpl-badge,
.wa-provider-btn.active,
.alert-item.amber,
.chip.normal,
.chip.fuerte,
.chip.flojo {
  background: rgba(93,149,113,.10) !important;
  border-color: rgba(93,149,113,.16) !important;
  color: var(--apple-green-text) !important;
}

.wa-btn,
.tpl-badge,
.switch input:checked + .slider,
.toggle input:checked + .slider {
  background: var(--apple-green) !important;
  color: #ffffff !important;
}

.bubble.client,
.banner-cancel,
.status-none,
.mutedchip,
.flow-trigger,
.tpl-preview .tpl-chip,
.steps-list li,
.var-help {
  background: var(--apple-control) !important;
  color: var(--apple-gray-2) !important;
}

.status-warn,
.risk-box {
  background: rgba(255,59,48,.10) !important;
  border-color: rgba(255,59,48,.18) !important;
  color: #b42318 !important;
}

.canvas-world {
  background-color: #f5f5f7 !important;
  background-image: radial-gradient(circle, rgba(0,0,0,.12) 1.2px, transparent 1.2px) !important;
}

.flow-node.selected {
  border-color: var(--apple-green) !important;
  box-shadow: var(--focus-glow) !important;
}

.progress-bar {
  background: var(--apple-control) !important;
  border-radius: var(--citeri-radius-pill) !important;
}

.progress-fill,
.progress-fill.full {
  background: var(--apple-green) !important;
}

.progress-fill.warn,
.method.patch,
.badge-inactive {
  background: rgba(255,149,0,.10) !important;
  color: #c76a00 !important;
}

.badge-active,
.method.post {
  background: rgba(93,149,113,.10) !important;
  color: var(--apple-green-text) !important;
}

.badge-expired,
.method.delete {
  background: rgba(255,59,48,.10) !important;
  color: #b42318 !important;
}

.method {
  background: rgba(0,122,255,.10) !important;
  color: #0066cc !important;
}

.code-box {
  border-radius: var(--citeri-radius-card-sm) !important;
}

.toast {
  border-radius: var(--citeri-radius-pill) !important;
  box-shadow: var(--citeri-shadow-2) !important;
}

.act-noshow {
  background: rgba(255,59,48,.10) !important;
  color: #b42318 !important;
}

.summary-chip.chip-pending,
.badge-orange {
  background: rgba(255,149,0,.10) !important;
  color: #c76a00 !important;
}

.summary-chip.chip-revenue {
  background: rgba(93,149,113,.08) !important;
  color: var(--apple-green-text) !important;
}

.class-header,
.emp-header {
  border-bottom: 1px solid var(--citeri-border-soft) !important;
}

.date-nav,
.agenda-top .date-nav,
.top {
  border-radius: var(--citeri-radius-card-sm) !important;
}

.loyalty-card-preview {
  border-radius: var(--citeri-radius-card) !important;
  box-shadow: var(--citeri-shadow-2) !important;
}

@media (prefers-reduced-motion: reduce) {
  .table tbody tr,
  .appt-item,
  .automation-row,
  .flow-card,
  .plan-card,
  .endpoint,
  .key-row,
  .svc-check,
  .emp-check,
  .chip,
  .editor-tab,
  .var-btn,
  .mini-btn,
  .toptab,
  .tab,
  .tab-btn,
  .filter-tab,
  .class-card,
  .big-btn,
  .act-btn,
  .summary-chip,
  .conversation-item,
  .tpl-card,
  .flow-node,
  .wa-provider-btn,
  .pal-item,
  .zoom-ctrl button,
  .switch .slider,
  .toggle .slider,
  .wa-btn {
    transition: none !important;
  }

  .btn:active,
  .copy-btn:active,
  button:active,
  .chip:active,
  .filter-tab:active,
  .editor-tab:active,
  .var-btn:active,
  .mini-btn:active,
  .tab:active,
  .tab-btn:active,
  .toptab:active,
  .class-card:active,
  .big-btn:active,
  .act-btn:active,
  .conversation-item:active,
  .tpl-card:active,
  .flow-node:active,
  .wa-provider-btn:active,
  .pal-item:active,
  .zoom-ctrl button:active,
  .wa-btn:active,
  .table tbody tr:active,
  .svc-check:active,
  .emp-check:active {
    transform: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   CITERI × OPEN SALON
   Compact business shell inspired by Open Salon's information
   architecture, rebuilt with Citeri branding and existing markup.
   ═══════════════════════════════════════════════════════════════ */
:root {
  --sidebar-w: 240px;
  --salon-bg: #ffffff;
  --salon-sidebar: #fafafa;
  --salon-card: #ffffff;
  --salon-foreground: #18181b;
  --salon-muted: #71717a;
  --salon-border: #e4e4e7;
  --salon-soft: #f4f4f5;
  --salon-primary: #5D9571;
  --salon-primary-hover: #095C34;
  --salon-danger: #dc2626;
  --salon-radius: 10px;
  --salon-radius-sm: 7px;
  --salon-ease-out: cubic-bezier(.23, 1, .32, 1);
}

html:has(body.citeri-salon-ui),
body.citeri-salon-ui,
body.citeri-salon-ui .app-layout,
body.citeri-salon-ui .main-content {
  background: var(--salon-bg) !important;
}

body.citeri-salon-ui {
  --md-sys-color-primary: var(--salon-primary);
  --md-sys-color-on-primary: #ffffff;
  --md-sys-color-primary-container: #eeecff;
  --md-sys-color-on-primary-container: #352d91;
  --apple-green: var(--salon-primary);
  --apple-green-text: #095C34;
  --apple-link: #095C34;
  --accent: var(--salon-primary);
  --accent-hover: var(--salon-primary-hover);
  --accent-bg: rgba(93,149,113, .10);
  --green: var(--salon-primary);
  --green-bg: rgba(93,149,113, .10);
  --c-primary: var(--salon-primary);
  --focus-glow: 0 0 0 3px rgba(93,149,113, .18);
  color: var(--salon-foreground) !important;
}

body.citeri-salon-ui .citeri-depth-field {
  display: none !important;
}

body.citeri-salon-ui .main-content {
  max-width: none !important;
  min-width: 0;
  padding: 24px 28px 48px !important;
}

body.citeri-salon-ui .page-header,
body.citeri-salon-ui citeri-page-header {
  min-height: 40px;
  margin-bottom: 22px !important;
}

body.citeri-salon-ui .page-title,
body.citeri-salon-ui h1 {
  color: var(--salon-foreground) !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: -.025em !important;
}

body.citeri-salon-ui .page-sub,
body.citeri-salon-ui .text-muted,
body.citeri-salon-ui .text-faint {
  color: var(--salon-muted) !important;
}

body.citeri-salon-ui .sidebar,
body.citeri-salon-ui .app-layout > .sidebar {
  width: var(--sidebar-w) !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: var(--salon-sidebar) !important;
  border-right: 1px solid var(--salon-border) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.citeri-salon-ui .sidebar-brand {
  min-height: 65px;
  padding: 16px !important;
  gap: 10px !important;
  border-bottom: 1px solid var(--salon-border);
}

body.citeri-salon-ui .sidebar-brand .brand-icon {
  width: 32px !important;
  height: 32px !important;
  padding: 5px;
  border: 0 !important;
  border-radius: 8px !important;
  background: var(--salon-primary) !important;
  box-shadow: none !important;
}

body.citeri-salon-ui .sidebar-brand .brand-icon img {
  filter: invert(1);
  mix-blend-mode: screen;
}

body.citeri-salon-ui .sidebar-brand .brand-name {
  color: var(--salon-foreground) !important;
  font-size: 15px !important;
  font-weight: 650 !important;
  letter-spacing: -.01em !important;
}

body.citeri-salon-ui .citeri-shell-org {
  padding: 10px 10px 2px;
}

body.citeri-salon-ui .citeri-org-card {
  padding: 7px 8px 8px !important;
  border: 1px solid var(--salon-border) !important;
  border-radius: var(--salon-radius-sm) !important;
  background: var(--salon-card) !important;
}

body.citeri-salon-ui .citeri-org-label {
  display: block;
  margin: 0 0 3px 3px;
  color: var(--salon-muted) !important;
  font-size: 10px !important;
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: .045em;
  text-transform: uppercase;
}

body.citeri-salon-ui .citeri-org-card select {
  width: 100%;
  min-height: 30px !important;
  height: 30px !important;
  padding: 0 28px 0 7px !important;
  border: 0 !important;
  border-radius: 5px !important;
  background-color: transparent !important;
  box-shadow: none !important;
  font-size: 12px !important;
  font-weight: 550;
}

body.citeri-salon-ui .citeri-shell-nav {
  flex: 1;
  min-height: 0;
  padding: 6px 8px 8px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #d4d4d8 transparent;
}

body.citeri-salon-ui .citeri-shell-section {
  display: block;
}

body.citeri-salon-ui .citeri-shell-section + .citeri-shell-section {
  margin-top: 9px;
}

body.citeri-salon-ui .citeri-shell-section-label {
  margin: 0;
  padding: 8px 8px 5px;
  color: #a1a1aa !important;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2 !important;
  letter-spacing: .07em;
  text-transform: uppercase;
}

body.citeri-salon-ui .citeri-shell-section-items {
  display: grid;
  gap: 1px;
}

body.citeri-salon-ui .nav-item,
body.citeri-salon-ui a.nav-item {
  width: 100% !important;
  height: 35px !important;
  min-height: 35px !important;
  margin: 0 !important;
  padding: 0 8px !important;
  gap: 9px !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: #52525b !important;
  box-shadow: none !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  transition: background-color 140ms ease, color 140ms ease, transform 100ms var(--salon-ease-out) !important;
}

body.citeri-salon-ui .nav-item.active,
body.citeri-salon-ui a.nav-item.active {
  background: #ececee !important;
  color: var(--salon-foreground) !important;
  box-shadow: none !important;
  font-weight: 600 !important;
}

body.citeri-salon-ui .nav-icon-wrap,
body.citeri-salon-ui .nav-item.active .nav-icon-wrap,
body.citeri-salon-ui a.nav-item.active .nav-icon-wrap {
  width: 20px !important;
  height: 20px !important;
  flex: 0 0 20px !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #1d1d1f !important;
}

body.citeri-salon-ui .nav-item.active .nav-icon-wrap,
body.citeri-salon-ui a.nav-item.active .nav-icon-wrap {
  color: var(--salon-primary) !important;
}

body.citeri-salon-ui .nav-item svg,
body.citeri-salon-ui a.nav-item svg,
body.citeri-salon-ui .nav-item [data-lucide],
body.citeri-salon-ui a.nav-item [data-lucide] {
  width: 16px !important;
  height: 16px !important;
  color: inherit !important;
}

body.citeri-salon-ui .nav-item-label {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.citeri-salon-ui .citeri-nav-badge {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #e4e4e7;
  color: #52525b;
  font-size: 10px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

body.citeri-salon-ui .citeri-nav-badge[hidden] {
  display: none;
}

body.citeri-salon-ui .citeri-nav-badge.is-danger {
  background: #fee2e2;
  color: #b91c1c;
}

body.citeri-salon-ui .citeri-shell-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--salon-border);
  border-bottom: 1px solid var(--salon-border);
}

body.citeri-salon-ui .citeri-shell-summary > div {
  padding: 9px 6px;
  text-align: center;
}

body.citeri-salon-ui .citeri-shell-summary > div + div {
  border-left: 1px solid var(--salon-border);
}

body.citeri-salon-ui .citeri-shell-summary strong,
body.citeri-salon-ui .citeri-shell-summary span {
  display: block;
}

body.citeri-salon-ui .citeri-shell-summary strong {
  color: var(--salon-foreground);
  font-size: 15px;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

body.citeri-salon-ui .citeri-shell-summary span {
  margin-top: 2px;
  color: var(--salon-muted);
  font-size: 10px;
}

body.citeri-salon-ui .sidebar-footer {
  display: grid;
  gap: 1px;
  margin: 0 !important;
  padding: 7px 8px !important;
  border-top: 0 !important;
}

body.citeri-salon-ui .citeri-shell-logout {
  color: var(--salon-muted) !important;
}

body.citeri-salon-ui .card,
body.citeri-salon-ui .card-elevated,
body.citeri-salon-ui .kpi-card,
body.citeri-salon-ui .table-wrap,
body.citeri-salon-ui .onboarding-card,
body.citeri-salon-ui .public-site-card,
body.citeri-salon-ui .filters-card,
body.citeri-salon-ui .calendar-wrapper,
body.citeri-salon-ui .modal-box,
body.citeri-salon-ui .modal-content,
body.citeri-salon-ui dialog {
  background: var(--salon-card) !important;
  border: 1px solid var(--salon-border) !important;
  border-radius: var(--salon-radius) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.citeri-salon-ui .card,
body.citeri-salon-ui .kpi-card,
body.citeri-salon-ui .onboarding-card {
  padding: 16px !important;
}

body.citeri-salon-ui .kpi-grid {
  gap: 12px !important;
}

body.citeri-salon-ui .kpi-card {
  min-height: 98px !important;
  justify-content: center !important;
}

body.citeri-salon-ui .kpi-card .kpi-label {
  margin-bottom: 8px !important;
}

body.citeri-salon-ui .kpi-card .kpi-value {
  font-size: clamp(2rem, 3.2vw, 2.8rem) !important;
  line-height: 1 !important;
  letter-spacing: -.04em !important;
}

body.citeri-salon-ui .kpi-card .kpi-delta {
  margin-top: 7px !important;
}

body.citeri-salon-ui .header,
body.citeri-salon-ui .toolbar,
body.citeri-salon-ui citeri-toolbar,
body.citeri-salon-ui .filter-bar,
body.citeri-salon-ui .filters-card,
body.citeri-salon-ui .week-nav,
body.citeri-salon-ui .tabs,
body.citeri-salon-ui .toptabs,
body.citeri-salon-ui .calendar-tools {
  background: var(--salon-card) !important;
  border: 1px solid var(--salon-border) !important;
  border-radius: var(--salon-radius) !important;
  box-shadow: none !important;
}

body.citeri-salon-ui .btn,
body.citeri-salon-ui .copy-btn,
body.citeri-salon-ui .editor-tab,
body.citeri-salon-ui .var-btn,
body.citeri-salon-ui .mini-btn,
body.citeri-salon-ui .tab,
body.citeri-salon-ui .tab-btn,
body.citeri-salon-ui .toptab,
body.citeri-salon-ui .filter-tab,
body.citeri-salon-ui .act-btn,
body.citeri-salon-ui .wa-btn {
  min-height: 36px !important;
  padding: 0 13px !important;
  border-radius: 7px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease, transform 100ms var(--salon-ease-out) !important;
}

body.citeri-salon-ui .btn-primary,
body.citeri-salon-ui .btn-submit,
body.citeri-salon-ui .btn-black,
body.citeri-salon-ui .cta-primary,
body.citeri-salon-ui .copy-btn {
  border-color: var(--salon-primary) !important;
  background: var(--salon-primary) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

body.citeri-salon-ui .btn-secondary,
body.citeri-salon-ui .btn-ghost,
body.citeri-salon-ui .btn-text,
body.citeri-salon-ui .chip,
body.citeri-salon-ui .filter-tab {
  border: 1px solid var(--salon-border) !important;
  background: #ffffff !important;
  color: #3f3f46 !important;
}

body.citeri-salon-ui .btn-danger {
  background: #ffffff !important;
  border-color: #fecaca !important;
  color: var(--salon-danger) !important;
}

body.citeri-salon-ui .form-input,
body.citeri-salon-ui .form-select,
body.citeri-salon-ui .form-textarea,
body.citeri-salon-ui .input,
body.citeri-salon-ui .search-input,
body.citeri-salon-ui .field-input,
body.citeri-salon-ui .date-input,
body.citeri-salon-ui .time-input,
body.citeri-salon-ui .week-picker,
body.citeri-salon-ui .filter-select,
body.citeri-salon-ui input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]),
body.citeri-salon-ui select,
body.citeri-salon-ui textarea {
  min-height: 38px !important;
  border: 1px solid var(--salon-border) !important;
  border-radius: 7px !important;
  background-color: #ffffff !important;
  color: var(--salon-foreground) !important;
  box-shadow: none !important;
}

body.citeri-salon-ui .form-input:focus,
body.citeri-salon-ui .form-select:focus,
body.citeri-salon-ui .form-textarea:focus,
body.citeri-salon-ui input:focus,
body.citeri-salon-ui select:focus,
body.citeri-salon-ui textarea:focus {
  border-color: var(--salon-primary) !important;
  box-shadow: 0 0 0 3px rgba(93,149,113,.18) !important;
}

body.citeri-salon-ui .booking-link-card {
  background:
    linear-gradient(150deg, rgba(255,255,255,.16), rgba(255,255,255,0) 42%),
    var(--salon-primary) !important;
}

body.citeri-salon-ui #gapFillerCard,
body.citeri-salon-ui .onboarding-card {
  background:
    linear-gradient(145deg, rgba(93,149,113,.10), rgba(255,255,255,.82) 44%),
    #ffffff !important;
}

body.citeri-salon-ui .shortcut-icon,
body.citeri-salon-ui .inventory-kpi.is-value .inventory-kpi-icon {
  background: #eeecff !important;
  color: var(--salon-primary) !important;
}

body.citeri-salon-ui .inventory-stock:not(.is-low):not(.is-out) .inventory-stock-dot {
  background: var(--salon-primary) !important;
}

body.citeri-salon-ui .table-wrap {
  overflow: auto !important;
}

body.citeri-salon-ui .table th,
body.citeri-salon-ui .table td {
  border-color: var(--salon-border) !important;
}

body.citeri-salon-ui .table th {
  background: #fafafa !important;
  color: var(--salon-muted) !important;
  font-size: 11px !important;
  font-weight: 650 !important;
  letter-spacing: .035em;
  text-transform: uppercase;
}

body.citeri-salon-ui .modal-overlay,
body.citeri-salon-ui .drawer-backdrop,
body.citeri-salon-ui #confirmModal,
body.citeri-salon-ui #fieldModal {
  background: rgba(24,24,27,.72) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.citeri-salon-ui .modal-box,
body.citeri-salon-ui .modal-content,
body.citeri-salon-ui dialog {
  transform-origin: center;
}

.citeri-shell-mobile-toggle,
.citeri-shell-backdrop {
  display: none;
}

@media (max-width: 900px) {
  body.citeri-salon-ui .main-content {
    margin-left: 0 !important;
    padding: 70px 16px 40px !important;
  }

  body.citeri-salon-ui .sidebar,
  body.citeri-salon-ui .app-layout > .sidebar {
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    width: min(280px, 86vw) !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    padding: 0 !important;
    overflow: hidden !important;
    flex-direction: column !important;
    align-items: stretch !important;
    border: 0 !important;
    border-right: 1px solid var(--salon-border) !important;
    border-radius: 0 !important;
    transform: translateX(-100%);
    transition: transform 220ms var(--salon-ease-out) !important;
    z-index: 1002 !important;
  }

  body.citeri-salon-ui.citeri-nav-open .sidebar {
    transform: translateX(0);
  }

  body.citeri-salon-ui.citeri-nav-open {
    overflow: hidden;
  }

  body.citeri-salon-ui .sidebar-brand {
    display: flex !important;
  }

  body.citeri-salon-ui .citeri-shell-org,
  body.citeri-salon-ui .sidebar-footer {
    display: grid !important;
  }

  body.citeri-salon-ui .citeri-shell-nav {
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  body.citeri-salon-ui .citeri-shell-section {
    display: block !important;
  }

  body.citeri-salon-ui .citeri-shell-section-label {
    display: block !important;
  }

  body.citeri-salon-ui .citeri-shell-section-items {
    display: grid !important;
  }

  body.citeri-salon-ui .citeri-shell-summary {
    display: grid !important;
  }

  body.citeri-salon-ui .nav-item,
  body.citeri-salon-ui a.nav-item {
    width: 100% !important;
    min-width: 0 !important;
    height: 35px !important;
    padding: 0 8px !important;
    flex: 0 0 auto !important;
    justify-content: flex-start !important;
    gap: 9px !important;
  }

  body.citeri-salon-ui .nav-item .nav-icon-wrap,
  body.citeri-salon-ui a.nav-item .nav-icon-wrap {
    display: inline-flex !important;
  }

  body.citeri-salon-ui .nav-item .nav-item-label,
  body.citeri-salon-ui a.nav-item .nav-item-label {
    display: block !important;
  }

  .citeri-shell-mobile-toggle {
    position: fixed;
    top: 14px;
    left: 14px;
    z-index: 1001;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--salon-border);
    border-radius: 8px;
    background: #ffffff;
    color: var(--salon-foreground);
    box-shadow: 0 4px 14px rgba(0,0,0,.08);
  }

  .citeri-menu-glyph {
    width: 17px;
    display: grid;
    gap: 3px;
  }

  .citeri-menu-glyph span {
    display: block;
    height: 1.5px;
    border-radius: 999px;
    background: currentColor;
  }

  .citeri-shell-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1000;
    border: 0;
    background: rgba(24,24,27,.48);
    opacity: 0;
    pointer-events: none;
    display: block;
    transition: opacity 180ms ease;
  }

  body.citeri-nav-open .citeri-shell-backdrop {
    opacity: 1;
    pointer-events: auto;
  }

  body.citeri-salon-ui .page-header,
  body.citeri-salon-ui citeri-page-header {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* ═══════════════════════════════════════════════════════════════
   REBRAND — tipografía editorial (Instrument Serif) para titulares,
   en línea con la landing. Aplicado globalmente: dashboard incluido.
   ═══════════════════════════════════════════════════════════════ */
h1, h2, .page-title, .card-title, .kpi-title,
.brand-title, .section-headline, .modal-title, .drawer-title {
  font-family: 'Instrument Serif', Georgia, serif !important;
  font-weight: 400 !important;
  letter-spacing: -0.01em !important;
}

/* Marca de Kubo Studio en los pies "Con la tecnología de Citeri, por…".
   Hoy las páginas que la llevan son todas de fondo claro, así que el fichero
   por defecto es el negro. El tema oscuro de Citeri va por clase, no por
   `prefers-color-scheme`, así que se cambia aquí a la versión blanca: si
   alguna de esas páginas se pasa a oscuro, la marca no se queda invisible. */
.kubo-mark { display:inline-block; }
.dark .kubo-mark,
[data-theme="dark"] .kubo-mark { content: url("/kubo-mark-white.png"); }

/* ═══════════════════════════════════════════════════════════════
   AVISOS EN DIRECTO — cita nueva, movida o cancelada, y fin de envío
   Ver public_html/lib/citeri-avisos.js
   ═══════════════════════════════════════════════════════════════ */

.citeri-avisos {
  position: fixed;
  /* Arriba a la derecha, y por debajo de la altura de una barra de
     navegación para no taparla. `env(safe-area-inset-*)` para que en un móvil
     con muesca no se meta debajo. */
  top: calc(16px + env(safe-area-inset-top, 0px));
  right: calc(16px + env(safe-area-inset-right, 0px));
  z-index: 10000;
  display: flex; flex-direction: column; gap: 10px;
  width: min(360px, calc(100vw - 28px));
  pointer-events: none;              /* la pila no bloquea; cada tarjeta sí */
}

.citeri-aviso {
  pointer-events: auto;
  /* Deja el scroll vertical de la página a la página; el gesto horizontal
     (deslizar para descartar, 26-08-2026) lo coge el JS. */
  touch-action: pan-y;
  cursor: grab;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 28px;
  align-items: center;
  gap: 6px;
  padding: 10px 8px 10px 10px;
  border-radius: var(--md-shape-medium);
  text-decoration: none;
  color: var(--md-sys-color-on-surface);

  /* Material translúcido: el contenido se ve moverse por debajo, que es lo
     que hace que la tarjeta lea como una capa flotante y no como un bloque
     pegado encima. `saturate` devuelve el color que el desenfoque apaga. */
  background: rgba(255, 255, 255, .55);
  -webkit-backdrop-filter: blur(32px) saturate(200%);
  backdrop-filter: blur(32px) saturate(200%);
  border: 1px solid rgba(255, 255, 255, .45);
  /* El brillo del canto. Va con `inset` y no como borde: un borde se pinta
     plano y esto tiene que leerse como la luz resbalando por el filo del
     cristal — más viva arriba, apagándose hacia abajo. La sombra exterior es
     más profunda y más difusa porque una superficie más transparente necesita
     separarse del fondo por la sombra, no por el color. */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .8),
    inset 0 -1px 0 rgba(255, 255, 255, .15),
    0 1px 2px rgba(0, 0, 0, .04),
    0 12px 40px rgba(0, 0, 0, .16);

  /* Estado de partida y de salida: arriba y algo encogida. Entra y sale por
     el MISMO sitio — si algo aparece por un lado, se espera que se vaya por
     donde vino. */
  opacity: 0;
  transform: translate3d(var(--dx, 0px), -14px, 0) scale(.94);
  will-change: transform, opacity;
  /* Curva de iOS: sale rápido y se posa sin rebotar. Sin gesto detrás no hay
     inercia que justifique un rebote, así que no lo lleva. */
  transition:
    transform 420ms cubic-bezier(.32, .72, 0, 1),
    opacity   260ms cubic-bezier(.32, .72, 0, 1),
    filter    420ms cubic-bezier(.32, .72, 0, 1);
  filter: blur(3px);                 /* se materializa, no solo aparece */
}

.citeri-aviso.entra { opacity: var(--dx-opacidad, 1); transform: translate3d(var(--dx, 0px), 0, 0) scale(1); filter: blur(0); }
.citeri-aviso.sale  { opacity: 0; transform: translate3d(var(--dx, 0px), -10px, 0) scale(.96); filter: blur(2px); }
/* Mientras se arrastra, sin la transición de entrada/salida — si no, el
   dedo/ratón "arrastra con retraso" en vez de seguir el gesto al milímetro. */
.citeri-aviso.arrastrando { transition: none !important; cursor: grabbing; }

.citeri-aviso-contenido {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: inherit;
  text-decoration: none;
  -webkit-user-drag: none;
}

.citeri-aviso-icono {
  width: 24px; height: 24px;
  display: grid; place-items: center;
  border-radius: var(--md-shape-full);
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-primary);
  flex-shrink: 0;
}
/* `lucide.js` sustituye el `<span data-lucide>` por un `<svg>` sin ese
   atributo — apuntar a `[data-lucide]` deja de coincidir en cuanto el icono
   se pinta de verdad, y se queda con su tamaño nativo (24×24), gigante
   dentro del círculo. Se apunta al `svg` resultante directamente. */
.citeri-aviso-icono svg { width: 13px; height: 13px; }

.citeri-aviso-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.citeri-aviso-texto strong {
  font-size: .875rem;
  /* Sobre un material translúcido el texto plano pierde. Algo más de peso y
     el tracking ligeramente cerrado lo devuelven a su sitio. */
  font-variation-settings: 'wght' 650;
  letter-spacing: -.012em;
  line-height: 1.25;
  white-space: nowrap;
}
.citeri-aviso-texto small {
  min-width: 0;
  font-size: .75rem;
  /* Sobre cristal, el gris de siempre se pierde: sobre un fondo claro que se
     transparenta apenas hay contraste. Se sube al color de texto normal con
     algo de transparencia — mantiene la jerarquía (sigue siendo secundario)
     sin volverse ilegible. */
  color: color-mix(in srgb, var(--md-sys-color-on-surface) 72%, transparent);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.citeri-aviso-cerrar {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border: none; border-radius: var(--md-shape-full);
  background: transparent; cursor: pointer;
  color: var(--md-sys-color-on-surface-variant);
  opacity: .55;
  transition: opacity 140ms ease-out, background 140ms ease-out;
}
/* La respuesta al pulsar va en el press, no al soltar. */
.citeri-aviso-cerrar:active { transform: scale(.92); }
.citeri-aviso-cerrar svg { width: 12px; height: 12px; }

/* Cancelaciones y no-shows: es lo que más urge ver de un vistazo. */
.citeri-aviso.is-aviso .citeri-aviso-icono {
  background: var(--md-sys-color-error-container);
  color: var(--md-sys-color-error);
}

/* ── Preferencias del sistema ──────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  /* Menos movimiento no es menos aviso: se cambia el desplazamiento por un
     fundido corto, y se quitan el desenfoque y la escala, que son justo lo
     que molesta a quien marca esta preferencia. */
  .citeri-aviso {
    transition: opacity 200ms ease;
    transform: none; filter: none;
  }
  .citeri-aviso.entra { transform: none; filter: none; }
  .citeri-aviso.sale  { transform: none; filter: none; }
}

@media (prefers-reduced-transparency: reduce) {
  .citeri-aviso {
    background: var(--md-sys-color-surface);
    -webkit-backdrop-filter: none; backdrop-filter: none;
    border-color: var(--md-sys-color-outline-variant);
    /* Sin los brillos interiores: sobre un fondo opaco no leen como luz en un
       filo, leen como dos rayas blancas. */
    box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 12px 40px rgba(0, 0, 0, .14);
  }
  .citeri-aviso-texto small { color: var(--md-sys-color-on-surface-variant); }
}

@media (prefers-contrast: more) {
  .citeri-aviso {
    background: var(--md-sys-color-surface);
    -webkit-backdrop-filter: none; backdrop-filter: none;
    border: 2px solid var(--md-sys-color-on-surface);
  }
  .citeri-aviso-texto small { color: var(--md-sys-color-on-surface); }
}

/* El tema oscuro del panel va por clase, no por prefers-color-scheme. */
.dark .citeri-aviso,
[data-theme="dark"] .citeri-aviso {
  background: rgba(28, 28, 30, .55);
  border-color: rgba(255, 255, 255, .1);
  /* El brillo del canto se apaga en oscuro: sobre fondo negro un filo blanco
     al 80% no parece luz, parece un borde pintado. */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .16),
    inset 0 -1px 0 rgba(255, 255, 255, .04),
    0 1px 2px rgba(0, 0, 0, .4),
    0 12px 40px rgba(0, 0, 0, .6);
}
.dark .citeri-aviso-texto small,
[data-theme="dark"] .citeri-aviso-texto small {
  color: color-mix(in srgb, #fff 68%, transparent);
}

/* ── Táctil: el hover no puede quedarse pegado ──────────────────────────
   En un móvil no hay puntero que se retire: al tocar algo se le aplica
   `:hover` y ahí se queda hasta que tocas en otro sitio. Como buena parte de
   estos hover ponen un fondo gris, el botón se queda gris y parece
   deshabilitado — lo que se reportó el 25-08-2026 en reservas y en la
   gestión de citas desde el móvil.

   Con `(hover: hover) and (pointer: fine)` estos estilos quedan para ratón y
   trackpad. El feedback al tocar lo da `:active`, más abajo. */
@media (hover: hover) and (pointer: fine) {
  a:hover { text-decoration:underline; }
  .sidebar-brand:hover { text-decoration:none; }
  .nav-item:hover, a.nav-item:hover { background:color-mix(in srgb, var(--md-sys-color-on-surface) 7%, transparent);
  color:var(--md-sys-color-on-surface);
  text-decoration:none;
  transform:translateX(1px); }
  .org-selector:hover { background:color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);
  transform:scale(.995); }
  .card:hover { box-shadow:var(--md-elevation-1); transform:translateY(-1px); }
  .card-elevated:hover { box-shadow:var(--md-elevation-2); transform:translateY(-1px); }
  .kpi-card:hover { box-shadow:var(--md-elevation-1); transform:translateY(-1px); }
  .btn:hover { text-decoration:none; }
  .btn-primary:hover { background:color-mix(in srgb, #000 8%, var(--md-sys-color-primary)); box-shadow:0 12px 30px color-mix(in srgb, var(--md-sys-color-primary) 24%, transparent); }
  .btn-secondary:hover { background:color-mix(in srgb, var(--md-sys-color-on-surface) 10%, transparent); box-shadow:none; }
  .btn-ghost:hover { background:color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent); }
  .btn-text:hover { background:color-mix(in srgb, var(--md-sys-color-primary) 10%, transparent); }
  .btn-danger:hover { background:color-mix(in srgb, var(--md-sys-color-on-error-container) 10%, var(--md-sys-color-error-container)); }
  .fab:hover { box-shadow:var(--glass-shadow); transform:scale(1.02); }
  .table tbody tr:hover td { background:color-mix(in srgb, var(--md-sys-color-primary) 6%, transparent);
  transition:background var(--md-duration-short) var(--md-motion-standard); }
  .modal-close:hover { background:color-mix(in srgb, var(--md-sys-color-on-surface) 10%, transparent); }
  .tab-btn:hover { color:var(--md-sys-color-on-surface);
  background:color-mix(in srgb, var(--md-sys-color-on-surface) 5%, transparent); }
  .chip:hover { background:color-mix(in srgb, var(--md-sys-color-on-surface-variant) 8%, transparent); transform:scale(.99); }
  .shortcut-item:hover { background:color-mix(in srgb, var(--md-sys-color-primary) 9%, var(--md-sys-color-surface));
  color:var(--md-sys-color-on-surface);
  text-decoration:none;
  transform:translateY(-1px) scale(1);
  box-shadow:var(--md-elevation-1);
  border-color:color-mix(in srgb, var(--md-sys-color-primary) 18%, transparent); }
  .shortcut-item:hover .shortcut-icon { background:var(--md-sys-color-primary);
  color:var(--md-sys-color-on-primary);
  transform:scale(1.02); }
  .onboarding-step:hover { background:color-mix(in srgb, var(--md-sys-color-primary) 9%, transparent);
  color:var(--md-sys-color-on-surface);
  transform:translateX(1px); text-decoration:none; }
  .template-btn:hover { background:color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent); border-color:color-mix(in srgb, var(--md-sys-color-primary) 18%, transparent); transform:scale(.995); }
  .conversation-item:hover { background:color-mix(in srgb, var(--md-sys-color-on-surface) 5%, transparent) !important; }
  .btn:hover, .cta-primary:hover, .cta-secondary:hover, .btn-submit:hover, .card:hover, .card-elevated:hover, .kpi-card:hover, .shortcut-item:hover, .feature-card:hover, .step-card:hover { transform:none !important;
  box-shadow:none !important; }
  .card:hover, .card-elevated:hover, .kpi-card:hover, .shortcut-item:hover, .feature-card:hover, .step-card:hover, .table tbody tr:hover td, .conversation-item:hover, .appt-item:hover, .ios-row:hover { background-color:var(--apple-control-hover, rgba(120,120,128,.16)) !important; }
  .shortcut-item:hover .shortcut-icon { background: var(--apple-control-hover, rgba(120,120,128,.16)) !important;
  color: var(--apple-gray-2, #6E6E73) !important; }
  .card:hover, .card-elevated:hover, .kpi-card:hover { transform: translateY(-1px) !important;
  background: rgba(255,255,255,.82) !important; }
  .citeri-shell-group-toggle:hover { background: rgba(118,118,128,.08);
  color: #5a5a5e; }
  .nav-item:hover, a.nav-item:hover { background: rgba(118,118,128,.11) !important;
  transform: none !important;
  box-shadow: none !important; }
  .card:hover, .card-elevated:hover, .kpi-card:hover { transform: translateY(-1px) !important;
  box-shadow: 0 1px 1px rgba(0,0,0,.025), 0 22px 58px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.78) !important;
  background: rgba(255,255,255,.82) !important; }
  .btn-primary:hover, .copy-btn:hover, .cta-primary:hover, .btn-submit:hover { background: linear-gradient(180deg, #0b806b, #005846) !important;
  box-shadow: 0 14px 30px rgba(93,149,113,.24) !important; }
  .btn-secondary:hover, .btn-ghost:hover, .btn-text:hover, .chip:hover, .filter-tab:hover { background: rgba(118,118,128,.18) !important; }
  .table tbody tr:hover td, .appt-item:hover, .ios-row:hover, .onboarding-step:hover { background: rgba(118,118,128,.10) !important; }
  .shortcut-item:hover .shortcut-icon { background: var(--apple-control-hover, rgba(120,120,128,.16)) !important;
  color: var(--apple-gray-2, #6E6E73) !important; }
  ::-webkit-scrollbar-thumb:hover { background-color: rgba(120,120,128,.55); }
  .nav-item:hover, a.nav-item:hover, .shortcut-item:hover, .card:hover, .card-elevated:hover, .kpi-card:hover, .feature-card:hover, .step-card:hover, .template-btn:hover, .onboarding-step:hover { transform: none !important;
  box-shadow: var(--glass-shadow) !important;
  background-color: var(--apple-control-hover) !important; }
  .btn:hover, .cta-primary:hover, .cta-secondary:hover, .btn-submit:hover, .btn-on-container:hover, .copy-btn:hover, .filter-tab:hover, .chip:hover { transform: none !important;
  text-decoration: none !important; }
  .btn-primary:hover, .cta-primary:hover, .btn-submit:hover, .btn-black:hover { background: color-mix(in srgb, var(--apple-green) 88%, #FFFFFF 12%) !important;
  box-shadow: none !important; }
  .btn-secondary:hover, .btn-ghost:hover, .cta-secondary:hover, .chip:hover, .filter-tab:hover { background: var(--apple-control-hover) !important; }
  .btn-text:hover { background: transparent !important;
  color: color-mix(in srgb, var(--apple-green) 82%, var(--apple-text) 18%) !important; }
  .table tbody tr:hover td, .conversation-item:hover, .appt-item:hover, .list-item:hover, .onboarding-step:hover, .ios-row:hover { background: var(--apple-control-hover) !important; }
  body.citeri-salon-ui .citeri-breadcrumbs a:hover { color: var(--salon-primary); }
  .card:hover, .card-elevated:hover, .kpi-card:hover, .feature-card:hover, .step-card:hover, .shortcut-item:hover { transform:translateY(-1px);
  box-shadow:0 14px 42px rgba(0,0,0,.10), inset 0 1px 0 rgba(255,255,255,.58) !important; }
  .btn-primary:hover, .cta-primary:hover, .btn-submit:hover { transform:translateY(-1px);
  box-shadow:0 18px 44px color-mix(in srgb, var(--md-sys-color-primary) 28%, transparent) !important; }
  .btn:hover, .cta-primary:hover, .cta-secondary:hover, .btn-submit:hover, .card:hover, .card-elevated:hover, .kpi-card:hover, .shortcut-item:hover, .feature-card:hover, .step-card:hover { transform:none !important;
  box-shadow:none !important; }
  .card:hover, .card-elevated:hover, .kpi-card:hover, .shortcut-item:hover, .feature-card:hover, .step-card:hover, .table tbody tr:hover td, .conversation-item:hover, .appt-item:hover, .ios-row:hover { background-color:var(--apple-control-hover, rgba(120,120,128,.18)) !important; }
  .shortcut-item:hover .shortcut-icon { background: var(--apple-control-hover, rgba(120,120,128,.16)) !important;
  color: var(--apple-gray-2, #6E6E73) !important; }
  .card:hover, .card-elevated:hover, .kpi-card:hover, .shortcut-item:hover, .feature-card:hover, .step-card:hover, .table tbody tr:hover td, .conversation-item:hover, .appt-item:hover, .ios-row:hover { background-color: var(--apple-control-hover, rgba(120,120,128,.16)) !important; }
  .card:hover, .card-elevated:hover, .kpi-card:hover { transform:translateY(-1px)!important;background:rgba(255,255,255,.82)!important }
  .btn-primary:hover, .btn-submit:hover, .cta-primary:hover, .copy-btn:hover { background: color-mix(in srgb, var(--md-sys-color-primary) 88%, #000 12%) !important;
  box-shadow: var(--md-elevation-hairline) !important;
  transform: none !important; }
  .card:hover, .card-elevated:hover, .kpi-card:hover { transform: none !important;
  background: #ffffff !important;
  box-shadow: var(--citeri-shadow-1) !important; }
  .btn-primary:hover, .btn-submit:hover, .cta-primary:hover, .copy-btn:hover { background: #005846 !important;
  box-shadow: none !important; }
  .table tbody tr:hover, .appt-item:hover, .svc-check:hover, .emp-check:hover, .key-row:hover, .endpoint:hover, .automation-row:hover, .flow-card:hover, .plan-card:hover, .var-btn:hover, .mini-btn:hover, .editor-tab:hover, .tab:hover, .tab-btn:hover, .toptab:hover, .class-card:hover, .big-btn:hover, .act-btn:hover, .conversation-item:hover, .tpl-card:hover, .wa-provider-btn:hover, .pal-item:hover, .zoom-ctrl button:hover { background: rgba(118,118,128,.08) !important;
  border-color: var(--citeri-border-soft) !important;
  box-shadow: none !important;
  transform: none !important; }
  .btn-primary:hover, .btn-submit:hover, .btn-black:hover, .cta-primary:hover, .copy-btn:hover, button[style*="background:#5D9571"]:hover, button[style*="background:#9a3412"]:hover, .filter-tab.active:hover, .editor-tab.active:hover, .tab.active:hover, .tab-btn.active:hover, .toptab.active:hover { background: color-mix(in srgb, var(--apple-green) 88%, #000 12%) !important; }
  .port:hover { border-color: var(--apple-green) !important;
  background: var(--apple-green) !important; }
  .doc-nav a:hover { color: var(--apple-green-text) !important; }
  body.citeri-salon-ui .nav-item:hover, body.citeri-salon-ui a.nav-item:hover { background: #f0f0f1 !important;
  color: var(--salon-foreground) !important;
  text-decoration: none !important; }
  body.citeri-salon-ui .card:hover, body.citeri-salon-ui .card-elevated:hover, body.citeri-salon-ui .kpi-card:hover { transform: none !important;
  background: var(--salon-card) !important;
  border-color: #d4d4d8 !important;
  box-shadow: none !important; }
  body.citeri-salon-ui .btn-primary:hover, body.citeri-salon-ui .btn-submit:hover, body.citeri-salon-ui .btn-black:hover, body.citeri-salon-ui .cta-primary:hover, body.citeri-salon-ui .copy-btn:hover { border-color: var(--salon-primary-hover) !important;
  background: var(--salon-primary-hover) !important; }
  body.citeri-salon-ui .table tbody tr:hover { background: #fafafa !important; }
  .citeri-aviso-cerrar:hover { opacity: 1; background: var(--md-sys-color-surface-variant); }
  /* La sombra cambia lo justo para indicar que el contenido abre la cita. */
  .citeri-aviso.is-enlace:hover { box-shadow: 0 2px 4px rgba(0,0,0,.05), 0 12px 34px rgba(0,0,0,.16); }
}

/* ── Táctil: respuesta al tocar ─────────────────────────────────────────
   Quitar el hover en móvil arregla el botón que se quedaba gris, pero deja
   el toque sin respuesta: pulsas y no pasa nada hasta que la pantalla
   cambia. Esto lo devuelve, y por la vía correcta — `:active` se aplica al
   APRETAR y se va al soltar, así que no puede quedarse pegado.

   Un encogido pequeño y rápido: la respuesta tiene que llegar en el momento
   del dedo, no después. */
@media (hover: none) {
  .btn, button, .nav-item, .service-item, .emp-item, .slot-btn, .cal-btn,
  .cal-day.available, .biz-action, .chip, .tab-btn {
    -webkit-tap-highlight-color: transparent;   /* el recuadro gris de iOS, fuera */
    transition: transform 90ms cubic-bezier(.32, .72, 0, 1);
  }
  .btn:active, button:active, .nav-item:active, .service-item:active,
  .emp-item:active, .slot-btn:active, .cal-btn:active,
  .cal-day.available:active, .biz-action:active, .chip:active, .tab-btn:active {
    transform: scale(.97);
  }
  /* Lo que no se puede pulsar no responde: si se encogiera al tocarlo
     parecería que ha pasado algo, y no ha pasado nada. */
  .btn:disabled:active, button:disabled:active,
  .service-item.disabled:active, [aria-disabled="true"]:active {
    transform: none;
  }
}

/* Quien pide menos movimiento no quiere que las cosas salten al tocarlas;
   el toque sigue teniendo respuesta, pero sin desplazamiento. */
@media (hover: none) and (prefers-reduced-motion: reduce) {
  .btn:active, button:active, .nav-item:active, .service-item:active,
  .emp-item:active, .slot-btn:active, .cal-btn:active,
  .cal-day.available:active, .biz-action:active, .chip:active, .tab-btn:active {
    transform: none;
    opacity: .75;
  }
}

/* ── PWA negocio · menú y acciones de una mano ─────────────────────────
   El menú conserva el contexto del diseño original (marca, negocio y
   búsqueda), pero en móvil se compacta para que siga quedando sitio para la
   navegación real. */
@media (max-width: 900px) {
  body.citeri-salon-ui .sidebar .citeri-sidebar-brand-row {
    display: flex !important;
    min-height: 52px;
    padding: calc(8px + env(safe-area-inset-top, 0px)) 12px 8px;
    align-items: center;
  }
  body.citeri-salon-ui .sidebar .citeri-shell-org {
    display: grid !important;
    padding: 0 12px 7px;
  }
  body.citeri-salon-ui .sidebar .citeri-shell-search {
    display: flex !important;
    min-height: 38px;
    margin: 0 12px 8px;
  }
  body.citeri-salon-ui .sidebar .citeri-shell-nav {
    padding-top: 0;
    overscroll-behavior: contain;
  }

  .citeri-mobile-tabbar a.is-quick {
    width: 46px;
    min-width: 46px;
    height: 46px;
    min-height: 46px;
    align-self: center;
    justify-self: center;
    border-radius: 50%;
    background: var(--apple-green, #5D9571);
    color: #fff;
    box-shadow: 0 5px 14px rgba(9,92,52,.26);
  }
  .citeri-mobile-tabbar a.is-quick svg { width: 24px; height: 24px; }
  .citeri-mobile-tabbar a.is-quick > span:last-child { display: none; }
  .citeri-mobile-tabbar a.is-quick:active { background: var(--apple-green-text, #095c34); transform: scale(.92); }

  .citeri-quick-layer[hidden] { display: none; }
  .citeri-quick-layer { position: fixed; inset: 0; z-index: 1100; }
  .citeri-quick-backdrop {
    position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
    background: rgba(19,24,20,.42);
  }
  .citeri-quick-sheet {
    position: absolute;
    right: 0; bottom: 0; left: 0;
    padding: 9px 16px calc(22px + env(safe-area-inset-bottom, 0px));
    border-radius: 26px 26px 0 0;
    background: rgba(255,255,255,.96);
    box-shadow: 0 -12px 42px rgba(0,0,0,.18);
    -webkit-backdrop-filter: blur(22px) saturate(150%);
    backdrop-filter: blur(22px) saturate(150%);
  }
  .citeri-quick-handle { width: 36px; height: 4px; margin: 0 auto 12px; border-radius: 999px; background: rgba(60,60,67,.22); }
  .citeri-quick-sheet header { display: flex; align-items: flex-start; justify-content: space-between; margin: 0 2px 14px; }
  .citeri-quick-sheet header span { display: block; color: var(--apple-gray-2, #6e6e73); font: 700 10px/1.2 var(--md-ref-typeface-plain, system-ui); letter-spacing: .08em; }
  .citeri-quick-sheet header h2 { margin: 4px 0 0; color: var(--apple-text, #1d1d1f); font: 500 25px/1.05 var(--md-ref-typeface-plain, system-ui); letter-spacing: -.035em; }
  .citeri-quick-sheet header button { width: 34px; height: 34px; border: 0; border-radius: 50%; background: rgba(118,118,128,.12); color: var(--apple-text, #1d1d1f); }
  .citeri-quick-sheet header button svg { width: 18px; height: 18px; }
  .citeri-quick-actions { display: grid; overflow: hidden; border: 1px solid rgba(60,60,67,.13); border-radius: 16px; }
  .citeri-quick-actions > a,
  .citeri-quick-actions > button {
    min-height: 68px; padding: 11px 12px; border: 0; border-bottom: 1px solid rgba(60,60,67,.13);
    display: grid; grid-template-columns: 32px minmax(0,1fr) 18px; gap: 10px; align-items: center;
    background: #fff; color: var(--apple-text, #1d1d1f); text-align: left; text-decoration: none;
    font-family: var(--md-ref-typeface-plain, system-ui); cursor: pointer;
  }
  .citeri-quick-actions > :last-child { border-bottom: 0; }
  .citeri-quick-actions > a > svg:first-child,
  .citeri-quick-actions > button > svg:first-child { width: 32px; height: 32px; padding: 8px; border-radius: 10px; background: rgba(93,149,113,.14); color: var(--apple-green-text, #095c34); }
  .citeri-quick-actions > a > svg:last-child,
  .citeri-quick-actions > button > svg:last-child { width: 17px; color: var(--apple-gray, #86868b); }
  .citeri-quick-actions strong,
  .citeri-quick-actions small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .citeri-quick-actions strong { font-size: 14px; line-height: 1.25; }
  .citeri-quick-actions small { margin-top: 3px; color: var(--apple-gray-2, #6e6e73); font-size: 12px; line-height: 1.25; }
  .citeri-quick-status { min-height: 17px; margin: 10px 3px 0; color: var(--apple-green-text, #095c34); font: 600 12px/1.4 var(--md-ref-typeface-plain, system-ui); }
  body.citeri-quick-open { overflow: hidden; }
}

@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .citeri-quick-sheet { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
}

@media (prefers-reduced-motion: reduce) {
  .citeri-mobile-tabbar a.is-quick { transition: none; }
}