/* The Glamour — modo oscuro. Sigue al sistema; el botón luna/sol lo fija (data-theme en <html>). */
:root[data-theme="dark"] {
  --canvas: #241c1a;
  --band: #171211;
  --ink: #f4ece6;
  --slate: #b5a5a0;
  --steel: #7f716d;
  --hair: #3a2f2c;
  --ctrl: #322825;
  --lacquer: #d9ab92;     /* acento legible sobre fondo oscuro (textos y enlaces) */
  --sel: #e9cdbb;         /* lo seleccionado: crema rosada con letra oscura */
  --ok: #7fc39a;
  --danger: #f08a80;
  --accent: #8c6450;      /* botones del panel: mismo rose-gold oscuro con letra blanca */
  --accent-soft: #3a2a24;
  --gold: #d9a46a;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --canvas: #241c1a;
    --band: #171211;
    --ink: #f4ece6;
    --slate: #b5a5a0;
    --steel: #7f716d;
    --hair: #3a2f2c;
    --ctrl: #322825;
    --lacquer: #d9ab92;
    --sel: #e9cdbb;
    --ok: #7fc39a;
    --danger: #f08a80;
    --accent: #8c6450;
    --accent-soft: #3a2a24;
    --gold: #d9a46a;
    color-scheme: dark;
  }
}

/* Lo que no usa variables. [data-dark] lo pone theme.js cuando el modo efectivo es oscuro. */
[data-dark] body { background: var(--band); }
[data-dark] .nav { background: rgba(23, 18, 17, .82); }
[data-dark] .bar { background: rgba(36, 28, 26, .86); }
[data-dark] .cta { background: #8c6450; }
[data-dark] .day.is-sel strong, [data-dark] .slot.is-sel { color: #1d1513; }
[data-dark] .slot.is-sel small { color: rgba(29, 21, 19, .65); }
[data-dark] .error { background: #3b211f; }
[data-dark] .badge.pending { background: #3a2c1c; }
[data-dark] .badge.confirmed { background: #1e3326; }
[data-dark] .badge.cancelled, [data-dark] .badge.expired { background: #3b211f; }
[data-dark] .toggle:checked { background: #8c6450; }
[data-dark] .tabs a.is-active { color: var(--band); }
[data-dark] .details a { color: var(--lacquer); }
[data-dark] .svc.is-on .pick::after { border-color: #1d1513; }
@media (min-width: 560px) { [data-dark] body { background: #120e0d; } }
@media (min-width: 960px) {
  [data-dark] body { background: var(--band); }
  [data-dark] .nav { background: rgba(23, 18, 17, .9); }
  [data-dark] .svc:hover { background: #2b2220; }
}

/* Botón luna/sol */
.theme-btn {
  position: fixed;
  top: calc(env(safe-area-inset-top) + 6px);
  right: 10px;
  z-index: 6;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--ink);
  background: color-mix(in srgb, var(--canvas) 72%, transparent);
  backdrop-filter: blur(16px) saturate(1.5);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
  box-shadow: 0 0 0 1px var(--hair);
  transition: transform .15s;
}
.theme-btn:active { transform: scale(.92); }
.theme-btn svg { width: 20px; height: 20px; }
.topbar .theme-btn { position: static; box-shadow: none; background: transparent; margin: 0 4px 0 auto; }
@media (min-width: 960px) { .theme-btn { top: 22px; right: 22px; } }
html.theme-anim, html.theme-anim * { transition: background-color .3s, color .3s, border-color .3s !important; }