/* =============================================================================
   ICONIC · tema oscuro premium (paneles del personal, login, menú de reservas)
   Se carga DESPUÉS de app.css y solo afecta a <body class="theme-dark">.
   La tarjeta dorada del cliente no usa este tema.
   ========================================================================== */
.theme-dark {
  --walnut: #15110d;
  --leather: #1e1913;
  --leather-2: #28211a;
  --seam: #3a3027;
  --bone: #efe6d8;
  --bone-dim: #a89a86;
  --brass: #c9a24a;
  --brass-hi: #e9c766;
  --brass-ink: #241a08;

  /* Estados (materiales, no semáforo) */
  --st-pending: #d9a441;
  --st-confirmed: #7fa3c7;
  --st-completed: #8fb38a;
  --st-cancelled: #7c736a;
  --st-noshow: #b5564f;

  /* Re-mapeo de los tokens de app.css para que todo lo existente se vea oscuro */
  --bg: var(--walnut);
  --paper: var(--leather);
  --ink: var(--bone);
  --ink-2: #fff8ec;
  --muted: var(--bone-dim);
  --line: var(--seam);
  --ok: #8fb38a;
  --ok-soft: rgba(143, 179, 138, 0.14);
  --err: #e0857d;
  --err-soft: rgba(181, 86, 79, 0.18);
  --warn-soft: rgba(201, 162, 74, 0.14);
  --gold-ink: var(--brass-hi);
  color-scheme: dark;
}
body.theme-dark {
  background:
    radial-gradient(1200px 500px at 85% -10%, rgba(201, 162, 74, 0.08), transparent 60%),
    var(--walnut);
  color: var(--bone);
}
.theme-dark a { color: var(--brass-hi); }
.theme-dark :focus-visible { outline: 2px solid var(--brass-hi); outline-offset: 2px; }
.theme-dark h1, .theme-dark h2 { font-family: var(--f-display); font-weight: 600; letter-spacing: 0.01em; }
.theme-dark .title-lg { font-size: 1.7rem; }
.theme-dark .muted { color: var(--bone-dim); }

/* Botones: el principal es latón; el secundario, contorno hueso. */
.theme-dark .btn { background: var(--brass); border-color: var(--brass); color: var(--brass-ink); }
.theme-dark .btn:hover { background: var(--brass-hi); border-color: var(--brass-hi); }
.theme-dark .btn.ghost { background: transparent; color: var(--bone); border-color: var(--seam); }
.theme-dark .btn.ghost:hover { background: var(--leather-2); border-color: var(--bone-dim); }
.theme-dark .btn.danger { background: var(--st-noshow); border-color: var(--st-noshow); color: #fff; }
.theme-dark .btn.ghost.danger { background: transparent; color: var(--err); border-color: rgba(224, 133, 125, 0.5); }
.theme-dark input, .theme-dark select, .theme-dark textarea { background: var(--walnut); color: var(--bone); border-color: var(--seam); }
.theme-dark input:focus, .theme-dark select:focus, .theme-dark textarea:focus { border-color: var(--brass); box-shadow: 0 0 0 3px rgba(201, 162, 74, 0.18); }
.theme-dark input[type="checkbox"], .theme-dark input[type="radio"] { accent-color: var(--brass); }
.theme-dark .tabs { background: var(--leather-2); }
.theme-dark .tabs button[aria-selected="true"] { background: var(--brass); color: var(--brass-ink); }
.theme-dark .choice { background: var(--walnut); color: var(--bone); border-color: var(--seam); }
.theme-dark .choice[aria-pressed="true"] { background: var(--brass); border-color: var(--brass); color: var(--brass-ink); }
.theme-dark th { background: var(--leather-2); color: var(--bone-dim); text-transform: none; letter-spacing: 0; font-size: 0.8rem; }
.theme-dark tr.clickable:hover td { background: rgba(201, 162, 74, 0.06); }
.theme-dark .pill { background: var(--leather-2); color: var(--bone); }
.theme-dark .pill.dark { background: var(--bone); color: var(--walnut); }
.theme-dark .kpi.accent { background: linear-gradient(140deg, #3a2c12, #241a0c); border-color: #5a4419; color: var(--bone); }
.theme-dark .kpi.accent .v { color: var(--brass-hi); }
.theme-dark .kpi.accent .k { color: var(--bone-dim); }
.theme-dark .eyebrow { text-transform: none; letter-spacing: 0; font-size: 0.85rem; font-weight: 600; color: var(--brass); }
.theme-dark .alert.info { background: rgba(201, 162, 74, 0.12); color: var(--brass-hi); }
.theme-dark .toast { background: var(--brass); color: var(--brass-ink); }
.theme-dark .step-n { background: var(--brass); color: var(--brass-ink); }
.theme-dark .bar-col .b { background: var(--brass); }
.theme-dark .poster { background: #fff; color: #111; }
.theme-dark .poster .brand, .theme-dark .poster h2, .theme-dark .poster p { color: #111; }
.theme-dark .reminder-banner { background: var(--leather-2); }
.theme-dark .bottom-bar { background: var(--leather); border-top-color: var(--seam); }
.theme-dark .slot, .theme-dark .day { background: var(--walnut); color: var(--bone); border-color: var(--seam); }
.theme-dark .slot[aria-selected="true"], .theme-dark .day[aria-selected="true"] { background: var(--brass); color: var(--brass-ink); border-color: var(--brass); }
.theme-dark .day[aria-selected="true"] .dw, .theme-dark .day[aria-selected="true"] .dm { color: var(--brass-ink); }

/* Estados de cita (agenda, horario, detalle) */
.theme-dark .st-pending { background: rgba(217, 164, 65, 0.16); color: var(--st-pending); }
.theme-dark .st-confirmed { background: rgba(127, 163, 199, 0.16); color: var(--st-confirmed); }
.theme-dark .st-completed { background: rgba(143, 179, 138, 0.16); color: var(--st-completed); }
.theme-dark .st-cancelled { background: rgba(124, 115, 106, 0.2); color: #b9afa4; }
.theme-dark .st-noshow { background: rgba(181, 86, 79, 0.18); color: #e59b94; }
.theme-dark .appt { background: var(--leather); color: var(--bone); }
.theme-dark .appt.st-pending { border-left-color: var(--st-pending); background: var(--leather); color: var(--bone); }
.theme-dark .appt.st-confirmed { border-left-color: var(--st-confirmed); background: var(--leather); color: var(--bone); }
.theme-dark .appt.st-completed { border-left-color: var(--st-completed); background: var(--leather); color: var(--bone); }
.theme-dark .appt.st-cancelled { border-left-color: var(--st-cancelled); background: var(--walnut); color: var(--bone-dim); }
.theme-dark .appt.st-noshow { border-left-color: var(--st-noshow); background: var(--walnut); color: var(--bone-dim); }

/* =============================================================================
   Barra del personal (menú según el rol)
   ========================================================================== */
.shell-bar {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30;
  background: rgba(21, 17, 13, 0.92); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--seam);
  margin-left: calc(-1 * max(16px, env(safe-area-inset-left, 0px)));
  margin-right: calc(-1 * max(16px, env(safe-area-inset-right, 0px)));
  padding: 10px max(16px, env(safe-area-inset-right, 0px)) 0 max(16px, env(safe-area-inset-left, 0px));
}
.shell-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: 1280px; margin: 0 auto; }
.shell-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--bone); min-width: 0; }
.shell-brand img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.shell-brand .name { font-family: var(--f-display); font-size: 1.25rem; letter-spacing: 0.04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shell-user { display: flex; align-items: center; gap: 8px; }
.shell-user .who { text-align: right; line-height: 1.15; font-size: 0.85rem; }
.shell-user .who small { display: block; color: var(--brass); }
@media (max-width: 560px) { .shell-user .who { display: none; } }
.shell-nav { display: flex; gap: 2px; overflow-x: auto; max-width: 1280px; margin: 8px auto 0; scrollbar-width: none; }
.shell-nav::-webkit-scrollbar { display: none; }
.shell-nav a {
  padding: 10px 12px; color: var(--bone-dim); text-decoration: none; font-size: 0.92rem; white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.shell-nav a:hover { color: var(--bone); }
.shell-nav a[aria-current="page"] { color: var(--bone); border-bottom-color: var(--brass); }
.shell-main { max-width: 1280px; margin: 0 auto; padding-block: 22px 60px; display: flex; flex-direction: column; gap: 18px; min-width: 0; }

dialog.sheet {
  border: 1px solid var(--seam); border-radius: 16px; padding: 0; background: var(--leather); color: var(--bone);
  width: min(560px, calc(100vw - 24px)); max-height: calc(100vh - 40px);
}
dialog.sheet::backdrop { background: rgba(8, 6, 4, 0.7); }
.sheet-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--seam); }
.sheet-head h2 { font-size: 1.3rem; margin: 0; }
.sheet-body { padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 14px; overflow-y: auto; }
.icon-btn { background: transparent; border: 1px solid var(--seam); color: var(--bone); width: 36px; height: 36px; border-radius: 10px; cursor: pointer; font: inherit; font-size: 1.1rem; line-height: 1; }
.icon-btn:hover { border-color: var(--bone-dim); }

/* =============================================================================
   Login
   ========================================================================== */
.login-wrap { min-height: 100vh; display: grid; place-items: center; padding-block: 32px; }
.login-card { width: min(420px, 100%); display: flex; flex-direction: column; gap: 22px; }
.login-mark { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.login-mark .pole {
  width: 10px; height: 64px; border-radius: 6px; border: 1px solid var(--seam);
  background: repeating-linear-gradient(-35deg, var(--brass) 0 7px, var(--walnut) 7px 14px, var(--bone) 14px 21px, var(--walnut) 21px 28px);
}
.login-mark h1 { font-size: 2.3rem; letter-spacing: 0.06em; margin: 0; }
.login-mark p { color: var(--bone-dim); }
.login-form { background: var(--leather); border: 1px solid var(--seam); border-radius: 18px; padding: 22px; display: flex; flex-direction: column; gap: 14px; }
.login-alt { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 0.9rem; }

/* Acceso no autorizado */
.denied { min-height: 100vh; display: grid; place-items: center; text-align: center; padding-block: 32px; }
.denied .box { max-width: 440px; display: flex; flex-direction: column; gap: 14px; align-items: center; }
.denied .lock { width: 64px; height: 64px; border-radius: 50%; border: 1px solid var(--seam); display: grid; place-items: center; color: var(--brass); }

/* =============================================================================
   HORARIO (estilo calendario profesional)
   ========================================================================== */
.cal-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.cal-nav { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.cal-nav input[type="date"] { width: auto; padding: 8px 10px; }
.seg { display: inline-flex; border: 1px solid var(--seam); border-radius: 10px; overflow: hidden; }
.seg button { background: transparent; border: 0; color: var(--bone-dim); padding: 8px 14px; font: inherit; cursor: pointer; }
.seg button + button { border-left: 1px solid var(--seam); }
.seg button[aria-pressed="true"] { background: var(--brass); color: var(--brass-ink); }
.cal-title { font-family: var(--f-display); font-size: 1.6rem; margin: 0; }
.cal-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 0.8rem; color: var(--bone-dim); }
.cal-legend span { display: inline-flex; align-items: center; gap: 6px; }
.cal-legend i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.cal-legend .lg-free { border: 1px dashed var(--bone-dim); }
.cal-legend .lg-block { background: repeating-linear-gradient(-45deg, #3d332a 0 4px, #2a231c 4px 8px); }

.cal-scroll { overflow: auto; border: 1px solid var(--seam); border-radius: 14px; background: var(--leather); max-height: calc(100vh - 230px); min-height: 420px; position: relative; }
.cal-grid { display: grid; position: relative; min-width: min-content; }
.cal-head { position: sticky; top: 0; z-index: 5; background: var(--leather-2); border-bottom: 1px solid var(--seam); padding: 10px 8px; text-align: center; min-width: 0; }
.cal-head b { font-family: var(--f-display); font-weight: 600; font-size: 1.05rem; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-head small { color: var(--bone-dim); font-size: 0.75rem; }
.cal-head.today b { color: var(--brass-hi); }
.cal-corner { position: sticky; left: 0; top: 0; z-index: 7; background: var(--leather-2); border-bottom: 1px solid var(--seam); border-right: 1px solid var(--seam); }
.cal-ruler { position: sticky; left: 0; z-index: 4; background: var(--leather); border-right: 1px solid var(--seam); }
.cal-ruler span { position: absolute; right: 8px; transform: translateY(-50%); font-size: 0.74rem; color: var(--bone-dim); font-variant-numeric: tabular-nums; }
.cal-ruler span.h { color: var(--bone); }
.cal-col { position: relative; border-right: 1px solid rgba(58, 48, 39, 0.6); }
.cal-col.off { background: repeating-linear-gradient(-45deg, rgba(58, 48, 39, 0.35) 0 6px, transparent 6px 12px); }
.cal-line { position: absolute; left: 0; right: 0; border-top: 1px solid rgba(58, 48, 39, 0.55); pointer-events: none; }
.cal-line.half { border-top-style: dashed; border-top-color: rgba(58, 48, 39, 0.3); }
.cal-outside { position: absolute; left: 0; right: 0; background: rgba(8, 6, 4, 0.45); pointer-events: none; }

.ev {
  position: absolute; left: 4px; right: 4px; border-radius: 8px; padding: 5px 8px; overflow: hidden;
  font-size: 0.78rem; line-height: 1.25; cursor: pointer; border: 0; text-align: left; font-family: inherit;
  border-left: 4px solid currentColor; color: var(--bone); display: flex; flex-direction: column; gap: 1px;
}
.ev:hover { filter: brightness(1.12); }
.ev .t { font-variant-numeric: tabular-nums; font-weight: 700; }
.ev .n { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev .s { opacity: 0.8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev.PENDING { background: rgba(217, 164, 65, 0.2); color: var(--st-pending); }
.ev.CONFIRMED { background: rgba(127, 163, 199, 0.22); color: var(--st-confirmed); }
.ev.COMPLETED { background: rgba(143, 179, 138, 0.2); color: var(--st-completed); }
.ev.CANCELLED { background: rgba(124, 115, 106, 0.18); color: var(--st-cancelled); }
.ev.CANCELLED .n { text-decoration: line-through; }
.ev.NO_SHOW { background: rgba(181, 86, 79, 0.2); color: var(--st-noshow); }
.ev > * { color: var(--bone); }
.ev.CANCELLED > *, .ev.NO_SHOW > * { color: var(--bone-dim); }
.ev.small .s, .ev.small .n + .s { display: none; }
.blk {
  position: absolute; left: 4px; right: 4px; border-radius: 8px; padding: 5px 8px; font-size: 0.76rem; color: var(--bone-dim);
  background: repeating-linear-gradient(-45deg, #3d332a 0 6px, #2a231c 6px 12px); border: 1px solid var(--seam); overflow: hidden;
  cursor: default; text-align: left; font-family: inherit;
}
.blk.editable { cursor: pointer; }
.cal-free {
  position: absolute; left: 6px; right: 6px; border: 1px dashed rgba(168, 154, 134, 0.35); border-radius: 8px;
  background: transparent; color: var(--bone-dim); font: inherit; font-size: 0.74rem; text-align: left; padding: 4px 8px; cursor: default;
}
.cal-free.can { cursor: pointer; }
.cal-free.can:hover { border-color: var(--brass); color: var(--brass-hi); background: rgba(201, 162, 74, 0.06); }
.now-line { position: absolute; left: 0; right: 0; border-top: 2px solid var(--brass-hi); z-index: 3; pointer-events: none; }
.now-line::before { content: ""; position: absolute; left: -5px; top: -6px; width: 10px; height: 10px; border-radius: 50%; background: var(--brass-hi); box-shadow: 0 0 0 3px rgba(233, 199, 102, 0.25); }

.cal-list { display: flex; flex-direction: column; gap: 18px; }
.cal-list h3 { font-family: var(--f-display); font-weight: 600; font-size: 1.15rem; margin: 0 0 8px; }
.cal-list .row-item { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--seam); cursor: pointer; background: transparent; border-left: 0; border-right: 0; border-top: 0; color: var(--bone); font: inherit; text-align: left; width: 100%; }
.cal-list .row-item:hover { background: rgba(201, 162, 74, 0.05); }
.cal-list .row-item .tm { font-variant-numeric: tabular-nums; font-weight: 600; }
@media (max-width: 560px) { .cal-list .row-item { grid-template-columns: 96px minmax(0, 1fr); } .cal-list .row-item .pill { grid-column: 2; justify-self: start; } }

.detail-list { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 14px; font-size: 0.92rem; }
.detail-list dt { color: var(--bone-dim); }
.detail-list dd { margin: 0; overflow-wrap: anywhere; }
.timeline { list-style: none; margin: 0; padding: 0; font-size: 0.84rem; color: var(--bone-dim); display: flex; flex-direction: column; gap: 4px; }

/* =============================================================================
   CONFIGURACIÓN
   ========================================================================== */
.cfg-layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 28px; align-items: start; }
@media (max-width: 880px) { .cfg-layout { grid-template-columns: 1fr; } }
.cfg-nav { position: sticky; top: 120px; display: flex; flex-direction: column; gap: 2px; }
@media (max-width: 880px) { .cfg-nav { position: static; flex-direction: row; overflow-x: auto; scrollbar-width: none; } }
.cfg-nav button { background: transparent; border: 0; color: var(--bone-dim); text-align: left; padding: 10px 12px; border-radius: 10px; font: inherit; cursor: pointer; white-space: nowrap; }
.cfg-nav button[aria-current="true"] { color: var(--bone); background: var(--leather-2); box-shadow: inset 2px 0 0 var(--brass); }
.cfg-section { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.cfg-section > header p { color: var(--bone-dim); max-width: 64ch; margin-top: 6px; }
.cfg-block { border-top: 1px solid var(--seam); padding-top: 18px; display: flex; flex-direction: column; gap: 14px; }
.cfg-block h3 { font-size: 1.05rem; margin: 0; font-family: var(--f-body); font-weight: 700; }
.cfg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px 16px; }
.cfg-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.weekdays { display: flex; flex-wrap: wrap; gap: 6px; }
.weekdays label { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border: 1px solid var(--seam); border-radius: 999px; cursor: pointer; font-size: 0.9rem; }
.weekdays label:has(input:checked) { border-color: var(--brass); color: var(--brass-hi); }
.weekdays input { width: 16px; height: 16px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 6px 5px 12px; border-radius: 999px; background: var(--leather-2); font-size: 0.86rem; }
.chip button { background: transparent; border: 0; color: var(--bone-dim); cursor: pointer; font: inherit; width: 22px; height: 22px; border-radius: 50%; }
.chip button:hover { color: var(--err); }
.svc-row { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--seam); }
.svc-row img { width: 72px; height: 72px; object-fit: cover; border-radius: 12px; background: var(--walnut); }
.svc-row .meta { color: var(--bone-dim); font-size: 0.86rem; }
.svc-row .row-wrap { justify-content: flex-end; }
@media (max-width: 620px) { .svc-row { grid-template-columns: 56px minmax(0, 1fr); } .svc-row img { width: 56px; height: 56px; } .svc-row .row-wrap { grid-column: 1 / -1; justify-content: flex-start; } }
.svc-row.inactive { opacity: 0.55; }
.tpl { border: 1px solid var(--seam); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.tpl-preview { background: var(--walnut); border-radius: 12px; padding: 12px 14px; font-size: 0.9rem; border: 1px solid var(--seam); }
.tpl-preview b { display: block; margin-bottom: 2px; }
.map-box { border-radius: 14px; overflow: hidden; border: 1px solid var(--seam); position: relative; aspect-ratio: 16 / 9; max-height: 340px; background: #1a1612; touch-action: none; cursor: crosshair; }
.map-box canvas { width: 100%; height: 100%; display: block; }
.map-hint { font-size: 0.8rem; color: var(--bone-dim); }
.sched-table { width: 100%; }
.sched-table td { padding: 6px 8px; white-space: nowrap; vertical-align: middle; }
.sched-table input[type="time"] { width: auto; padding: 6px 8px; }

/* =============================================================================
   MENÚ ANIMADO DE SERVICIOS (cliente)
   ========================================================================== */
.book-shell { max-width: 980px; margin: 0 auto; padding-block: 18px 140px; display: flex; flex-direction: column; gap: 22px; }
.book-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.book-head .shell-brand .name { font-size: 1.4rem; }
.stepper { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; list-style: none; padding: 0; margin: 0; counter-reset: st; }
.stepper li { border-top: 2px solid var(--seam); padding-top: 8px; font-size: 0.82rem; color: var(--bone-dim); }
.stepper li::before { counter-increment: st; content: counter(st) ". "; }
.stepper li[aria-current="step"] { border-top-color: var(--brass); color: var(--bone); }
.stepper li.done { border-top-color: rgba(201, 162, 74, 0.5); }
.book-title { font-family: var(--f-display); font-size: clamp(1.8rem, 5vw, 2.6rem); margin: 0; line-height: 1.05; }
.cat-filter { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; position: relative; padding-bottom: 2px; }
.cat-filter::-webkit-scrollbar { display: none; }
.cat-filter button { background: transparent; border: 1px solid var(--seam); color: var(--bone-dim); border-radius: 999px; padding: 8px 16px; font: inherit; cursor: pointer; white-space: nowrap; transition: color 0.2s, border-color 0.2s, background 0.2s; }
.cat-filter button[aria-pressed="true"] { background: var(--bone); color: var(--walnut); border-color: var(--bone); }
.svc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
@media (max-width: 640px) {
  .svc-grid { grid-auto-flow: column; grid-auto-columns: 78%; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; margin-right: calc(-1 * max(16px, env(safe-area-inset-right, 0px))); padding-right: 16px; scrollbar-width: none; }
  .svc-grid::-webkit-scrollbar { display: none; }
}
.svc-card {
  position: relative; display: flex; flex-direction: column; text-align: left; padding: 0; overflow: hidden; cursor: pointer;
  background: var(--leather); border: 1px solid var(--seam); border-radius: 18px; color: var(--bone); font: inherit;
  scroll-snap-align: start; transition: transform 0.25s cubic-bezier(.2, .8, .2, 1), border-color 0.25s, box-shadow 0.25s;
  animation: svc-in 0.5s cubic-bezier(.2, .8, .2, 1) both;
}
.svc-card:hover { transform: translateY(-4px); border-color: rgba(201, 162, 74, 0.6); box-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.8); }
.svc-card:active { transform: scale(0.98); }
.svc-card[aria-pressed="true"] { border-color: var(--brass); box-shadow: 0 0 0 2px var(--brass), 0 18px 40px -20px rgba(201, 162, 74, 0.5); }
.svc-card .ph { aspect-ratio: 4 / 3; background: #1a1612; overflow: hidden; }
.svc-card .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(.2, .8, .2, 1); }
.svc-card:hover .ph img { transform: scale(1.05); }
.svc-card .body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.svc-card .nm { font-family: var(--f-display); font-size: 1.3rem; font-weight: 600; line-height: 1.1; }
.svc-card .ds { color: var(--bone-dim); font-size: 0.88rem; line-height: 1.4; }
.svc-card .ft { display: flex; justify-content: space-between; align-items: baseline; margin-top: auto; padding-top: 8px; font-variant-numeric: tabular-nums; }
.svc-card .pr { color: var(--brass-hi); font-weight: 700; font-size: 1.05rem; }
.svc-card .du { color: var(--bone-dim); font-size: 0.85rem; }
.svc-card .tick { position: absolute; top: 12px; right: 12px; width: 30px; height: 30px; border-radius: 50%; background: var(--brass); color: var(--brass-ink); display: grid; place-items: center; font-weight: 800; transform: scale(0); transition: transform 0.3s cubic-bezier(.3, 1.6, .5, 1); }
.svc-card[aria-pressed="true"] .tick { transform: scale(1); }
.svc-card.leaving { animation: svc-out 0.18s ease both; }
@keyframes svc-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes svc-out { to { opacity: 0; transform: scale(0.96); } }
.step-panel { display: flex; flex-direction: column; gap: 16px; animation: step-in 0.35s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes step-in { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
.barber-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.barber-card { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px 12px; border-radius: 16px; border: 1px solid var(--seam); background: var(--leather); color: var(--bone); cursor: pointer; font: inherit; transition: border-color 0.2s, transform 0.2s; }
.barber-card:hover { border-color: rgba(201, 162, 74, 0.6); transform: translateY(-2px); }
.barber-card[aria-pressed="true"] { border-color: var(--brass); box-shadow: 0 0 0 2px var(--brass); }
.barber-card .av { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; font-family: var(--f-display); font-size: 1.4rem; background: linear-gradient(140deg, #3a2c12, #241a0c); color: var(--brass-hi); border: 1px solid #5a4419; }
.barber-card .nm { font-weight: 600; text-align: center; }
.summary-card { background: var(--leather); border: 1px solid var(--seam); border-radius: 18px; padding: 18px; display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; align-items: center; }
.summary-card img { width: 96px; height: 96px; border-radius: 14px; object-fit: cover; }
.summary-card .when { font-family: var(--f-display); font-size: 1.35rem; line-height: 1.15; }
.wait-box { border: 1px solid rgba(201, 162, 74, 0.4); background: rgba(201, 162, 74, 0.08); border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; }
.wait-box .count { font-family: var(--f-display); font-size: 1.6rem; color: var(--brass-hi); font-variant-numeric: tabular-nums; }

/* Bandeja de notificaciones del cliente (tema claro de la tarjeta) */
.bell { position: relative; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--line); color: var(--ink); text-decoration: none; background: var(--paper); }
.bell svg { width: 20px; height: 20px; }
.bell .badge { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; border-radius: 999px; background: #b3261e; color: #fff; font-size: 0.72rem; font-weight: 700; display: grid; place-items: center; padding: 0 5px; }
.inbox { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.inbox li { display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: 12px; padding: 14px 4px; border-bottom: 1px solid var(--line); }
.inbox li .dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 7px; background: transparent; }
.inbox li.unread .dot { background: var(--gold-1); }
.inbox li b { display: block; }
.inbox li .when { font-size: 0.78rem; color: var(--muted); margin-top: 4px; }
.switch-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.switch-row:last-child { border-bottom: 0; }
.switch-row p { color: var(--muted); font-size: 0.86rem; margin-top: 2px; }
.switch { position: relative; width: 50px; height: 30px; flex: 0 0 auto; }
.switch input { opacity: 0; width: 100%; height: 100%; margin: 0; position: absolute; cursor: pointer; z-index: 1; }
.switch span { position: absolute; inset: 0; border-radius: 999px; background: #d8d5cd; transition: background 0.2s; }
.switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); transition: transform 0.2s; }
.switch input:checked + span { background: var(--gold-1); }
.switch input:checked + span::after { transform: translateX(20px); }
.switch input:focus-visible + span { outline: 3px solid var(--gold-1); outline-offset: 2px; }
.card-top-actions { display: flex; justify-content: space-between; align-items: center; gap: 10px; }

@media (prefers-reduced-motion: reduce) {
  .svc-card, .step-panel, .svc-card .tick { animation: none !important; transition: none !important; }
}

/* Esqueletos y estados vacíos */
.skeleton-stack { display: flex; flex-direction: column; gap: 10px; }
.skeleton { height: 18px; border-radius: 8px; background: linear-gradient(90deg, var(--leather-2, #e9e7e1) 0%, var(--seam, #f3f1ec) 50%, var(--leather-2, #e9e7e1) 100%); background-size: 200% 100%; animation: shimmer 1.3s linear infinite; }
.skeleton:nth-child(3n + 2) { width: 82%; }
.skeleton:nth-child(3n) { width: 64%; }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.empty-state { border: 1px dashed var(--seam, var(--line)); border-radius: 14px; padding: 26px 18px; text-align: center; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.empty-state p { max-width: 46ch; }
.stack-tight { display: flex; flex-direction: column; gap: 2px; }
.cal-legend .ev-dot.PENDING { background: var(--st-pending); }
.cal-legend .ev-dot.CONFIRMED { background: var(--st-confirmed); }
.cal-legend .ev-dot.COMPLETED { background: var(--st-completed); }
.cal-legend .ev-dot.CANCELLED { background: var(--st-cancelled); }
.cal-legend .ev-dot.NO_SHOW { background: var(--st-noshow); }
.cal-nav select { width: auto; padding: 8px 10px; }
.ev .b { font-size: 0.7rem; opacity: 0.75; }
.slot-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.slot-chips button { background: transparent; border: 1px solid var(--seam); color: var(--bone); border-radius: 8px; padding: 6px 10px; font: inherit; font-size: 0.85rem; font-variant-numeric: tabular-nums; cursor: pointer; }
.slot-chips button:hover, .slot-chips button[aria-pressed="true"] { border-color: var(--brass); color: var(--brass-hi); }
.status-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.cal-off-label { position: absolute; top: 40%; left: 0; right: 0; text-align: center; font-size: 0.8rem; color: var(--bone-dim); }
.cal-break { position: absolute; left: 0; right: 0; background: repeating-linear-gradient(-45deg, rgba(58, 48, 39, 0.5) 0 5px, transparent 5px 10px); color: var(--bone-dim); font-size: 0.72rem; padding: 3px 8px; pointer-events: none; }
.ev.compact { padding: 4px 5px; border-left-width: 3px; font-size: 0.72rem; }
.cal-head small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.book-bar { max-width: 980px; }
.book-bar .min0 { flex: 1; }
.theme-dark .success-big .mark { background: var(--brass); color: var(--brass-ink); }
.theme-dark .day:disabled { opacity: 0.3; }
.theme-dark .alert.err { background: rgba(181, 86, 79, 0.18); color: #f0a49d; }
.theme-dark .alert.ok { background: rgba(143, 179, 138, 0.16); color: var(--st-completed); }
.theme-dark .check a { color: var(--brass-hi); }
.theme-dark .link-btn { color: var(--bone-dim); }
.theme-dark .btn:disabled { background: var(--leather-2); border-color: var(--seam); color: var(--bone-dim); opacity: 1; cursor: not-allowed; }

/* Selector de mapa */
.map-box { aspect-ratio: auto; height: 340px; max-height: none; cursor: grab; user-select: none; }
.map-box:active { cursor: grabbing; }
.map-tiles { position: absolute; inset: 0; filter: grayscale(0.35) brightness(0.85) contrast(1.05); }
.map-tiles img { position: absolute; width: 256px; height: 256px; max-width: none; pointer-events: none; }
.map-circle { position: absolute; border-radius: 50%; border: 2px solid var(--brass); background: rgba(201, 162, 74, 0.16); pointer-events: none; }
.map-pin { position: absolute; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: var(--brass-hi); border: 3px solid var(--walnut); box-shadow: 0 0 0 2px var(--brass-hi); pointer-events: none; }
.map-zoom { position: absolute; right: 10px; width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--seam); background: var(--leather); color: var(--bone); font: inherit; font-size: 1.2rem; cursor: pointer; z-index: 2; }
.map-zoom.in { top: 10px; }
.map-zoom.out { top: 52px; }
.map-attrib { position: absolute; right: 4px; bottom: 4px; font-size: 0.68rem; background: rgba(21, 17, 13, 0.8); color: var(--bone-dim) !important; padding: 2px 6px; border-radius: 6px; z-index: 2; }
.sched-day { display: grid; grid-template-columns: 96px 150px minmax(0, 1fr); gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--seam); }
.sched-day select, .sched-day input[type="time"] { width: auto; padding: 6px 8px; }
.sched-day .times { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
@media (max-width: 620px) { .sched-day { grid-template-columns: 1fr 1fr; } .sched-day .times { grid-column: 1 / -1; } }
.staff-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--seam); }
.staff-row.inactive { opacity: 0.55; }
.var-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.var-chips button { background: var(--walnut); border: 1px solid var(--seam); color: var(--brass-hi); border-radius: 8px; padding: 4px 8px; font: inherit; font-size: 0.8rem; cursor: pointer; }
.toggle-line { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.theme-dark .switch span { background: var(--seam); }
.theme-dark .switch input:checked + span { background: var(--brass); }
.logo-preview { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; background: var(--walnut); border: 1px solid var(--seam); }
.map-box.offline::after { content: "Sin conexión al mapa: usa las coordenadas o el enlace de Google Maps."; position: absolute; left: 10px; bottom: 10px; right: 120px; font-size: 0.78rem; color: var(--bone-dim); }
.sched-day { grid-template-columns: minmax(0, 1fr) auto; }
.sched-day .times { grid-column: 1 / -1; }
.sched-day .chip input[type="time"] { padding: 4px 6px; width: auto; background: var(--walnut); }
@media (max-width: 620px) { .sched-day { grid-template-columns: minmax(0, 1fr) auto; } }
.sched-day .chip { flex-wrap: wrap; border-radius: 12px; }

/* Panel */
.theme-dark .panel { background: var(--leather); border-color: var(--seam); }
.theme-dark .table-wrap { background: var(--leather); border-color: var(--seam); }
.theme-dark td { border-bottom-color: var(--seam); }
.theme-dark .kpi { background: var(--leather); border-color: var(--seam); }
.theme-dark .section-head h1 { font-family: var(--f-display); }
.seg-tabs { display: inline-flex; gap: 4px; background: var(--leather-2); padding: 4px; border-radius: 999px; }
.seg-tabs button { border: 0; background: transparent; color: var(--bone-dim); padding: 8px 16px; border-radius: 999px; font: inherit; cursor: pointer; }
.seg-tabs button[aria-pressed="true"] { background: var(--bone); color: var(--walnut); }
.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; }
.filters .field { min-width: 140px; }
.filters select, .filters input { padding: 8px 10px; }
.barber-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.barber-ov { background: var(--leather); border: 1px solid var(--seam); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.barber-ov h3 { font-family: var(--f-display); font-size: 1.25rem; margin: 0; }
.week-strip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.week-strip span { text-align: center; font-size: 0.7rem; padding: 6px 2px; border-radius: 8px; background: var(--walnut); color: var(--bone-dim); line-height: 1.25; }
.week-strip span.on { color: var(--bone); box-shadow: inset 0 -2px 0 var(--brass); }
.week-strip b { display: block; font-size: 0.78rem; }
.sel-bar { position: sticky; bottom: 12px; display: flex; gap: 12px; align-items: center; justify-content: space-between; background: var(--leather-2); border: 1px solid var(--seam); border-radius: 14px; padding: 10px 14px; z-index: 5; }
td .check-cell { width: 18px; height: 18px; }
.theme-dark .agenda-shell { margin: 0 auto; width: 100%; }
.recep-shell { padding-top: 20px; }