/* ═══════════════════════════════════════════════════════════════════════════
   Citeri · Apple Design System — fundamentos visuales compartidos
   Tokens, reset, tipografía, scrollbar, accesibilidad.
   Se carga en TODAS las páginas: panel, reserva pública, landing y login.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Tokens ─────────────────────────────────────────────────────────────── */
:root,
.dark,
[data-theme="dark"],
body.citeri-salon-ui {
  color-scheme: light;

  /* Tinta */
  --white:   #ffffff;
  --black:   #000000;
  --ink:     #1d1d1f;
  --ink-2:   #3a3a3c;
  --ink-3:   #6e6e73;
  --ink-4:   #98989d;

  /* Fondos */
  --fill-1:  #f5f5f7;
  --fill-2:  #e8e8ed;
  --fill-3:  #d8d8dd;

  /* Separadores */
  --separator:      rgba(0,0,0,.10);
  --separator-soft: rgba(0,0,0,.065);

  /* Acento único — azul Apple */
  --blue:       #0071e3;
  --blue-hover: #0077ed;
  --blue-dark:  #004fa3;
  --blue-light: rgba(0,113,227,.10);
  --blue-focus: rgba(0,113,227,.16);

  /* Semánticos */
  --success: #248a3d;
  --success-bg: rgba(52,199,89,.12);
  --warning: #a56600;
  --warning-bg: rgba(255,159,10,.13);
  --danger:  #c9342d;
  --danger-bg: rgba(255,59,48,.10);

  /* Radios */
  --radius-xs:   7px;
  --radius-sm:   11px;
  --radius-md:   15px;
  --radius-lg:   20px;
  --radius-xl:   26px;
  --radius-pill: 9999px;

  /* Sombras — solo capas que flotan de verdad */
  --shadow-xs: 0 1px 3px rgba(0,0,0,.055), 0 1px 2px rgba(0,0,0,.03);
  --shadow-sm: 0 4px 16px rgba(0,0,0,.07);
  --shadow-md: 0 12px 36px rgba(0,0,0,.09);
  --shadow-lg: 0 24px 72px rgba(0,0,0,.12);
  --shadow-xl: 0 40px 100px rgba(0,0,0,.16);

  /* Cristal */
  --glass-sidebar:   rgba(255,255,255,.86);
  --glass-modal:     rgba(255,255,255,.94);
  --glass-nav:       rgba(255,255,255,.80);
  --glass-blur:      blur(20px) saturate(180%);
  --glass-blur-md:   blur(28px) saturate(200%);

  /* Movimiento — curvas Apple */
  --ease-out:      cubic-bezier(0.22,1,0.36,1);
  --ease-standard: cubic-bezier(0.4,0,0.2,1);
  --ease-in:       cubic-bezier(0.55,0,1,0.45);
  --dur-fast:   100ms;
  --dur-base:   160ms;
  --dur-medium: 240ms;
  --dur-slow:   380ms;

  /* Tipografía — SF Pro system stack */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
               "Inter", "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  /* Shell */
  --sidebar-w:   252px;
  --topbar-h:    48px;
  --content-max: 1480px;
}

/* ─── Dark mode ───────────────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --white:    #1c1c1e;
    --black:    #000000;
    --ink:      #f5f5f7;
    --ink-2:    #c7c7cc;
    --ink-3:    #8e8e93;
    --ink-4:    #636366;
    --fill-1:   #000000;
    --fill-2:   #1c1c1e;
    --fill-3:   #2c2c2e;
    --separator:      rgba(255,255,255,.12);
    --separator-soft: rgba(255,255,255,.07);
    --blue:       #2997ff;
    --blue-hover: #34a1ff;
    --blue-light: rgba(41,151,255,.14);
    --blue-focus: rgba(41,151,255,.20);
    --success:    #30d158;
    --success-bg: rgba(48,209,88,.14);
    --warning:    #ffd60a;
    --warning-bg: rgba(255,214,10,.12);
    --danger:     #ff453a;
    --danger-bg:  rgba(255,69,58,.14);
    --glass-sidebar:  rgba(28,28,30,.90);
    --glass-modal:    rgba(44,44,46,.96);
    --glass-nav:      rgba(28,28,30,.82);
    --shadow-xs: 0 1px 3px rgba(0,0,0,.30), 0 1px 2px rgba(0,0,0,.20);
    --shadow-sm: 0 4px 16px rgba(0,0,0,.36);
    --shadow-md: 0 12px 36px rgba(0,0,0,.44);
    --shadow-lg: 0 24px 72px rgba(0,0,0,.52);
    --shadow-xl: 0 40px 100px rgba(0,0,0,.60);
  }
}

.dark,
[data-theme="dark"] {
  color-scheme: dark;
  --white:    #1c1c1e;
  --black:    #000000;
  --ink:      #f5f5f7;
  --ink-2:    #c7c7cc;
  --ink-3:    #8e8e93;
  --ink-4:    #636366;
  --fill-1:   #000000;
  --fill-2:   #1c1c1e;
  --fill-3:   #2c2c2e;
  --separator:      rgba(255,255,255,.12);
  --separator-soft: rgba(255,255,255,.07);
  --blue:       #2997ff;
  --blue-hover: #34a1ff;
  --blue-light: rgba(41,151,255,.14);
  --blue-focus: rgba(41,151,255,.20);
  --success:    #30d158;
  --success-bg: rgba(48,209,88,.14);
  --warning:    #ffd60a;
  --warning-bg: rgba(255,214,10,.12);
  --danger:     #ff453a;
  --danger-bg:  rgba(255,69,58,.14);
  --glass-sidebar:  rgba(28,28,30,.90);
  --glass-modal:    rgba(44,44,46,.96);
  --glass-nav:      rgba(28,28,30,.82);
  --shadow-xs: 0 1px 3px rgba(0,0,0,.30);
  --shadow-sm: 0 4px 16px rgba(0,0,0,.36);
  --shadow-md: 0 12px 36px rgba(0,0,0,.44);
  --shadow-lg: 0 24px 72px rgba(0,0,0,.52);
  --shadow-xl: 0 40px 100px rgba(0,0,0,.60);
}

/* ─── Reset ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-optical-sizing: auto;
  scroll-behavior: smooth;
  scroll-padding-top: 72px;
  background: var(--fill-1);
}

body {
  min-width: 320px;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.012em;
  color: var(--ink);
  background: var(--fill-1);
  overflow-x: hidden;
}

button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

/* Focus rings Apple-style */
:where(a,button,input,select,textarea,[tabindex]):focus-visible {
  outline: 3px solid var(--blue-focus) !important;
  outline-offset: 2px;
}

/* Selección */
::selection {
  background: var(--blue-focus);
  color: var(--ink);
}

/* Scrollbar macOS-style */
::-webkit-scrollbar        { width: 6px; height: 6px; }
::-webkit-scrollbar-track  { background: transparent; }
::-webkit-scrollbar-thumb  {
  border-radius: var(--radius-pill);
  background: var(--fill-3);
}
::-webkit-scrollbar-thumb:hover { background: var(--ink-4); }

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

@media (prefers-contrast: more) {
  :root, .dark, [data-theme="dark"] {
    --ink-3: #4b4b50;
    --ink-4: #626267;
    --separator: rgba(0,0,0,.3);
    --separator-soft: rgba(0,0,0,.2);
  }
}

@media (forced-colors: active) {
  :where(a,button,input,select,textarea,[tabindex]):focus-visible {
    outline: 2px solid CanvasText !important;
  }
}

/* ─── Reducir transparencia ──────────────────────────────────────────────── */
@media (prefers-reduced-transparency: reduce) {
  :root {
    --glass-sidebar: var(--white);
    --glass-modal:   var(--white);
    --glass-nav:     var(--white);
    --glass-blur:    none;
    --glass-blur-md: none;
  }
}