/* Admin Panel — The Barber Sevilla */

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  user-select: none;
}

:root {
  --canvas:         var(--bs-bg-dark);
  --surface:        var(--bs-bg-dark);
  --card:           var(--bs-bg-dark-2);
  --card-hover:     var(--bs-bg-dark-2);
  --elevated:       #373631;
  --hairline:       var(--bs-border-dark);
  --hairline-mid:   var(--bs-border-dark);
  --ink:            var(--bs-text-light);
  --body:           var(--bs-text-muted-lt);
  --muted:          var(--bs-text-muted-lt);
  --muted-soft:     rgba(245, 240, 232, 0.25);

  --moss:           var(--bs-bg-dark);
  --moss-deep:      var(--bs-bg-dark);
  --moss-light:     var(--bs-bg-dark-2);
  --gold:           var(--bs-gold);
  --gold-soft:      var(--bs-gold-hover);
  --accent-rgb:     201,168,76;   /* canal RGB del acento (Ónix=dorado). Los temas lo sobrescriben. */
  --danger:         #c0392b;
  --danger-soft:    #922b21;
  --success:        #27ae60;
  --warning:        #e67e22;

  --online-color:   #3498db;
  --phone-color:    var(--gold);
  --busy-color:     var(--muted);

  --font-mono:  'Space Mono', monospace;
  --font-disp:  'Playfair Display', serif;
  --font-figures: 'IBM Plex Mono', 'SF Mono', 'Courier New', monospace;

  --sp-xs:  6px;
  --sp-sm:  10px;
  --sp-md:  16px;
  --sp-lg:  24px;
  --sp-xl:  40px;

  --sidebar-w: 220px;
  --topbar-h: 56px;
  --radius: 2px;
  --t: 0.18s ease;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { height: 100%; height: -webkit-fill-available; }
body { height: 100%; }
body {
  background: var(--canvas);
  color: var(--body);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
button { cursor: pointer; font-family: var(--font-mono); font-size: inherit; border: none; background: none; }
input, select, textarea { font-family: var(--font-mono); font-size: 13px; }
a { color: inherit; text-decoration: none; }

/* ── LOGIN SCREEN ──────────────────────────────────────────────────────────── */
#loginScreen {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; inset: 0;
  background: var(--canvas);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  flex-direction: column;
  gap: var(--sp-xl);
}
.login-box {
  width: 360px;
  background: var(--card);
  border: 1px solid var(--hairline-mid);
  padding: var(--sp-xl);
}
.login-title {
  font-family: var(--font-disp);
  font-size: 1.1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 4px;
}
.login-sub {
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--sp-xl);
}
.login-form { display: flex; flex-direction: column; gap: var(--sp-md); }
.field-group { display: flex; flex-direction: column; gap: var(--sp-xs); }
.field-label {
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}
.field-input {
  background: var(--surface);
  border: 1px solid var(--hairline-mid);
  color: var(--ink);
  padding: 10px 12px;
  outline: none;
  transition: border-color var(--t);
  border-radius: var(--radius);
}
.field-input:focus { border-color: var(--muted); }
.login-error {
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  color: var(--danger);
  display: none;
  margin-top: -8px;
}
.btn-login {
  background: rgba(var(--accent-rgb),0.88);
  color: #1C1B19;
  padding: 10px;
  border: 1px solid rgba(var(--accent-rgb),0.95);
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-top: var(--sp-sm);
  transition: background var(--t), border-color var(--t);
}
.btn-login:hover { background: rgba(var(--accent-rgb),1); border-color: rgba(var(--accent-rgb),1); }
/* "He olvidado mi contraseña". Es una salida de emergencia, no una acción
   principal: va debajo de Entrar, en texto, sin competir con el botón.
   No cuelga de la capa UX v2 como el resto de lo nuevo porque en la pantalla de
   acceso todavía no hay sesión y no se sabe de qué negocio es quien mira. */
.login-olvido {
  display: block; width: 100%; margin-top: var(--sp-md);
  background: none; border: none; cursor: pointer;
  font-family: var(--font-mono); font-size: 0.62rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted); text-decoration: underline; text-underline-offset: 3px;
  transition: color var(--t);
}
.login-olvido:hover { color: var(--ink); }

/* Textos de apoyo de los modales de trabajador y de recuperación. */
.wk-hint { font-size: 0.68rem; color: var(--muted); line-height: 1.5; margin-top: 6px; }
.wk-ok   { font-size: 0.8rem; font-weight: 600; color: var(--success); padding: var(--sp-sm) 0; }

.login-logo {
  font-family: var(--font-disp);
  font-size: 0.9rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(245,240,232,0.3);
}

/* ── APP SHELL ─────────────────────────────────────────────────────────────── */
#app {
  display: none;
  height: 100vh;
  height: 100vh; height: 100dvh;
  flex-direction: column;
}
#app.visible {
  display: flex;
}

/* Top bar */
.topbar {
  height: var(--topbar-h);
  background: var(--surface);
  border-bottom: 1px solid var(--hairline);
  display: flex;
  align-items: center;
  padding: 0 var(--sp-lg);
  justify-content: space-between;
  flex-shrink: 0;
  z-index: 10;
}
.topbar-brand {
  font-family: var(--font-disp);
  font-size: 0.85rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink);
}
.topbar-right {
  display: flex;
  align-items: center;
  gap: var(--sp-md);
}
.topbar-user-area {
  display: flex;
  align-items: center;
  gap: 8px;
}
.topbar-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(var(--accent-rgb),0.3);
  flex-shrink: 0;
}
.topbar-avatar-photo {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.topbar-owner-label {
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
  white-space: nowrap;
}
.topbar-avatar-initial {
  background: rgba(var(--accent-rgb),0.15);
  color: var(--gold);
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0;
  text-transform: uppercase;
}
.topbar-user {
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.topbar-user span { color: var(--ink); }
.btn-topbar {
  font-size: 0.6rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 5px 10px;
  border: 1px solid var(--hairline-mid);
  border-radius: var(--radius);
  transition: all var(--t);
}
.btn-topbar:hover { color: var(--ink); border-color: var(--muted); }

/* Reminder badge */
.reminder-badge {
  background: var(--gold);
  color: var(--canvas);
  font-size: 0.6rem;
  padding: 3px 8px;
  border-radius: 9999px;
  letter-spacing: 0.1em;
  display: none;
  cursor: pointer;
}
.reminder-badge.active { display: inline-block; }

#unassignedBadge {
  display: inline-block;
  background: var(--surface-soft);
  color: var(--muted);
  border: 1px solid var(--hairline-mid);
}
#unassignedBadge.active {
  background: var(--gold);
  color: var(--canvas);
  border-color: transparent;
}

/* Body layout */
.app-body {
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* Sidebar */
.sidebar {
  width: var(--sidebar-w);
  background: var(--surface);
  border-right: 1px solid var(--hairline);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  flex-shrink: 0;
}
.sidebar-nav {
  flex: 1;
  padding: var(--sp-lg) 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sidebar-nav a {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  padding: 10px var(--sp-lg);
  font-size: 0.65rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  transition: all var(--t);
  border-left: 2px solid transparent;
}
/* Foco de teclado. Los enlaces del menú lateral no tenían NINGUNO: navegando
   con el tabulador no había forma de saber dónde estabas. Va en currentColor
   porque el sidebar es oscuro en Ónix y de color en Cristal y Pétalo, así que
   un color fijo se perdería en alguno; y hacia dentro (offset negativo) para
   que no se salga del carril. */
.sidebar-nav a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: -3px;
  border-radius: var(--gl-radius-sm, 4px);
}
.sidebar-action:focus-visible,
.btn-topbar:focus-visible,
.modal-close:focus-visible,
.btn-appt-action:focus-visible,
.btn-icon-del:focus-visible,
.cl-btn-ver:focus-visible,
.cms-img-delete:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: var(--gl-radius-sm, 4px);
}
.sidebar-nav a:hover { color: var(--ink); background: var(--card); }
.sidebar-nav a.active { color: var(--ink); border-left-color: var(--ink); background: var(--card); }
.sidebar-nav a.active.gold { border-left-color: var(--gold); }
.sidebar-divider {
  height: 1px;
  background: var(--hairline);
  margin: var(--sp-sm) var(--sp-lg);
}
.sidebar-action {
  opacity: 0.5;
}
.sidebar-action--logout {
  color: rgba(255,80,80,0.7);
  opacity: 1;
}
.sidebar-section-label {
  padding: var(--sp-sm) var(--sp-lg) var(--sp-xs);
  font-size: 0.55rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--muted-soft);
}

/* Main content */
.main-content {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--canvas);
}

/* ── VIEWS ─────────────────────────────────────────────────────────────────── */
.view { display: none; padding: var(--sp-lg); }
.view.active { display: block; }

.view-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-lg);
  padding-bottom: var(--sp-md);
  border-bottom: 1px solid var(--hairline);
}
.view-title {
  font-family: var(--font-disp);
  font-size: 1.1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
}
.view-actions { display: flex; gap: var(--sp-sm); }
/* Contabilidad lleva cuatro botones (con «Libro de ingresos»): en el móvil bajan de línea en vez de cortarse. */
#view-contabilidad .view-actions { flex-wrap: wrap; }

/* Vista día: cabecera centrada en TODOS los tamaños — título arriba y la nav
   Ayer/Hoy/Mañana centrada como grupo, en cualquier dispositivo. */
#view-day .view-header { flex-direction: column; align-items: center; gap: var(--sp-sm); }
#view-day .view-title { text-align: center; }
#view-day .view-actions { justify-content: center; flex-wrap: wrap; }

/* ── STATS ROW ─────────────────────────────────────────────────────────────── */
.stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--hairline);
  margin-bottom: var(--sp-lg);
}
.stat-card {
  background: var(--card);
  padding: var(--sp-md) var(--sp-lg);
}
.stat-card-value {
  font-family: var(--font-disp);
  font-size: 1.6rem;
  color: var(--ink);
  display: block;
}
.stat-card-value.gold { color: var(--gold); }
.stat-card-value.green { color: var(--success); }
.stat-card-label {
  font-size: 0.58rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 2px;
}

/* ── Negocio: hero (Facturación + Ocupación) ─────────────────────────────────── */
.stats-row--hero {
  grid-template-columns: repeat(2, 1fr);
}
.stats-row--hero .stat-card-value {
  font-size: 2rem;
}

/* stat-card que además es un <button> clicable (ej. "Cerrar caja →") */
.stat-card.se-card-action {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

/* ── CALENDAR ──────────────────────────────────────────────────────────────── */
.calendar-nav {
  display: flex;
  align-items: stretch;
  justify-content: center;      /* grupo ‹ mes › centrado en cualquier dispositivo */
  gap: var(--sp-sm);
  margin-bottom: var(--sp-md);
  flex-wrap: nowrap;
}
.calendar-month-label {
  font-family: var(--font-disp);
  font-size: clamp(0.66rem, 2.7vw, 0.85rem);   /* -15%; se adapta al ancho del móvil */
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}
.btn-cal-arrow {
  font-size: 1.05rem;            /* +5% respecto al mes */
  line-height: 1;
  padding: 7px 18px;            /* +10% de ancho: botones más largos */
  flex: 0 0 auto;
}
.btn-cal-current {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: min(187px, 48vw);   /* -15%: estable al cambiar de mes, sin desbordar en móvil */
}
.btn-cal-nav {
  padding: 5px 10px;
  border: 1px solid var(--hairline-mid);
  color: var(--muted);
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  transition: all var(--t);
  border-radius: var(--radius);
}
.btn-cal-nav:hover { color: var(--ink); border-color: var(--muted); }

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: var(--hairline);
}
.calendar-header-cell {
  background: var(--card);
  padding: 8px;
  text-align: center;
  font-size: 0.55rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}
.calendar-day {
  background: var(--card);
  padding: var(--sp-sm);
  min-height: 80px;
  cursor: pointer;
  transition: background var(--t);
  position: relative;
}
.calendar-day:hover { background: var(--card-hover); }
.calendar-day.other-month { background: var(--surface); opacity: 0.4; }
.calendar-day.today { border-top: 2px solid var(--ink); }
.calendar-day.selected { background: var(--elevated); outline: 1px solid var(--muted); }
.calendar-day.closed { background: var(--surface); opacity: 0.5; }
.day-number {
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: var(--sp-xs);
}
.calendar-day.today .day-number { color: var(--ink); }
.day-appointments {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.day-appt-dot {
  font-size: 0.55rem;
  letter-spacing: 0.06em;
  padding: 2px 4px;
  background: var(--elevated);
  color: var(--muted);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  border-left: 2px solid var(--muted);
}
/* barber color applied via inline style on border-left */
.day-count {
  font-size: 0.55rem;
  color: var(--muted-soft);
  margin-top: 2px;
}

/* ── DAY VIEW ──────────────────────────────────────────────────────────────── */
.day-view-header {
  display: flex;
  align-items: center;
  gap: var(--sp-md);
  margin-bottom: var(--sp-lg);
}
.day-view-title {
  font-family: var(--font-disp);
  font-size: 1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
}
.day-view-closed {
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
  padding: var(--sp-xl);
  text-align: center;
  border: 1px solid var(--hairline);
}

.timeline {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--hairline);
}
.time-slot {
  display: flex;
  align-items: stretch;
  min-height: 52px;
  background: var(--card);
  cursor: pointer;
  transition: background var(--t);
}
.time-slot:hover { background: var(--card-hover); }
.time-slot.occupied { cursor: default; position: relative; }
.time-label {
  width: 64px;
  padding: var(--sp-sm) var(--sp-sm);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  color: var(--muted-soft);
  flex-shrink: 0;
  border-right: 1px solid var(--hairline);
  display: flex;
  align-items: flex-start;
}
.time-content { flex: 1; padding: var(--sp-sm); min-width: 0; }
.time-content.multi {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--hairline-mid) transparent;
  padding-bottom: 4px;
}
.time-content.multi::-webkit-scrollbar { height: 3px; }
.time-content.multi::-webkit-scrollbar-track { background: transparent; }
.time-content.multi::-webkit-scrollbar-thumb { background: var(--hairline-mid); border-radius: 2px; }
.time-content.multi .appt-block { flex: 0 0 min(88%, 320px); scroll-snap-align: start; }
.time-slot.past { opacity: 0.3; pointer-events: none; }
.time-slot.continuation { min-height: 20px; opacity: 0.6; }
.cont-bars { display: flex; gap: 4px; padding: 4px 0; }
.cont-bar  { height: 4px; flex: 1; border-radius: 2px; opacity: 0.5; min-width: 40px; }
.barber-legend { display: flex; gap: 12px; flex-wrap: wrap; padding: 6px 8px 8px; font-size: 0.58rem; letter-spacing: 0.08em; }
.barber-legend-item { display: flex; align-items: center; gap: 5px; color: var(--muted); }
.barber-legend-dot  { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
/* La cita es lo ÚNICO que importa en una agenda llena de huecos vacíos: tiene
   que leerse de un vistazo y destacar sola. Superficie propia, barra del color
   del trabajador y jerarquía clara (servicio → hora → precio). */
.appt-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--card);
  border: 1px solid var(--hairline-mid);
  border-left: 4px solid var(--appt-color, var(--hairline-mid));
  border-radius: var(--radius);
  padding: 10px 12px;
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
  transition: box-shadow .15s ease, border-color .15s ease;
}
.appt-block:hover { box-shadow: 0 4px 16px rgba(0,0,0,.10); }

/* Cabecera: servicio y hora a la izquierda, importe a la derecha. */
.appt-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.appt-head { min-width: 0; }
.appt-time {
  font-family: var(--font-figures);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-top: 2px;
}
.appt-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.appt-source-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.55rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: var(--radius);
  background: var(--elevated);
  color: var(--muted);
  width: fit-content;
}
.appt-source-badge.online { background: rgba(52,152,219,0.15); color: var(--online-color); }
.appt-source-badge.phone  { background: rgba(var(--accent-rgb),0.15); color: var(--gold); }
.appt-service {
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.25;
  color: var(--ink);
}
.appt-client     { font-size: 0.65rem; color: var(--muted); }
.appt-barber-tag {
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--appt-color, var(--gold));
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 2px 8px;
  white-space: nowrap;
}
.appt-price {
  font-family: var(--font-figures);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  line-height: 1.1;
}
.appt-actions {
  display: flex;
  gap: var(--sp-xs);
  margin-top: var(--sp-xs);
}
.btn-appt-action {
  font-size: 0.55rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 3px 8px;
  border: 1px solid var(--hairline-mid);
  color: var(--muted);
  transition: all var(--t);
  border-radius: var(--gl-radius-sm);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn-appt-action:hover { color: var(--ink); border-color: var(--muted); }
.btn-appt-action.danger:hover { color: var(--danger); border-color: var(--danger); }
/* Eliminar servicio: discreto en reposo, inequívoco al apuntarlo. Borrar no
   debe ser lo primero que salta a la vista de una fila. */
.btn-borrar:hover { color: var(--danger); border-color: var(--danger); }
/* Distintivo del servicio que no se puede pedir online. Discreto: es un matiz
   del servicio, no una alarma. */
.sr-marca {
  display: inline-block; margin-left: 9px; vertical-align: middle;
  font-size: 0.55rem; letter-spacing: 0.11em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 999px;
  border: 1px solid var(--hairline-mid); color: var(--muted);
}
.sr-retirados-pie {
  display: flex; justify-content: flex-end;
  padding: 12px 2px 2px; border-top: 1px solid var(--hairline); margin-top: 6px;
}
.btn-appt-action.whatsapp:hover { color: #25D366; border-color: #25D366; }
.add-slot-hint {
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-soft);
  padding: 2px 0;
}
.time-slot:hover .add-slot-hint { color: var(--muted); }
.add-slot-secondary {
  position: absolute;
  top: 6px; right: 6px;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1px solid var(--hairline);
  background: transparent;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
}
.time-slot.occupied:hover .add-slot-secondary { display: flex; }
.add-slot-secondary:hover { background: var(--gold-dim); color: var(--gold); }

/* ── Horario no disponible · bloqueos (Checkpoint 4) ───────────────────────────
   Distintos de las citas: trama diagonal en grises, sin colores nuevos.        */
.time-slot.blocked {
  cursor: pointer;
  position: relative;
  background: repeating-linear-gradient(45deg,
    var(--elevated) 0, var(--elevated) 10px,
    var(--card) 10px, var(--card) 20px);
  opacity: 0.9;
}
.time-slot.blocked:hover { opacity: 1; background: repeating-linear-gradient(45deg,
    var(--elevated) 0, var(--elevated) 10px,
    var(--card-hover) 10px, var(--card-hover) 20px); }
.block-slot-label {
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 2px 0;
}
.block-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  margin-bottom: 1px;
  cursor: pointer;
  background: repeating-linear-gradient(45deg,
    var(--elevated) 0, var(--elevated) 10px,
    var(--card) 10px, var(--card) 20px);
  border-left: 3px solid var(--hairline-mid);
  transition: opacity var(--t);
}
.block-banner:hover { opacity: 0.85; }
.block-banner-reason {
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
}
.block-banner-who { font-size: 0.6rem; color: var(--muted); letter-spacing: 0.06em; }

/* ── SERVICES LIST ─────────────────────────────────────────────────────────── */
.services-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--hairline);
  margin-bottom: var(--sp-lg);
}
.service-row {
  display: flex;
  align-items: center;
  gap: var(--sp-md);
  padding: var(--sp-md) var(--sp-lg);
  background: var(--card);
  transition: background var(--t);
}
.service-row:hover { background: var(--card-hover); }
.service-row.inactive { opacity: 0.45; }
.sr-name { flex: 1; color: var(--ink); font-size: 0.8rem; letter-spacing: 0.04em; }
.sr-duration { width: 60px; color: var(--muted); font-size: 0.65rem; text-align: right; }
.sr-price { width: 60px; color: var(--gold); font-size: 0.8rem; text-align: right; }
.sr-actions { display: flex; gap: var(--sp-xs); }
.toggle-active {
  font-size: 0.55rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 3px 8px;
  border: 1px solid var(--hairline-mid);
  color: var(--muted);
  cursor: pointer;
  border-radius: var(--radius);
  transition: all var(--t);
}
.toggle-active:hover { color: var(--ink); border-color: var(--muted); }
.toggle-active.active { color: var(--success); border-color: rgba(39,174,96,0.4); }

/* ── CONFIG ────────────────────────────────────────────────────────────────── */
.config-section {
  margin-bottom: var(--sp-lg);
  background: var(--card);
  border: 1px solid var(--hairline);
}
.config-section-title {
  padding: var(--sp-md) var(--sp-lg);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--hairline);
  background: var(--surface);
}
.config-rows { padding: var(--sp-md) var(--sp-lg); display: flex; flex-direction: column; gap: var(--sp-md); }
.config-row {
  display: grid;
  grid-template-columns: 180px 1fr;
  align-items: center;
  gap: var(--sp-md);
}
.config-label { font-size: 0.65rem; letter-spacing: 0.1em; color: var(--muted); }
/* Pie de un ajuste que necesita explicación. Alineado con el campo, no con la etiqueta. */
.config-hint { font-size: 0.72rem; color: var(--muted); line-height: 1.5; margin-top: calc(var(--sp-md) * -0.4); }
@media (min-width: 900px) { .config-hint { padding-left: calc(180px + var(--sp-md)); } }
.config-input {
  background: var(--surface);
  border: 1px solid var(--hairline-mid);
  color: var(--ink);
  padding: 7px 10px;
  outline: none;
  transition: border-color var(--t);
  border-radius: var(--gl-radius-sm);
  width: 100%;
}
.config-input:focus { border-color: var(--muted); }
.days-grid {
  display: flex;
  gap: var(--sp-xs);
  flex-wrap: wrap;
}
.day-toggle {
  padding: 5px 10px;
  border: 1px solid var(--hairline-mid);
  color: var(--muted);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all var(--t);
  background: none;
  border-radius: var(--radius);
}
.day-toggle.on { background: var(--ink); color: var(--canvas); border-color: var(--ink); }

/* ── VIP USERS ─────────────────────────────────────────────────────────────── */
.vip-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: none;
  margin-bottom: var(--sp-lg);
}
.vip-row {
  display: flex;
  align-items: center;
  gap: var(--sp-md);
  padding: var(--sp-md) var(--sp-lg);
  background: var(--card);
  flex-wrap: wrap;
}
.vip-avatar {
  position: relative;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--surface-alt, #1e1e1e);
  border: 2px solid rgba(var(--accent-rgb),0.25);
  flex-shrink: 0;
  cursor: pointer;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s;
}
.vip-avatar:hover { border-color: var(--gold); }
.vip-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  border-radius: 50%;
}
.vip-avatar-overlay {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0; inset: 0;
  background: rgba(0,0,0,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  opacity: 0;
  transition: opacity 0.2s;
  border-radius: 50%;
}
.vip-avatar:hover .vip-avatar-overlay { opacity: 1; }
.vip-info { flex: 1; min-width: 120px; }
.vip-name { color: var(--ink); font-weight: 700; }
.vip-user { color: var(--muted); font-size: 0.65rem; letter-spacing: 0.05em; margin-top: 2px; }
.vip-badge { }
.vip-actions { display: flex; gap: var(--sp-xs); flex-wrap: wrap; }

/* ── STATUS BADGE ──────────────────────────────────────────────────────────── */
.status-badge {
  display: inline-block;
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 100px;
}
.status-badge.confirmed  { background: rgba(39,174,96,0.15); color: #27ae60; }
.status-badge.completed  { background: rgba(39,174,96,0.1);  color: #27ae60; }
.status-badge.cancelled  { background: rgba(192,57,43,0.12); color: #c0392b; }
.status-badge.pending    { background: rgba(230,126,34,0.15); color: #e67e22; }

/* ── HISTORY TABLE ─────────────────────────────────────────────────────────── */
#historyTable table th,
#historyTable table td { white-space: nowrap; }
#myApptsTable table th,
#myApptsTable table td { white-space: nowrap; }

/* ── MODAL ─────────────────────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; inset: 0;
  background: rgba(28,27,25,0.85);
  z-index: 50;
  display: none;
  align-items: center;
  justify-content: center;
}
.modal-overlay.open { display: flex; }
/* Con un modal abierto, congela el fondo (evita scroll/navegación detrás, iOS incl.) */
body.modal-open { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; }
.modal {
  background: rgba(20,20,22,0.82);
  backdrop-filter: var(--gl-blur);
  -webkit-backdrop-filter: var(--gl-blur);
  border: 1px solid var(--gl-border);
  border-radius: var(--gl-radius);
  box-shadow: var(--gl-shadow);
  width: 460px;
  max-width: 96vw;
  max-height: 90vh;
  /* La cabecera y los botones quedan FIJOS; lo que rueda es el cuerpo.
     Antes rodaba el modal entero: en una tablet en horizontal (800 px de alto)
     el botón de guardar caía en y=826, fuera de la pantalla, y había que
     adivinar que se podía arrastrar dentro del modal para llegar a él. */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  overscroll-behavior: contain;
}
.modal > .modal-header, .modal > .modal-footer { flex: 0 0 auto; }
.modal > .modal-body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }

/* FAB de acciones rápidas — solo visible en la vista del día (vive dentro de #view-day) */
.fab {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: calc(16px + env(safe-area-inset-bottom));
  width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 30px; line-height: 1; cursor: pointer;
  color: #1C1B19; background: var(--gold);
  border: 1px solid rgba(var(--accent-rgb),0.95);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 4px 16px rgba(var(--accent-rgb),.28);
  z-index: 40; transition: transform .12s, box-shadow .16s;
}
.fab:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 0 20px rgba(var(--accent-rgb),.4); }
.fab:active { transform: scale(.94); }
.fab:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
/* Con cualquier modal abierto, el FAB desaparece (queda siempre por debajo de los overlays) */
body.modal-open .fab { display: none; }
/* Aire inferior para que el FAB no tape la última franja horaria */
#view-day { padding-bottom: calc(var(--sp-lg) + 84px); }
/* Panel de acciones rápidas (bottom-safe en iOS) */
.qa-body { display: flex; flex-direction: column; gap: 10px; padding-bottom: calc(var(--sp-lg) + env(safe-area-inset-bottom)); }
.qa-action { width: 100%; justify-content: center; padding: 12px; }

/* ── Onboarding (primeros pasos) ─────────────────────────────────────────────── */
.ob-dots { display: flex; gap: 6px; justify-content: center; padding: 6px 0 2px; }
.ob-dot  { width: 22px; height: 3px; border-radius: 2px; background: var(--hairline-mid); transition: background var(--t); }
.ob-dot.on { background: var(--gold); }
.ob-lead { font-size: 0.78rem; line-height: 1.6; color: var(--muted); margin: 0 0 14px; }
.ob-lead strong { color: var(--ink); }
.ob-svc-list { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; }
.ob-svc-row  { display: flex; justify-content: space-between; align-items: center; font-size: 0.72rem; color: var(--ink); padding: 7px 11px; background: var(--elevated); border-radius: var(--gl-radius-sm); }
.ob-svc-row .figure { color: var(--gold); }
.ob-days { display: flex; flex-wrap: wrap; gap: 6px; }
.ob-day  { padding: 7px 12px; border: 1px solid var(--hairline-mid); border-radius: var(--gl-radius-sm); background: none; color: var(--muted); font-size: 0.62rem; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; transition: all var(--t); }
.ob-day.on { background: var(--bs-gold-bg); border-color: var(--gold); color: var(--gold); }
/* Sugerencias de servicio propias del oficio: se pulsan y rellenan el formulario. */
.ob-ideas { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 2px 0 12px; }
.ob-ideas-label { font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-right: 2px; }
.ob-idea {
  font-size: 0.66rem;
  color: var(--gold);
  background: rgba(var(--accent-rgb), .10);
  border: 1px solid rgba(var(--accent-rgb), .35);
  border-radius: 999px;
  padding: 5px 11px;
  cursor: pointer;
  transition: all var(--t);
}
.ob-idea:hover { background: rgba(var(--accent-rgb), .20); border-color: var(--gold); }

.ob-actions { display: flex; justify-content: flex-end; gap: var(--sp-sm); margin-top: 18px; }
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-md) var(--sp-lg);
  border-bottom: 1px solid var(--hairline);
}
.modal-title {
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
}
.modal-close {
  font-size: 1.05rem;
  line-height: 1;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 3px 6px;
}
.modal-close:hover { color: var(--ink); }
.modal-body { padding: var(--sp-lg); display: flex; flex-direction: column; gap: var(--sp-md); }
.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-sm);
  padding: var(--sp-md) var(--sp-lg);
  border-top: 1px solid var(--hairline);
}

/* ── BUTTONS ───────────────────────────────────────────────────────────────── */
.btn-admin {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-xs);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 8px 16px;
  border: 1px solid var(--hairline-mid);
  color: var(--muted);
  border-radius: var(--radius);
  transition: all var(--t);
  cursor: pointer;
  background: none;
}
.btn-admin:hover { color: var(--ink); border-color: var(--muted); }
.btn-admin.primary { background: var(--ink); color: var(--canvas); border-color: var(--ink); }
.btn-admin.primary:hover { background: var(--body); border-color: var(--body); }
.btn-admin.gold { border-color: rgba(var(--accent-rgb),0.4); color: var(--gold); }
.btn-admin.gold:hover { border-color: var(--gold); }
.btn-admin.danger { border-color: rgba(192,57,43,0.3); color: var(--danger); }
.btn-admin.danger:hover { border-color: var(--danger); background: rgba(192,57,43,0.1); }
.btn-admin:disabled { opacity: 0.35; cursor: not-allowed; }
/* removed busy-btn (merged into + Añadir modal type selector) */
.btn-admin._unused {
  background: var(--moss);
  color: var(--ink);
  border-color: var(--moss);
  font-size: 0.65rem;
  padding: 8px 20px;
}
.btn-admin._unused:hover { background: var(--moss-light); border-color: var(--moss-light); }

/* ── FORM ELEMENTS ─────────────────────────────────────────────────────────── */
.form-group { display: flex; flex-direction: column; gap: var(--sp-xs); }
.form-label {
  font-size: 0.58rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}
.form-input, .form-select, .form-textarea {
  background: var(--surface);
  border: 1px solid var(--hairline-mid);
  color: var(--ink);
  padding: 8px 10px;
  outline: none;
  transition: border-color var(--t);
  border-radius: var(--radius);
  width: 100%;
}
.form-input:focus, .form-select:focus, .form-textarea:focus { border-color: var(--muted); }
.form-select option { background: var(--card); }
.form-hint {
  font-size: 0.58rem;
  color: var(--muted-soft);
  letter-spacing: 0.08em;
}
.form-error { font-size: 0.58rem; color: var(--danger); letter-spacing: 0.08em; display: none; }
.form-group.has-error .form-input { border-color: var(--danger); }
.form-group.has-error .form-error { display: block; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-md); }
.form-toggle {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  cursor: pointer;
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.form-toggle input[type="checkbox"] {
  width: 14px;
  height: 14px;
  accent-color: var(--gold);
}

/* ── APPOINTMENT DETAIL ─────────────────────────────────────────────────────── */
.appt-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-sm);
  margin-bottom: var(--sp-md);
}
.detail-item {}
.detail-label {
  font-size: 0.55rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 2px;
}
.detail-value {
  font-size: 0.78rem;
  color: var(--ink);
}
.detail-value.gold { color: var(--gold); }
.detail-value.online-color { color: var(--online-color); }
.detail-value.phone-color { color: var(--phone-color); }

/* ── REMINDER PANEL ────────────────────────────────────────────────────────── */
.reminder-panel {
  position: fixed;
  top: var(--topbar-h);
  right: 0;
  width: 320px;
  background: var(--card);
  border: 1px solid var(--hairline-mid);
  border-right: none;
  border-top: none;
  z-index: 20;
  display: none;
  max-height: 70vh;
  overflow-y: auto;
}
.reminder-panel.open { display: block; }
.reminder-panel-header {
  padding: var(--sp-sm) var(--sp-md);
  border-bottom: 1px solid var(--hairline);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.reminder-item {
  padding: var(--sp-sm) var(--sp-md);
  border-bottom: 1px solid var(--hairline);
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.reminder-time { font-size: 0.65rem; color: var(--gold); letter-spacing: 0.08em; }
.reminder-client { font-size: 0.7rem; color: var(--ink); }
.reminder-service { font-size: 0.6rem; color: var(--muted); }
.reminder-actions { display: flex; gap: var(--sp-xs); margin-top: 4px; }

/* ── CLIENTS ────────────────────────────────────────────────────────────────── */
.client-search-wrap { padding: 0 var(--sp-lg) var(--sp-md); }
.client-search-wrap .field-input { width: 100%; max-width: 480px; }

.client-kpis { display: flex; gap: var(--sp-md); padding: 0 var(--sp-lg) var(--sp-lg); flex-wrap: wrap; }
.kpi-card { background: var(--surface-card); border: 1px solid var(--hairline); border-radius: var(--radius); padding: var(--sp-md) var(--sp-lg); min-width: 120px; }
.kpi-value { font-size: 1.3rem; font-weight: 700; color: var(--gold); }
.kpi-label { font-size: 0.55rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-top: 2px; }

.table-wrap { padding: 0 var(--sp-lg) var(--sp-lg); overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: 0.68rem; }
.data-table th { padding: 8px 12px; text-align: left; font-size: 0.55rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--hairline); }
.data-table td { padding: 10px 12px; border-bottom: 1px solid var(--hairline); vertical-align: middle; }
.client-row { cursor: pointer; transition: background 0.15s; }
.client-row:hover { background: var(--surface-soft); }

.client-avatar-sm { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.6rem; font-weight: 700; color: #fff; flex-shrink: 0; letter-spacing: 0.05em; }
.wa-link { margin-left: 6px; font-size: 0.85rem; text-decoration: none; }

/* Client modal */
.client-modal { max-width: 680px; max-height: 88vh; display: flex; flex-direction: column; overflow: hidden; }
.client-modal-head { display: flex; align-items: center; gap: var(--sp-md); padding: var(--sp-lg); border-bottom: 1px solid var(--hairline); flex-shrink: 0; }
.client-avatar { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1rem; font-weight: 700; color: #fff; flex-shrink: 0; letter-spacing: 0.05em; }
.client-modal-name { font-size: 0.95rem; font-weight: 700; color: var(--ink); }
.client-modal-meta { font-size: 0.6rem; color: var(--muted); margin-top: 3px; display: flex; gap: 8px; flex-wrap: wrap; }

.client-stats-row { display: flex; gap: 0; border-bottom: 1px solid var(--hairline); flex-shrink: 0; flex-wrap: wrap; }
.cm-stat { flex: 1; min-width: 90px; padding: var(--sp-sm) var(--sp-md); border-right: 1px solid var(--hairline); text-align: center; }
.cm-stat:last-child { border-right: none; }
.cm-stat-val { font-size: 0.85rem; font-weight: 700; color: var(--gold); }
.cm-stat-lbl { font-size: 0.52rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-top: 2px; }

.client-next-banner { background: rgba(39,174,96,.08); border-bottom: 1px solid rgba(39,174,96,.2); padding: 8px var(--sp-lg); font-size: 0.65rem; color: #27ae60; display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.cm-next-icon { font-size: 1rem; }

.client-tabs-bar { display: flex; border-bottom: 1px solid var(--hairline); flex-shrink: 0; }
.client-tab { flex: 1; padding: 10px; background: none; border: none; font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; transition: all 0.15s; }
.client-tab.active { color: var(--gold); border-bottom-color: var(--gold); }
.client-tab:hover { color: var(--ink); }

.client-tab-content { overflow-y: auto; flex: 1; }
.client-timeline { padding: var(--sp-md) var(--sp-lg); display: flex; flex-direction: column; gap: 0; }
.tl-item { display: flex; gap: var(--sp-md); padding: var(--sp-md) 0; border-bottom: 1px solid var(--hairline); }
.tl-item:last-child { border-bottom: none; }
.tl-cancelled { opacity: 0.4; }
.tl-icon { font-size: 1.2rem; flex-shrink: 0; width: 28px; text-align: center; margin-top: 2px; }
.tl-body { flex: 1; }
.tl-date { font-size: 0.6rem; color: var(--muted); letter-spacing: 0.08em; }
.tl-svc { font-size: 0.75rem; font-weight: 600; color: var(--ink); margin: 2px 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tl-meta { font-size: 0.62rem; color: var(--muted); }
.tl-note { font-size: 0.62rem; color: var(--body-text); margin-top: 4px; font-style: italic; background: var(--surface-soft); border-left: 2px solid var(--gold-hairline); padding: 4px 8px; border-radius: 0 4px 4px 0; }

/* Tags */
.tags-wrap { display: flex; flex-wrap: wrap; gap: 6px; min-height: 24px; }
.tag-chip { display: flex; align-items: center; gap: 4px; background: rgba(var(--accent-rgb),.12); border: 1px solid var(--gold-hairline); border-radius: 9999px; padding: 2px 10px 2px 10px; font-size: 0.6rem; color: var(--gold); }
.tag-chip button { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 0.65rem; padding: 0; line-height: 1; }
.tag-chip button:hover { color: var(--gold); }

/* ── TOAST ─────────────────────────────────────────────────────────────────── */
.toast-container {
  position: fixed;
  bottom: var(--sp-lg);
  right: var(--sp-lg);
  z-index: 999;
  display: flex;
  flex-direction: column;
  gap: var(--sp-xs);
}
.toast {
  background: var(--elevated);
  border: 1px solid var(--hairline-mid);
  color: var(--ink);
  padding: var(--sp-sm) var(--sp-md);
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  opacity: 0;
  transform: translateX(20px);
  transition: all 0.2s ease;
  max-width: 280px;
}
.toast.show { opacity: 1; transform: translateX(0); }
.toast.success { border-left: 3px solid var(--success); }
.toast.error   { border-left: 3px solid var(--danger); }
.toast.info    { border-left: 3px solid var(--gold); }

/* Scrollbar */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--surface); }
::-webkit-scrollbar-thumb { background: var(--hairline-mid); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: var(--muted-soft); }

/* ── TOPBAR LEFT ────────────────────────────────────────────────────────────── */
.topbar-left {
  display: flex;
  align-items: center;
  gap: var(--sp-md);
}

/* ── HAMBURGER BUTTON ───────────────────────────────────────────────────────── */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  padding: 6px;
  background: none;
  border: 1px solid var(--hairline-mid);
  border-radius: var(--radius);
  cursor: pointer;
  flex-shrink: 0;
}
.hamburger span {
  display: block;
  width: 20px;
  height: 2px;
  background: rgba(245, 240, 232, 0.80);
  border-radius: 2px;
  transition: transform 0.22s ease, opacity 0.22s ease, width 0.22s ease;
  transform-origin: center;
}
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── SIDEBAR OVERLAY ────────────────────────────────────────────────────────── */
.sidebar-overlay {
  display: none;
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0; inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 39;
  backdrop-filter: blur(2px);
}
.sidebar-overlay.active { display: block; }

/* ── MOBILE RESPONSIVE ──────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Show hamburger, hide desktop-only topbar elements */
  .hamburger { display: flex; }
  .topbar-user { display: none; }
  .btn-topbar { display: none; }
  /* Portrait: hide owner label to save space */
  @media (orientation: portrait) {
    .topbar-owner-label { display: none !important; }
  }

  /* Badges — compact on mobile */
  .reminder-badge {
    font-size: 0.52rem;
    padding: 3px 6px;
  }
  #unassignedBadge {
    font-size: 0.52rem;
    padding: 3px 6px;
  }

  /* Sidebar becomes a drawer */
  .sidebar {
    position: fixed;
    top: var(--topbar-h);
    left: 0;
    bottom: 0;
    width: 260px;
    z-index: 40;
    transform: translateX(-100%);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 4px 0 24px rgba(0,0,0,0.4);
    overflow-y: auto;
  }
  .sidebar.mobile-open {
    transform: translateX(0);
  }

  /* Main content takes full width */
  .app-body { overflow: auto; }
  .main-content {
    width: 100%;
    min-width: 0;
    overflow-x: hidden;
  }

  /* View header stacks on small screens */
  .view-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-sm);
  }

  /* Stats row wraps */
  .stats-row {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Day view timeline: time label narrower */
  .time-label {
    min-width: 40px;
    font-size: 0.52rem;
  }

  /* Multi-slot cards: full width on mobile */
  .time-content.multi .appt-block {
    flex: 0 0 min(92%, 280px);
  }

  /* Calendar grid tighter */
  .calendar-day {
    min-height: 60px;
    padding: var(--sp-xs);
  }
  .calendar-day-num { font-size: 0.75rem; }

  /* Modals: full width on mobile */
  .modal-box {
    width: calc(100vw - 32px);
    max-width: 100%;
    max-height: 90vh;
    overflow-y: auto;
  }

  /* Appt action buttons wrap */
  .appt-actions {
    flex-wrap: wrap;
    gap: 4px;
  }
  .btn-appt-action {
    font-size: 0.52rem;
    padding: 4px 7px;
  }

  /* Fila de un servicio: Editar / Activo·Inactivo / Eliminar competían por
     sitio en la MISMA línea que el nombre, la duración y el precio — a un
     ancho de móvil, "Eliminar" no cabía y se salía de la pantalla (visto
     fallar). Aquí se bajan a su propia línea, entera, y se reparten ese
     ancho a partes iguales: ni un botón más ancho que otro, ni uno más
     estrecho, y ninguno puede desbordar porque entre los tres suman
     exactamente el ancho disponible. Se aplica a TODA fila que use estas
     clases —servicios activos, retirados, el "Recuperar" suelto—, en
     cualquier negocio, porque la regla vive aquí y no en cada pantalla. */
  .service-row {
    flex-wrap: wrap;
    row-gap: var(--sp-xs);
  }
  .sr-actions {
    flex: 1 1 100%;
  }
  .sr-actions .btn-appt-action,
  .sr-actions .toggle-active {
    flex: 1;
    padding-left: 4px;
    padding-right: 4px;
  }
}

/* ── MANUAL MODAL SLOT PICKER ───────────────────────────────────────────────── */
.manual-slots-grid {
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 10px;
  max-height: 180px;
  overflow-y: auto;
  background: var(--surface-soft);
}
.manual-slots-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.slots-hint {
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  color: var(--muted);
  text-align: center;
  padding: 8px 0;
}
.manual-slot-btn {
  padding: 5px 9px;
  font-size: 0.62rem;
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  border: 1px solid var(--hairline-mid);
  border-radius: var(--radius);
  color: var(--muted);
  cursor: pointer;
  background: var(--surface);
  transition: border-color 0.14s, color 0.14s, background 0.14s;
  flex-shrink: 0;
}
.manual-slot-btn:hover {
  border-color: var(--gold);
  color: var(--gold);
}
.manual-slot-btn.selected {
  background: var(--gold);
  color: var(--canvas);
  border-color: var(--gold);
  font-weight: 700;
}
.manual-slot-btn.occupied {
  opacity: 0.35;
  text-decoration: line-through;
  cursor: not-allowed;
  pointer-events: none;
  border-style: dashed;
}

/* ═══════════════════════════════════════════════════════════════
   CLIENT VIEW — New Design
   ═══════════════════════════════════════════════════════════════ */
#view-clients {
  font-family: 'Courier Prime', 'Courier New', monospace;
}

/* Stats globales */
.cl-stats-global {
  display: grid; grid-template-columns: repeat(4,1fr);
  gap: 12px; margin-bottom: 28px;
}
@media(max-width:600px){ .cl-stats-global { grid-template-columns: repeat(2,1fr); } }
.cl-stat-box {
  border: 1px solid var(--gl-border); background: var(--gl-bg);
  border-radius: var(--gl-radius); box-shadow: var(--gl-shadow-sm);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  padding: 18px 16px;
}
.cl-stat-box-value { font-size: 26px; font-weight: 700; color: var(--ink); }
.cl-stat-box-label {
  font-size: 10px; text-transform: uppercase;
  letter-spacing: .1em; color: var(--muted); margin-top: 4px;
}

/* Page title */
.cl-page-title {
  font-size: 22px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em;
  margin-bottom: 24px; color: var(--ink);
}

/* Search bar */
.cl-search-bar {
  display: flex; gap: 10px; margin-bottom: 24px;
}
.cl-search-input {
  flex: 1; background: var(--surface); border: 1px solid var(--hairline-mid);
  color: var(--ink); font-family: inherit; font-size: 13px;
  padding: 10px 14px; outline: none;
  border-radius: var(--gl-radius-sm);
  transition: border-color .15s;
}
.cl-search-input:focus { border-color: var(--gold); }
.cl-search-input::placeholder { color: var(--muted); }
.cl-btn-primary {
  background: rgba(var(--accent-rgb),0.88); border: 1px solid rgba(var(--accent-rgb),0.95);
  color: #1C1B19; font-family: inherit; font-size: 11px;
  text-transform: uppercase; letter-spacing: .1em;
  padding: 10px 18px; cursor: pointer; white-space: nowrap;
  border-radius: var(--gl-radius-sm);
  transition: background .15s, color .15s;
}
.cl-btn-primary:hover { background: rgba(var(--accent-rgb),1); color: #1C1B19; }

/* Table (lista de clientes) */
.cl-table-header {
  display: grid;
  grid-template-columns: 2fr 1.2fr 1.2fr 80px 80px 120px 100px;
  gap: 12px; padding: 4px 18px 10px;
  font-size: 10px; text-transform: uppercase;
  letter-spacing: .1em; color: var(--muted);
}
@media(max-width:800px){ .cl-table-header { display: none; } }

.cl-client-row {
  display: grid;
  grid-template-columns: 2fr 1.2fr 1.2fr 80px 80px 120px 100px;
  gap: 12px; align-items: center;
  padding: 16px 18px;
  background: var(--gl-bg); border: 1px solid var(--gl-border);
  border-radius: var(--gl-radius); box-shadow: var(--gl-shadow-sm);
  margin-bottom: 10px;
  cursor: pointer; transition: border-color .14s;
}
@media(max-width:800px){
  .cl-client-row { grid-template-columns: 1fr; gap: 0; padding: 12px 16px; margin-bottom: 10px; }
  .cl-client-row .cl-row-identity { margin-bottom: 8px; }
  .cl-client-row .cl-cell {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    padding: 6px 0; border-top: 1px solid var(--gl-border); font-size: 13px; min-width: 0;
  }
  .cl-client-row .cl-cell::before {
    content: attr(data-label);
    color: var(--muted); font-size: 10px; font-weight: 400;
    text-transform: uppercase; letter-spacing: .08em; white-space: nowrap;
  }
  .cl-client-row .cl-btn-ver { display: none; }
}
.cl-client-row:hover { border-color: var(--gl-border-gold); }
.cl-row-identity { display: flex; align-items: center; gap: 12px; }
.cl-avatar-sm {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--gl-bg-hover); border: 1px solid var(--gl-border);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: var(--gold);
  flex-shrink: 0; text-transform: uppercase;
}
.cl-client-name { font-weight: 700; font-size: 13px; color: var(--ink); }
.cl-client-email { font-size: 11px; color: var(--muted); margin-top: 1px; }
.cl-cell { font-size: 12px; color: var(--ink); }
.cl-wa { margin-left: 8px; text-decoration: none; color: #25D366; display: inline-flex; vertical-align: middle; }
.cl-wa svg { display: block; }
.cl-wa:hover { color: #1ebe5a; }
.cl-btn-ver {
  background: none; border: 1px solid var(--gl-border); color: var(--muted);
  font-family: inherit; font-size: 10px;
  text-transform: uppercase; letter-spacing: .08em;
  padding: 5px 12px; cursor: pointer;
  transition: border-color .12s, color .12s; white-space: nowrap;
}
.cl-btn-ver:hover { border-color: var(--gold); color: var(--gold); }
.cl-empty {
  padding: 48px 24px; text-align: center;
  font-size: 11px; text-transform: uppercase;
  letter-spacing: .1em; color: var(--muted);
}

/* Ficha header */
.cl-back-btn {
  background: none; border: 1px solid var(--gl-border);
  color: var(--muted); font-family: inherit; font-size: 11px;
  text-transform: uppercase; letter-spacing: .1em;
  padding: 6px 14px; cursor: pointer;
  transition: border-color .15s, color .15s;
  margin-bottom: 24px; display: inline-block;
}
.cl-back-btn:hover { border-color: var(--gold); color: var(--gold); }

.cl-ficha-header {
  display: flex; align-items: flex-start;
  justify-content: space-between; gap: 20px;
  padding: 24px; background: var(--gl-bg);
  border: 1px solid var(--gl-border); border-radius: var(--gl-radius);
  box-shadow: var(--gl-shadow-sm);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  margin-bottom: 12px;
}
.cl-ficha-identity { display: flex; align-items: center; gap: 18px; }
.cl-ficha-avatar {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--gl-bg-hover); border: 1px solid var(--gl-border);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 700; color: var(--gold);
  text-transform: uppercase; flex-shrink: 0;
}
.cl-ficha-name { font-size: 18px; font-weight: 700; margin-bottom: 4px; color: var(--ink); }
.cl-ficha-contact { font-size: 11px; color: var(--muted); line-height: 1.8; }
.cl-ficha-contact span { margin-right: 12px; }
/* Teléfono: tan visible como el nombre y accionable (tel:) para llamar/avisar. */
.cl-ficha-phone {
  font-size: 15px; font-weight: 600; color: var(--gold);
  letter-spacing: .04em; text-decoration: none; margin-bottom: 2px;
}
.cl-ficha-phone::before { content: "Llamar "; }
.cl-ficha-phone:hover { text-decoration: underline; }
.cl-btn-nueva-cita {
  background: none; border: 1px solid var(--gold);
  color: var(--gold); font-family: inherit; font-size: 11px;
  text-transform: uppercase; letter-spacing: .1em;
  padding: 10px 16px; cursor: pointer; white-space: nowrap;
  border-radius: var(--gl-radius-sm);
  transition: background .15s, color .15s; flex-shrink: 0;
}
.cl-btn-nueva-cita:hover { background: var(--gold); color: #1C1B19; }

/* Ficha stats strip */
.cl-ficha-stats {
  display: grid; grid-template-columns: repeat(6,1fr);
  background: var(--gl-bg); border: 1px solid var(--gl-border);
  border-radius: var(--gl-radius); box-shadow: var(--gl-shadow-sm);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  overflow: hidden; margin-bottom: 12px;
}
@media(max-width:600px){ .cl-ficha-stats { grid-template-columns: repeat(3,1fr); } }
.cl-ficha-stat {
  padding: 16px 14px; text-align: center;
  border-right: 1px solid var(--gl-border);
}
.cl-ficha-stat:last-child { border-right: none; }
.cl-stat-value {
  font-size: 18px; font-weight: 700; color: var(--gold); margin-bottom: 4px;
}
.cl-stat-value.green { color: var(--success, #4caf7d); }
.cl-stat-value.red   { color: var(--danger, #e05555); }
.cl-stat-label {
  font-size: 9px; text-transform: uppercase;
  letter-spacing: .1em; color: var(--muted);
}

/* Next appt banner */
.cl-next-banner {
  display: flex; align-items: center; gap: 14px;
  border: 1px solid var(--gl-border-gold); padding: 12px 18px;
  border-radius: var(--gl-radius);
  margin-bottom: 12px; background: rgba(var(--accent-rgb),.06);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.cl-next-label {
  font-size: 9px; text-transform: uppercase;
  letter-spacing: .12em; color: var(--gold); margin-bottom: 3px;
}
.cl-next-detail { font-size: 12px; color: var(--ink); }

/* Tabs */
.cl-tabs {
  display: flex; border: 1px solid var(--gl-border);
  border-radius: var(--gl-radius) var(--gl-radius) 0 0;
  background: var(--gl-bg);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.cl-tab {
  background: none; border: none; border-bottom: 2px solid transparent;
  color: var(--muted); font-family: inherit; font-size: 11px;
  text-transform: uppercase; letter-spacing: .1em;
  padding: 14px 22px; cursor: pointer;
  transition: color .15s, border-color .15s;
}
.cl-tab.active { color: var(--gold); border-bottom-color: var(--gold); }
.cl-tab:hover:not(.active) { color: var(--ink); }
.cl-tab-content { display: none; }
.cl-tab-content.active { display: block; }

/* Timeline */
.cl-historial-wrap {
  background: var(--gl-bg); border: 1px solid var(--gl-border); border-top: none;
  border-radius: 0 0 var(--gl-radius) var(--gl-radius);
  box-shadow: var(--gl-shadow-sm);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  overflow: hidden;
}
.cl-timeline-item {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 18px 24px; border-bottom: 1px solid var(--gl-border);
  transition: background .12s;
}
.cl-timeline-item:last-child { border-bottom: none; }
.cl-timeline-item:hover { background: var(--gl-bg-hover); }
.cl-tl-icon { color: var(--gold); font-size: 16px; margin-top: 2px; flex-shrink: 0; }
.cl-tl-icon.cancelled { color: var(--muted); }
.cl-tl-body { flex: 1; }
.cl-tl-date { font-size: 11px; color: var(--muted); margin-bottom: 4px; }
.cl-tl-svc-row { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.cl-tl-svc { font-size: 14px; font-weight: 700; color: var(--ink); }
.cl-tl-svc.cancelled { color: var(--muted); }
.cl-appt-badge {
  display: inline-block; font-size: 9px;
  text-transform: uppercase; letter-spacing: .1em;
  padding: 2px 8px; border: 1px solid; border-radius: 999px;
}
.cl-appt-badge.completada { color: var(--success, #4caf7d); border-color: var(--success, #4caf7d); background: rgba(76,175,125,.1); }
.cl-appt-badge.cancelada  { color: var(--muted); border-color: var(--gl-border); }
.cl-appt-badge.pendiente  { color: var(--gold); border-color: var(--gl-border-gold); }
.cl-tl-meta { font-size: 11px; color: var(--muted); display: flex; gap: 14px; flex-wrap: wrap; }
.cl-tl-price { font-size: 13px; font-weight: 700; color: var(--gold); flex-shrink: 0; margin-top: 2px; }
.cl-tl-note {
  margin-top: 8px; font-size: 11px; color: var(--muted);
  border-top: 1px solid var(--gl-border); padding-top: 8px; font-style: italic;
}

/* Preferences panel */
.cl-pref-panel {
  background: var(--gl-bg); border: 1px solid var(--gl-border);
  border-top: none;
  border-radius: 0 0 var(--gl-radius) var(--gl-radius);
  box-shadow: var(--gl-shadow-sm);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  padding: 24px;
}
.cl-field { margin-bottom: 18px; }
.cl-field label {
  display: block; font-size: 10px; text-transform: uppercase;
  letter-spacing: .1em; color: var(--muted); margin-bottom: 7px;
}
.cl-field input, .cl-field select, .cl-field textarea {
  width: 100%; background: var(--surface); border: 1px solid var(--hairline-mid);
  color: var(--ink); font-family: inherit; font-size: 13px;
  padding: 9px 12px; outline: none; transition: border-color .15s;
  border-radius: var(--gl-radius-sm);
}
.cl-field input:focus, .cl-field select:focus, .cl-field textarea:focus { border-color: var(--gold); }
.cl-field input::placeholder, .cl-field textarea::placeholder { color: var(--muted); }
.cl-field textarea { resize: vertical; min-height: 90px; }
.cl-field select option { background: var(--card); }
.cl-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media(max-width:640px){ .cl-field-row { grid-template-columns: 1fr; } }

/* Tags */
.cl-tags-wrap { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.cl-tag {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--gl-border-gold); color: var(--gold);
  font-size: 10px; text-transform: uppercase; letter-spacing: .08em;
  padding: 3px 10px; border-radius: 999px;
}
.cl-tag-remove {
  background: none; border: none; color: var(--muted);
  cursor: pointer; font-size: 13px; padding: 0; line-height: 1;
}
.cl-tag-remove:hover { color: var(--danger, #e05555); }
.cl-tag-input-row { display: flex; gap: 8px; }
.cl-tag-input-row input { flex: 1; }
.cl-btn-tag-add {
  background: none; border: 1px solid var(--gl-border); color: var(--muted);
  font-family: inherit; font-size: 11px; text-transform: uppercase;
  letter-spacing: .08em; padding: 9px 14px; cursor: pointer; white-space: nowrap;
  transition: border-color .12s, color .12s;
}
.cl-btn-tag-add:hover { border-color: var(--gold); color: var(--gold); }

/* Ficha actions */
.cl-ficha-actions {
  display: flex; gap: 10px; margin-top: 24px;
  padding-top: 20px; border-top: 1px solid var(--gl-border);
}
.cl-btn-save {
  flex: 1; background: rgba(var(--accent-rgb),0.88); border: 1px solid rgba(var(--accent-rgb),0.95);
  color: #1C1B19; font-family: inherit; font-size: 11px;
  text-transform: uppercase; letter-spacing: .1em;
  padding: 11px; cursor: pointer;
  transition: background .15s;
}
.cl-btn-save:hover { background: rgba(var(--accent-rgb),1); }
.cl-btn-delete {
  background: none; border: 1px solid var(--gl-border); color: var(--muted);
  font-family: inherit; font-size: 11px; text-transform: uppercase;
  letter-spacing: .08em; padding: 11px 16px; cursor: pointer;
  transition: border-color .12s, color .12s;
}
.cl-btn-delete:hover { border-color: var(--danger, #e05555); color: var(--danger, #e05555); }

/* Forma uniforme (mismo radio que .btn-admin) para el resto de botones de la vista Clientes */
.cl-btn-ver, .cl-btn-nueva-cita, .cl-btn-tag-add,
.cl-btn-save, .cl-btn-delete, .cl-back-btn { border-radius: var(--gl-radius-sm); }

/* ════════════════════════════════════════════
   PARCHE LEGIBILIDAD — exterior / móvil / tablet
   Aplica sobre todo el panel de admin
   ════════════════════════════════════════════ */

/* Base */
body {
  font-size: var(--bs-font-base);
  -webkit-font-smoothing: antialiased;
  background: var(--bs-bg);
  color: var(--bs-text);
}

/* Todos los inputs, selects y textareas */
input, select, textarea {
  min-height: var(--bs-touch-min);
  font-size: var(--bs-font-base);
  background: var(--bs-bg);
  border-color: var(--bs-border);
  color: var(--bs-text);
}
input:focus, select:focus, textarea:focus {
  border-color: var(--bs-gold);
  outline: none;
}
input::placeholder, textarea::placeholder {
  color: var(--bs-muted);
}

/* Todos los botones */
button {
  min-height: var(--bs-touch-min);
  font-size: 12px;
}

/* Labels de formulario */
label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--bs-muted);
}

/* Bordes globales más visibles */
.card, .modal, .panel, [class*="section"] {
  border-color: var(--bs-border);
}

/* Texto secundario mínimo legible */
.text-muted, .muted, [class*="sub"], [class*="meta"] {
  color: var(--bs-muted);
}

/* Zonas táctiles en móvil */
/* bloque genérico eliminado — sustituido por reglas específicas en el bloque responsive */

/* ── Calendario — nuevas clases ── */
.cal-header-cell {
  font-size: 10px; text-transform: uppercase;
  letter-spacing: .12em; color: var(--bs-muted);
  text-align: center; padding: 6px 0;
}

/* Citas visibles */
.day-appt-row {
  display: flex; gap: 4px; align-items: center;
  padding: 2px 5px; margin-bottom: 2px;
  background: rgba(255,255,255,.04);
  overflow: hidden; border-radius: 1px;
}
.day-appt-time {
  font-size: 10px; color: var(--bs-muted);
  flex-shrink: 0; font-family: var(--bs-font-mono);
}
.day-appt-name {
  font-size: 11px; color: var(--bs-text-sec);
  white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis;
}
.day-overflow {
  font-size: 10px; color: var(--bs-gold);
  text-align: right; padding: 1px 4px;
  letter-spacing: .05em;
}

/* Barra de ocupación */
.day-occ-bar {
  height: 3px; background: var(--bs-surface3);
  margin: 4px 0 2px; overflow: hidden;
}
.day-occ-fill {
  height: 100%;
  transition: width .3s ease;
}
.day-occ-pct {
  font-size: 9px; text-align: right;
  letter-spacing: .06em; opacity: .85;
}

/* Contador de citas */
.day-count {
  font-size: 11px; font-weight: 700;
  margin: 4px 0 2px; letter-spacing: .04em;
}

/* Número de hoy */
.today-num {
  color: var(--bs-gold);
}

/* ── Editor de horario por día ── */
.sched-row {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 10px 0; border-bottom: 1px solid var(--hairline);
  flex-wrap: wrap;
}
.sched-row:last-child { border-bottom: none; }
.sched-day-lbl {
  display: flex; align-items: center; gap: 8px;
  cursor: pointer; min-width: 120px;
}
.sched-day-lbl input[type="checkbox"] {
  min-height: unset; width: 16px; height: 16px;
  accent-color: var(--gold); cursor: pointer;
}
.sched-day-name {
  font-size: 0.7rem; text-transform: uppercase;
  letter-spacing: 0.12em; color: var(--muted);
  transition: color var(--t);
}
.sched-row.sched-on .sched-day-name { color: var(--ink); }
.sched-times {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.sched-lunch-lbl {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.65rem; color: var(--muted);
  cursor: pointer; margin-left: 8px;
}
.sched-lunch-lbl input[type="checkbox"] {
  min-height: unset; width: 14px; height: 14px;
  accent-color: var(--gold); cursor: pointer;
}
.sched-lunch-times {
  display: flex; align-items: center; gap: 8px;
}
.sched-sep {
  color: var(--muted); font-size: 0.7rem;
}
.sched-off-label {
  font-size: 0.65rem; letter-spacing: 0.1em;
  color: var(--muted); text-transform: uppercase;
  opacity: 0.5; align-self: center;
}
.sched-hidden { display: none !important; }

/* ── Huecos libres ── */
.day-slots-bar {
  position: sticky; top: 0; z-index: 20;
  background: var(--surface);
  border-bottom: 1px solid var(--hairline);
  padding: 8px var(--sp-lg);
}
.btn-free-slots {
  display: inline-flex; align-items: center; gap: var(--sp-xs);
  font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase;
  padding: 8px 16px; min-height: unset; cursor: pointer;
  color: var(--gold);
  border: 1px solid rgba(var(--accent-rgb),0.4);
  border-radius: var(--gl-radius-sm);
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(8px) saturate(130%);
  -webkit-backdrop-filter: blur(8px) saturate(130%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 2px 8px rgba(0,0,0,.25);
  transition: background .16s, border-color .16s, box-shadow .16s;
}
.btn-free-slots:hover {
  background: rgba(255,255,255,.09);
  border-color: var(--gold);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 4px 14px rgba(0,0,0,.30);
}
.free-slots-panel {
  position: absolute; top: calc(100% + 2px); left: var(--sp-lg);
  background: var(--elevated); border: 1px solid var(--hairline-mid);
  border-radius: var(--gl-radius-sm);
  z-index: 50; min-width: 180px; max-height: 300px;
  overflow-y: auto; box-shadow: 0 4px 16px rgba(0,0,0,.4);
}
.free-slot-btn {
  display: block; width: 100%;
  font-family: var(--font-mono); font-size: 0.7rem;
  letter-spacing: 0.1em; text-align: left;
  padding: 9px 16px; color: var(--ink);
  background: transparent; border: none;
  border-bottom: 1px solid var(--hairline);
  cursor: pointer; transition: background var(--t), color var(--t);
  min-height: unset;
}
.free-slot-btn:last-child { border-bottom: none; }
.free-slot-btn:hover { background: var(--bs-gold-bg); color: var(--gold); }
.free-slots-empty {
  padding: 14px 16px; font-size: 0.65rem;
  letter-spacing: 0.1em; color: var(--muted);
  text-transform: uppercase;
}

/* ── Método de pago en tarjetas completadas ── */
.appt-pay-wrap {
  display: flex; align-items: center; gap: 8px; flex: 1; flex-wrap: wrap;
}
.appt-completed-badge {
  font-family: var(--font-mono); font-size: 0.6rem;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--bs-green); white-space: nowrap;
  display: flex; align-items: center;
}
.appt-pay-select {
  font-family: var(--font-mono); font-size: 0.6rem;
  letter-spacing: 0.05em;
  background: var(--bs-surface2); color: var(--ink);
  border: 1px solid var(--bs-border); padding: 3px 6px;
  cursor: pointer; min-height: unset;
}

/* ── Menú ··· en tarjetas de cita ── */
.appt-actions {
  display: flex; align-items: center;
  justify-content: space-between; gap: 8px;
  margin-top: 10px;
}
.appt-main-btns {
  display: flex; gap: 6px; flex: 1; flex-wrap: wrap;
}
.appt-menu-wrap {
  position: relative; flex-shrink: 0;
}
.btn-appt-dots {
  font-family: var(--font-mono); font-size: 1rem;
  color: var(--muted); background: transparent;
  border: 1px solid var(--hairline); padding: 2px 10px;
  cursor: pointer; letter-spacing: 0.05em;
  transition: border-color var(--t), color var(--t);
  min-height: unset; line-height: 1.4;
}
.btn-appt-dots:hover { border-color: var(--muted); color: var(--ink); }
.appt-dots-menu {
  position: absolute; right: 0; bottom: calc(100% + 4px); top: auto;
  background: var(--card); border: 1px solid var(--hairline-mid);
  z-index: 30; min-width: 140px;
  box-shadow: 0 4px 16px rgba(0,0,0,.4);
}
.dots-item {
  display: block; width: 100%;
  font-family: var(--font-mono); font-size: 0.6rem;
  text-transform: uppercase; letter-spacing: 0.12em;
  text-align: left; padding: 9px 14px;
  color: var(--ink); background: transparent; border: none;
  border-bottom: 1px solid var(--hairline);
  cursor: pointer; transition: background var(--t), color var(--t);
  min-height: unset;
}
.dots-item:last-child { border-bottom: none; }
.dots-item:hover { background: var(--elevated); }
.dots-item.danger { color: var(--danger); }
.dots-item.danger:hover { background: var(--danger-soft); color: #fff; }

/* 05-10-2026 · Sin «···»: la tarjeta entera abre el menú (tocarCita). Se nota al
   tocarla y se queda marcada mientras su menú está abierto. */
.appt-block { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.appt-block:active { filter: brightness(.97); }
.appt-block:focus { outline: none; }
/* Separadas a propósito: Chrome 81 (la tablet de The Barber) no conoce
   :focus-visible y tiraría la regla entera, también la de .menu-abierto. */
.appt-block.menu-abierto { outline: 2px solid rgba(128,128,128,.6); outline-offset: 2px; }
.appt-block:focus-visible { outline: 2px solid rgba(128,128,128,.6); outline-offset: 2px; }
.appt-dots-menu { min-width: 190px; }
.appt-dots-menu.appt-menu-flotante {
  position: fixed; right: auto; bottom: auto; z-index: 45;   /* por debajo de los modales (50) */
  cursor: default;
}
.dots-item { font-size: 0.68rem; padding: 12px 14px; }   /* se toca con el dedo */
.dots-sep { height: 6px; background: var(--hairline); }   /* separa el bloque de plantones y citas falsas */

/* Lo vendido en la cita: una línea por artículo, debajo del cliente. */
.appt-ventas { display: flex; flex-wrap: wrap; gap: 4px; }
.appt-venta {
  font-size: 0.72rem; line-height: 1.3; padding: 2px 8px;
  border: 1px solid rgba(128,128,128,.35); border-radius: 999px;
  font-variant-numeric: lining-nums tabular-nums;
}
.appt-noshow-badge { color: var(--danger); border-color: currentColor; }

/* Vender productos: cada producto es una fila; se toca «Añadir» y luego − / +. */
.venta-lista { display: flex; flex-direction: column; gap: 6px; max-height: 46vh; overflow-y: auto; margin-bottom: 14px; }
.venta-prod {
  display: flex; align-items: center; gap: 10px; width: 100%;
  min-height: 52px; padding: 8px 10px 8px 14px; text-align: left;
  background: var(--card); color: var(--ink);
  border: 1px solid var(--hairline-mid); border-radius: var(--radius);
}
.venta-prod .vp-nombre { flex: 1; font-weight: 600; min-width: 0; }
.venta-prod .vp-stock  { display: block; font-size: 0.72rem; font-weight: 400; color: var(--muted); }
.venta-prod .vp-precio { font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.venta-prod.elegido { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.venta-prod.agotado { opacity: .45; }
.venta-prod .vp-anadir { min-height: 40px; }
.venta-pie { display: flex; gap: 12px; flex-wrap: wrap; }
.venta-pie .form-group { flex: 1 1 140px; }
.venta-cantidad { display: flex; gap: 6px; align-items: center; }
.venta-cantidad .btn-admin { min-width: 40px; min-height: 40px; font-size: 1.1rem; padding: 0; }
.venta-cantidad .vc-num { min-width: 22px; text-align: center; font-weight: 600; }
.btn-link {
  background: none; border: none; padding: 0; font: inherit;
  color: inherit; text-decoration: underline; cursor: pointer;
}

/* ── LA TIENDA DEL LOCAL (19-10-2026) ── */
.nav-cuenta:not(:empty) {
  display: inline-block; min-width: 18px; margin-left: 6px; padding: 1px 6px;
  font-size: 0.6rem; line-height: 1.5; text-align: center; letter-spacing: 0;
  color: var(--surface); background: var(--ink); border-radius: 999px;
}
.tab-cuenta { font-variant-numeric: lining-nums tabular-nums; }
.tienda-panel { padding-top: var(--sp-md); }
.tienda-nota { font-size: 0.78rem; color: var(--muted); line-height: 1.5; margin: var(--sp-md) 0; }
.tienda-vacio {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  padding: var(--sp-lg); border: 1px dashed var(--hairline-mid); border-radius: var(--radius);
  font-size: 0.85rem; line-height: 1.5;
}
.tienda-vacio span { color: var(--muted); max-width: 52ch; }
.tienda-vacio .btn-admin { margin-top: 6px; }
.tienda-aviso {
  padding: 10px 14px; margin-bottom: var(--sp-md); font-size: 0.8rem; line-height: 1.5;
  border: 1px solid var(--danger); border-left-width: 3px; border-radius: var(--radius);
}

/* Inventario: foto, nombre, stock, precio y acciones en una fila. */
.tienda-inventario { display: flex; flex-direction: column; border-top: 1px solid var(--hairline); }
.tp-fila {
  display: grid; grid-template-columns: 52px minmax(0, 1fr) auto auto; align-items: center;
  gap: 4px 14px; padding: 12px 4px; border-bottom: 1px solid var(--hairline);
}
.tp-fila.inactivo { opacity: .5; }
.tp-foto {
  width: 52px; height: 52px; border-radius: var(--radius);
  background: var(--card) center / cover no-repeat; border: 1px solid var(--hairline);
}
.tp-foto.sin-foto {
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; font-weight: 600; color: var(--muted);
}
.tp-nombre { font-weight: 600; overflow-wrap: anywhere; }
.tp-meta { font-size: 0.72rem; color: var(--muted); margin-top: 2px; }
.tp-web { color: var(--ink); }
.tp-stock { font-size: 0.78rem; color: var(--muted); text-align: right; white-space: nowrap; }
.tp-stock.bajo { color: var(--danger); font-weight: 600; }
.tp-precio { font-weight: 600; text-align: right; white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; }
.tp-acciones { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
@media (min-width: 900px) {
  .tp-fila { grid-template-columns: 52px minmax(0, 1fr) 110px 80px auto; }
  .tp-acciones { grid-column: auto; justify-content: flex-end; }
}

/* Ficha del producto: la foto. */
.producto-web { margin: 4px 0 var(--sp-md); font-size: 0.75rem; }
.producto-foto { display: flex; align-items: center; gap: 14px; }
.producto-foto-vista {
  width: 88px; height: 88px; flex: 0 0 88px; border-radius: var(--radius);
  background: var(--card) center / cover no-repeat; border: 1px solid var(--hairline-mid);
}
.producto-foto-vista.vacia { border-style: dashed; }
.producto-foto-botones { display: flex; flex-wrap: wrap; gap: 6px; }
/* Hasta 3 fotos (19-10-2026): la primera es la principal. */
.producto-fotos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pf-hueco { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pf-vista {
  position: relative; aspect-ratio: 1 / 1; border-radius: var(--radius);
  background: var(--card) center / cover no-repeat; border: 1px solid var(--hairline-mid);
}
.pf-principal {
  position: absolute; left: 6px; top: 6px; padding: 2px 7px; border-radius: 999px;
  background: rgba(0, 0, 0, .66); color: #fff; font-size: 0.65rem; letter-spacing: .06em; text-transform: uppercase;
}
.pf-botones { display: flex; flex-wrap: wrap; gap: 4px; }
.pf-botones .btn-appt-action { flex: 1 1 auto; padding: 5px 6px; font-size: 0.7rem; }
.pf-anadir {
  aspect-ratio: 1 / 1; border-radius: var(--radius); border: 1px dashed var(--hairline-mid);
  background: none; color: var(--muted); font: inherit; font-size: 0.75rem; cursor: pointer;
}
.pf-anadir:hover { border-color: var(--gold); color: var(--ink); }

/* Historial de stock. */
.movimientos-lista { display: flex; flex-direction: column; max-height: 60vh; overflow-y: auto; }
.mov-fila {
  display: grid; grid-template-columns: 92px minmax(0, 1fr) 44px 74px; gap: 10px; align-items: baseline;
  padding: 9px 0; border-bottom: 1px solid var(--hairline); font-size: 0.8rem;
}
.mov-fecha, .mov-queda { color: var(--muted); font-size: 0.72rem; }
.mov-motivo small { color: var(--muted); }
.mov-cambio { text-align: right; font-weight: 600; }
.mov-queda { text-align: right; }

/* Apartados: una tarjeta por cliente. */
.apartados-lista { display: flex; flex-direction: column; gap: 10px; }
.apartado {
  padding: 14px 16px; background: var(--card);
  border: 1px solid var(--hairline-mid); border-radius: var(--radius);
}
.apartado-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.apartado-cab a { color: var(--ink); }
.apartado-lineas { list-style: none; margin: 10px 0; padding: 0; font-size: 0.85rem; line-height: 1.7; }
.apartado-lineas li { display: flex; gap: 6px; }
.apartado-lineas li span:last-child { margin-left: auto; color: var(--muted); }
.apartado-nota { font-size: 0.8rem; color: var(--muted); margin: 0 0 10px; overflow-wrap: anywhere; }
.apartado-pie {
  display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap;
  padding-top: 10px; border-top: 1px solid var(--hairline); font-size: 0.78rem; color: var(--muted);
}
.apartado-pie b { color: var(--ink); }
.apartado-botones { display: flex; gap: 6px; }
.entrega-resumen { font-size: 0.85rem; line-height: 1.7; margin-bottom: var(--sp-md); }
.entrega-total { display: flex; justify-content: space-between; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--hairline); }

/* Ventas del mes. */
.tienda-periodo { display: flex; gap: 6px; margin-bottom: var(--sp-md); }
.tienda-cifras {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-bottom: var(--sp-lg);
}
.tienda-cifras > div {
  display: flex; flex-direction: column; gap: 4px; padding: 12px 14px;
  background: var(--card); border: 1px solid var(--hairline); border-radius: var(--radius);
}
.tienda-cifras span { font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.tienda-cifras b { font-size: 1.15rem; }
.tienda-tabla { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.tienda-tabla th, .tienda-tabla td { padding: 9px var(--sp-lg); text-align: left; border-bottom: 1px solid var(--hairline); }
.tienda-tabla th { font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
.tienda-tabla .num { text-align: right; white-space: nowrap; }
@media (max-width: 600px) {
  .tienda-tabla th, .tienda-tabla td { padding: 9px 10px; }
  .mov-fila { grid-template-columns: 78px minmax(0, 1fr) 40px; }
  .mov-queda { display: none; }
}

/* ── Selector de período — Histórico ── */
.hist-period-bar {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: var(--sp-md) var(--sp-lg);
  border-bottom: 1px solid var(--hairline);
  background: var(--surface);
}
.hist-period-btn {
  font-family: var(--font-mono); font-size: 0.55rem;
  text-transform: uppercase; letter-spacing: 0.14em;
  padding: 6px 12px;
  color: var(--muted); background: transparent;
  border: 1px solid var(--hairline); border-radius: var(--gl-radius-sm);
  cursor: pointer; min-height: unset;
  transition: color var(--t), border-color var(--t);
}
.hist-period-btn:hover { color: var(--ink); border-color: var(--muted); }
.hist-period-btn.active { color: var(--bs-gold); border-color: var(--bs-gold); }

/* #btnFilterHistory usa .btn-admin.gold (relleno dorado) — sin override para mantener coherencia */

/* ── Desglose por barbero ── */
.hist-bkd-section {
  margin-bottom: var(--sp-lg);
  border: 1px solid var(--hairline);
  background: var(--surface);
}
.hist-bkd-header {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 10px var(--sp-lg);
  font-family: var(--font-mono); font-size: 0.6rem;
  text-transform: uppercase; letter-spacing: 0.15em;
  color: var(--muted); background: transparent;
  border: none; border-bottom: 1px solid var(--hairline);
  cursor: pointer; text-align: left;
  transition: color var(--t);
  min-height: unset;
}
.hist-bkd-header:hover { color: var(--ink); }
.hist-bkd-toggle {
  display: inline-block;
  transition: transform var(--t);
}
.hist-bkd-section.collapsed .hist-bkd-toggle { transform: rotate(-90deg); }
.hist-bkd-body { overflow: hidden; }
.hist-bkd-section.collapsed .hist-bkd-body { display: none; }
.hist-bkd-row {
  display: grid;
  grid-template-columns: 1fr 90px 90px 50px 1fr 160px;
  align-items: center;
  gap: 12px;
  padding: 10px var(--sp-lg);
  border-bottom: 1px solid var(--hairline);
  font-family: var(--font-mono); font-size: 0.65rem;
  letter-spacing: 0.05em;
}
.hist-bkd-row:last-child { border-bottom: none; }
.hist-bkd-name  { font-weight: 600; }
.hist-bkd-count { color: var(--muted); }
.hist-bkd-rev   { color: var(--bs-gold); text-align: right; }
.hist-bkd-pct   { color: var(--muted); text-align: right; }
.hist-bkd-bar-wrap {
  height: 4px; background: var(--hairline);
  border-radius: 2px; overflow: hidden;
}
.hist-bkd-bar-fill {
  height: 100%; border-radius: 2px;
  transition: width 0.4s ease;
}
.hist-bkd-pay {
  color: var(--muted); font-size: 0.6rem;
  letter-spacing: 0.05em; white-space: nowrap;
}

/* ── Tabla histórico ── */
.ht-wrap { overflow-x: auto; }
.ht-table {
  width: 100%; border-collapse: collapse;
  font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.04em;
}
.ht-head-row { border-bottom: 1px solid var(--hairline); }
.ht-th {
  padding: 8px 12px; text-align: left;
  font-weight: 600; letter-spacing: 0.1em;
  color: var(--muted); white-space: nowrap;
}
.ht-th--right { text-align: right; }
.ht-row {
  border-bottom: 1px solid var(--hairline);
  cursor: pointer;
  transition: background var(--t);
}
.ht-row:hover         { background: var(--bs-surface2); }
.ht-row--cancelled    { opacity: 0.4; }
.ht-row--confirmed    { background: var(--bs-gold-bg); }
.ht-td                { padding: 8px 12px; white-space: nowrap; }
.ht-td--right         { text-align: right; }
.ht-td--gold          { color: var(--gold); }
.ht-td--muted         { color: var(--muted); }
.ht-empty {
  padding: 20px; color: var(--muted);
  font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.1em;
}

/* ── Modal detalle histórico ── */
.hd-modal {
  background: var(--bs-surface);
  border: 1px solid var(--bs-border-lt);
  max-width: 460px; width: 100%;
  padding: 0;
}
.hd-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px; border-bottom: 1px solid var(--bs-border);
}
.hd-title {
  font-family: var(--bs-font-mono); font-size: 0.62rem;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--bs-gold);
}
.hd-close {
  background: transparent; border: none;
  color: var(--muted); font-size: 1rem; cursor: pointer;
  padding: 0 4px; line-height: 1; min-height: unset;
  transition: color var(--t);
}
.hd-close:hover { color: var(--ink); }

/* ── Modal detalle de cita ── */
.hist-detail-row {
  display: flex; gap: 16px; align-items: baseline;
  padding: 7px 0; border-bottom: 1px solid var(--hairline);
}
.hist-detail-row:last-child { border-bottom: none; }
.hist-detail-key {
  font-family: var(--font-mono); font-size: 0.58rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted); min-width: 130px; flex-shrink: 0;
}
.hist-detail-val {
  font-family: var(--font-mono); font-size: 0.7rem;
  color: var(--ink); word-break: break-word;
}

/* ── Utilidades de impresión ── */
.print-only { display: none; }
@media print {
  .print-only  { display: block !important; }
  .no-print    { display: none  !important; }
  .admin-sidebar, .admin-nav, .view-actions,
  .hist-period-bar, .config-section,
  .toast-container, .modal-overlay { display: none !important; }
}

/* stat-card valor pequeño para textos largos (servicio/barbero top) */
.stat-card-value--sm {
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  line-height: 1.3;
  word-break: break-word;
}

/* ── CMS CONTENT ──────────────────────────────────────────────────────────── */
.cms-tabs {
  display: flex; gap: 4px; flex-wrap: wrap;
  border-bottom: 1px solid var(--bs-border);
  margin-bottom: var(--sp-lg);
}
.cms-tab {
  font-family: var(--bs-font-mono); font-size: 0.58rem;
  letter-spacing: 0.15em; text-transform: uppercase;
  padding: 8px 16px; background: transparent;
  border: none; border-bottom: 2px solid transparent;
  color: var(--muted); cursor: pointer; transition: all var(--t);
  margin-bottom: -1px;
}
.cms-tab.active { color: var(--bs-gold); border-bottom-color: var(--bs-gold); }
.cms-tab:hover:not(.active) { color: var(--ink); }

.cms-panel { display: none; }
.cms-panel.active { display: block; }

.cms-panel-header {
  display: flex; align-items: center;
  justify-content: space-between; gap: 12px;
  margin-bottom: var(--sp-lg);
}
.cms-hint {
  font-family: var(--bs-font-mono); font-size: 0.6rem; color: var(--muted);
}

/* Textos */
.cms-text-row {
  display: grid;
  grid-template-columns: 200px 1fr 80px;
  gap: 10px; align-items: start;
  padding: var(--sp-sm) 0;
  border-bottom: 1px solid var(--bs-border);
}
.cms-text-meta { display: flex; flex-direction: column; gap: 4px; padding-top: 6px; }
.cms-text-label { font-size: 0.68rem; color: var(--ink); }
.cms-text-key {
  font-family: var(--bs-font-mono); font-size: 0.55rem;
  color: var(--muted); background: var(--bs-surface2,#2a2a2a);
  padding: 1px 5px; border-radius: 3px;
}
.cms-textarea { font-size: 0.72rem; resize: vertical; min-height: 52px; }
.cms-save-one { font-size: 0.55rem; padding: 4px 10px; align-self: start; margin-top: 6px; }

/* Imágenes */
.cms-img-section { margin-bottom: var(--sp-xl); }
.cms-section-title {
  font-family: var(--bs-font-mono); font-size: 0.6rem;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--bs-gold); margin-bottom: var(--sp-sm);
}
.cms-upload-row { margin-bottom: var(--sp-sm); }
.cms-upload-btn {
  font-family: var(--bs-font-mono); font-size: 0.58rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 6px 14px; border: 1px solid var(--bs-border);
  color: var(--muted); cursor: pointer; border-radius: var(--radius);
  transition: border-color var(--t), color var(--t); display: inline-block;
}
.cms-upload-btn:hover { border-color: var(--bs-gold); color: var(--bs-gold); }

.cms-img-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
}
.cms-img-card {
  background: var(--bs-surface); border: 1px solid var(--bs-border);
  border-radius: var(--radius); overflow: hidden;
}
.cms-img-card img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.cms-img-footer { padding: 6px; display: flex; gap: 4px; align-items: center; }
.cms-caption-input { flex: 1; font-size: 0.6rem; padding: 3px 6px; }
.cms-img-delete {
  background: transparent; border: none;
  color: var(--danger); cursor: pointer; font-size: 0.8rem; padding: 2px 4px;
  transition: opacity var(--t); flex-shrink: 0;
}
.cms-img-delete:hover { opacity: 0.7; }
.cms-empty { font-family: var(--bs-font-mono); font-size: 0.6rem; color: var(--muted); }

.cms-barber-uploads {
  display: flex; flex-wrap: wrap; gap: 12px;
  margin-bottom: var(--sp-sm);
}
.cms-barber-upload { display: flex; align-items: center; gap: 8px; }
.cms-barber-name { font-size: 0.7rem; color: var(--ink); }

/* Secciones */
.cms-section-row {
  display: flex; align-items: center;
  justify-content: space-between; gap: 16px;
  padding: 12px 0; border-bottom: 1px solid var(--bs-border);
}
.cms-section-label { font-size: 0.72rem; color: var(--ink); }
.cms-toggle {
  font-family: var(--bs-font-mono); font-size: 0.55rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 4px 12px; border: 1px solid var(--bs-border);
  color: var(--muted); background: transparent;
  cursor: pointer; border-radius: var(--radius);
  transition: all var(--t); min-width: 68px;
}
.cms-toggle.on { border-color: var(--bs-green, #27ae60); color: var(--bs-green, #27ae60); }
.cms-toggle:hover { border-color: var(--bs-gold); color: var(--bs-gold); }

/* Apariencia */
.cms-field-group { margin-bottom: var(--sp-lg); }
.cms-label {
  display: block; font-family: var(--bs-font-mono);
  font-size: 0.6rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted);
  margin-bottom: 6px;
}
.cms-color-row { display: flex; gap: 10px; align-items: center; }
.cms-color-row input[type="color"] {
  width: 44px; height: 36px; padding: 2px;
  border: 1px solid var(--bs-border); background: var(--bs-surface);
  cursor: pointer; border-radius: var(--radius);
}
.cms-hex-input { width: 100px; font-family: var(--bs-font-mono); font-size: 0.7rem; }

/* ════════════════════════════════════════════════════════════
   LIQUID GLASS — Calendario mensual (versión C: barra + contador)
   ════════════════════════════════════════════════════════════ */

#calGrid {
  /* Sobreescribe .calendar-grid { gap:1px; background:var(--hairline) } */
  gap: 6px;
  padding: 10px;
  background: rgba(255,255,255,.025);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 22px;
  box-shadow:
    0 12px 40px rgba(0,0,0,.5),
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 0 0 1px rgba(255,255,255,.04),
    0 0 0 1px rgba(255,255,255,.05);
  position: relative;
  overflow: hidden;
}

#calGrid::before {
  content: '';
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.10) 0%, transparent 40%);
  pointer-events: none;
  border-radius: 22px;
}

#calGrid::after {
  content: '';
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0;
  border-radius: 22px;
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.06);
  pointer-events: none;
}

.cal-header-cell {
  position: relative; z-index: 1;
}

.calendar-day {
  background: rgba(255,255,255,.01);
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  transition: background .15s, border-color .15s, transform .15s;
  position: relative;
  z-index: 1;
}

.calendar-day:hover {
  background: rgba(255,255,255,.04);
  border-color: rgba(var(--accent-rgb),.5);
  transform: translateY(-1px);
}

.calendar-day.other-month {
  opacity: .28;
}

.calendar-day.closed {
  background: rgba(255,255,255,.005);
  border-color: rgba(255,255,255,.06);
  cursor: default;
}

.calendar-day.closed:hover {
  transform: none;
  border-color: rgba(255,255,255,.06);
  background: rgba(255,255,255,.005);
}

.calendar-day.today {
  border-top-width: 1px;          /* neutraliza border-top: 2px del estilo antiguo */
  border-color: rgba(var(--accent-rgb),.7);
  box-shadow:
    inset 0 0 0 1px rgba(var(--accent-rgb),.3),
    inset 0 1px 0 rgba(255,255,255,.1);
}

.day-number {
  position: relative; z-index: 1;
}

.day-count {
  position: relative; z-index: 1;
}

.day-occ-bar {
  background: rgba(255,255,255,.06);
  position: relative; z-index: 1;
  overflow: hidden;
}

.day-occ-fill {
  box-shadow: 0 0 6px rgba(255,255,255,.15);
}

.day-occ-pct {
  position: relative; z-index: 1;
}

/* ════════════════════════════════════════════════════════════
   LIQUID GLASS — Sistema global (todas las vistas admin)
   Solo visual. No modifica display, flex, grid, padding ni margin.
   ════════════════════════════════════════════════════════════ */

:root {
  --gl-bg:           rgba(255,255,255,.028);
  --gl-bg-hover:     rgba(255,255,255,.050);
  --gl-border:       rgba(255,255,255,.12);
  --gl-border-gold:  rgba(var(--accent-rgb),.45);
  --gl-shadow:       0 8px 28px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.10);
  --gl-shadow-sm:    0 4px 14px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.07);
  --gl-blur:         blur(16px) saturate(140%);
  --gl-radius:       14px;
  --gl-radius-sm:    9px;
}

/* ── Topbar ─────────────────────────────────────────────────────────────────── */
.topbar {
  background: rgba(0,0,0,.50);
  backdrop-filter: var(--gl-blur);
  -webkit-backdrop-filter: var(--gl-blur);
  border-bottom-color: rgba(255,255,255,.08);
}

/* ── Sidebar ─────────────────────────────────────────────────────────────────── */
.sidebar {
  background: rgba(0,0,0,.42);
  backdrop-filter: var(--gl-blur);
  -webkit-backdrop-filter: var(--gl-blur);
  border-right-color: rgba(255,255,255,.08);
}
.sidebar-divider {
  background: rgba(255,255,255,.07);
}
.sidebar-nav a:hover {
  background: rgba(255,255,255,.07);
  border-radius: var(--gl-radius-sm);
  color: var(--ink);
}
.sidebar-nav a.active {
  background: rgba(255,255,255,.09);
  border-left-color: var(--gold);
  border-radius: var(--gl-radius-sm);
  color: var(--ink);
}

/* ── Stat cards (calendario + histórico) ─────────────────────────────────────── */
.stat-card {
  background: var(--gl-bg);
  border: 1px solid var(--gl-border);
  border-radius: var(--gl-radius);
  box-shadow: var(--gl-shadow-sm);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background .18s, border-color .18s;
}
.stat-card:hover {
  background: var(--gl-bg-hover);
  border-color: var(--gl-border-gold);
}

/* ── Config sections ─────────────────────────────────────────────────────────── */
.config-section {
  background: var(--gl-bg);
  border: 1px solid var(--gl-border);
  border-radius: var(--gl-radius);
  box-shadow: var(--gl-shadow);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  overflow: hidden;
}
.config-section-title {
  background: rgba(255,255,255,.025);
  border-bottom-color: rgba(255,255,255,.08);
}

/* ── Servicios ───────────────────────────────────────────────────────────────── */
#servicesList {
  background: var(--gl-bg);
  border: 1px solid var(--gl-border);
  border-radius: var(--gl-radius);
  box-shadow: var(--gl-shadow);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  overflow: hidden;
}
.service-row {
  background: transparent;
  border-bottom: 1px solid rgba(255,255,255,.07);
  transition: background .15s;
}
.service-row:last-child { border-bottom: none; }
.service-row:hover { background: rgba(255,255,255,.04); }

/* ── Trabajadores ────────────────────────────────────────────────────────────── */
#vipList {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.vip-row {
  background: var(--gl-bg);
  border: 1px solid var(--gl-border);
  border-radius: var(--gl-radius);
  box-shadow: var(--gl-shadow-sm);
  transition: background .15s, border-color .15s;
}
.vip-row:hover {
  background: var(--gl-bg-hover);
  border-color: rgba(var(--accent-rgb),.3);
}

/* ── Histórico — tabla ───────────────────────────────────────────────────────── */
.ht-wrap {
  background: var(--gl-bg);
  border: 1px solid var(--gl-border);
  border-radius: var(--gl-radius);
  box-shadow: var(--gl-shadow);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.ht-head-row { border-bottom-color: rgba(255,255,255,.10); }
.ht-row      { border-bottom-color: rgba(255,255,255,.05); }
.ht-row:hover { background: rgba(255,255,255,.04) !important; }
.ht-row--confirmed { background: rgba(var(--accent-rgb),.06); }

/* ── Clientes — stat boxes ───────────────────────────────────────────────────── */
/* (Bloque duplicado de Clientes eliminado — las reglas .cl-* válidas viven arriba;
   estas pisaban el radio de las burbujas y dejaban esquinas en pico.) */

/* Wrapper de la lista de clientes */
#cl-list {
  /* sin marco contenedor: cada cliente es su propia burbuja suelta */
  background: none;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  overflow: visible;
}

/* ── Vista día — slots y bloques ─────────────────────────────────────────────── */
#dayTimeline {
  background: var(--gl-bg);
  border: 1px solid var(--gl-border);
  border-radius: var(--gl-radius);
  box-shadow: var(--gl-shadow);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow: hidden;
}
.time-slot {
  background: transparent;
  border-bottom: 1px solid rgba(255,255,255,.05);
  transition: background .12s;
}
.time-slot:last-child { border-bottom: none; }
.time-slot:hover { background: rgba(255,255,255,.03); }
.time-label { border-right-color: rgba(255,255,255,.07); }

/* Esta regla pisaba el fondo de la tarjeta con un blanco casi transparente y la
   dejaba plana (indistinguible del hueco vacío). Se queda solo con el brillo
   superior del cristal; la superficie la pone la regla base con var(--card). */
.appt-block {
  border-radius: var(--gl-radius-sm);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 2px 10px rgba(0,0,0,.09);
}

/* ── Mi Horario ──────────────────────────────────────────────────────────────── */
.sched-row {
  border-bottom-color: rgba(255,255,255,.06);
  transition: background .12s;
}
.sched-row.sched-on { background: rgba(var(--accent-rgb),.05); }

/* ── CMS — filas ─────────────────────────────────────────────────────────────── */
.cms-text-row {
  border-bottom-color: rgba(255,255,255,.07);
  transition: background .12s;
}
.cms-text-row:hover {
  background: rgba(255,255,255,.025);
  border-radius: var(--gl-radius-sm);
}
.cms-section-row {
  border-bottom-color: rgba(255,255,255,.07);
  transition: background .12s;
}
.cms-section-row:hover {
  background: rgba(255,255,255,.025);
  border-radius: var(--gl-radius-sm);
}

/* ── View header — separador sutil ───────────────────────────────────────────── */
.view-header {
  border-bottom-color: rgba(255,255,255,.07);
}

/* ── Stats-row: fix gap/background para que border-radius no se corte ─────────── */
.stats-row {
  gap: 8px;
  background: transparent;
}

/* ── Botones — liquid glass ──────────────────────────────────────────────────── */

/* Base */
.btn-admin {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.16);
  border-radius: var(--gl-radius-sm);
  backdrop-filter: blur(8px) saturate(130%);
  -webkit-backdrop-filter: blur(8px) saturate(130%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 2px 8px rgba(0,0,0,.25);
  transition: background .16s, border-color .16s, box-shadow .16s;
}
.btn-admin:hover {
  background: rgba(255,255,255,.09);
  border-color: rgba(255,255,255,.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 4px 14px rgba(0,0,0,.30);
}

/* Gold */
.btn-admin.gold {
  background: rgba(var(--accent-rgb),0.88);
  border-color: rgba(var(--accent-rgb),0.95);
  color: #1C1B19;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 3px 12px rgba(var(--accent-rgb),.25);
}
.btn-admin.gold:hover {
  background: rgba(var(--accent-rgb),1);
  border-color: rgba(var(--accent-rgb),1);
  color: #1C1B19;
  box-shadow: 0 0 16px rgba(var(--accent-rgb),.35), inset 0 1px 0 rgba(255,255,255,.22);
}

/* Primary */
.btn-admin.primary {
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.32);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 3px 12px rgba(0,0,0,.30);
}
.btn-admin.primary:hover {
  background: rgba(255,255,255,.20);
  border-color: rgba(255,255,255,.45);
}

/* Danger */
.btn-admin.danger {
  background: rgba(192,57,43,.07);
  border-color: rgba(192,57,43,.32);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.btn-admin.danger:hover {
  background: rgba(192,57,43,.14);
  border-color: rgba(192,57,43,.60);
}

/* Calendario — nav Hoy / ‹ › */
.btn-cal-nav {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.14);
  border-radius: var(--gl-radius-sm);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 2px 6px rgba(0,0,0,.22);
  transition: background .16s, border-color .16s;
}
.btn-cal-nav:hover {
  background: rgba(255,255,255,.09);
  border-color: rgba(255,255,255,.26);
  color: var(--ink);
}

/* Topbar */
.btn-topbar {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.14);
  border-radius: var(--gl-radius-sm);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
  transition: background .16s, border-color .16s;
}
.btn-topbar:hover {
  background: rgba(255,255,255,.09);
  border-color: rgba(255,255,255,.26);
}

/* Reminder / unassigned badges */
.reminder-badge {
  font-size: 0.65rem;
  padding: 5px 12px;
  backdrop-filter: blur(8px) saturate(130%);
  -webkit-backdrop-filter: blur(8px) saturate(130%);
  background: rgba(var(--accent-rgb),.18);
  color: var(--gold);
  border: 1px solid rgba(var(--accent-rgb),.45);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 2px 8px rgba(0,0,0,.28);
  transition: background .16s, border-color .16s, box-shadow .16s;
}
.reminder-badge:hover {
  background: rgba(var(--accent-rgb),.28);
  border-color: rgba(var(--accent-rgb),.70);
  box-shadow: 0 0 14px rgba(var(--accent-rgb),.20), inset 0 1px 0 rgba(255,255,255,.14);
}
.reminder-badge.active {
  background: rgba(var(--accent-rgb),.18);
  color: var(--gold);
}
#unassignedBadge {
  background: rgba(255,255,255,.05);
  color: var(--muted);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 2px 8px rgba(0,0,0,.25);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
#unassignedBadge:hover {
  background: rgba(255,255,255,.09);
  border-color: rgba(255,255,255,.26);
  color: var(--ink);
}
#unassignedBadge.active {
  background: rgba(var(--accent-rgb),.18);
  color: var(--gold);
  border-color: rgba(var(--accent-rgb),.45);
}

/* ════════════════════════════════════════════════════════════
   RESPONSIVE — Móvil vertical (≤768px) y Tablet horizontal (769–1024px)
   Prioridad: vista del día operativa con los dedos
   ════════════════════════════════════════════════════════════ */

/* ── MÓVIL ≤768px ─────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

  /* Reducir padding de vista para ganar pantalla */
  .view { padding: var(--sp-sm); }

  /* --- View-day: header sticky para que la nav siempre sea accesible --- */
  #view-day .view-header {
    position: sticky;
    top: 0;
    z-index: 20;
    background: rgba(0,0,0,.72);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255,255,255,.08);
    margin: calc(-1 * var(--sp-sm));
    padding: var(--sp-sm) var(--sp-sm) var(--sp-sm);
    margin-bottom: var(--sp-sm);
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-xs);
  }

  /* Título del día grande y centrado */
  #view-day .view-title {
    font-size: 1rem;
    text-align: center;
    letter-spacing: 0.08em;
  }

  /* Nav Ayer/Hoy/Mañana en fila completa, repartida a partes iguales */
  #view-day .view-actions {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 6px;
  }
  #view-day .view-actions .btn-admin {
    justify-content: center;
    padding: 10px 4px;
    font-size: 0.6rem;
    min-height: 40px;
  }

  /* Botón huecos libres más grande */
  .btn-free-slots {
    width: 100%;
    padding: 10px;
    font-size: 0.65rem;
    min-height: 40px;
    text-align: center;
    justify-content: center;
  }

  /* --- Timeline: slots más altos y fáciles de tocar --- */
  .time-slot         { min-height: 64px; }
  .time-slot.continuation { min-height: 24px; }

  /* Hora: más estrecha, centrada */
  .time-label {
    width: 48px;
    font-size: 0.58rem;
    padding: 8px 4px;
    justify-content: center;
    align-items: flex-start;
    text-align: center;
  }

  /* Contenido de la cita */
  .time-content { padding: 8px; }

  /* --- Tarjeta de cita: información más legible --- */
  .appt-block {
    padding: 8px 10px;
    gap: 5px;
    border-left-width: 4px;
    border-radius: var(--gl-radius-sm);
  }
  .appt-service {
    font-size: 0.88rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .appt-client {
    font-size: 0.78rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .appt-barber-tag { font-size: 0.72rem; }
  .appt-price      { font-size: 0.78rem; }
  .appt-source-badge { font-size: 0.6rem; padding: 3px 8px; }

  /* --- Botones de acción en la cita: tap-friendly --- */
  .appt-actions {
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
  }
  .appt-main-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    flex: 1;
  }
  .btn-appt-action {
    font-size: 0.68rem;
    padding: 9px 14px;
    min-height: 38px;
    border-radius: var(--gl-radius-sm);
    flex: 1;
  }
  .btn-appt-dots {
    min-height: 38px;
    min-width: 38px;
    font-size: 1rem;
    padding: 6px 10px;
    border-radius: var(--gl-radius-sm);
  }
  .appt-pay-select {
    font-size: 0.72rem;
    padding: 8px 10px;
    min-height: 38px;
    border-radius: var(--gl-radius-sm);
  }
  .appt-completed-badge {
    font-size: 0.72rem;
    padding: 8px 0;
  }

  /* Stats — 2 col en móvil */
  .stats-row { grid-template-columns: repeat(2, 1fr); gap: 6px; }

  /* Calendar — celdas más pequeñas */
  .calendar-day   { min-height: 52px; padding: 4px; }
  #calGrid        { gap: 4px; padding: 6px; border-radius: 14px; }
  .cal-header-cell { font-size: 9px; padding: 4px 0; }
  .day-number     { font-size: 0.6rem; }
  .day-count      { font-size: 0.6rem; }
  .day-occ-pct    { display: none; }

  /* Modals — casi full screen */
  .modal {
    width: calc(100vw - 24px) !important;
    max-width: 100% !important;
    max-height: 88vh;
    overflow-y: auto;
  }

  /* Config — campos en columna.
     `flex-direction` aquí NO hacía nada: .config-row es `display: grid`, no
     flex. La regla llevaba desde siempre sin efecto, así que en el móvil la
     retícula seguía siendo `180px 1fr` y con 360 px de pantalla el campo se
     salía por la derecha —y lo recortaba el `overflow: hidden` del contenedor,
     así que ni siquiera se podía arrastrar para verlo—. Se deja la línea
     muerta fuera y se apila de verdad, con una sola columna. */
  .config-row {
    grid-template-columns: 1fr;
    align-items: flex-start;
    gap: var(--sp-xs);
  }
  .config-label { min-width: unset; }
  .config-input { width: 100%; }

  /* Histórico — scroll horizontal en tabla */
  .ht-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Citas (.ht-table--cards): tabla → tarjetas apiladas, sin scroll horizontal */
  .ht-table--cards thead { display: none; }
  .ht-table--cards, .ht-table--cards tbody { display: block; width: 100%; }
  .ht-table--cards .ht-row {
    display: block;
    padding: 10px 12px;
    margin-bottom: 8px;
    border: 1px solid var(--hairline);
    border-radius: var(--gl-radius-sm, 6px);
  }
  .ht-table--cards .ht-td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 5px 0;
    white-space: normal;
    border-bottom: 1px solid var(--hairline);
  }
  .ht-table--cards .ht-td:last-child { border-bottom: none; }
  .ht-table--cards .ht-td::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 0.56rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
  }

  /* Topbar: solo logo + hamburger + badges */
  .topbar-brand { font-size: 0.72rem; }
}

/* ── TABLET HORIZONTAL 769px–1024px ──────────────────────────────────────── */
@media (min-width: 769px) and (max-width: 1024px) {

  /* Sidebar más estrecha */
  :root { --sidebar-w: 180px; }
  .sidebar-nav a {
    padding: 9px var(--sp-md);
    font-size: 0.6rem;
  }

  /* Vista día: header no sticky pero compacto */
  #view-day .view-header {
    flex-wrap: wrap;
    gap: var(--sp-xs);
  }
  #view-day .view-actions {
    display: flex;
    gap: 6px;
    flex-wrap: nowrap;
  }
  #view-day .view-actions .btn-admin {
    padding: 8px 12px;
    font-size: 0.62rem;
  }

  /* Timeline: slots más altos para touch */
  .time-slot { min-height: 60px; }
  .time-label { width: 56px; font-size: 0.58rem; }

  /* Cita: texto readable */
  .appt-service  { font-size: 0.82rem; }
  .appt-client   { font-size: 0.72rem; }
  .btn-appt-action {
    font-size: 0.6rem;
    padding: 7px 12px;
    min-height: 34px;
  }
  .btn-appt-dots {
    min-height: 34px;
    min-width: 34px;
  }

  /* Stats — 4 col caben en tablet */
  .stats-row { grid-template-columns: repeat(4, 1fr); gap: 8px; }

  /* Config — 2 col en tablet */
  .config-rows { display: grid; grid-template-columns: 1fr 1fr; }
  .config-row  { flex-direction: row; }

  /* Reducir padding de vistas */
  .view { padding: var(--sp-md); }
}

/* Login */
.btn-login {
  background: rgba(var(--accent-rgb),0.88) !important;
  color: #1C1B19 !important;
  border: 1px solid rgba(var(--accent-rgb),0.95) !important;
  border-radius: var(--gl-radius-sm);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 4px 16px rgba(0,0,0,.20);
  transition: background .16s, border-color .16s;
}
.btn-login:hover {
  background: rgba(var(--accent-rgb),1) !important;
  border-color: rgba(var(--accent-rgb),1) !important;
  box-shadow: 0 0 16px rgba(var(--accent-rgb),.25);
}

/* ═══ CAJA & CONTABILIDAD ═══════════════════════════════════════════ */
.gold { color: var(--bs-gold, #c9a84c); }
.caja-ok   { color: #3fbf6f; }
.caja-bad  { color: #e05252; }
.caja-warn { color: var(--bs-gold, #c9a84c); }
.empty-note {
  padding: 16px; color: var(--muted);
  font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.08em;
}
.table-scroll { overflow-x: auto; }
.ht-table tbody tr { border-bottom: 1px solid var(--hairline); }
.ht-td.gold { color: var(--bs-gold, #c9a84c); }
.btn-icon-del {
  background: transparent; border: none; cursor: pointer;
  font-size: 0.9rem; padding: 2px 4px; opacity: 0.7; transition: opacity var(--t);
}
.btn-icon-del:hover { opacity: 1; }
/* Estos botones eran un emoji suelto (papelera, lápiz). Al pasarlos al juego de
   iconos que el panel ya carga hay que darles medida: el glifo hereda el
   font-size del botón y a 0.9rem se queda escuálido. */
.btn-icon-del .material-symbols-outlined { font-size: 19px; line-height: 1; display: block; }
/* El hito de la línea de tiempo del cliente: mismo tamaño que tenía la tijera. */
.cl-tl-icon .material-symbols-outlined { font-size: 18px; line-height: 1; display: block; }

/* Cierre de caja */
.caja-grid { max-width: 560px; }
/* Sin marco contenedor: el resumen y el botón quedan como globos sueltos (sin línea ni fondo que los una).
   Hay que resetear también sombra y backdrop-filter, que aunque background sea none seguían dibujando el cristal. */
.config-section.caja-panel {
  background: none; border: none; padding: 0; border-radius: 0;
  box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
}
.caja-expected {
  margin-top: var(--sp-md);
  border: 1px solid var(--hairline); border-radius: 10px; overflow: hidden;
}
.caja-exp-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px; font-size: 0.8rem; color: var(--body-text);
  border-bottom: 1px solid var(--hairline);
}
.caja-exp-row:last-child { border-bottom: none; }
.caja-exp-val { font-family: var(--font-mono); font-weight: 600; color: var(--ink); }
.caja-exp-total {
  background: rgba(var(--accent-rgb),0.06); font-weight: 700;
}
.caja-result {
  margin-top: var(--sp-md);
  border: 1px solid var(--bs-gold-border, rgba(var(--accent-rgb),0.3)); border-radius: 10px;
  background: rgba(var(--accent-rgb),0.04); padding: 4px 0;
}
.caja-result-line {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px; font-size: 0.82rem;
}
.caja-result-line span:last-child { font-family: var(--font-mono); font-weight: 700; }
.caja-discrepancy { border-top: 1px solid var(--hairline); font-size: 0.95rem; }

/* Contabilidad */
.cont-period-btn {
  padding: 7px 14px; background: transparent;
  border: 1px solid var(--hairline); border-radius: var(--gl-radius-sm);
  font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.12em;
  color: var(--muted); cursor: pointer; transition: all var(--t); text-transform: uppercase;
}
.cont-period-btn:hover { color: var(--ink); border-color: var(--muted); }
.cont-period-btn.active { color: var(--bs-gold, #c9a84c); border-color: var(--bs-gold, #c9a84c); }
.cont-cols {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-md); margin-top: var(--sp-sm);
}
@media (max-width: 720px) { .cont-cols { grid-template-columns: 1fr; } }
.cont-block {
  border: 1px solid var(--hairline); border-radius: 10px; padding: 14px 16px;
  background: var(--bs-surface2, rgba(255,255,255,0.02));
}
.cont-block-title {
  font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 10px;
}
.cont-line {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 0; font-size: 0.8rem; color: var(--body-text);
  border-bottom: 1px solid var(--hairline);
}
.cont-line:last-child { border-bottom: none; }
.cont-line span:last-child { font-family: var(--font-mono); font-weight: 600; }
.exp-form { flex-wrap: wrap; }

/* ── Cerrar caja (arqueo) — cristal líquido ── */
.btn-cerrar-caja {
  margin-top: var(--sp-md); width: 100%;
  padding: 14px 18px; border-radius: 12px; cursor: pointer;
  font-family: var(--font-mono); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: #1C1B19;
  background: rgba(var(--accent-rgb),0.9);
  border: 1px solid rgba(var(--accent-rgb),0.95);
  backdrop-filter: blur(8px) saturate(130%);
  -webkit-backdrop-filter: blur(8px) saturate(130%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 4px 16px rgba(var(--accent-rgb),.22);
  transition: all var(--t);
}
.btn-cerrar-caja:hover { background: rgba(var(--accent-rgb),1); box-shadow: 0 0 20px rgba(var(--accent-rgb),.3); }

.modal--caja { width: 540px; }
.modal--caja .modal-body { gap: var(--sp-md); }

.cierre-sec {
  border: 1px solid rgba(255,255,255,0.08); border-radius: 12px;
  padding: 12px 14px;
  background: rgba(255,255,255,0.03);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.cierre-sec-title {
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--bs-gold, #c9a84c); margin-bottom: 10px;
}

/* Contador de denominaciones */
.denom-grid { display: flex; flex-direction: column; gap: 6px; }
.denom-row {
  display: grid; grid-template-columns: 1fr auto 84px 92px; align-items: center; gap: 8px;
}
.denom-lbl { font-family: var(--font-mono); font-size: 0.72rem; color: var(--body-text); }
.denom-x   { font-family: var(--font-mono); font-size: 0.7rem; color: var(--muted); text-align: center; }
.denom-qty {
  width: 100%; text-align: right;
  background: rgba(0,0,0,0.25); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px; padding: 7px 9px; color: var(--ink);
  font-family: var(--font-mono); font-size: 0.78rem;
  transition: border-color var(--t);
}
.denom-qty:focus { outline: none; border-color: rgba(var(--accent-rgb),0.6); }
.denom-qty--error { border-color: var(--danger, #e05252) !important; background: rgba(224,82,82,0.08); }
.denom-sub { font-family: var(--font-mono); font-size: 0.72rem; color: var(--muted); text-align: right; }
.denom-total {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,0.1);
  font-family: var(--font-mono); font-weight: 700; font-size: 0.85rem;
}

/* Filas de comparación */
.cmp-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 7px 0; font-size: 0.78rem; color: var(--body-text);
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.cmp-row:last-child { border-bottom: none; }
.cmp-val { font-family: var(--font-mono); font-weight: 600; color: var(--ink); }
.cmp-strong { font-weight: 600; }
.cmp-strong .cmp-val { color: var(--ink); }
.cmp-result {
  margin-top: 4px; padding-top: 9px; border-top: 1px solid rgba(255,255,255,0.12);
  font-size: 0.85rem; font-weight: 700;
}
.cmp-input {
  width: 130px; text-align: right;
  background: rgba(0,0,0,0.25); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px; padding: 6px 9px; color: var(--ink);
  font-family: var(--font-mono); font-size: 0.78rem; transition: border-color var(--t);
}
.cmp-input:focus { outline: none; border-color: rgba(var(--accent-rgb),0.6); }
.cierre-summary { background: rgba(var(--accent-rgb),0.05); border-color: rgba(var(--accent-rgb),0.25); }

@media (max-width: 560px) {
  .denom-row { grid-template-columns: 1fr auto 70px 78px; }
  .cmp-input { width: 108px; }
}

/* Móvil: font-size >= 16px evita el auto-zoom de iOS al enfocar las casillas del
   cierre de caja (no cambia el escritorio). */
@media (max-width: 767px) {
  .denom-qty, .cmp-input, #cierreNotes { font-size: 16px; }
}

/* ── Cifras / importes — tipografía de contabilidad (dígitos tabulares) ──────── */
/* Clase reutilizable .figure/.amount + todas las cifras del dashboard.
   IBM Plex Mono con tabular-nums + lining-nums: dígitos alineados en columna
   y a la misma altura. Solo afecta a NÚMEROS, no a títulos ni labels. */
.figure, .amount,
.stat-card-value,
.cmp-val, .caja-exp-val,
.denom-qty, .denom-sub, .denom-total,
.cont-line span:last-child,
.ht-td.figure {
  font-family: var(--font-figures);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  letter-spacing: -0.01em;
}
/* Los stat-cards de texto (servicio/barbero top) NO son cifras: mantén la serif. */
.stat-card-value--sm {
  font-family: var(--font-disp);
  font-variant-numeric: normal;
  letter-spacing: 0.04em;
}

/* ── Secciones del Histórico (RESUMEN, EMPLEADOS, EVOLUCIÓN) — sin marco, botón glass ── */
.se-section { border: none; background: transparent; margin-bottom: var(--sp-lg); }
.se-section .hist-bkd-header {
  border: 1px solid var(--gl-border);
  border-radius: var(--gl-radius);
  background: var(--gl-bg);
  box-shadow: var(--gl-shadow-sm);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background .18s, border-color .18s;
}
.se-section .hist-bkd-header:hover {
  background: var(--gl-bg-hover);
  border-color: var(--gl-border-gold);
}
/* El contenido flota bajo el botón. */
.se-section .hist-bkd-body { margin-top: var(--sp-md); overflow: visible; }
.se-section .se-grid { padding: 0; }
.stat-card-value.alert { color: var(--danger, #e05252); }
.se-empty {
  grid-column: 1 / -1;
  padding: 12px; text-align: center; color: var(--muted);
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.08em;
}

/* Empleados */
.emp-super {
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px;
}
.emp-super-item {
  flex: 1; min-width: 150px;
  background: var(--gl-bg); border: 1px solid var(--gl-border); border-radius: var(--gl-radius);
  box-shadow: var(--gl-shadow-sm); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  padding: 10px 12px;
}
.emp-super-label {
  font-family: var(--font-mono); font-size: 0.52rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted); display: block; margin-bottom: 3px;
}
.emp-super-name { font-size: 0.9rem; font-weight: 600; color: var(--gold); }
.emp-table {
  background: var(--gl-bg); border: 1px solid var(--gl-border); border-radius: var(--gl-radius);
  box-shadow: var(--gl-shadow-sm); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  overflow: hidden;
}
.emp-row {
  display: grid; grid-template-columns: 1.4fr repeat(5, 1fr); align-items: center; gap: 8px;
  padding: 9px 14px; border-bottom: 1px solid var(--hairline);
  font-family: var(--font-figures); font-size: 0.72rem;
  font-variant-numeric: tabular-nums lining-nums;
}
.emp-row:last-child { border-bottom: none; }
.emp-row--head {
  font-family: var(--font-mono); font-size: 0.52rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted); background: rgba(255,255,255,.02);
}
.emp-row--head .emp-col-r { text-align: right; }
.emp-name { font-family: var(--font-mono); font-weight: 700; letter-spacing: 0.03em; }
.emp-col-r { text-align: right; }
.emp-col-r.gold { color: var(--gold); }

/* Evolución */
.evo-table {
  background: var(--gl-bg); border: 1px solid var(--gl-border); border-radius: var(--gl-radius);
  box-shadow: var(--gl-shadow-sm); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  overflow: hidden;
}
.evo-row {
  display: grid; grid-template-columns: 1.2fr 1fr 1fr 0.8fr; align-items: center; gap: 8px;
  padding: 10px 14px; border-bottom: 1px solid var(--hairline);
  font-family: var(--font-figures); font-size: 0.78rem;
  font-variant-numeric: tabular-nums lining-nums;
}
.evo-row:last-child { border-bottom: none; }
.evo-row--head {
  font-family: var(--font-mono); font-size: 0.52rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted); background: rgba(255,255,255,.02);
}
.evo-metric { font-family: var(--font-mono); font-weight: 700; letter-spacing: 0.03em; color: var(--ink); }
.evo-col-r { text-align: right; }
.evo-prev { color: var(--muted); }
.evo-delta { text-align: right; font-weight: 700; }
.evo-up { color: var(--success, #3fbf6f); }
.evo-down { color: var(--danger, #e05252); }
.evo-flat { color: var(--muted); }

/* ── Acciones sobre el ticket (detalle) ── */
.tk-actions {
  padding: var(--sp-md); border-top: 1px solid var(--hairline);
  display: flex; flex-direction: column; gap: 10px;
}
.tk-act-group { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tk-act-label, .tk-audit-title {
  font-family: var(--font-mono); font-size: 0.55rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted);
}
.tk-act-btns, .tk-act-row { display: flex; gap: 6px; flex-wrap: wrap; }
.tk-danger { color: var(--danger, #e05252) !important; border-color: rgba(224,82,82,0.35) !important; }
.tk-correct {
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px; border: 1px solid var(--hairline); border-radius: 10px;
  background: rgba(255,255,255,0.02);
}
.tk-audit { padding: 0 var(--sp-md) var(--sp-md); }
.tk-audit-title { margin-bottom: 6px; }
.tk-audit-row {
  display: flex; gap: 8px; align-items: baseline;
  padding: 5px 0; border-bottom: 1px solid var(--hairline); font-size: 0.7rem;
}
.tk-audit-row:last-child { border-bottom: none; }
.tk-audit-act { font-family: var(--font-mono); font-weight: 700; color: var(--gold); white-space: nowrap; }
.tk-audit-meta { color: var(--muted); }

/* ── Paginador del histórico ── */
.ht-pager {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  padding: 12px; margin-top: 8px;
}
.ht-pager-info {
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.08em; color: var(--muted);
}
.ht-pager .btn-admin[disabled] { opacity: 0.4; cursor: default; }

/* ── Cerrar caja: casillas de importe + pasos ── */
.denom-row--amount { grid-template-columns: 1fr 130px; }
.cierre-steps { display: flex; gap: 8px; margin-bottom: var(--sp-md); }
.cierre-step {
  font-family: var(--font-mono); font-size: 0.55rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted);
  padding: 4px 10px; border: 1px solid var(--hairline); border-radius: 20px;
}
.cierre-step.on { color: var(--gold); border-color: var(--gold-hairline, rgba(var(--accent-rgb),0.4)); }


/* ── Mi web (editor de contenido) ───────────────────────────────────────────── */
.mw-estado { font-size: 0.82rem; color: var(--ink); line-height: 1.6; }
.mw-nota   { font-size: 0.72rem; color: var(--muted); line-height: 1.65; margin: 10px 0 0; }
.mw-punto  { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--muted-soft); margin-right: 9px; }
.mw-punto--ok    { background: #4E9A6A; }
.mw-punto--sucio { background: var(--gold); }
.mw-fila {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 10px 2px; border-bottom: 1px solid var(--hairline);
  font-size: 0.76rem; color: var(--ink);
}
.mw-fila:last-child { border-bottom: 0; }
.mw-fecha { color: var(--muted); font-size: 0.7rem; white-space: nowrap; }
.mw-vacio { font-size: 0.72rem; color: var(--muted); padding: 8px 2px; }
.mw-etiqueta {
  font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px; white-space: nowrap;
  border: 1px solid currentColor;
}
.mw-etiqueta--nueva    { color: var(--gold); }
.mw-etiqueta--en_curso { color: #5B8DB8; }
.mw-etiqueta--hecha    { color: #4E9A6A; }

/* Formulario de petición de cambio */
.mw-pie-form {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  margin-top: 10px; flex-wrap: wrap;
}
.mw-contador {
  font-family: var(--font-figures); font-size: 0.68rem; color: var(--muted-soft);
  letter-spacing: 0.06em;
}
.mw-contador--corto { color: var(--gold); }
.mw-lista-titulo {
  font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 4px; padding-top: 14px;
  border-top: 1px solid var(--hairline);
}
/* En móvil el botón manda: ocupa el ancho y queda debajo del contador. */
@media (max-width: 560px) {
  .mw-pie-form { flex-direction: column-reverse; align-items: stretch; }
  .mw-pie-form .btn-admin { width: 100%; }
  .mw-contador { text-align: right; }
}

/* ── TU SUSCRIPCIÓN (Configuración) ─────────────────────────────────────────
   Todo lo que tiene que ver con el dinero se lee de un vistazo: el estado
   arriba, el importe en grande y los botones abajo. Sin sorpresas escondidas. */
.susc-caja { font-size: 0.88rem; line-height: 1.6; color: var(--ink); }
.susc-estado { display: inline-block; font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 3px 10px; border-radius: 20px; border: 1px solid var(--hairline-mid); color: var(--muted); margin-bottom: 12px; }
.susc-estado.ok    { border-color: rgba(var(--accent-rgb), .5); color: var(--gold); }
.susc-estado.aviso { border-color: rgba(224,119,119,.45); color: #E07777; }
.susc-precio { font-family: var(--font-figures); font-size: 1.5rem; color: var(--gold); }
.susc-precio small { font-size: 0.7rem; color: var(--muted); }
.susc-dato { color: var(--muted); margin-top: 4px; }
.susc-dato strong { color: var(--ink); font-weight: 600; }
.susc-nota { font-size: 0.78rem; color: var(--muted); line-height: 1.55; margin-top: 12px;
  border-left: 2px solid var(--hairline-mid); padding-left: 10px; }
.susc-acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.susc-planes { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin-top: 14px; }
.susc-plan { border: 1px solid var(--hairline-mid); border-radius: 10px; padding: 14px; background: var(--surface); }
.susc-plan h4 { font-family: var(--font-disp); font-size: 1.05rem; margin: 0 0 2px; }
.susc-plan .hoy { font-size: 0.76rem; color: var(--muted); margin: 6px 0 10px; }
.susc-plan .btn-admin { width: 100%; }
/* Los tres ajustes de la señal, en fila y sin apretarse en el móvil. */
.senal-ajustes { display: flex; flex-wrap: wrap; gap: 14px; margin: 12px 0 4px; }
.senal-ajustes label { display: flex; flex-direction: column; gap: 4px; font-size: 0.74rem;
  color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.senal-ajustes select, .senal-ajustes input { min-width: 150px; padding: 8px 10px; border-radius: 8px;
  border: 1px solid var(--hairline-mid); background: var(--surface); color: var(--text);
  font-family: inherit; font-size: 0.86rem; text-transform: none; letter-spacing: 0; }
.susc-estado.aviso { background: rgba(224,160,74,.14); color: #E0A04A; }

/* La oferta cruza las tres columnas: es una sola cosa, no una por plan. */
.susc-oferta { grid-column: 1 / -1; border: 1px solid var(--gold); border-radius: 10px;
  padding: 9px 12px; font-size: 0.8rem; color: var(--text); background: rgba(201,168,76,.08); }
.susc-error { color: #E07777; font-size: 0.82rem; margin-top: 10px; }

/* ── PRUEBA TERMINADA · la puerta ────────────────────────────────────────────
   Tapa el panel entero. No es un modal: no se cierra, porque detrás no hay nada
   que hacer hasta elegir plan. */
.paywall { position: fixed; top: 0; right: 0; bottom: 0; left: 0; inset: 0; z-index: 300;
  background: var(--canvas); overflow-y: auto; display: flex; align-items: center; justify-content: center; padding: 24px; }
.paywall-caja { width: 100%; max-width: 760px; }
.paywall-marca { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.28em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 18px; }
.paywall h2 { font-family: var(--font-disp); font-size: clamp(1.35rem, 4vw, 1.9rem); font-weight: 600;
  line-height: 1.2; margin: 0 0 10px; color: var(--ink); }
.paywall-lead { color: var(--muted); font-size: 0.92rem; line-height: 1.6; margin: 0 0 6px; max-width: 60ch; }
.paywall-pie { color: var(--muted); font-size: 0.78rem; margin-top: 18px; }
.paywall-pie a { color: var(--gold); }

/* ════════════════════════════════════════════════════════════════════════════
   PANTALLA DE ACCESO — rehecha
   ----------------------------------------------------------------------------
   Va al final del archivo a propósito: gana a las reglas de arriba por orden de
   carga, sin tener que subirles la especificidad ni borrarlas.

   NO cuelga de la capa UX v2, y no es un olvido: en esta pantalla todavía no hay
   sesión, así que no se sabe de qué negocio es quien mira y `data-ux` no está
   puesto. Además el acceso es de LA PLATAFORMA, no de ningún negocio: es la
   misma puerta para los siete.

   Tipografía: Fraunces (que themes.css ya importa para todos) en el título, y la
   del sistema en el resto. Cero descargas nuevas — la fuente del sistema en 2026
   es una grotesca moderna en todas partes, así que se quita el aire de máquina
   de escribir sin pedirle un byte más a nadie.
   ════════════════════════════════════════════════════════════════════════════ */
#loginScreen {
  gap: var(--sp-lg);
  padding: var(--sp-lg);
  /* Un velo del color del acento arriba: da profundidad sin inventar un color
     nuevo, y se tiñe solo con el tema (dorado, azul o rosa). */
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(var(--accent-rgb), .10), transparent 60%),
    var(--canvas);
}
#loginScreen .login-logo {
  font-family: var(--font-disp);
  font-size: 0.95rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  /* Estaba al 30% de opacidad: la marca de la casa no puede ser lo que peor se
     lee de la pantalla. */
  color: var(--muted);
  opacity: 1;
}
#loginScreen .login-box {
  width: 100%;
  max-width: 400px;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 18px;
  padding: 34px 30px 30px;
  box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 18px 48px rgba(0,0,0,.22);
}
#loginScreen .login-title {
  font-family: var(--font-disp);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: none;
  line-height: 1.2;
  color: var(--ink);
  margin-bottom: 6px;
}
#loginScreen .login-sub {
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 0.9rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
  margin-bottom: 26px;
  line-height: 1.5;
}
#loginScreen .login-form { gap: 16px; }
#loginScreen .field-group { gap: 7px; }
#loginScreen .field-label {
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--body);
}
#loginScreen .field-input {
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* 16px justos: por debajo de eso, iOS hace zoom al enfocar el campo y deja la
     pantalla torcida al escribir la contraseña. */
  font-size: 16px;
  padding: 12px 14px;
  min-height: 48px;
  border-radius: 11px;
  border-color: var(--hairline-mid);
  transition: border-color .18s cubic-bezier(.23,1,.32,1),
              box-shadow .18s cubic-bezier(.23,1,.32,1);
}
#loginScreen .field-input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .22);
}
#loginScreen .btn-login {
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  min-height: 50px;
  border-radius: 11px;
  margin-top: 6px;
  background: var(--gold);
  border-color: var(--gold);
  transition: filter .18s cubic-bezier(.23,1,.32,1),
              transform .12s cubic-bezier(.23,1,.32,1);
}
#loginScreen .btn-login:hover { background: var(--gold); filter: brightness(1.08); }
#loginScreen .btn-login:active { transform: scale(.98); }
#loginScreen .btn-login:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
/* El error era una línea suelta de 0.65rem que se perdía entre los campos.
   Como aviso tiene que tener cuerpo: superficie propia y del color que le toca. */
#loginScreen .login-error {
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 0.85rem;
  letter-spacing: 0;
  line-height: 1.45;
  margin-top: 0;
  padding: 10px 13px;
  border-radius: 10px;
  background: rgba(192,57,43,.12);
  border: 1px solid rgba(192,57,43,.32);
  color: var(--danger);
}
#loginScreen .login-olvido {
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 0.85rem;
  letter-spacing: 0;
  text-transform: none;
  margin-top: 14px;
  padding: 8px;
  border-radius: 8px;
}
@media (max-width: 420px) {
  #loginScreen .login-box { padding: 28px 22px 24px; border-radius: 16px; }
  #loginScreen .login-title { font-size: 1.35rem; }
}

/* ── FICHAJE ────────────────────────────────────────────────────────────────
   Módulo opcional por negocio. Vive en admin.css y NO en la capa v2 a
   propósito: el día que otro negocio active `fichaje_enabled`, la pantalla
   tiene que verse bien sin depender de una capa que solo está en Tema Test.
   Está escrito contra los tokens de Capa 2 (--card, --ink, --gold, --gl-*),
   así que los tres temas lo visten solos y el cristal de Ónix se conserva.
   El color de cada persona entra como --tinte, igual que en la agenda y en el
   panel de trabajadores: es la misma persona, tiene que ser el mismo color. */

/* Mi fichaje: lo único que la mayoría toca aquí. Ocupa el ancho entero y el
   botón es grande a propósito — se ficha de pie, con prisa y sin mirar. */
.fch-yo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-md);
  flex-wrap: wrap;
  padding: var(--sp-lg);
  margin-bottom: var(--sp-lg);
  background: var(--gl-bg, var(--card));
  border: 1px solid var(--gl-border, var(--hairline));
  border-radius: var(--gl-radius, var(--radius));
  box-shadow: var(--gl-shadow-sm, none);
  border-left: 3px solid var(--hairline-mid);
}
/* Dentro/fuera se distingue por el filo de color, no por un icono: se ve de
   reojo desde el otro lado del mostrador. */
.fch-yo.dentro { border-left-color: var(--success); }
.fch-yo-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fch-yo-estado {
  font-family: var(--font-disp);
  font-size: 20px;
  color: var(--ink);
  line-height: 1.2;
}
.fch-yo-desde { font-size: 12px; color: var(--muted); }
.fch-yo-desde .figure { color: var(--ink); }
.fch-btn { min-height: 44px; padding: 0 var(--sp-lg); }

/* Quién está dentro (solo el dueño). Una tira de nombres, no una tabla: la
   pregunta es "¿está fulano?", y se contesta de un vistazo. */
.fch-equipo {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-sm);
  margin-bottom: var(--sp-lg);
}
.fch-persona {
  display: flex;
  align-items: baseline;
  gap: var(--sp-xs);
  padding: var(--sp-sm) var(--sp-md);
  border-radius: var(--gl-radius, var(--radius));
  border: 1px solid var(--hairline);
  background: var(--card);
  border-left: 3px solid color-mix(in srgb, var(--tinte, var(--hairline-mid)) 100%, transparent);
  opacity: .55;                      /* fuera = apagado; dentro recupera el color */
}
.fch-persona.dentro {
  opacity: 1;
  background: color-mix(in srgb, var(--tinte, var(--card)) 16%, var(--card));
}
.fch-persona-n { color: var(--ink); }
.fch-persona-e { font-size: 11px; color: var(--muted); }

.fch-registro-cab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-md);
  flex-wrap: wrap;
  margin-bottom: var(--sp-md);
}
.fch-titulo {
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--sp-sm);
}
.fch-registro-cab .fch-titulo { margin: 0; }
.fch-periodo { display: flex; gap: var(--sp-xs); }

/* Totales del periodo. La suma va primero y en grande porque es la respuesta;
   la lista de abajo solo enseña de dónde sale. */
.fch-totales {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--sp-sm);
  margin-bottom: var(--sp-md);
}
.fch-total {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--sp-md);
  background: color-mix(in srgb, var(--tinte, var(--card)) 14%, var(--card));
  border: 1px solid var(--hairline);
  border-left: 3px solid color-mix(in srgb, var(--tinte, var(--hairline-mid)) 100%, transparent);
  border-radius: var(--gl-radius, var(--radius));
}
.fch-total-h { font-size: 22px; color: var(--ink); line-height: 1.1; }
.fch-total-n { font-size: 11px; color: var(--muted); }

.fch-filas { display: flex; flex-direction: column; gap: var(--sp-xs); }
.fch-fila {
  display: grid;
  /* La última columna se dimensiona sola: si la fila lleva la marca de
     "corregido" además del lápiz, necesita más sitio, y con un ancho fijo la
     marca se montaba encima del total. */
  grid-template-columns: 72px minmax(110px, 190px) auto 76px 1fr;
  align-items: center;
  gap: var(--sp-sm);
  padding: var(--sp-sm) var(--sp-md);
  background: var(--card);
  border: 1px solid var(--hairline);
  border-left: 3px solid color-mix(in srgb, var(--tinte, var(--hairline-mid)) 100%, transparent);
  border-radius: var(--gl-radius, var(--radius));
}
/* Sin cerrar: se marca la fila, no solo el texto. Un fichaje abierto de hace
   tres días es el error que hay que ver desde lejos. */
.fch-fila.abierta { border-color: color-mix(in srgb, var(--warning) 40%, transparent); }
.fch-fila.abierta .fch-fila-horas { color: var(--warning); }
.fch-fila-dia   { font-size: 11px; color: var(--muted); }
.fch-fila-quien { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fch-fila-horas { color: var(--body); }
.fch-fila-total { color: var(--ink); text-align: right; }
.fch-fila-acc   { display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-xs); }
.fch-tocado {
  font-size: 10px;
  color: var(--muted);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 1px 7px;
}
.fch-vacio {
  padding: var(--sp-lg);
  text-align: center;
  color: var(--muted);
  border: 1px dashed var(--hairline);
  border-radius: var(--gl-radius, var(--radius));
}
.fch-horas { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-md); }

@media (max-width: 768px) {
  .fch-yo { align-items: stretch; flex-direction: column; }
  .fch-btn { width: 100%; }
  /* La fila se parte en dos alturas antes que encogerse: en 360px, cinco
     columnas dejan las horas en dos dígitos por línea. */
  .fch-fila {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "quien acc"
      "horas total"
      "dia   dia";
    row-gap: 2px;
  }
  .fch-fila-quien { grid-area: quien; }
  .fch-fila-acc   { grid-area: acc; }
  .fch-fila-horas { grid-area: horas; }
  .fch-fila-total { grid-area: total; }
  .fch-fila-dia   { grid-area: dia; }
}

/* ── FOTO DEL SERVICIO (modal de servicios) ───────────────────────────────
   Un cuadro con la foto actual y dos botones. La vista previa tiene la misma
   proporcion que la tarjeta de la reserva: lo que se ve aqui es lo que va a
   ver quien reserve, no una aproximacion. */
.svc-foto-panel { display: flex; align-items: center; gap: 12px; }
.svc-foto-prev {
  width: 96px; height: 60px; flex: none;
  border-radius: 8px; overflow: hidden;
  border: 1px solid var(--hairline);
  background: var(--elevated);
  display: grid; place-items: center;
}
.svc-foto-prev img { width: 100%; height: 100%; object-fit: cover; display: block; }
.svc-foto-vacia { font-size: .58rem; letter-spacing: .06em; color: var(--muted); text-align: center; padding: 0 6px; }
.svc-foto-acciones { display: flex; flex-direction: column; gap: 6px; }
.svc-foto-acciones button[disabled] { opacity: .45; cursor: not-allowed; }

/* ── Registro de jornada: lo anulado y su historial ────────────────────────
   Un fichaje anulado NO desaparece de la pantalla, se tacha: el registro se
   enseña entero, tachaduras incluidas, que es lo que lo hace creíble. */
.fch-fila.anulada { opacity: .55; }
.fch-fila.anulada .fch-fila-horas,
.fch-fila.anulada .fch-fila-total { text-decoration: line-through; }
.fch-marca {
  font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
  padding: 2px 6px; border-radius: 4px; border: 1px solid currentColor;
  color: var(--muted); white-space: nowrap;
}
.fch-marca.anulado { color: var(--danger, #C0533C); }
.fch-historial { margin-top: var(--sp-md); border-top: 1px solid var(--border); padding-top: var(--sp-sm); }
.fch-historial h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted); margin: 0 0 var(--sp-xs); }
.fch-h-item { font-size: 12px; line-height: 1.6; padding: var(--sp-xs) 0; border-bottom: 1px solid var(--border); }
.fch-h-item:last-child { border-bottom: 0; }
.fch-h-que { color: var(--muted); }
.fch-h-de  { text-decoration: line-through; opacity: .7; }
.fch-aviso-jornada {
  border: 1px solid var(--warning, #C08A2E); border-radius: 8px;
  padding: var(--sp-md); margin-bottom: var(--sp-md); font-size: 13px; line-height: 1.6;
}
.fch-aviso-jornada strong { display: block; margin-bottom: 4px; }

/* ── Ficha del producto: rebaja, relacionados (20-10-2026) ── */
.producto-rebaja { padding: 12px 14px 4px; margin-bottom: var(--sp-md); border: 1px dashed var(--hairline-mid); border-radius: var(--radius); }
.producto-rebaja-nota { margin: 0 0 10px; font-size: 0.78rem; line-height: 1.5; color: var(--muted); }
.producto-relacionados { display: flex; flex-wrap: wrap; gap: 6px; }
.rel-chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 12px;
  border: 1px solid var(--hairline-mid); border-radius: 999px; background: var(--card); color: var(--ink);
  font: inherit; font-size: 0.78rem; cursor: pointer;
}
.rel-chip.elegido { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.rel-chip b { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--ink); color: var(--surface); font-size: 0.65rem; }
.tp-antes { color: var(--muted); font-weight: 400; margin-right: 4px; }
.tp-rebaja { display: block; font-size: 0.68rem; font-weight: 400; color: var(--muted); white-space: normal; }

/* ── Ordenar el inventario arrastrando (20-10-2026) ── */
.tp-fila.con-asa { grid-template-columns: 28px 52px minmax(0, 1fr) auto auto; }
.tp-fila.con-asa .tp-acciones { grid-column: 3 / -1; }
@media (min-width: 900px) {
  .tp-fila.con-asa { grid-template-columns: 28px 52px minmax(0, 1fr) 110px 80px auto; }
  .tp-fila.con-asa .tp-acciones { grid-column: auto; }
}
.tp-asa {
  width: 28px; height: 44px; padding: 0; border: 0; border-radius: var(--radius);
  background: none; color: var(--muted); font-size: 1.15rem; line-height: 1;
  cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none;
}
.tp-asa:hover, .tp-asa:focus-visible { color: var(--ink); background: var(--card); }
.tp-fila.arrastrando { position: relative; z-index: 5; background: var(--card); box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .5); }
.tp-fila.arrastrando .tp-asa { cursor: grabbing; color: var(--ink); }
.ordenando, .ordenando * { user-select: none; -webkit-user-select: none; cursor: grabbing; }

/* ── Lo que compra el cliente y qué se llevan juntos (20-10-2026) ── */
.venta-grupo { margin: 10px 2px 2px; font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.venta-grupo:first-child { margin-top: 0; }
.venta-prod .vp-nota { display: block; margin-top: 2px; font-size: 0.72rem; font-weight: 400; color: var(--gold); }
.cl-prod-tabla { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.cl-prod-tabla th, .cl-prod-tabla td { padding: 9px 8px; text-align: left; border-bottom: 1px solid var(--hairline); }
.cl-prod-tabla th { font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
.cl-prod-tabla .num { text-align: right; white-space: nowrap; }
.cl-prod-recs { margin-top: 18px; display: flex; flex-direction: column; gap: 6px; }
.cl-prod-rec { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--hairline-mid); border-radius: var(--radius); background: var(--card); }
.cl-prod-rec span { font-size: 0.74rem; color: var(--muted); }

/* ── Productos en la tarjeta de la cita: quitar y total (20-10-2026) ── */
.appt-venta { display: inline-flex; align-items: center; gap: 2px; }
.appt-venta-x {
  display: inline-grid; place-items: center; width: 22px; height: 22px; margin: -3px -6px -3px 2px; padding: 0;
  border: 0; border-radius: 50%; background: none; color: inherit; opacity: .6; font-size: 0.95rem; line-height: 1; cursor: pointer;
}
.appt-venta-x:hover, .appt-venta-x:focus-visible { opacity: 1; background: rgba(128,128,128,.18); }
.appt-total { margin-top: 6px; font-size: 0.78rem; }
.appt-total b { font-size: 0.95rem; font-variant-numeric: lining-nums tabular-nums; margin-left: 4px; }
.venta-total-cita { margin: 4px 0 0; padding: 10px 12px; border: 1px solid var(--hairline-mid); border-radius: var(--radius); font-size: 0.8rem; color: var(--muted); }
.venta-total-cita b { color: var(--ink); font-size: 0.92rem; }

/* ── 20-10-2026 · Lo que pidió Ian al probarlo ──
   1) La × quita sin más: sin el círculo oscuro al pulsarla. 2) Lo añadido a la
   cita sin cobrar, con borde discontinuo. 3) El menú de la cita se leía con
   esfuerzo (≈11 px): letra de 15 px y botones de 48 px de alto; 16 px en móvil. */
.appt-venta-x:hover, .appt-venta-x:focus-visible, .appt-venta-x:active { background: none; opacity: 1; }
.appt-venta.pendiente { border-style: dashed; }
.appt-dots-menu .dots-item { font-size: 15px; line-height: 1.3; padding: 14px 18px; min-height: 48px; letter-spacing: 0.01em; text-transform: none; }
.appt-dots-menu { min-width: 220px; }
@media (max-width: 700px) {
  .appt-dots-menu .dots-item { font-size: 16px; padding: 15px 20px; min-height: 52px; }
  .appt-dots-menu { min-width: 240px; }
}

/* ── Escáner de códigos de barras con la cámara (20-10-2026) ── */
.btn-escanear { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.btn-escanear svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.venta-escanear { width: 100%; min-height: 46px; margin-bottom: 10px; }
.campo-escaner { display: flex; gap: 8px; }
.campo-escaner .form-input { flex: 1; min-width: 0; }
.escaneando, .escaneando body { overflow: hidden; }
.escaner { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 2147483000; background: #000; color: #fff; }
.escaner-video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.escaner-marco {
  position: absolute; left: 8%; right: 8%; top: 50%; height: 26%; transform: translateY(-50%);
  border: 2px solid rgba(255,255,255,.85); border-radius: 14px; box-shadow: 0 0 0 100vmax rgba(0,0,0,.45); overflow: hidden;
}
.escaner-linea { position: absolute; left: 6%; right: 6%; top: 50%; height: 2px; background: #ff5a4f; box-shadow: 0 0 10px #ff5a4f; animation: escaner-barrido 1.8s ease-in-out infinite; }
@keyframes escaner-barrido { 0%, 100% { transform: translateY(-34px); } 50% { transform: translateY(34px); } }
@media (prefers-reduced-motion: reduce) { .escaner-linea { animation: none; } }
.escaner-arriba {
  position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 8px;
  padding: calc(12px + env(safe-area-inset-top)) 14px 12px; background: linear-gradient(rgba(0,0,0,.65), transparent);
}
.escaner-titulo { flex: 1; font-size: 16px; font-weight: 600; }
.escaner-arriba button {
  min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(255,255,255,.5);
  background: rgba(0,0,0,.35); color: #fff; font: inherit; font-size: 15px; cursor: pointer;
}
.escaner-linterna[aria-pressed="true"] { background: #fff; color: #000; }
.escaner-abajo {
  position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 10px;
  padding: 16px 14px calc(16px + env(safe-area-inset-bottom)); background: linear-gradient(transparent, rgba(0,0,0,.8) 30%);
}
.escaner-aviso { font-size: 17px; line-height: 1.35; text-align: center; padding: 10px 12px; border-radius: 12px; background: rgba(0,0,0,.45); }
.escaner-aviso.bien { background: rgba(39,174,96,.85); }
.escaner-aviso.mal { background: rgba(192,57,43,.88); }
.escaner-accion { min-height: 48px; border: 0; border-radius: 12px; background: #fff; color: #000; font: inherit; font-size: 16px; font-weight: 600; cursor: pointer; }
.escaner-manual { display: flex; gap: 8px; }
.escaner-manual input {
  flex: 1; min-width: 0; min-height: 46px; padding: 0 14px; border-radius: 12px; border: 1px solid rgba(255,255,255,.4);
  background: rgba(255,255,255,.12); color: #fff; font: inherit; font-size: 16px;
}
.escaner-manual input::placeholder { color: rgba(255,255,255,.65); }
.escaner-manual button { min-height: 46px; padding: 0 18px; border-radius: 12px; border: 0; background: #fff; color: #000; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }

/* 21-10-2026 · En el iPhone de Ian la franja del editor (z-index 9999) tapaba el
   «Listo» y no había forma de salir. El escáner va por encima de TODO, la franja
   se esconde mientras se escanea, y abajo hay siempre un botón para volver. */
.escaneando #editorBar, .escaneando #demoBar { display: none !important; }
.escaner-volver {
  min-height: 52px; border: 0; border-radius: 12px; background: #fff; color: #000;
  font: inherit; font-size: 17px; font-weight: 700; cursor: pointer;
}
.escaner-aviso.bien { cursor: pointer; }
/* «Crear producto» es la acción secundaria: solo borde; «Volver» es la principal. */
.escaner-accion { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.8); }

/* ── La ficha del producto, como «Añadir producto» de WooCommerce (21-10-2026) ──
   Columna principal + lateral (Publicar, Categorías, Imágenes). «Datos del
   producto» con las pestañas a la izquierda, como allí. En el móvil, una sola
   columna a pantalla completa y las pestañas en horizontal. */
.ficha-woo.modal-overlay { align-items: flex-start; padding: 16px; }
.ficha-woo .modal.fw { width: min(1240px, 100%); max-width: none; max-height: calc(100vh - 32px); display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.fw-cab { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--hairline); background: var(--surface); }
.fw-cab .modal-title { flex: 1; }
.fw-cuerpo { flex: 1; overflow-y: auto; display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; padding: 20px; align-items: start; }
.fw-principal, .fw-lateral { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.fw-titulo {
  width: 100%; padding: 12px 14px; font: inherit; font-size: 1.35rem; font-weight: 600;
  color: var(--ink); background: var(--card); border: 1px solid var(--hairline-mid); border-radius: var(--radius);
}
.fw-titulo:focus { outline: none; border-color: var(--gold); }
.fw-caja { background: var(--card); border: 1px solid var(--hairline); border-radius: var(--radius); }
.fw-caja-titulo { margin: 0; padding: 12px 14px; font-size: 0.9rem; font-weight: 600; border-bottom: 1px solid var(--hairline); }
.fw-caja-titulo label { font: inherit; }
.fw-caja-cuerpo { padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.fw-desc { min-height: 170px; }
.fw-ayuda { font-size: 0.74rem; color: var(--muted); font-weight: 400; }
.fw-datos-cuerpo { display: grid; grid-template-columns: 190px minmax(0, 1fr); min-height: 260px; }
.fw-tabs { display: flex; flex-direction: column; border-right: 1px solid var(--hairline); background: var(--surface); }
.fw-tab {
  text-align: left; padding: 12px 14px; border: 0; border-bottom: 1px solid var(--hairline); border-left: 3px solid transparent;
  background: none; color: var(--muted); font: inherit; font-size: 0.84rem; cursor: pointer;
}
.fw-tab:hover { color: var(--ink); }
.fw-tab.activa { color: var(--ink); background: var(--card); border-left-color: var(--gold); font-weight: 600; }
.fw-paneles { padding: 16px; }
.fw-panel { display: flex; flex-direction: column; gap: 14px; }
.fw-campo { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 6px 14px; align-items: center; }
.fw-campo > label, .fw-etiqueta { font-size: 0.82rem; color: var(--ink); }
.fw-programar { margin-top: 6px; font-size: 0.78rem; }
.fw-fechas { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.fw-check { font-size: 0.82rem; color: var(--ink); letter-spacing: 0; text-transform: none; }
.fw-check .fw-txt span { color: var(--muted); }
.fw-atributos { display: flex; flex-direction: column; gap: 8px; }
.fw-atributo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto; gap: 8px; align-items: center; }
.fw-tipos { display: flex; flex-direction: column; gap: 2px; max-height: 220px; overflow-y: auto; padding: 4px 2px; }
.fw-tipo { display: flex; align-items: center; gap: 8px; padding: 6px 4px; font-size: 0.84rem; cursor: pointer; }
.fw-tipo input { accent-color: var(--gold); }
.fw-publicar-pie { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 14px; border-top: 1px solid var(--hairline); background: var(--surface); }
.fw-borrar { color: var(--danger); font-size: 0.82rem; }
@media (max-width: 900px) {
  .ficha-woo.modal-overlay { padding: 0; }
  .ficha-woo .modal.fw { width: 100%; max-height: 100vh; height: 100%; border-radius: 0; }
  .fw-cuerpo { grid-template-columns: 1fr; padding: 14px; }
  .fw-datos-cuerpo { grid-template-columns: 1fr; }
  .fw-tabs { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--hairline); }
  .fw-tab { white-space: nowrap; border-bottom: 3px solid transparent; border-left: 0; }
  .fw-tab.activa { border-bottom-color: var(--gold); }
  .fw-campo { grid-template-columns: 1fr; }
  .fw-cab .fw-volver { padding-inline: 10px; }
}

/* ── El importador CSV, en 4 pasos como el de WooCommerce (21-10-2026) ── */
.imp .imp-pasos { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--hairline); }
.imp-pasos li { padding: 12px 8px; text-align: center; font-size: 0.78rem; color: var(--muted); border-bottom: 3px solid transparent; }
.imp-pasos li.hecho { color: var(--ink); border-bottom-color: var(--hairline-mid); }
.imp-pasos li.actual { color: var(--ink); font-weight: 600; border-bottom-color: var(--gold); }
.imp-cuerpo { flex: 1; overflow-y: auto; padding: 20px; }
.imp-cuerpo section { display: flex; flex-direction: column; gap: 14px; max-width: 900px; margin: 0 auto; }
.imp-titulo { margin: 0; font-size: 1.1rem; }
.imp-texto { margin: 0; font-size: 0.86rem; line-height: 1.55; color: var(--muted); }
.imp-archivo { display: flex; flex-direction: column; gap: 8px; padding: 16px; border: 1px dashed var(--hairline-mid); border-radius: var(--radius); font-size: 0.86rem; }
.imp-pie { display: flex; justify-content: flex-end; gap: 10px; padding-top: 6px; }
.imp-tabla-caja { overflow-x: auto; border: 1px solid var(--hairline); border-radius: var(--radius); max-height: 52vh; overflow-y: auto; }
.imp-tabla { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.imp-tabla th, .imp-tabla td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--hairline); vertical-align: middle; }
.imp-tabla th { position: sticky; top: 0; background: var(--surface); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
.imp-tabla .form-select { min-width: 200px; }
.imp-ejemplo { color: var(--muted); max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.imp-fila-error td { color: var(--danger); }
.imp-fila-omitido td { color: var(--muted); }
.imp-cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.imp-cifra { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--card); }
.imp-cifra b { font-size: 1.4rem; }
.imp-cifra span { font-size: 0.76rem; color: var(--muted); }
.imp-cifra.imp-error b { color: var(--danger); }
.imp-progreso p { margin: 6px 0 0; font-size: 0.8rem; color: var(--muted); }
.imp-barra { height: 8px; border-radius: 999px; background: var(--hairline); overflow: hidden; }
.imp-barra span { display: block; height: 100%; width: 0; background: var(--gold); transition: width .2s; }
.imp-errores { margin: 0; padding-left: 18px; font-size: 0.82rem; line-height: 1.6; max-height: 40vh; overflow-y: auto; }
@media (max-width: 700px) {
  .imp-pasos li { font-size: 0.66rem; padding: 10px 4px; }
  .imp-cuerpo { padding: 14px; }
  .imp-tabla .form-select { min-width: 150px; }
}
/* `hidden` manda dentro de la ficha y del importador: sin esto, el display:flex de
   .fw-panel y de las secciones lo pisaba y se veían todas las pestañas y todos
   los pasos a la vez (visto en las capturas del 21-10-2026). */
.ficha-woo [hidden] { display: none !important; }
/* Casilla a la izquierda y su texto (con la aclaración debajo) a la derecha. */
.fw-check { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 2px 10px; }
.fw-check input[type="checkbox"] { align-self: start; width: 16px; height: 16px; min-height: 0; padding: 0; margin: 2px 0 0; }
.fw-check .fw-txt { min-width: 0; }
.fw-tipo { padding: 4px; }

/* ── Productos en el móvil (21-10-2026): que todo quepa en la pantalla ── */
/* Los botones de arriba bajan de línea en vez de salirse por la derecha. */
#view-productos .view-actions { flex-wrap: wrap; }
@media (max-width: 700px) {
  #view-productos .view-actions { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  #view-productos .view-actions .btn-admin { width: 100%; justify-content: center; }
  #view-productos .view-actions .btn-admin.gold { grid-column: 1 / -1; }
}
/* Las 4 pestañas de «Datos del producto», todas a la vista (sin tira que se
   desplaza y esconde «Atributos»): en fila en la tablet, de 2 en 2 en el móvil. */
@media (max-width: 900px) {
  .fw-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: visible; }
  .fw-tab { white-space: normal; text-align: center; padding: 12px 6px; border-bottom: 3px solid transparent; }
  .fw-tab.activa { border-bottom-color: var(--gold); }
}
@media (max-width: 560px) {
  .fw-tabs { grid-template-columns: 1fr 1fr; }
  .fw-tab:nth-child(odd) { border-right: 1px solid var(--hairline); }
}
/* La ficha y el importador ocupan TODA la pantalla del móvil: la regla general
   de los modales (calc(100vw - 24px) !important) les dejaba 12 px a cada lado y,
   a 320 px, el «Guardar» de la cabecera se salía por la derecha. */
@media (max-width: 900px) {
  .ficha-woo .modal.fw { width: 100vw !important; max-width: 100vw !important; max-height: 100%; height: 100%; overflow: hidden; border: 0; }
}
@media (max-width: 480px) {
  .fw-cab { gap: 8px; padding: 10px 12px; }
  .fw-cab .modal-title { min-width: 0; font-size: 1.05rem; line-height: 1.2; }
  .fw-cab .btn-admin { padding-inline: 12px; flex-shrink: 0; }
}
/* Paso 2 del importador en el móvil: una tarjeta por columna del CSV, con su
   ejemplo y el desplegable a todo el ancho debajo. */
@media (max-width: 700px) {
  .imp-asignar, .imp-asignar tbody { display: block; width: 100%; }
  .imp-asignar thead { display: none; }
  .imp-asignar tr { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-bottom: 1px solid var(--hairline); }
  .imp-asignar td { display: block; min-width: 0; padding: 0; border: 0; overflow-wrap: anywhere; }
  .imp-asignar .imp-ejemplo { max-width: none; font-size: 0.78rem; }
  .imp-asignar .form-select { min-width: 0; width: 100%; margin-top: 4px; }
}
/* Atributos en el móvil estrecho: el nombre con su × arriba y el valor a todo
   el ancho debajo (a 320 px, en una fila, el valor se cortaba). */
@media (max-width: 480px) {
  .fw-atributo { grid-template-columns: minmax(0, 1fr) auto; padding-bottom: 10px; border-bottom: 1px solid var(--hairline); }
  .fw-atributo > input:nth-child(1) { grid-column: 1; grid-row: 1; }
  .fw-atributo > button { grid-column: 2; grid-row: 1; }
  .fw-atributo > input:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
}
/* La regla general de 48 px de alto para tocar con el dedo estiraba cada
   categoría a 56 px: la fila entera (la etiqueta) ya es la zona de toque. */
.fw-tipo { padding: 8px 4px; }
.fw-tipo input { min-height: 0; height: 16px; width: 16px; margin: 0; flex-shrink: 0; }
@media (max-width: 700px) {
  .imp-cifras { grid-template-columns: 1fr 1fr; }
}