/* ============================================================
   BARBERÍA BEBOTE — Hoja de estilos
   Paleta brass/charcoal · Tipografías Oswald (signage) + Inter
   ============================================================ */

:root {
  /* Color */
  --bg:            #f1f2f4;
  --surface:       #ffffff;
  --surface-soft:  #fafafa;
  --sidebar:       #161618;
  --sidebar-soft:  #232327;
  --sidebar-line:  #2e2e33;
  --gold:          #c79330;
  --gold-bright:   #e0ad3d;
  --gold-soft:     #f6ecd4;
  --on-gold:       #161618;  /* texto sobre fondo dorado — lo ajusta applyTheme() según contraste */
  --ink:           #18181b;
  --ink-2:         #3f3f46;
  --muted:         #6b7280;
  --muted-2:       #9ca3af;
  --line:          #e7e8eb;
  --green:         #15803d;
  --green-soft:    #e7f4ec;
  --red:           #c2410c;
  --red-soft:      #fbe9e2;
  --blue:          #1d4ed8;
  --blue-soft:     #e8eefb;
  --purple:        #6d28d9;
  --purple-soft:   #efeafb;

  /* Shape & motion */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --shadow: 0 1px 2px rgba(16,16,20,.04), 0 8px 24px rgba(16,16,20,.05);
  --shadow-lg: 0 12px 40px rgba(16,16,20,.14);
  --ease: cubic-bezier(.16,.84,.44,1);

  --font-display: "Oswald", "Arial Narrow", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Serif italic premium para acentos del login. */
  --font-serif: "Playfair Display", "Georgia", serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

button { font-family: inherit; cursor: pointer; }
a { color: inherit; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ============================================================
   VISTAS (auth vs app)
   ============================================================ */
.view { display: none; }
.view.active { display: flex; }

/* ============================================================
   PANTALLA DE AUTENTICACIÓN
   ============================================================ */
#authView {
  min-height: 100vh;
  width: 100%;
  padding: clamp(16px, 4vh, 48px) clamp(16px, 3vw, 40px);
  overflow-x: hidden;
  overflow-y: auto;
  background:
    radial-gradient(1100px 620px at 16% 8%, rgba(199,147,48,.13), transparent 58%),
    radial-gradient(900px 520px at 88% 92%, rgba(199,147,48,.07), transparent 60%),
    linear-gradient(155deg, #0e0d11 0%, #131217 55%, #0c0b0e 100%);
}

/* Contenedor flotante con dos paneles */
.auth-shell {
  position: relative;                 /* ancla el carrusel de fondo (absolute) */
  margin: auto;                       /* centrado seguro: no recorta si el contenido crece */
  width: min(1140px, 100%);
  display: grid;
  grid-template-columns: 1.04fr .96fr;
  border-radius: 28px;
  overflow: hidden;
  background: #0c0b0e;                /* respaldo mientras cargan las fotos */
  border: 1px solid rgba(255,255,255,.07);
  box-shadow:
    0 40px 120px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.05);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  animation: authShellIn .6s var(--ease) both;
}
@keyframes authShellIn {
  from { opacity: 0; transform: translateY(18px); }
}

/* ── Lado izquierdo: hero ── */
.auth-left {
  position: relative;
  z-index: 2;                 /* sobre el carrusel */
  isolation: isolate;
  min-height: 580px;
  padding: 46px 46px 38px;
  color: #fff;
  background: transparent;     /* deja ver el carrusel de fondo */
}

/* Carrusel de fondo: cubre TODO el shell (detrás del hero y del login).
   Crossfade por opacidad + zoom lento (Ken Burns) en la slide activa. */
.auth-slides { position: absolute; inset: 0; z-index: 0; }
.auth-slide {
  position: absolute; inset: 0; opacity: 0;
  transition: opacity 1.6s ease;
  will-change: opacity;
}
.auth-slide.active { opacity: 1; }
/* Foto nítida que LLENA toda la página (visible, con un poco de brillo para resaltar). */
.auth-slide img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: center; display: block;
  filter: brightness(1.08) saturate(1.06);
  transform: scale(1.02);
  transition: transform 7s ease-out;
  will-change: transform;
}
.auth-slide.active img { transform: scale(1.09); }   /* zoom suave (Ken Burns) al activarse */
@media (prefers-reduced-motion: reduce) {
  .auth-slide { transition: opacity .4s ease; }
  .auth-slide img, .auth-slide.active img { transform: none; transition: none; }
}

/* Overlay para legibilidad + calidez sobre la foto.
   Más sutil para que las imágenes del slideshow se vean con más fuerza
   detrás del nuevo login premium. */
/* Overlay MÍNIMO: solo una viñeta suave arriba/abajo. La foto se ve; el texto
   se apoya en su sombra, no en oscurecer la imagen. */
.auth-slide-overlay {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(0,0,0,.28) 0%, transparent 20%, transparent 66%, rgba(0,0,0,.52) 100%);
}

.auth-left-inner {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 30px;
}

.brand-mark {
  display: flex;
  align-items: center;
  gap: 14px;
  position: relative;
  z-index: 1;
}
.brand-badge {
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border-radius: 14px;
  background: var(--gold);
  color: #161618;
  box-shadow: 0 6px 18px rgba(199,147,48,.4);
  overflow: hidden;
}
/* Logo subido por el negocio (reemplaza el icono por defecto) */
.brand-badge-img { grid-area: 1 / 1; width: 100%; height: 100%; object-fit: cover; }
.brand-badge.has-logo { background: transparent; box-shadow: none; }
.brand-badge.has-logo > svg { display: none; }
.brand-name {
  font-family: var(--font-display);
  line-height: .95;
}
.brand-name small {
  display: block;
  font-size: 13px;
  letter-spacing: .32em;
  font-weight: 500;
  color: var(--gold-bright);
  text-transform: uppercase;
}
.brand-name strong {
  font-size: 27px;
  font-weight: 600;
  letter-spacing: .02em;
}

/* Marca dentro del hero (override sobre la base compartida con el sidebar) */
.auth-left .brand-badge {
  width: 50px; height: 50px; border-radius: 14px;
  background: linear-gradient(145deg, var(--gold-bright), var(--gold));
  color: #1a1408;
  box-shadow: 0 8px 22px rgba(199,147,48,.42);
}
.auth-left .brand-name small { font-size: 12px; letter-spacing: .34em; }
.auth-left .brand-name strong { font-size: 26px; }

.auth-hero { position: relative; z-index: 1; max-width: 430px; }
.auth-hero h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(30px, 3.3vw, 46px);
  line-height: 1.05;
  letter-spacing: .01em;
  margin: 0 0 18px;
}
.auth-hero h1 em { color: var(--gold-bright); font-style: normal; }
.auth-hero .lede {
  font-size: 15.5px; color: #cfccd2; line-height: 1.6;
  margin: 0 0 30px; max-width: 380px;
}

.feature-list { display: grid; gap: 16px; }
.feature-list .feat { display: flex; gap: 14px; align-items: flex-start; }
.feature-list .dot {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 12px;
  display: grid; place-items: center;
  background: rgba(199,147,48,.13);
  border: 1px solid rgba(199,147,48,.22);
  color: var(--gold-bright);
}
.feature-list h4 { margin: 0 0 2px; font-size: 14.5px; font-weight: 600; color: #f3f1ee; }
.feature-list p  { margin: 0; font-size: 13px; color: #a8a5ad; line-height: 1.45; }

.auth-foot { position: relative; z-index: 1; font-size: 12px; color: #86838c; }

/* ── Lado derecho: panel de formularios ── */
.auth-right {
  position: relative;
  z-index: 2;                 /* sobre el carrusel */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(32px, 3.4vw, 52px) clamp(24px, 3vw, 48px);
  /* Vidrio ligero: se ve la foto por detrás; el texto se apoya en su sombra + los
     inputs (que tienen su propio fondo). Sin backdrop-filter (opacaba y colgaba el render). */
  background: linear-gradient(180deg, rgba(12,11,14,.30), rgba(10,9,12,.44));
  border-left: 1px solid rgba(255,255,255,.08);
}
/* Sombra FUERTE para que el texto claro se lea sobre la foto sin oscurecerla. */
.auth-left-inner, .auth-right .card-auth h2, .auth-right .auth-h2,
.auth-right .auth-tagline, .auth-right label {
  text-shadow: 0 2px 16px rgba(0,0,0,.85), 0 1px 3px rgba(0,0,0,.6);
}

.card-auth {
  width: 100%;
  max-width: 384px;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  animation: rise .5s var(--ease) both;
}
@keyframes rise {
  from { opacity: 0; transform: translateY(12px); }
}

/* Encabezado destacado del login */
.auth-head { text-align: center; margin-bottom: 26px; }
.auth-badge {
  width: 54px; height: 54px; margin: 0 auto 16px;
  display: grid; place-items: center;
  border-radius: 15px; color: var(--gold-bright);
  background: rgba(199,147,48,.10);
  border: 1px solid rgba(199,147,48,.30);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.auth-head h2,
.auth-head .auth-h2 {
  /* Heading principal: combinación romano (Oswald) + italic dorado (Playfair). */
  font-family: var(--font-display);
  font-weight: 600; font-size: 34px;
  margin: 0 0 12px; color: #f5f3ef; letter-spacing: .01em;
  line-height: 1.15;
}
/* La palabra acentuada ("de vuelta") se distingue con serif italic dorado. */
.auth-head h2 span,
.auth-head .auth-h2 em {
  color: var(--gold-bright);
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0;
}
.auth-tagline {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  margin: 0; font-size: 13.5px; color: #a4a1a9;
}
.auth-tagline::before, .auth-tagline::after {
  content: ""; height: 1px; width: 42px;
  background: linear-gradient(90deg, transparent, rgba(199,147,48,.65));
}
.auth-tagline::after { transform: scaleX(-1); }

/* Títulos del resto de tarjetas (registro / cliente) en versión oscura */
.card-auth h2 {
  font-family: var(--font-display); font-weight: 600;
  font-size: 26px; margin: 0 0 4px; color: #f4f2ee;
}
.card-auth .sub { margin: 0 0 22px; color: #a4a1a9; font-size: 14px; }

/* Etiquetas e inputs en superficie oscura (scoped a auth, no toca el wizard) */
.card-auth .field { margin-bottom: 18px; }
/* Labels en MAYÚSCULAS con tracking ancho: estética premium tipo "editorial". */
.card-auth .field label {
  color: #c0bcc6;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .12em;
  display: block;
  margin-bottom: 8px;
}
.card-auth .field input {
  width: 100%;
  padding: 13px 14px;
  font-size: 14.5px;
  color: #f3f1ee;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 12px;
  background: rgba(255,255,255,.035);
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.card-auth .field input::placeholder { color: #6e6b74; }
.card-auth .field input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(199,147,48,.18);
  background: rgba(255,255,255,.06);
}

/* Campo con icono + toggle de contraseña */
.auth-input { position: relative; }
.auth-input .ic {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center;
  color: var(--gold-bright); opacity: .85; pointer-events: none;
}
.auth-input .ic ~ input { padding-left: 42px; }
.auth-input .pw-toggle {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; display: grid; place-items: center;
  background: transparent; border: none; border-radius: 9px;
  color: #8b8892; transition: color .15s, background .15s;
}
.auth-input .pw-toggle:hover { color: var(--gold-bright); background: rgba(255,255,255,.05); }
.auth-input .pw-toggle.is-on { color: var(--gold-bright); }
.auth-input:has(.pw-toggle) > input { padding-right: 46px; }

/* Fila: recordarme + olvidé contraseña (override sobre base posterior) */
.card-auth .row-between {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin: 6px 0 22px; font-size: 13px;
}
.check { display: inline-flex; align-items: center; gap: 9px; color: #a4a1a9; cursor: pointer; user-select: none; }
.check input { position: absolute; opacity: 0; width: 0; height: 0; }
.check .box {
  width: 18px; height: 18px; border-radius: 6px; flex: 0 0 auto;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.03);
  display: grid; place-items: center;
  transition: background .15s, border-color .15s, box-shadow .15s;
}
.check .box::after {
  content: ""; width: 9px; height: 9px; border-radius: 2px;
  background: #1a1408; transform: scale(0); transition: transform .15s;
}
.check input:checked + .box { background: var(--gold-bright); border-color: var(--gold-bright); }
.check input:checked + .box::after { transform: scale(1); }
.check input:focus-visible + .box { box-shadow: 0 0 0 3px rgba(199,147,48,.25); }
.card-auth .row-between a { color: var(--gold-bright); text-decoration: none; font-weight: 600; }
.card-auth .row-between a:hover { text-decoration: underline; }

/* Link "¿Cliente nuevo? Crea tu cuenta" + etiqueta (opcional) del alta de cliente */
.auth-alt { margin: 14px 0 4px; text-align: center; font-size: 13px; color: #a4a1a9; }
.auth-alt a { color: var(--gold-bright); text-decoration: none; font-weight: 700; }
.auth-alt a:hover { text-decoration: underline; }
.field-opt { color: #8a8790; font-weight: 400; font-size: 12px; }

/* Botones del login (scoped: no afecta dashboard ni wizard) */
.card-auth .btn { border-radius: 12px; }
.card-auth .btn-primary {
  /* Botón principal: dorado plano grande, texto en MAYÚSCULAS con tracking. */
  background: var(--gold-bright);
  color: #1a1408;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  padding: 15px 18px;
  border-radius: 10px;
  box-shadow: 0 10px 26px rgba(199,147,48,.28);
  transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.card-auth .btn-primary:hover {
  background: #d9a644;
  transform: translateY(-1px);
  box-shadow: 0 14px 32px rgba(199,147,48,.42);
}
.card-auth .btn-dark,
.card-auth .btn-ghost {
  /* Botón secundario: outlined dorado, mayúsculas con tracking.
     Coherente con el botón "Crear cuenta" del diseño premium. */
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  background: transparent;
  color: #ece9ef;
  border: 1.5px solid rgba(199,147,48,.45);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .12em;
  padding: 13px 18px;
  border-radius: 10px;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.card-auth .btn-dark:hover,
.card-auth .btn-ghost:hover {
  background: rgba(199,147,48,.08);
  border-color: var(--gold-bright);
  color: #fff;
}
.card-auth .btn:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 2px; }

/* Divisor "o" del login */
/* Mensaje de error del login */
.auth-error {
  background: rgba(194,65,12,.12); border: 1px solid rgba(194,65,12,.4);
  color: #f0a58a; font-size: 13px; font-weight: 500;
  padding: 10px 13px; border-radius: 10px; margin-bottom: 14px;
  animation: authErrShake .32s ease;
}
@keyframes authErrShake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-4px)} 75%{transform:translateX(4px)} }
@media (prefers-reduced-motion: reduce) { .auth-error { animation: none; } }

.card-auth .divider {
  display: flex; align-items: center; gap: 14px;
  text-align: center; margin: 20px 0 16px;
  font-size: 12.5px; color: #7c7984; text-transform: lowercase;
}
.card-auth .divider::before,
.card-auth .divider::after {
  content: ""; position: static; flex: 1; height: 1px; width: auto;
  background: rgba(255,255,255,.10);
}

/* Onboarding en versión oscura */
.card-auth .welcome-text { color: #a4a1a9; }
.card-auth .skip { color: #8b8892; }
.card-auth .skip:hover { color: var(--gold-bright); }

.field { margin-bottom: 14px; }
.field label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-2);
  margin-bottom: 6px;
}
.field input {
  width: 100%;
  padding: 12px 13px;
  font-size: 14.5px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-soft);
  transition: border-color .15s, box-shadow .15s;
}
.field input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(199,147,48,.16);
  background: #fff;
}

.row-between {
  display: flex; align-items: center; justify-content: space-between;
  margin: 4px 0 18px; font-size: 13px;
}
.row-between label { display: flex; align-items: center; gap: 7px; color: var(--muted); }
.row-between a { color: var(--gold); text-decoration: none; font-weight: 600; }
.row-between a:hover { text-decoration: underline; }

.btn {
  width: 100%;
  padding: 13px;
  border: none;
  border-radius: var(--r-sm);
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: .02em;
  transition: transform .12s, box-shadow .15s, background .15s;
}
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: var(--gold);
  color: var(--on-gold);
  box-shadow: 0 6px 16px rgba(199,147,48,.32);
}
.btn-primary:hover { background: var(--gold-bright); }
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line);
  margin-top: 10px;
}
.btn-ghost:hover { background: var(--surface-soft); border-color: var(--muted-2); }
.btn-dark { background: var(--ink); color: #fff; margin-top: 10px; }
.btn-dark:hover { background: #000; }

.divider {
  text-align: center; margin: 20px 0 16px;
  font-size: 12px; color: var(--muted-2);
  position: relative;
}
.divider::before, .divider::after {
  content: ""; position: absolute; top: 50%; width: 38%;
  height: 1px; background: var(--line);
}
.divider::before { left: 0; }
.divider::after  { right: 0; }

.welcome-emoji { font-size: 40px; text-align: center; margin-bottom: 6px; }
.welcome-text  { text-align: center; color: var(--muted); margin: 0 0 22px; font-size: 14.5px; }
.skip {
  margin-top: 14px; text-align: center;
  font-size: 13.5px; color: var(--muted);
  cursor: pointer;
}
.skip:hover { color: var(--gold); }

/* ============================================================
   APP / DASHBOARD
   ============================================================ */
#appView {
  min-height: 100vh;
  width: 100%;
  align-items: stretch;
}

/* ---- Sidebar ---- */
.sidebar {
  width: 248px;
  flex: 0 0 248px;
  background: var(--sidebar);
  color: #c9c9cf;
  display: flex;
  flex-direction: column;
  padding: 22px 16px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}
.sidebar .brand-mark { margin: 4px 6px 26px; }
.sidebar .brand-name strong { font-size: 22px; color: #fff; }
.sidebar .brand-badge { width: 44px; height: 44px; border-radius: 12px; }

.nav { display: flex; flex-direction: column; gap: 3px; }
.nav-label {
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: #6c6c74; font-weight: 600;
  margin: 16px 10px 6px;
}
.nav-item {
  display: flex; align-items: center; gap: 13px;
  padding: 11px 12px;
  border-radius: 10px;
  color: #b7b7bf;
  text-decoration: none;
  font-size: 14.5px;
  font-weight: 500;
  border: none; background: none; width: 100%; text-align: left;
  transition: background .15s, color .15s;
  position: relative;
}
.nav-item svg { width: 19px; height: 19px; flex: 0 0 auto; opacity: .9; }
.nav-item:hover { background: var(--sidebar-soft); color: #fff; }
.nav-item.active {
  background: linear-gradient(90deg, rgba(199,147,48,.22), rgba(199,147,48,.06));
  color: #fff;
}
.nav-item.active::before {
  content: ""; position: absolute; left: -16px; top: 9px; bottom: 9px;
  width: 3px; border-radius: 0 3px 3px 0; background: var(--gold);
}
.nav-badge {
  margin-left: auto;
  font-size: 11px; font-weight: 700;
  background: var(--gold); color: var(--on-gold);
  padding: 1px 7px; border-radius: 999px;
}

.sidebar-foot { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--sidebar-line); }

/* ---- Main column ---- */
.main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.topbar {
  display: flex; align-items: center; gap: 18px;
  padding: 18px 30px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 20;
}
.hamburger {
  display: none;
  width: 40px; height: 40px; border-radius: 10px;
  border: 1px solid var(--line); background: #fff;
  align-items: center; justify-content: center;
}
.greet-avatar {
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 600; font-size: 18px;
  color: #161618; background: var(--gold-soft);
  border: 2px solid var(--gold);
}
.greet h1 {
  font-family: var(--font-display); font-weight: 600;
  font-size: 22px; margin: 0; line-height: 1.1;
}
.greet p { margin: 1px 0 0; color: var(--muted); font-size: 13.5px; }

.branch-pick {
  margin-left: auto;
  display: flex; align-items: center; gap: 12px;
  padding: 9px 16px;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface-soft);
  cursor: pointer;
}
.branch-pick .ico {
  width: 34px; height: 34px; border-radius: 9px;
  background: var(--ink); color: var(--gold);
  display: grid; place-items: center;
  overflow: hidden;
}
/* Con logo del negocio: se oculta la tijera y se muestra la imagen. */
.branch-pick .ico.has-logo { background: transparent; }
.branch-pick .ico.has-logo > svg { display: none; }
.branch-pick .branch-logo-img { grid-area: 1 / 1; width: 100%; height: 100%; object-fit: cover; display: block; }
.branch-pick b { font-size: 14px; display: block; }
.branch-pick small { color: var(--muted); font-size: 12px; }
.branch-pick .chev { color: var(--muted-2); }

/* Menú desplegable de sucursales */
.branch-wrap { position: relative; margin-left: auto; }   /* empuja el selector a la derecha */
.admin-bell-wrap { margin-left: auto; flex: 0 0 auto; }   /* campanita en el grupo derecho */
.admin-bell-wrap + .branch-wrap { margin-left: 0; }       /* ya no necesita empujar */
.admin-bell-wrap + .branch-pick { margin-left: 0; }       /* barbero: sucursal pegada a la campanita */
.branch-menu { position: absolute; top: calc(100% + 8px); right: 0; width: 300px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-lg); padding: 8px; z-index: 60; animation: barFadeUp .18s var(--ease); }
.branch-menu-head { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted-2); padding: 6px 8px 8px; }
.branch-menu-list { display: flex; flex-direction: column; gap: 2px; }
.branch-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 8px; border: none; background: none; border-radius: var(--r-sm); cursor: pointer; text-align: left; transition: background .14s var(--ease); }
.branch-item:hover { background: var(--surface-soft); }
.branch-item.active { background: var(--gold-soft); }
.branch-item-ico { width: 32px; height: 32px; border-radius: 9px; background: var(--surface-soft); display: grid; place-items: center; color: var(--muted); flex: 0 0 auto; }
.branch-item.active .branch-item-ico { background: var(--gold); color: var(--on-gold); }
.branch-item-ico svg { width: 16px; height: 16px; }
.branch-item-txt { flex: 1; min-width: 0; }
.branch-item-txt b { font-size: 13.5px; display: block; }
.branch-item-txt small { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.branch-item-check { color: var(--gold); font-weight: 700; flex: 0 0 auto; }
.branch-add { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; margin-top: 8px; padding: 10px; border: 1px dashed var(--line); border-radius: var(--r-sm); background: none; color: var(--gold); font-weight: 600; font-size: 13px; cursor: pointer; transition: all .14s var(--ease); }
.branch-add:hover { border-color: var(--gold); background: var(--gold-soft); }
.branch-add svg { width: 15px; height: 15px; }

/* ---- Page scroll area ---- */
.page {
  padding: 26px 30px 40px;
  display: none;
  animation: fade .35s var(--ease) both;
}
.page.active { display: block; }
@keyframes fade { from { opacity: 0; transform: translateY(8px); } }

.page-head { margin-bottom: 20px; }
.page-head h2 {
  font-family: var(--font-display); font-weight: 600;
  font-size: 24px; margin: 0;
}
.page-head p { margin: 4px 0 0; color: var(--muted); font-size: 14px; }

/* ---- Grids ---- */
.grid { display: grid; gap: 18px; }
.stats   { grid-template-columns: repeat(4, 1fr); margin-bottom: 18px; }
.actions { grid-template-columns: repeat(3, 1fr); margin-bottom: 18px; }
.split   { grid-template-columns: 1.55fr 1fr; margin-bottom: 18px; }
.thirds  { grid-template-columns: repeat(3, 1fr); }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow);
}
.card.pad { padding: 20px 22px; }

/* ---- Stat card ---- */
.stat { padding: 20px; display: flex; flex-direction: column; gap: 4px; }
.stat .ico {
  width: 46px; height: 46px; border-radius: 13px;
  display: grid; place-items: center; margin-bottom: 8px;
}
.ico.gold   { background: var(--gold-soft);   color: var(--gold); }
.ico.green  { background: var(--green-soft);  color: var(--green); }
.ico.blue   { background: var(--blue-soft);   color: var(--blue); }
.ico.purple { background: var(--purple-soft); color: var(--purple); }
.ico.red    { background: var(--red-soft);    color: var(--red); }
.stat .label { font-size: 13.5px; color: var(--muted); font-weight: 500; }
.stat .value {
  font-family: var(--font-display); font-weight: 600;
  font-size: 32px; line-height: 1; letter-spacing: -.01em;
}
.stat .value small { font-size: 16px; color: var(--muted-2); font-weight: 500; }
.stat .meta { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.stat .up   { color: var(--green); font-weight: 600; }
.stat .down { color: var(--red); font-weight: 600; }
.stat .stars { color: var(--gold-bright); letter-spacing: 2px; font-size: 15px; }
.stat .link {
  margin-top: auto; padding-top: 12px;
  font-size: 12.5px; font-weight: 600; color: var(--gold);
  text-decoration: none; display: inline-flex; align-items: center; gap: 4px;
}
.stat .link:hover { gap: 7px; }

/* ---- Quick action ---- */
.action {
  display: flex; align-items: center; gap: 16px;
  padding: 20px 22px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--surface);
  text-align: left;
  transition: transform .15s var(--ease), box-shadow .15s, border-color .15s;
}
.action:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--gold); }
.action .ico { width: 48px; height: 48px; border-radius: 13px; display: grid; place-items: center; flex: 0 0 auto; }
.action b { font-size: 15.5px; display: block; }
.action span { font-size: 13px; color: var(--muted); }

/* ---- Section header inside card ---- */
.sec-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px;
}
.sec-head h3 { font-family: var(--font-display); font-weight: 600; font-size: 18px; margin: 0; }
.sec-head .sel {
  font-size: 13px; padding: 6px 12px; border: 1px solid var(--line);
  border-radius: 8px; background: var(--surface-soft); color: var(--ink-2);
}
/* Selector de periodo de la gráfica (Día/Semana/Mes/Año) */
.chart-sel {
  font: inherit; font-size: 13px; font-weight: 600; color: var(--ink);
  padding: 7px 30px 7px 12px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface-soft); cursor: pointer; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 9px center;
  transition: border-color .16s var(--ease);
}
.chart-sel:hover { border-color: var(--gold); }
.chart-sel:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft); }

/* Animación de "dibujado" para drawChart cuando animate=true (dashboard) */
.chart-line-anim { stroke-dasharray: 1; stroke-dashoffset: 1; animation: barDraw 1.15s var(--ease) forwards; }
.chart-clip-rect { transform: scaleX(0); transform-origin: left; transform-box: fill-box; animation: barWipe 1.15s var(--ease) forwards; }
.chart-dot-anim  { opacity: 0; animation: barDotIn .3s ease forwards; }
@media (prefers-reduced-motion: reduce) {
  .chart-line-anim { animation: none; stroke-dashoffset: 0; }
  .chart-clip-rect { animation: none; transform: none; }
  .chart-dot-anim  { animation: none; opacity: 1; }
}

/* ---- Chart ---- */
.chart-wrap { position: relative; }
.chart-wrap svg { width: 100%; height: auto; display: block; }
.chart-total {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: 14px; padding-top: 16px; border-top: 1px dashed var(--line);
}
.chart-total .lbl { font-size: 14px; color: var(--muted); }
.chart-total .amt { font-family: var(--font-display); font-weight: 600; font-size: 24px; }

/* ---- Lists (appointments, etc.) ---- */
.list { display: flex; flex-direction: column; }
.list-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.list-row:last-child { border-bottom: none; }
.avatar {
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; flex: 0 0 auto;
  font-weight: 600; font-size: 14px; color: #fff;
}
.list-row .who { min-width: 0; flex: 1; }
.list-row .who b { font-size: 14.5px; display: block; }
.list-row .who small { font-size: 12.5px; color: var(--muted); }
.list-row .meta-r { text-align: right; flex: 0 0 auto; }
.list-row .meta-r b { font-size: 14px; }
.pill {
  display: inline-block; font-size: 11px; font-weight: 600;
  padding: 2px 9px; border-radius: 999px; margin-top: 3px;
}
.pill.ok   { background: var(--green-soft); color: var(--green); }
.pill.wait { background: var(--gold-soft);  color: #9a6b12; }
.pill.late { background: var(--red-soft);   color: var(--red); }
.pill-pagado { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 999px; margin-top: 3px; background: var(--green-soft); color: var(--green); }

.card-foot {
  text-align: center; margin-top: 14px; padding-top: 14px;
  border-top: 1px solid var(--line);
}
.card-foot a {
  font-size: 13px; font-weight: 600; color: var(--gold);
  text-decoration: none; display: inline-flex; gap: 5px; align-items: center;
}
.card-foot a:hover { gap: 8px; }

/* tag on the right of a list row (days, gift) */
.tag-days {
  font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px;
  background: var(--red-soft); color: var(--red);
}
.gift { color: var(--gold); }

/* ranked services */
.rank-row {
  display: flex; align-items: center; gap: 13px;
  padding: 11px 0; border-bottom: 1px solid var(--line);
}
.rank-row:last-child { border-bottom: none; }
.rank-num {
  width: 26px; height: 26px; border-radius: 8px; flex: 0 0 auto;
  display: grid; place-items: center; font-size: 13px; font-weight: 700;
  background: var(--surface-soft); color: var(--muted); border: 1px solid var(--line);
}
.rank-row.top .rank-num { background: var(--gold); color: var(--on-gold); border-color: var(--gold); }
.rank-row .name { flex: 1; font-size: 14px; }
.rank-row .count { font-family: var(--font-display); font-weight: 600; font-size: 16px; }

/* ---- Data table (Clientes / Agenda / Servicios) ---- */
.table-wrap { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: 14px; }
table.data thead th {
  text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted); font-weight: 600; padding: 12px 14px;
  border-bottom: 1px solid var(--line); background: var(--surface-soft);
}
table.data tbody td { padding: 13px 14px; border-bottom: 1px solid var(--line); }
table.data tbody tr:hover { background: var(--surface-soft); }
table.data .cell-user { display: flex; align-items: center; gap: 11px; }
table.data .cell-user .avatar { width: 34px; height: 34px; font-size: 12px; }
.money { font-weight: 600; }

.toolbar {
  display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap;
}
.search {
  flex: 1; min-width: 200px;
  display: flex; align-items: center; gap: 9px;
  padding: 9px 13px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface);
}
.search input { border: none; outline: none; width: 100%; font-size: 14px; background: none; }
.search svg { color: var(--muted-2); flex: 0 0 auto; }
.btn-add {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-radius: 10px; border: none;
  background: var(--gold); color: var(--on-gold); font-weight: 600; font-size: 14px;
  box-shadow: 0 4px 12px rgba(199,147,48,.3);
}
.btn-add:hover { background: var(--gold-bright); }

/* service cards */
.svc-grid { grid-template-columns: repeat(3, 1fr); }
.svc {
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface);
  overflow: hidden; display: flex; flex-direction: column; transition: all .16s var(--ease);
}
.svc:hover { box-shadow: var(--shadow); transform: translateY(-2px); border-color: #e0d3ab; }
.svc-card-img { position: relative; height: 132px; background: var(--surface-soft); }
.svc-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.svc-card-noimg { width: 100%; height: 100%; display: grid; place-items: center; background: var(--gold-soft); color: var(--gold); }
.svc-card-noimg svg { width: 30px; height: 30px; }
.svc-card-body { padding: 13px 16px 15px; display: flex; flex-direction: column; gap: 5px; flex: 1; }
.svc h4 { margin: 0; font-size: 16px; }
.svc p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
.svc .svc-foot { margin-top: auto; padding-top: 10px; display: flex; align-items: center; justify-content: space-between; }
.svc .price { font-family: var(--font-display); font-weight: 600; font-size: 20px; color: var(--gold); }
.svc .dur { font-size: 12.5px; color: var(--muted); }

/* Campo para subir imagen del servicio (modal) */
.svc-img-upload { display: block; cursor: pointer; }
.svc-img-preview { height: 118px; border: 1.5px dashed var(--line); border-radius: var(--r-md); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--muted-2); background: var(--surface-soft); overflow: hidden; transition: all .16s var(--ease); }
.svc-img-preview svg { width: 26px; height: 26px; }
.svc-img-preview span { font-size: 12.5px; }
.svc-img-preview img { width: 100%; height: 100%; object-fit: cover; }
.svc-img-preview.has-img { border-style: solid; border-color: var(--gold); }
.svc-img-upload:hover .svc-img-preview { border-color: var(--gold); color: var(--gold); }

/* placeholder / construcción */
.empty {
  text-align: center; padding: 70px 20px; color: var(--muted);
}
.empty .e-ico {
  width: 72px; height: 72px; border-radius: 20px; margin: 0 auto 16px;
  display: grid; place-items: center; background: var(--gold-soft); color: var(--gold);
}
.empty h3 { font-family: var(--font-display); font-weight: 600; font-size: 20px; color: var(--ink); margin: 0 0 6px; }
.empty p { margin: 0 auto; max-width: 360px; font-size: 14px; }

.app-foot {
  text-align: center; padding: 18px; color: var(--muted-2);
  font-size: 12.5px; border-top: 1px solid var(--line); margin-top: auto;
}

/* mobile backdrop */
.backdrop {
  display: none; position: fixed; inset: 0; z-index: 40;
  background: rgba(0,0,0,.45);
}

/* ============================================================
   MODAL · NUEVO CLIENTE
   ============================================================ */

/* Overlay */
.modal-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(10,10,14,.6);
  backdrop-filter: blur(5px) saturate(.8);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  animation: fadeOverlay .22s var(--ease) both;
}
.modal-overlay[hidden] { display: none; }
@keyframes fadeOverlay { from { opacity: 0; } }

/* Caja del modal */
.modal-box {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: 0 24px 64px rgba(10,10,20,.22), 0 4px 16px rgba(10,10,20,.1);
  width: 100%; max-width: 500px;
  max-height: calc(100svh - 32px);
  display: flex; flex-direction: column;
  animation: riseModal .3s var(--ease) both;
  overflow: hidden;
}
@keyframes riseModal {
  from { opacity: 0; transform: translateY(18px) scale(.975); }
}
@keyframes modalClose {
  to { opacity: 0; transform: translateY(28px) scale(.96); }
}
@keyframes overlayFadeOut {
  to { opacity: 0; }
}
.modal-box.is-closing {
  animation: modalClose .38s cubic-bezier(.16,.84,.44,1) both;
  pointer-events: none;
}
.modal-overlay.is-closing {
  animation: overlayFadeOut .38s ease both;
  pointer-events: none;
}

/* Cabecera — fija */
.modal-head {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 20px 16px;
  border-bottom: 1px solid var(--line);
  flex: 0 0 auto;
}
.modal-icon {
  width: 42px; height: 42px; border-radius: 12px; flex: 0 0 auto;
}
.modal-head-text { min-width: 0; flex: 1; }
.modal-head-text h2 {
  font-family: var(--font-display); font-weight: 600;
  font-size: 18px; margin: 0 0 1px; line-height: 1.2;
}
.modal-head-text p { margin: 0; font-size: 13px; color: var(--muted); }
.modal-close {
  flex: 0 0 auto; margin-left: 4px;
  width: 32px; height: 32px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--surface-soft);
  display: grid; place-items: center; color: var(--muted);
  transition: background .15s, color .15s, border-color .15s;
}
.modal-close:hover {
  background: var(--red-soft); color: var(--red); border-color: #f1c0b0;
}

/* Cuerpo — scrollable */
.modal-body {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* scrollbar fina y discreta */
.modal-body::-webkit-scrollbar { width: 5px; }
.modal-body::-webkit-scrollbar-track { background: transparent; }
.modal-body::-webkit-scrollbar-thumb { background: var(--line); border-radius: 99px; }

/* Formulario */
.modal-form { display: contents; }
.modal-fields { padding: 20px 20px 8px; display: flex; flex-direction: column; gap: 14px; }

/* Fila de dos columnas (nombre + apellido) */
.fields-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* Inputs con prefijo e ícono de estado */
.input-wrap {
  position: relative; display: flex; align-items: center;
}
.input-wrap input {
  width: 100%; padding: 10px 36px 10px 12px;
  font-size: 14px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-soft);
  transition: border-color .18s, box-shadow .18s, background .18s;
  outline: none;
}
.input-wrap input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(199,147,48,.15);
  background: #fff;
}
.input-wrap input.is-invalid {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(194,65,12,.12);
  background: #fff;
}
.input-wrap input.is-valid {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(21,128,61,.1);
}

/* Prefijo (ícono izquierdo) */
.input-with-prefix input { padding-left: 38px; }
.input-prefix {
  position: absolute; left: 11px;
  display: grid; place-items: center;
  color: var(--muted-2); pointer-events: none;
  transition: color .18s;
}
.input-wrap:focus-within .input-prefix { color: var(--gold); }

/* Ícono de estado (derecha) */
.input-icon {
  position: absolute; right: 10px;
  font-size: 14px; pointer-events: none;
  opacity: 0; transition: opacity .2s;
}
.input-icon.show { opacity: 1; }

/* Labels */
.modal-fields .field label {
  display: flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 600; color: var(--ink-2);
  margin-bottom: 6px;
}
.req { color: var(--red); font-weight: 700; line-height: 1; }
.optional-tag {
  font-size: 10.5px; font-weight: 500; color: var(--muted-2);
  background: var(--surface-soft); border: 1px solid var(--line);
  padding: 1px 7px; border-radius: 99px; margin-left: 2px;
}

/* Mensajes de error */
.field-error {
  display: block; font-size: 11.5px; color: var(--red);
  margin-top: 5px; min-height: 15px;
  animation: shakeIn .25s var(--ease) both;
}
@keyframes shakeIn {
  0%   { opacity: 0; transform: translateX(-4px); }
  60%  { transform: translateX(2px); }
  100% { opacity: 1; transform: translateX(0); }
}

/* Nota informativa */
.modal-note {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 10px 14px; border-radius: var(--r-sm);
  background: var(--blue-soft); color: var(--blue);
  font-size: 12.5px; line-height: 1.5;
  border: 1px solid rgba(29,78,216,.15);
}
.modal-note svg { flex: 0 0 auto; margin-top: 1px; }

/* Estado de carga */
.modal-loading {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 14px; padding: 40px 20px;
  color: var(--muted); font-size: 14px;
  animation: fadeIn .2s var(--ease) both;
}
@keyframes fadeIn { from { opacity: 0; } }
.loading-spinner {
  width: 40px; height: 40px; border-radius: 50%;
  border: 3px solid var(--line);
  border-top-color: var(--gold);
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Estado de éxito */
.modal-success {
  display: flex; flex-direction: column;
  align-items: center; text-align: center;
  padding: 36px 28px 28px;
  animation: fadeIn .3s var(--ease) .05s both;
}
.success-ring {
  width: 64px; height: 64px; margin-bottom: 16px;
}
.success-check {
  width: 64px; height: 64px; display: block;
}
.check-circle {
  stroke: var(--green); stroke-width: 2.5;
  stroke-dasharray: 166; stroke-dashoffset: 166;
  animation: drawCircle .5s var(--ease) .1s forwards;
}
.check-mark {
  stroke: var(--green); stroke-width: 3;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 40; stroke-dashoffset: 40;
  animation: drawMark .35s var(--ease) .5s forwards;
}
@keyframes drawCircle { to { stroke-dashoffset: 0; } }
@keyframes drawMark   { to { stroke-dashoffset: 0; } }

.modal-success h3 {
  font-family: var(--font-display); font-weight: 600;
  font-size: 20px; margin: 0 0 8px; color: var(--ink);
}
.modal-success p {
  margin: 0 0 18px; font-size: 13.5px;
  color: var(--muted); line-height: 1.55; max-width: 320px;
}
.invite-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--gold-soft); color: #7a5700;
  border: 1px solid rgba(199,147,48,.35);
  font-size: 12px; font-weight: 700;
  padding: 5px 14px; border-radius: 999px;
  letter-spacing: .03em;
}

/* Invitación tras crear cliente (WhatsApp / correo directos a esa persona) */
.nc-invite { width: 100%; margin-top: 8px; }
.nc-invite-lead { font-size: 13px; color: var(--muted); margin: 0 0 10px; text-align: center; }
.nc-invite-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.nc-invite-btns .btn { margin: 0; text-align: center; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.nc-invite-btns .btn[hidden] { display: none; }
.nc-invite-done { margin-top: 14px; width: 100%; }
@media (max-width: 380px) { .nc-invite-btns { grid-template-columns: 1fr; } }

/* Pie — fijo en la parte inferior */
.modal-foot {
  flex: 0 0 auto;
  display: flex; gap: 10px; justify-content: flex-end;
  padding: 14px 20px;
  border-top: 1px solid var(--line);
  background: var(--surface-soft);
}
.modal-foot-alt { background: var(--surface); }
.modal-foot .btn { width: auto; padding: 10px 20px; font-size: 14px; }
.modal-submit {
  display: inline-flex; align-items: center; gap: 7px;
}
.modal-submit:disabled {
  opacity: .6; pointer-events: none;
}

/* ============================================================
   WIZARD · NUEVA CITA
   ============================================================ */

/* Caja más ancha que el modal estándar */
.wz-box { max-width: 580px; }

/* Stepper */
.wz-stepper {
  display: flex; align-items: center;
  padding: 14px 24px 10px;
  flex: 0 0 auto;
  border-bottom: 1px solid var(--line);
}
.wz-step-dot {
  flex: 0 0 auto;
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 11.5px; font-weight: 700;
  background: var(--surface-soft); color: var(--muted-2);
  border: 2px solid var(--line);
  transition: background .2s, border-color .2s, color .2s;
}
.wz-step-dot.active { background: var(--gold); color: var(--on-gold); border-color: var(--gold); }
.wz-step-dot.done   { background: var(--green-soft); color: var(--green); border-color: var(--green); }
.wz-step-dot.done span { display: none; }
.wz-step-dot.done::after { content: "✓"; font-size: 13px; }
.wz-step-line {
  flex: 1; height: 2px; background: var(--line);
  transition: background .25s;
}
.wz-step-line.done { background: var(--green); }

/* Paneles de paso */
.wz-panel { padding: 20px 20px 12px; }
.wz-panel-head { margin-bottom: 18px; }
.wz-panel-head h3 {
  font-family: var(--font-display); font-weight: 600;
  font-size: 17px; margin: 0 0 3px;
}
.wz-panel-head p { margin: 0; font-size: 13px; color: var(--muted); }

/* ── Paso 1: búsqueda ── */
.wz-results { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.wz-client-row {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 12px;
  border: 1.5px solid var(--line); border-radius: var(--r-sm);
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.wz-client-row:hover { border-color: var(--gold); background: var(--gold-soft); }
.wz-sel-tag {
  margin-left: auto; font-size: 11.5px; font-weight: 600;
  color: var(--gold); white-space: nowrap;
}
.wz-no-results {
  font-size: 13px; color: var(--muted);
  padding: 10px 0 4px;
}
.wz-selected-card {
  display: flex; align-items: center; gap: 11px;
  padding: 12px 14px; margin-top: 8px;
  border: 2px solid var(--green); border-radius: var(--r-sm);
  background: var(--green-soft);
  animation: fadeIn .2s var(--ease) both;
}
.wz-change-btn {
  margin-left: auto; font-size: 12px; font-weight: 600;
  color: var(--muted); background: none; border: 1px solid var(--line);
  border-radius: 6px; padding: 4px 10px; cursor: pointer; white-space: nowrap;
  transition: color .15s, border-color .15s;
}
.wz-change-btn:hover { color: var(--gold); border-color: var(--gold); }
.wz-divider-label {
  display: flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 600; color: var(--blue);
  background: var(--blue-soft); border: 1px solid rgba(29,78,216,.15);
  padding: 9px 13px; border-radius: var(--r-sm);
  margin: 14px 0 0;
}
.wz-inline-form { margin-top: 14px; display: flex; flex-direction: column; gap: 14px; }
/* Reutiliza .fields-row y .field del modal nuevo-cliente */
.wz-inline-form .input-wrap input { padding: 9px 12px; }
.wz-reg-btn {
  display: inline-flex; align-items: center; gap: 7px;
  width: auto; padding: 10px 20px; font-size: 14px;
}

/* ── Paso 2: servicios ── */
.wz-svc-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.wz-svc-card {
  border: 2px solid var(--line); border-radius: var(--r-md);
  padding: 14px 14px 12px;
  cursor: pointer; display: flex; flex-direction: column; gap: 6px;
  transition: border-color .15s, background .15s, transform .15s;
}
.wz-svc-card:hover:not(.selected) { border-color: var(--gold-bright); transform: translateY(-2px); }
.wz-svc-card.selected {
  border-color: var(--gold); background: var(--gold-soft);
  box-shadow: 0 0 0 3px rgba(199,147,48,.12);
}
.wz-svc-icon {
  width: 38px; height: 38px; border-radius: 10px;
  display: grid; place-items: center;
  background: var(--gold-soft); color: var(--gold);
  flex: 0 0 auto;
}
.wz-svc-card.selected .wz-svc-icon { background: rgba(199,147,48,.25); }
.wz-svc-card h4 { font-size: 14.5px; margin: 0; font-weight: 600; }
.wz-svc-card p  { font-size: 12px; color: var(--muted); margin: 0; line-height: 1.45; flex: 1; }
.wz-svc-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; }
.wz-price { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--ink); }
.wz-svc-card.selected .wz-price { color: var(--gold); }
.wz-dur   { font-size: 11.5px; color: var(--muted); }

/* ── Paso 3: barberos ── */
.wz-barber-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px;
}
.wz-barber-card {
  display: flex; flex-direction: column; align-items: center;
  gap: 6px; padding: 16px 10px 14px;
  border: 2px solid var(--line); border-radius: var(--r-md);
  cursor: pointer; text-align: center;
  transition: border-color .15s, background .15s, transform .15s;
}
.wz-barber-card:hover:not(.busy):not(.selected) { border-color: var(--gold-bright); transform: translateY(-2px); }
.wz-barber-card.selected { border-color: var(--gold); background: var(--gold-soft); }
.wz-barber-card.busy     { opacity: .5; cursor: not-allowed; }
.wz-barber-av {
  width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center;
  font-weight: 700; font-size: 16px; color: #fff;
}
.wz-barber-name { font-size: 14px; font-weight: 600; }
.wz-barber-esp  { font-size: 11.5px; color: var(--muted); line-height: 1.3; }
.wz-barber-pill {
  font-size: 10.5px; font-weight: 700; padding: 2px 9px; border-radius: 999px;
  letter-spacing: .02em;
}
.wz-barber-pill.avail { background: var(--green-soft); color: var(--green); }
.wz-barber-pill.busy  { background: var(--red-soft);   color: var(--red);   }

/* ── Paso 4: fecha y hora ── */
.wz-date-field { margin-bottom: 18px; }
.wz-date-field input[type="date"] {
  width: 100%; padding: 10px 13px;
  font-size: 14px; border: 1.5px solid var(--line);
  border-radius: var(--r-sm); background: var(--surface-soft);
  outline: none; transition: border-color .15s, box-shadow .15s;
}
.wz-date-field input[type="date"]:focus {
  border-color: var(--gold); box-shadow: 0 0 0 3px rgba(199,147,48,.15);
}
.wz-slots-label {
  font-size: 12.5px; font-weight: 600; color: var(--ink-2);
  margin: 0 0 10px;
}
.wz-slots-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(68px, 1fr));
  gap: 8px;
}
.wz-slot {
  padding: 9px 4px; border-radius: var(--r-sm);
  border: 1.5px solid var(--line); background: var(--surface);
  font-size: 13px; font-weight: 600; color: var(--ink);
  cursor: pointer; transition: border-color .13s, background .13s, color .13s;
  text-align: center;
}
.wz-slot:hover:not(.busy):not(.selected) { border-color: var(--gold); color: var(--gold); background: var(--gold-soft); }
.wz-slot.selected { background: var(--gold); color: var(--on-gold); border-color: var(--gold); }
.wz-slot.busy {
  background: var(--surface-soft); color: var(--muted-2);
  text-decoration: line-through; cursor: not-allowed; border-color: var(--line);
}

/* ── Paso 5: resumen ── */
.wz-summary-card {
  border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden;
}
.wz-sum-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 16px; border-bottom: 1px solid var(--line);
  gap: 12px;
}
.wz-sum-row:last-child { border-bottom: none; }
.wz-sum-label { font-size: 13px; color: var(--muted); font-weight: 500; white-space: nowrap; }
.wz-sum-val   { font-size: 14px; font-weight: 600; text-align: right; }
.wz-sum-client{ display: flex; align-items: center; gap: 8px; }
.wz-sum-av    { width: 30px; height: 30px; font-size: 11px; flex: 0 0 auto; }
.wz-sum-total { background: var(--surface-soft); }
.wz-sum-price {
  font-family: var(--font-display); font-size: 24px; font-weight: 700; color: var(--gold);
}

/* ── Pie de confirmación (3 botones) ── */
.wz-confirm-foot { gap: 8px; }
.wz-confirm-foot .btn { padding: 10px 16px; font-size: 13.5px; }
.wz-pay-btn { display: inline-flex; align-items: center; gap: 6px; }

/* ── Animación shake en botón Siguiente ── */
@keyframes wzShake {
  0%,100% { transform: translateX(0); }
  20%      { transform: translateX(-5px); }
  40%      { transform: translateX(5px); }
  60%      { transform: translateX(-4px); }
  80%      { transform: translateX(3px); }
}
.wz-shake { animation: wzShake .38s var(--ease) both; }

/* ── Responsive del wizard ── */
@media (max-width: 620px) {
  .wz-box { max-width: 100%; border-radius: var(--r-lg) var(--r-lg) 0 0; }
  .wz-svc-grid    { grid-template-columns: 1fr; }
  .wz-barber-grid { grid-template-columns: repeat(2, 1fr); }
  .wz-slots-grid  { grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); }
  .wz-confirm-foot .btn { padding: 10px 10px; font-size: 12.5px; }
  .wz-stepper { padding: 12px 16px 10px; }
  .wz-step-dot { width: 24px; height: 24px; font-size: 10.5px; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1080px) {
  .stats   { grid-template-columns: repeat(2, 1fr); }
  .split   { grid-template-columns: 1fr; }
  .svc-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 880px) {
  /* auth a una columna */
  #authView { flex-direction: column; height: auto; min-height: 100vh; }
  .auth-left { padding: 40px 28px; }
  .auth-left .feature-list { display: none; }
  /* En móvil el overlay cubre más para que el texto sea legible */
  .auth-slide-overlay {
    background: rgba(10,10,12,.70);
  }

  /* sidebar como panel deslizable */
  .sidebar {
    position: fixed; left: 0; top: 0; z-index: 50;
    transform: translateX(-100%);
    transition: transform .26s var(--ease);
    box-shadow: var(--shadow-lg);
  }
  .sidebar.open { transform: translateX(0); }
  .backdrop.show { display: block; }
  .hamburger { display: inline-flex; }
  .topbar { padding: 14px 18px; }
  .page { padding: 20px 18px 32px; }
  .branch-pick small { display: none; }
}

/* Autenticación · responsive (rediseño login) */
@media (max-width: 860px) {
  .auth-shell {
    grid-template-columns: 1fr;
    max-width: 460px;
    width: 100%;
  }
  .auth-left {
    min-height: auto;
    padding: 36px 30px 30px;
  }
  .auth-left .feature-list { display: none; }
  .auth-hero .lede { margin-bottom: 0; }
  .auth-hero h1 { font-size: clamp(26px, 6.4vw, 36px); }
  .auth-right {
    border-left: none;
    border-top: 1px solid rgba(255,255,255,.07);
  }
}
@media (max-width: 440px) {
  #authView { padding: 0; }
  .auth-shell {
    border-radius: 0;
    border: none;
    min-height: 100vh;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .auth-left { padding: 30px 22px 26px; }
  .auth-right { padding: 30px 22px 38px; }
  .auth-head h2 { font-size: 27px; }
}

@media (max-width: 620px) {
  .stats   { grid-template-columns: 1fr; }
  .actions { grid-template-columns: 1fr; }
  .thirds  { grid-template-columns: 1fr; }
  .svc-grid { grid-template-columns: 1fr; }
  .greet p { display: none; }
  .greet h1 { font-size: 19px; }
  .branch-pick b { font-size: 13px; }

  /* Modal en móvil: ocupa el alto disponible y se ancla abajo */
  .modal-overlay {
    align-items: flex-end;
    padding: 0;
  }
  .modal-box {
    max-width: 100%;
    max-height: 92svh;
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    animation: riseModalMobile .3s var(--ease) both;
  }
  @keyframes riseModalMobile {
    from { opacity: 0; transform: translateY(32px); }
  }
  /* Una columna en móvil para nombre/apellido */
  .fields-row { grid-template-columns: 1fr; gap: 14px; }
  .modal-foot { gap: 8px; }
  .modal-foot .btn { font-size: 13.5px; padding: 10px 14px; }
}

/* ============================================================
   MODAL · REGISTRAR BARBERO  (estilos específicos)
   El resto del modal reutiliza las clases del modal "Nuevo cliente".
   Aquí solo agregamos lo nuevo:
     1. .rb-eye           → botón ojo para mostrar/ocultar contraseña.
     2. .rb-sucursal-pill → "chip" informativo cuando solo hay 1 sucursal.
     3. .rb-sucursal-grid → contenedor de tarjetas radio (varias sucursales).
     4. .rb-sucursal-card → cada tarjeta seleccionable de sucursal.
   ============================================================ */

/* Botón ojo dentro del input de contraseña. */
.input-with-prefix .rb-eye {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: 0;
  padding: 6px;
  border-radius: 8px;
  cursor: pointer;
  color: #71717a;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .15s ease, color .15s ease;
}
.input-with-prefix .rb-eye:hover { background: #f1f5f9; color: #18181b; }
.input-with-prefix .rb-eye:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
/* Cuando hay ojo, dejar espacio al final del input para que no se solape. */
.input-with-prefix:has(.rb-eye) input { padding-right: 40px; }

/* Pill informativo: una sola sucursal, asignada automáticamente. */
.rb-sucursal-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-left: 3px solid var(--gold);
  border-radius: 10px;
  font-size: 14px;
  color: #18181b;
  animation: rbPillIn .25s ease both;
}
.rb-sucursal-pill .rb-pill-icon {
  width: 28px; height: 28px;
  border-radius: 8px;
  background: rgba(199,147,48,.12);
  color: var(--gold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.rb-sucursal-pill b { font-weight: 600; }
.rb-sucursal-pill small {
  color: #64748b;
  font-size: 12px;
  margin-left: 4px;
}
@keyframes rbPillIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Grid de tarjetas radio: dos o más sucursales. */
.rb-sucursal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}
.rb-sucursal-card {
  position: relative;
  padding: 12px 14px;
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.rb-sucursal-card:hover {
  border-color: #cbd5e1;
  background: #f8fafc;
  transform: translateY(-1px);
}
.rb-sucursal-card.selected {
  border-color: var(--gold);
  background: rgba(199,147,48,.06);
}
.rb-sucursal-card.selected::after {
  content: "";
  position: absolute;
  top: 8px; right: 8px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: inset 0 0 0 3px #fff;
}
.rb-sucursal-card b { font-size: 14px; font-weight: 600; color: #18181b; }
.rb-sucursal-card small { font-size: 12px; color: #64748b; }
.rb-sucursal-card input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* ------------------------------------------------------------
   Fix: forzar a que las capas hidden se oculten de verdad.
   Sin esto, las reglas .modal-loading { display:flex } y
   .modal-success { display:flex } anulan el atributo hidden,
   y se ven los 3 estados (form + loading + success) al mismo
   tiempo cuando se abre el modal.
   ------------------------------------------------------------ */
.modal-fields[hidden],
.modal-loading[hidden],
.modal-success[hidden] { display: none !important; }

/* ============================================================
   LOGO · CALAVERA CON TIJERAS CRUZADAS
   ------------------------------------------------------------
   Aparece en dos lugares: hero del login (.brand-badge) y
   cabecera del formulario (.auth-badge). El SVG es el mismo
   en ambos; aquí controlamos su apariencia y la animación
   de hover (glow dorado sutil).
   ============================================================ */

/* Contenedor (badge) cuando contiene la calavera.
   Selector con & para ganar a `.auth-left .brand-badge` por especificidad. */
.auth-left .skull-badge,
.auth-head .skull-badge {
  position: relative;
  color: var(--gold-bright);
  background: radial-gradient(ellipse at center, rgba(199,147,48,.14), rgba(199,147,48,.05));
  border: 1px solid rgba(199,147,48,.32);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 0 24px rgba(199,147,48,.10);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.auth-left .skull-badge:hover,
.auth-head .skull-badge:hover {
  transform: translateY(-1px);
  border-color: rgba(199,147,48,.55);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 0 32px rgba(199,147,48,.28);
}

/* La calavera dorada con glow sutil al hover. */
.skull-icon {
  display: block;
  transition: filter .35s ease, transform .35s ease;
}
.skull-badge:hover .skull-icon {
  filter: drop-shadow(0 0 8px rgba(199,147,48,.55));
}

/* Las tijeras detrás de la calavera tienen una entrada suave
   al cargar la página (efecto de "armado" del logo). */
.skull-icon .sk-scissors {
  animation: skullScissorsIn .9s cubic-bezier(.2,.7,.2,1) .15s both;
  transform-origin: 32px 32px;
}
@keyframes skullScissorsIn {
  from { opacity: 0; transform: rotate(-25deg) scale(.85); }
  to   { opacity: .55; transform: rotate(0) scale(1); }
}

/* La calavera "respira" muy levemente: pulse dorado infinito muy sutil. */
.skull-icon .sk-skull {
  animation: skullBreath 4.5s ease-in-out infinite;
  transform-origin: 32px 32px;
}
@keyframes skullBreath {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.02); }
}

/* ============================================================
   HERITAGE & EMBER — Actualización visual del login
   Paleta obsidiana profunda · Oro #d4af37 / #f2ca50
   Tipografías: Playfair Display (titular) · Hanken Grotesk (UI)
   ============================================================ */

/* ── Tokens y fondo base ── */
#authView {
  --gold:        #d4af37;
  --gold-bright: #f2ca50;
  --gold-soft:   rgba(212,175,55,.12);
  font-family: 'Hanken Grotesk', 'Inter', system-ui, sans-serif;
  background:
    radial-gradient(1100px 620px at 18% 10%, rgba(212,175,55,.10), transparent 55%),
    radial-gradient(800px 500px at 85% 90%, rgba(212,175,55,.06), transparent 58%),
    linear-gradient(160deg, #131313 0%, #0e0c09 55%, #0a0907 100%);
}

/* ── Shell — vidrio obsidiana con borde ámbar sutil ── */
#authView .auth-shell {
  background: rgba(18,17,15,.72);
  border: 1px solid rgba(212,175,55,.12);
  box-shadow:
    0 40px 120px rgba(0,0,0,.70),
    inset 0 1px 0 rgba(255,255,255,.03);
}

/* ── Panel izquierdo — warmth profunda ── */
#authView .auth-left {
  background:
    radial-gradient(700px 480px at 28% 18%, rgba(212,175,55,.14), transparent 60%),
    linear-gradient(160deg, #1a150c 0%, #110d08 55%, #0a0805 100%);
}

/* ── Slideshow: grado a COLOR con profundidad sutil.
   El velo (scrim) da la legibilidad del texto → la foto no se apaga tanto. ── */
#authView .auth-slide img {
  filter: brightness(.9) contrast(1.05) saturate(1.05);
}

/* ── Overlay: vignette atmosférica con calor ámbar ── */
#authView .auth-slide-overlay {
  background:
    linear-gradient(180deg,
      rgba(8,6,3,.52) 0%,
      rgba(8,6,3,.18) 42%,
      rgba(6,5,2,.93) 100%),
    radial-gradient(ellipse at 18% 78%, rgba(212,175,55,.16), transparent 52%),
    radial-gradient(ellipse at 82% 8%, rgba(100,65,15,.10), transparent 46%);
}

/* ── Brand badge (hero) — degradado dorado más rico ── */
#authView .auth-left .brand-badge {
  background: linear-gradient(145deg, #f2ca50, #c9a030);
  color: #241a00;
  box-shadow: 0 8px 26px rgba(212,175,55,.40);
}

/* ── Brand name: Hanken Grotesk ── */
#authView .auth-left .brand-name { font-family: 'Hanken Grotesk', sans-serif; }
#authView .auth-left .brand-name small { color: #f2ca50; font-size: 11px; letter-spacing: .36em; }
#authView .auth-left .brand-name strong { font-size: 25px; letter-spacing: .06em; font-weight: 700; }

/* ── Skull badge — glow ámbar Heritage ── */
#authView .auth-left .skull-badge,
#authView .auth-head .skull-badge {
  background: radial-gradient(ellipse at center, rgba(212,175,55,.15), rgba(212,175,55,.04));
  border: 1px solid rgba(212,175,55,.35);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 0 28px rgba(212,175,55,.14);
}
#authView .auth-left .skull-badge:hover,
#authView .auth-head .skull-badge:hover {
  border-color: rgba(212,175,55,.60);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 36px rgba(212,175,55,.30);
}

/* ── Hero heading: Playfair Display editorial ── */
#authView .auth-hero h1 {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.12;
  color: #e5e2e1;
}
#authView .auth-hero h1 em { color: #f2ca50; font-style: italic; }
#authView .auth-hero .lede { color: #d0c5af; }

/* ── Feature dots ── */
#authView .feature-list .dot {
  background: rgba(212,175,55,.10);
  border: 1px solid rgba(212,175,55,.18);
  color: #f2ca50;
}
#authView .feature-list h4 { color: #e5e2e1; }
#authView .feature-list p  { color: #99907c; }
#authView .auth-foot { color: #4d4635; }

/* ── Panel derecho ── */
#authView .auth-right {
  background: linear-gradient(180deg, rgba(19,18,16,.65), rgba(10,9,7,.78));
  border-left: 1px solid rgba(212,175,55,.08);
}

/* ── Auth badge (ícono del formulario) ── */
#authView .auth-badge {
  background: rgba(212,175,55,.09);
  border: 1px solid rgba(212,175,55,.30);
}

/* ── Heading del login: Playfair Display ── */
#authView .auth-head h2,
#authView .auth-head .auth-h2 {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  font-size: 36px;
  color: #e5e2e1;
  letter-spacing: -.01em;
}
#authView .auth-head h2 em,
#authView .auth-head .auth-h2 em {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-weight: 600;
  color: #f2ca50;
}

/* ── Tagline ── */
#authView .auth-tagline { color: #99907c; }
#authView .auth-tagline::before,
#authView .auth-tagline::after {
  background: linear-gradient(90deg, transparent, rgba(212,175,55,.55));
}

/* ── Otros títulos (Registro, Onboarding) ── */
#authView .card-auth h2 {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  color: #e5e2e1;
}
#authView .card-auth .sub { color: #99907c; }

/* ── Labels: Hanken Grotesk label-caps ── */
#authView .card-auth .field label {
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .15em;
  color: #99907c;
}

/* ── Inputs charcoal con borde outline-variant ── */
#authView .card-auth .field input {
  background: rgba(32,31,31,.80);
  border: 1px solid #4d4635;
  border-radius: 6px;
  color: #e5e2e1;
  font-family: 'Hanken Grotesk', sans-serif;
}
#authView .card-auth .field input::placeholder { color: #6b6558; }
#authView .card-auth .field input:focus {
  border-color: #d4af37;
  box-shadow: 0 0 0 3px rgba(212,175,55,.18);
  background: rgba(42,42,42,.88);
}

/* ── Ícono izquierdo y toggle contraseña ── */
#authView .auth-input .ic { color: #d4af37; opacity: 1; }
#authView .auth-input .pw-toggle { color: #6b6558; }
#authView .auth-input .pw-toggle:hover { color: #f2ca50; background: rgba(212,175,55,.08); }
#authView .auth-input .pw-toggle.is-on { color: #f2ca50; }

/* ── Checkbox + enlace olvidé contraseña ── */
#authView .check { color: #99907c; }
#authView .check .box { border: 1px solid rgba(212,175,55,.28); background: rgba(255,255,255,.02); }
#authView .check input:checked + .box { background: #d4af37; border-color: #d4af37; }
#authView .check .box::after { background: #241a00; }
#authView .check input:focus-visible + .box { box-shadow: 0 0 0 3px rgba(212,175,55,.22); }
#authView .card-auth .row-between a { color: #f2ca50; }

/* ── Botón primario — Heritage solid gold ── */
#authView .card-auth .btn { border-radius: 6px; }
#authView .card-auth .btn-primary {
  background: #d4af37;
  color: #241a00;
  font-family: 'Hanken Grotesk', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 13px;
  padding: 15px 18px;
  border-radius: 6px;
  box-shadow: 0 8px 26px rgba(212,175,55,.26);
}
#authView .card-auth .btn-primary:hover {
  background: #f2ca50;
  transform: translateY(-1px);
  box-shadow: 0 12px 34px rgba(212,175,55,.40);
}

/* ── Botón ghost / dark — outlined Heritage ── */
#authView .card-auth .btn-dark,
#authView .card-auth .btn-ghost {
  background: transparent;
  color: #d0c5af;
  border: 1px solid rgba(212,175,55,.38);
  font-family: 'Hanken Grotesk', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 12px;
  border-radius: 6px;
}
#authView .card-auth .btn-dark:hover,
#authView .card-auth .btn-ghost:hover {
  background: rgba(212,175,55,.08);
  border-color: #d4af37;
  color: #e5e2e1;
}

/* ── Divisor "o" ── */
#authView .card-auth .divider { color: #4d4635; }
#authView .card-auth .divider::before,
#authView .card-auth .divider::after { background: #4d4635; }

/* ── Onboarding ── */
#authView .card-auth .welcome-text { color: #99907c; }
#authView .card-auth .skip { color: #6b6558; }
#authView .card-auth .skip:hover { color: #f2ca50; }

/* ── Indicador de barbero en tarjetas de Agenda ── */
.appt-barber {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  transition: color .18s;
}
.appt-barber-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: 0 0 auto;
  transition: transform .18s;
}
.list-row:hover .appt-barber { color: var(--ink-2); }
.list-row:hover .appt-barber-dot { transform: scale(1.25); }

/* ── Poste de barbería: imagen en lugar de calavera ──
   Hero (fondo dorado): multiply elimina el fondo blanco, icono negro queda sobre oro.
   Auth badge (fondo oscuro): invert convierte negro→blanco; screen oculta el negro
   resultante y deja el icono blanco visible sobre oscuro. */
/* Badge hero: más grande para que el poste respire */
#authView .auth-left .brand-badge {
  width: 64px;
  height: 64px;
  border-radius: 16px;
}
#authView .auth-left .brand-badge .brand-logo-img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  display: block;
  mix-blend-mode: multiply;
}

/* Badge formulario: más grande */
#authView .auth-badge {
  width: 68px;
  height: 68px;
  border-radius: 18px;
  margin-bottom: 20px;
}
#authView .auth-badge .brand-logo-img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  display: block;
  filter: invert(1);
  mix-blend-mode: screen;
}

/* ── Responsive: overlay cálido en móvil ── */
@media (max-width: 880px) {
  #authView .auth-slide-overlay {
    background:
      linear-gradient(180deg, rgba(8,6,3,.62) 0%, rgba(8,6,3,.30) 40%, rgba(6,5,2,.96) 100%),
      radial-gradient(ellipse at 18% 78%, rgba(212,175,55,.14), transparent 52%);
  }
}


/* ============================================================
   BARBEROS — Página administrativa
   ============================================================ */

/* Filtro de sucursal (select estilizado) */
.filter-select {
  padding: 9px 36px 9px 13px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background-color: var(--surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  color: var(--ink-2);
  font-size: 14px;
  font-family: var(--font-body);
  cursor: pointer;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  min-width: 180px;
}
.filter-select:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(199,147,48,.12);
}

/* Grid de tarjetas */
.barb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.barb-empty {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--muted);
  padding: 56px 0;
  font-size: 14px;
}

/* Tarjeta (rediseño limpio: foto en recuadro con anillo dorado, sin banda) */
.barb-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow); padding: 24px 18px 18px; position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 9px;
  transition: box-shadow .18s var(--ease), transform .18s var(--ease), border-color .18s var(--ease);
}
.barb-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--gold-bright));
  transform: scaleX(0); transform-origin: center; transition: transform .22s var(--ease);
}
.barb-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); border-color: #e5d8b0; }
.barb-card:hover::before { transform: scaleX(1); }

.barb-photo {
  position: relative; width: 84px; height: 84px; border-radius: 24px; overflow: hidden;
  display: grid; place-items: center;
  box-shadow: 0 0 0 4px var(--gold-soft), 0 8px 20px rgba(16,16,20,.10);
}
.barb-photo img { width: 100%; height: 100%; object-fit: cover; }
.barb-photo-ini { width: 100%; height: 100%; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 28px; font-family: var(--font-display); letter-spacing: .5px; }
.barb-estado-dot { position: absolute; right: 5px; bottom: 5px; width: 16px; height: 16px; border-radius: 50%; border: 3px solid var(--surface); z-index: 2; }
.barb-estado-dot.activo   { background: var(--green); }
.barb-estado-dot.descanso { background: var(--gold); }
.barb-estado-dot.inactivo { background: var(--muted-2); }

.barb-card-name { font-size: 17px; font-weight: 600; color: var(--ink); font-family: var(--font-display); margin-top: 4px; }
.barb-card-div { width: 40px; height: 1px; background: var(--line); margin: 6px 0 2px; }

/* Pills de estado */
.estado-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 9px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  width: fit-content;
}
.estado-pill.activo   { background: var(--green-soft);  color: var(--green);  }
.estado-pill.descanso { background: var(--gold-soft);   color: #9a6f00;       }
.estado-pill.inactivo { background: var(--red-soft);    color: var(--red);    }

/* Especialidades en la tarjeta */
.barb-specs { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.barb-spec {
  font-size: 12px; color: var(--ink-2); background: var(--surface-soft);
  border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px;
}

/* Meta: sucursal + citas */
.barb-meta { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.barb-meta-item { display: inline-flex; align-items: center; gap: 5px; justify-content: center; }

/* Botón Ver perfil */
.btn-ver-perfil {
  display: block; width: 100%; margin-top: 6px; text-align: center; padding: 9px 14px;
  border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--surface);
  color: var(--ink-2); font-size: 13px; font-weight: 600; cursor: pointer; font-family: var(--font-body);
  transition: all .15s var(--ease);
}
.btn-ver-perfil:hover { background: var(--gold-soft); border-color: var(--gold); color: var(--gold); }

/* ============================================================
   MODAL · PERFIL BARBERO
   ============================================================ */

/* Hero: avatar grande + nombre + estado */
.pb-hero {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 20px;
}
.pb-photo {
  position: relative; width: 68px; height: 68px; border-radius: 20px; flex-shrink: 0;
  overflow: hidden; display: grid; place-items: center;
  box-shadow: 0 0 0 3px var(--gold-soft);
}
.pb-photo img { width: 100%; height: 100%; object-fit: cover; }
.pb-hero-text {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pb-name {
  font-size: 20px;
  font-weight: 600;
  color: var(--ink);
  margin: 0;
  font-family: var(--font-display);
  line-height: 1.1;
}
.pb-hero-sub {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.pb-hero-suc {
  font-size: 13px;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Información: tarjetas con icono, en cuadrícula (no amontonado) */
.pb-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 22px;
}
.pb-ii {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  min-width: 0;
}
.pb-ii-wide { grid-column: 1 / -1; }
.pb-ii-ico {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  font-size: 16px;
  background: var(--gold-soft);
}
.pb-ii-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.pb-ii-lbl {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
}
.pb-ii-val {
  font-size: 14px;
  color: var(--ink);
  font-weight: 500;
  word-break: break-word;
}

/* Etiqueta de sección (Especialidades, etc.) */
.pb-lbl {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* Especialidades dentro del modal */
.pb-esp-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 22px;
}
@media (max-width: 480px) {
  .pb-info-grid { grid-template-columns: 1fr; }
}
.pb-esp-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.pb-esp-tag {
  display: inline-block;
  font-size: 13px;
  padding: 5px 12px;
  background: var(--gold-soft);
  color: #7a5600;
  border-radius: 20px;
  font-weight: 500;
}

/* ── Modo EDICIÓN del perfil ─────────────────────────────── */
.pbf { display: flex; flex-direction: column; gap: 18px; }

.pbf-hero {
  display: flex; align-items: center; gap: 14px;
  padding-bottom: 16px; border-bottom: 1px solid var(--line);
}
.pbf-hero .pb-photo { position: relative; }
.pbf-cam {
  position: absolute; right: -4px; bottom: -4px;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--gold); color: #fff;
  display: grid; place-items: center;
  border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.18);
}
.pbf-hero-note { display: flex; flex-direction: column; gap: 2px; }
.pbf-hero-note b { font-family: var(--font-display); font-weight: 600; font-size: 17px; color: var(--ink); }
.pbf-hero-note small { color: var(--muted); font-size: 12.5px; }

.pbf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px 14px; }
.pbf-field { display: flex; flex-direction: column; gap: 6px; }
.pbf-col2 { grid-column: 1 / -1; }
.pbf-field > span {
  font-size: 12px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted);
}
.pbf-field input,
.pbf-field select {
  width: 100%; padding: 10px 12px;
  border: 1.5px solid var(--line); border-radius: 11px;
  background: #fff; color: var(--ink); font-size: 14px;
  font-family: inherit; transition: border-color .15s, box-shadow .15s;
}
.pbf-field input:focus,
.pbf-field select:focus {
  outline: none; border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-soft);
}
.pbf-err { font-size: 12px; color: #c0392b; min-height: 0; font-style: normal; }
.pbf-err:not(:empty) { min-height: 14px; }

/* Segmento de estado */
.pbf-seg { display: flex; gap: 8px; }
.pbf-seg-btn {
  flex: 1; padding: 9px 6px; border-radius: 11px;
  border: 1.5px solid var(--line); background: #fff;
  color: var(--muted); font-size: 13px; font-weight: 600; cursor: pointer;
  transition: all .15s;
}
.pbf-seg-btn:hover { border-color: var(--gold); color: var(--ink); }
.pbf-seg-btn.on {
  border-color: var(--gold); background: var(--gold-soft); color: #7a5600;
  box-shadow: 0 0 0 3px var(--gold-soft);
}

/* Especialidades editables */
.pbf-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.pbf-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; padding: 5px 8px 5px 12px;
  background: var(--gold-soft); color: #7a5600; border-radius: 20px; font-weight: 500;
}
.pbf-chip-x {
  border: none; background: rgba(122,86,0,.14); color: #7a5600;
  width: 18px; height: 18px; border-radius: 50%; cursor: pointer;
  font-size: 11px; line-height: 1; display: grid; place-items: center;
  transition: background .15s;
}
.pbf-chip-x:hover { background: #c0392b; color: #fff; }
.pbf-chip-empty { font-size: 13px; color: var(--muted-2); font-style: italic; }
.pbf-add { display: flex; gap: 8px; }
.pbf-add input { flex: 1; }
.pbf-add-btn {
  padding: 0 16px; border-radius: 11px; white-space: nowrap;
  border: 1.5px solid var(--gold); background: #fff; color: #7a5600;
  font-weight: 600; font-size: 13px; cursor: pointer; transition: all .15s;
}
.pbf-add-btn:hover { background: var(--gold-soft); }

.pbf-actions {
  display: flex; gap: 10px; margin-top: 4px;
  padding-top: 16px; border-top: 1px solid var(--line);
}
.pbf-actions .btn { flex: 1; }

@media (max-width: 480px) {
  .pbf-grid { grid-template-columns: 1fr; }
  .pbf-seg { flex-direction: column; }
}

/* Pie del modal: Más (izq) | Editar (der) */
.modal-foot.pb-foot {
  justify-content: space-between;
}
.pb-more-wrap {
  position: relative;
}
.pb-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
}

/* Dropdown "Más" — se abre hacia arriba */
.pb-dropdown {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  min-width: 180px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  z-index: 300;
}
.pb-drop-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 16px;
  font-size: 14px;
  color: var(--ink-2);
  font-family: var(--font-body);
  background: none;
  border: none;
  cursor: pointer;
  transition: background .12s;
}
.pb-drop-item:hover  { background: var(--bg); }
.pb-drop-danger      { color: var(--red) !important; }
.pb-drop-danger:hover { background: var(--red-soft) !important; }

/* Responsive móvil */
@media (max-width: 640px) {
  .barb-grid      { grid-template-columns: 1fr; }
  .filter-select  { min-width: 0; width: 100%; }
  .pb-lbl         { min-width: 76px; }
}


/* ============================================================
   SERVICIOS — Toolbar, menú ⋯, sucursales en tarjeta y estado
   ============================================================ */

/* Barra con el botón "Nuevo servicio" alineado a la derecha */
.svc-toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 16px;
}

/* La tarjeta .svc necesita ser el bloque contenedor del botón ⋯ */
.svc { position: relative; }

/* Botón ⋯ — discreto, esquina superior derecha */
.svc-menu-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: none;
  background: transparent;
  border-radius: 8px;
  font-size: 17px;
  color: var(--ink);
  cursor: pointer;
  line-height: 1;
  background: rgba(255,255,255,.92);
  box-shadow: 0 1px 3px rgba(16,16,20,.14);
  transition: background .15s, color .15s;
}
.svc-menu-btn:hover {
  background: #fff;
  color: var(--gold);
}

/* Dropdown del menú ⋯ */
.svc-dropdown {
  position: absolute;
  top: 38px;
  right: 10px;
  min-width: 170px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  z-index: 50;
}
.svc-drop-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 9px 14px;
  font-size: 13.5px;
  color: var(--ink-2);
  font-family: var(--font-body);
  background: none;
  border: none;
  cursor: pointer;
  transition: background .12s;
}
.svc-drop-item:hover  { background: var(--bg); }
.svc-drop-danger      { color: var(--red) !important; }
.svc-drop-danger:hover { background: var(--red-soft) !important; }

/* Línea de sucursales debajo del precio */
.svc-sucursales {
  font-size: 12px;
  color: var(--muted);
  padding-top: 6px;
  border-top: 1px solid var(--line);
  margin-top: 4px;
}

/* Tarjeta oculta: apariencia atenuada */
.svc-oculto {
  opacity: .55;
}
.svc-oculto-tag {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 2px 8px;
  border-radius: 20px;
  background: var(--bg);
  color: var(--muted);
  border: 1px solid var(--line);
  margin-top: 2px;
}

/* ============================================================
   MODAL SERVICIO — Campos específicos del formulario
   ============================================================ */

/* Textarea (descripción del servicio) */
.input-wrap textarea {
  width: 100%;
  padding: 10px 12px;
  font-size: 14px;
  font-family: var(--font-body);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-soft);
  color: var(--ink);
  resize: vertical;
  min-height: 62px;
  outline: none;
  transition: border-color .18s, box-shadow .18s, background .18s;
}
.input-wrap textarea:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(199,147,48,.15);
  background: #fff;
}

/* Prefijo "$" de texto (precio) */
.svc-prefix-text {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}
.input-wrap:focus-within .svc-prefix-text { color: var(--gold); }

/* Select de estado dentro del modal (ancho completo) */
.svc-estado-sel {
  width: 100%;
  min-width: 0;
}

/* Pill informativo de sucursal única */
.svc-avail-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: 13.5px;
  color: var(--ink-2);
  margin-top: 6px;
}
.svc-avail-pill svg { color: var(--muted); flex-shrink: 0; }

/* Contenedor de radios Todas / Seleccionar */
.svc-avail {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 6px;
}
.svc-avail-radio {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--ink-2);
  cursor: pointer;
}
.svc-avail-radio input[type="radio"] {
  width: 16px;
  height: 16px;
  accent-color: var(--gold);
  cursor: pointer;
  flex-shrink: 0;
}

/* Checkboxes de sucursales */
.svc-avail-checks {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 12px 14px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  margin-top: 4px;
}
.svc-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--ink-2);
  cursor: pointer;
}
.svc-check input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--gold);
  cursor: pointer;
  flex-shrink: 0;
}

/* Campos con error */
.has-error {
  border-color: var(--red) !important;
  box-shadow: 0 0 0 3px rgba(194,65,12,.12) !important;
}

/* Responsive: en móvil svc-foot muestra precio/dur en columna */
@media (max-width: 640px) {
  .svc-toolbar { margin-bottom: 12px; }
}


/* ============================================================
   EXPERIENCIA CLIENTE — Estilos
   ============================================================ */

/* Pestañas de filtro TODOS / ESTA SEMANA / ESTE MES */
.ec-tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  width: fit-content;
  margin-bottom: 18px;
  box-shadow: var(--shadow);
}
.ec-tab {
  padding: 7px 18px;
  border-radius: 8px;
  border: none;
  background: transparent;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  font-family: var(--font-body);
  transition: background .15s, color .15s;
}
.ec-tab.active {
  background: var(--gold);
  color: #161618;
  font-weight: 600;
}
.ec-tab:hover:not(.active) {
  background: var(--bg);
  color: var(--ink-2);
}

/* Botón que parece enlace dorado (Ver todas, Ver detalle, Enviar recordatorio) */
.ec-link-btn {
  font-size: 13px;
  font-weight: 600;
  color: var(--gold);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  font-family: var(--font-body);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: opacity .15s, gap .15s;
  white-space: nowrap;
}
.ec-link-btn:hover { opacity: .7; gap: 7px; }

/* Botón tipo enlace dentro de .card-foot */
.card-foot .ec-link-btn {
  font-size: 13px;
}

/* Tarjetas de comentarios destacados */
.ec-comments-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.ec-comment {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 13px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}
.ec-quote {
  font-size: 15px;
  flex-shrink: 0;
  line-height: 1.5;
}
.ec-comment p {
  margin: 0;
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.5;
}

/* Cabecera con los filtros a la derecha */
.ec-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ec-head .ec-tabs { margin-bottom: 0; }

/* Lista de opiniones: scroll si hay muchas */
.ec-op-list { max-height: 430px; overflow-y: auto; padding-right: 4px; }
.ec-op-row .meta-r { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; text-align: right; white-space: nowrap; }
.ec-op-svc { color: var(--ink-2); font-weight: 500; }
.ec-vacio { color: var(--muted); font-size: 13.5px; text-align: center; padding: 26px 0; }

/* Resumen de calificaciones: promedio + barras de distribución */
.ec-dist { display: flex; flex-direction: column; gap: 16px; }
.ec-dist-top { display: flex; align-items: center; gap: 14px; padding-bottom: 15px; border-bottom: 1px solid var(--line); }
.ec-dist-avg { font-family: var(--font-display); font-weight: 600; font-size: 46px; line-height: 1; color: var(--ink); }
.ec-dist-top-r { display: flex; flex-direction: column; gap: 4px; }
.ec-dist-top-r small { color: var(--muted); font-size: 12.5px; }
.ec-dist-bars { display: flex; flex-direction: column; gap: 9px; }
.ec-dist-row { display: flex; align-items: center; gap: 10px; }
.ec-dist-star { width: 28px; font-size: 12.5px; font-weight: 600; color: var(--muted); display: inline-flex; align-items: center; gap: 1px; }
.ec-dist-star i { color: var(--gold); font-style: normal; font-size: 11px; }
.ec-dist-bar { flex: 1; height: 8px; border-radius: 999px; background: var(--surface-soft); overflow: hidden; }
.ec-dist-bar span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--gold), var(--gold-bright)); transition: width .5s var(--ease); }
.ec-dist-n { width: 18px; text-align: right; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* Encuesta ya recordada */
.ec-recordado { font-size: 12.5px; font-weight: 600; color: var(--green); white-space: nowrap; }

/* Estado sin casos de atención */
.ec-atencion-ok {
  display: flex; align-items: center; gap: 8px; justify-content: center;
  padding: 26px 0; color: var(--muted); font-size: 13.5px;
}
.ec-atencion-ok span { font-size: 17px; }

/* ── Modal · Detalle de atención ─────────────────────────────── */
.ecd-hero {
  display: flex; align-items: center; gap: 14px;
  padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid var(--line);
}
.ecd-avatar {
  width: 56px; height: 56px; border-radius: 16px; flex-shrink: 0;
  display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 19px;
  font-family: var(--font-display);
}
.ecd-hero-text { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.ecd-name { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 19px; color: var(--ink); line-height: 1.1; }
.ecd-hero-sub { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ecd-hero-meta { font-size: 12.5px; color: var(--muted); }

.ecd-issue {
  display: flex; gap: 13px; padding: 14px 16px; margin-bottom: 12px;
  background: var(--surface-soft); border: 1px solid var(--line); border-radius: var(--r-md);
}
.ecd-issue-ico {
  flex-shrink: 0; width: 38px; height: 38px; border-radius: 11px;
  display: grid; place-items: center; background: var(--gold-soft); color: var(--gold);
}
.ecd-issue-ico svg { width: 20px; height: 20px; }
.ecd-issue-ico.espera       { background: var(--gold-soft);   color: #9a6b12; }
.ecd-issue-ico.calificacion { background: #fdeaea;            color: #c0392b; }
.ecd-issue-ico.solicitud    { background: var(--blue-soft);   color: var(--blue); }
.ecd-issue-txt { min-width: 0; }
.ecd-issue-txt b { font-size: 14.5px; color: var(--ink); }
.ecd-issue-txt p { margin: 3px 0 0; font-size: 13.5px; color: var(--ink-2); line-height: 1.5; }

.ecd-contacto {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 16px; margin-bottom: 12px;
  border: 1px solid var(--line); border-radius: var(--r-md);
}
.ecd-contacto-lbl { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.ecd-contacto-val { font-size: 14px; color: var(--ink); font-weight: 500; }

.ecd-tip {
  display: flex; gap: 8px; align-items: flex-start;
  padding: 12px 16px; margin-bottom: 20px;
  background: var(--gold-soft); border-radius: var(--r-md);
  font-size: 13px; color: #7a5600; line-height: 1.5;
}
.ecd-tip span { flex-shrink: 0; }

.ecd-actions { display: flex; flex-direction: column; gap: 10px; }
.ecd-actions-quick { display: flex; gap: 10px; }
.ecd-actions-quick .btn { flex: 1; }
.ecd-resolve {
  width: 100%; border: 1px solid var(--green); background: var(--green-soft); color: var(--green);
  font-weight: 600; transition: all .15s var(--ease);
}
.ecd-resolve:hover { background: var(--green); color: #fff; }

@media (max-width: 480px) {
  .ecd-actions-quick { flex-direction: column; }
}

/* Grid de 2 columnas iguales (Atención + Encuestas) */
.grid.ec-two-col {
  grid-template-columns: 1fr 1fr;
}

/* Responsive */
@media (max-width: 960px) {
  .grid.ec-two-col { grid-template-columns: 1fr; }
  .ec-head { flex-direction: column; }
  .ec-head .ec-tabs { width: 100%; }
  .ec-tab  { flex: 1; text-align: center; padding: 7px 10px; }
}


/* ============================================================
   FIDELIZACIÓN — Estilos
   ============================================================ */

/* Grid de tarjetas de recompensa */
.fidel-rwd-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 12px;
  margin-top: 14px;
}

/* Tarjeta individual de recompensa */
.fidel-rwd-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 15px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: box-shadow .15s var(--ease), border-color .15s var(--ease);
}
.fidel-rwd-card:hover { box-shadow: 0 6px 18px -12px rgba(199,147,48,.55); border-color: var(--gold); }
.fidel-rwd-oculto { opacity: .55; }
.fidel-rwd-head { display: flex; align-items: flex-start; gap: 12px; }
.fidel-rwd-headtxt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.fidel-rwd-headtxt b { font-size: 14.5px; font-weight: 600; color: var(--ink); line-height: 1.25; }
.fidel-rwd-headtxt small { font-size: 12.5px; color: var(--muted); }
.fidel-rwd-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.fidel-rwd-foot .fidel-rwd-vig { margin: 0 0 0 auto; }

/* Icono circular dorado de la recompensa */
.fidel-rwd-ico {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gold-soft);
  color: var(--gold);
  border-radius: 10px;
  flex-shrink: 0;
}
.fidel-rwd-ico svg { width: 20px; height: 20px; }

/* Etiquetas tipo/límite + vigencia */
.fidel-rwd-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.fidel-tag {
  font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px;
  letter-spacing: .02em;
}
.tag-rep   { background: var(--blue-soft);  color: var(--blue);  }
.tag-unica { background: var(--purple-soft); color: var(--purple); }
.fidel-rwd-vig { font-size: 11px; color: var(--muted-2); margin-top: 6px; }


/* Lista de beneficios disponibles */
.fidel-ben-list { display: flex; flex-direction: column; }
.fidel-ben-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.fidel-ben-row:last-child { border-bottom: none; }
.fidel-ben-info { display: flex; flex-direction: column; gap: 2px; }
.fidel-ben-info b     { font-size: 13.5px; color: var(--ink); }
.fidel-ben-info small { font-size: 12px; color: var(--muted); }
.fidel-ben-actions    { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

/* Meta-derecha de solicitudes */
.fidel-sol-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.fidel-sol-btns { display: flex; gap: 8px; }

/* Texto vacío */
.fidel-empty { font-size: 13.5px; color: var(--muted); margin: 8px 0; }

/* Grid de campañas */
.fidel-camp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 14px;
}
.fidel-camp-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 12px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  text-align: center;
}
.fidel-camp-ico  { color: var(--gold); display: flex; }
.fidel-camp-ico svg { width: 24px; height: 24px; }
.fidel-camp-name { font-size: 13px; font-weight: 600; color: var(--ink); }
.fidel-camp-vig  { font-size: 11px; color: var(--muted-2); }
.fidel-camp-btn {
  margin-top: 4px;
  padding: 5px 14px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
  font-family: var(--font-body);
}
.fidel-camp-btn:hover { border-color: var(--gold); color: var(--gold); }
/* Acciones de la tarjeta de campaña (activar + editar + borrar) */
.fidel-camp-actions { display: flex; align-items: center; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.fidel-camp-actions .fidel-camp-btn { margin-top: 0; }
.fidel-camp-mini {
  width: 30px; height: 30px; flex: 0 0 auto; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 8px; background: var(--surface);
  color: var(--muted); font-size: 13px; cursor: pointer; transition: border-color .15s, color .15s;
}
.fidel-camp-mini:hover { border-color: var(--gold); color: var(--ink); }
.fidel-camp-send { padding: 5px 12px; border: 1px solid var(--gold); border-radius: 8px; background: var(--gold-soft); color: var(--ink-2); font-size: 12px; font-weight: 600; cursor: pointer; transition: background .15s, color .15s; }
.fidel-camp-send:hover { background: var(--gold); color: var(--on-gold); }
.fidel-camp-send:disabled { opacity: .6; cursor: default; }
/* Checkbox en línea (modal de campaña) */
.cfg-inline-check { display: flex; align-items: center; gap: 8px; margin: 12px 0; font-size: 14px; color: var(--ink-2); cursor: pointer; }
.cfg-inline-check input { accent-color: var(--gold); width: 16px; height: 16px; }

/* Hint de membresías */
.fidel-memb-hint {
  font-size: 13.5px;
  color: var(--muted);
  margin: 4px 0 0;
}

/* Grid de membresías */
.fidel-memb-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 14px;
}
.fidel-memb-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 20px 14px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  text-align: center;
}
.fidel-memb-base    { background: var(--bg); }
.fidel-memb-bronce  { background: rgba(205,127,50,.07); border-color: rgba(205,127,50,.3); }
.fidel-memb-premium { background: rgba(212,163,89,.10); border-color: rgba(212,163,89,.4); }
.fidel-memb-ico     { color: var(--gold); margin-bottom: 2px; display: flex; }
.fidel-memb-ico svg { width: 26px; height: 26px; }
.fidel-memb-card b     { font-size: 14px; color: var(--ink); }
.fidel-memb-card small { font-size: 12px; color: var(--muted); }
.fidel-memb-count {
  margin-top: 4px;
  font-size: 13px;
  font-weight: 700;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}

/* ── menú ⋯ de recompensas ─────────────────────────────────── */
.fidel-rwd-menu-wrap { position: relative; flex-shrink: 0; }
.fidel-rwd-menu-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  font-size: 15px;
  color: var(--muted);
  cursor: pointer;
  font-family: var(--font-body);
  transition: background .12s, color .12s;
}
.fidel-rwd-menu-btn:hover { background: var(--bg); color: var(--ink); }
.fidel-rwd-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  box-shadow: 0 4px 16px rgba(0,0,0,.14);
  min-width: 140px;
  z-index: 60;
  overflow: hidden;
}

/* ── campañas activas ──────────────────────────────────────── */
.fidel-camp-card.activa {
  background: rgba(212,163,89,.08);
  border-color: rgba(212,163,89,.4);
}
/* Encendida pero fuera de su ventana de fechas → se muestra apagada con la etiqueta "Expirada". */
.fidel-camp-card.expirada { opacity: .6; }
.fidel-camp-card.expirada .fidel-camp-vig { color: var(--danger, #c0392b); font-weight: 600; }
.fidel-camp-btn.activa {
  background: var(--gold);
  color: var(--on-gold);
  border-color: transparent;
  cursor: pointer;
  opacity: 1;
}

/* ── membresías activas ────────────────────────────────────── */
.fidel-memb-card.fidel-memb-activa {
  outline: 2px solid var(--gold);
  outline-offset: -1px;
}

/* ── KPI top (texto largo) ─────────────────────────────────── */
.value.fidel-val-sm { font-size: 16px; line-height: 1.2; }

/* ── progreso de clientes ──────────────────────────────────── */
.fidel-prog-list { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; }
.fidel-prog-goal { font-size: 12.5px; color: var(--muted); margin: 0 0 4px; }
.fidel-prog-goal b { color: var(--ink); }
.fidel-prog-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 5px; }
.fidel-prog-name { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.fidel-prog-meta { font-size: 12.5px; font-weight: 700; color: var(--gold); }
.fidel-prog-bar { height: 7px; background: var(--line); border-radius: 999px; overflow: hidden; }
.fidel-prog-bar span { display: block; height: 100%; background: var(--gold); border-radius: 999px; transition: width .3s; }
.fidel-prog-hint { display: block; font-size: 11.5px; color: var(--muted-2); margin-top: 4px; }

/* ── selector de icono en el modal ─────────────────────────── */
/* ═══ Modal Crear/Editar recompensa — formulario rediseñado ═══ */

/* Layout vertical (override del .input-wrap horizontal global, solo en este modal) */
.cr-fields .input-wrap {
  flex-direction: column;
  align-items: stretch;
  gap: 7px;
}
.cr-fields .input-wrap > label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-2);
  letter-spacing: .01em;
}
.cr-fields .svc-estado-sel { width: 100%; }
.cr-fields .input-wrap input.has-error {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(194,65,12,.12);
  background: #fff;
}

/* Agrupaciones con título sutil */
.cr-group {
  display: flex; flex-direction: column; gap: 14px;
  padding: 15px; border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface-soft);
}
.cr-group-title {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); margin-bottom: -2px;
}

/* Vista previa en vivo */
.cr-preview { display: flex; flex-direction: column; gap: 7px; }
.cr-preview-lbl {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted);
}
.cr-preview-card {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 15px; border-radius: var(--r-md);
  border: 1px solid var(--gold);
  background:
    radial-gradient(120% 140% at 100% 0, rgba(199,147,48,.10), transparent 62%),
    var(--gold-soft);
  transition: box-shadow .2s var(--ease);
}
.cr-preview-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cr-preview-body b { font-size: 14.5px; font-weight: 600; color: var(--ink); line-height: 1.25; }
.cr-preview-body b.cr-ph { color: var(--muted-2); font-weight: 500; font-style: italic; }
.cr-preview-body small { font-size: 12.5px; color: #7a5600; }

/* Selector de icono con micro-efecto */
.cr-icon-row { display: flex; flex-wrap: wrap; gap: 8px; }
.cr-icon {
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--muted);
  cursor: pointer; transition: transform .14s var(--ease), border-color .15s, background .15s, color .15s, box-shadow .15s;
}
.cr-icon svg { width: 20px; height: 20px; }
.cr-icon:hover { border-color: var(--gold); color: var(--ink-2); transform: translateY(-2px); }
.cr-icon.active {
  border-color: var(--gold); background: var(--gold-soft); color: var(--gold);
  box-shadow: 0 0 0 3px rgba(199,147,48,.18); transform: translateY(-2px);
}
.cr-icon:active { transform: scale(.94); }

/* Condición: número + segmentado en una fila */
.cr-cond { display: flex; align-items: stretch; gap: 10px; }
.cr-cond input[type="number"] { width: 84px; flex-shrink: 0; text-align: center; }

/* Controles segmentados (unidad / tipo / estado) */
.cr-seg {
  display: inline-flex; flex: 1; padding: 4px; gap: 4px;
  background: var(--surface-soft); border: 1px solid var(--line); border-radius: 11px;
}
.cr-fields .cr-cond .cr-seg { flex: 1; }
.cr-seg-btn {
  flex: 1; padding: 8px 12px; border: none; border-radius: 8px; cursor: pointer;
  background: transparent; color: var(--muted); font-size: 13px; font-weight: 600;
  font-family: var(--font-body); white-space: nowrap;
  transition: background .18s var(--ease), color .18s var(--ease), box-shadow .18s var(--ease);
}
.cr-seg-btn:hover:not(.on) { color: var(--ink-2); }
.cr-seg-btn.on {
  background: var(--surface); color: var(--gold);
  box-shadow: 0 1px 3px rgba(0,0,0,.1);
}

.cr-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 480px) {
  .cr-cond { flex-wrap: wrap; }
  .cr-cond input[type="number"] { width: 100%; }
}

/* Responsive fidelización */
@media (max-width: 960px) {
  .fidel-camp-grid { grid-template-columns: repeat(2, 1fr); }
  .fidel-memb-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .fidel-rwd-grid  { grid-template-columns: 1fr; }
  .fidel-camp-grid { grid-template-columns: 1fr; }
  .fidel-memb-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   CONFIGURACIÓN
   ============================================================ */
.cfg-tabs {
  display: flex; flex-wrap: wrap; gap: 4px;
  margin-bottom: 20px; border-bottom: 1px solid var(--line);
}
.cfg-tab {
  border: none; background: none; padding: 10px 15px;
  font-size: 14px; font-weight: 600; color: var(--muted);
  position: relative; transition: color .15s;
}
.cfg-tab:hover { color: var(--ink); }
.cfg-tab.active { color: var(--ink); }
.cfg-tab.active::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px;
  height: 2px; background: var(--gold); border-radius: 2px;
}

.cfg-panel { display: none; }
.cfg-panel.active { display: block; animation: cfgFade .25s var(--ease); }
@keyframes cfgFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.cfg-card { max-width: 720px; }
.cfg-h { margin: 0 0 16px; font-size: 17px; font-family: var(--font-display); font-weight: 600; }
.cfg-h-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.cfg-h-row .cfg-h { margin: 0; }
.cfg-note { margin: -6px 0 18px; color: var(--muted); font-size: 13px; }
.cfg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.cfg-col-2 { grid-column: 1 / -1; }
.cfg-sublabel { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink-2); margin: 4px 0 10px; }

select.cfg-input {
  width: 100%; padding: 12px 13px; font-size: 14.5px; font-family: inherit; color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-soft);
}
select.cfg-input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(199,147,48,.16); background: #fff; }

.btn.cfg-save { width: auto; margin-top: 6px; padding: 11px 20px; }
.cfg-actions { display: flex; gap: 10px; align-items: center; }
.btn.cfg-reset { width: auto; margin-top: 6px; padding: 11px 18px; background: transparent; border: 1px solid var(--line); color: var(--ink); box-shadow: none; }
.btn.cfg-reset:hover { background: var(--surface-soft); }

.cfg-days { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.cfg-day {
  border: 1px solid var(--line); background: var(--surface-soft); color: var(--muted);
  padding: 8px 15px; border-radius: 999px; font-size: 13px; font-weight: 600; transition: all .15s;
}
.cfg-day:hover { border-color: var(--muted-2); }
.cfg-day.on { background: var(--gold); border-color: var(--gold); color: var(--on-gold); }

/* Uploader de logo */
.cfg-logo { display: flex; align-items: center; gap: 16px; }
.cfg-logo-prev {
  width: 72px; height: 72px; flex-shrink: 0; border-radius: 16px;
  border: 1px solid var(--line); background: var(--surface-soft);
  display: grid; place-items: center; overflow: hidden;
}
.cfg-logo-prev img { width: 100%; height: 100%; object-fit: cover; }
.cfg-logo-prev span { font-size: 11.5px; color: var(--muted-2); }
.cfg-logo-side { display: flex; flex-direction: column; gap: 8px; }
.cfg-logo-btns { display: flex; align-items: center; gap: 12px; }
.cfg-logo-btns .cfg-reset { margin-top: 0; }
.cfg-logo-del {
  border: none; background: none; cursor: pointer; padding: 0;
  color: var(--red); font-size: 13px; font-weight: 600; font-family: var(--font-body);
}
.cfg-logo-del:hover { text-decoration: underline; }
.cfg-logo-hint { font-size: 12px; color: var(--muted); }

.cfg-color { display: flex; align-items: center; gap: 12px; }
.cfg-color input[type=color] {
  width: 52px; height: 40px; padding: 2px; border: 1px solid var(--line);
  border-radius: 10px; background: none; cursor: pointer;
}
.cfg-hex-in {
  width: 96px; padding: 9px 10px; font-family: monospace; font-size: 13.5px; text-transform: uppercase;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-soft); color: var(--ink-2);
}
.cfg-hex-in:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(199,147,48,.16); background: #fff; }

/* Paletas predefinidas */
.cfg-presets { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }
.cfg-preset {
  display: flex; align-items: center; gap: 9px; padding: 7px 13px 7px 8px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--surface-soft);
  font-size: 13px; font-weight: 600; color: var(--ink-2); transition: all .15s;
}
.cfg-preset:hover { border-color: var(--muted-2); }
.cfg-preset.active { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(199,147,48,.20); color: var(--ink); }
.cfg-preset-sw { display: inline-flex; }
.cfg-preset-sw i { width: 16px; height: 16px; border-radius: 50%; display: block; border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--line); }
.cfg-preset-sw i:last-child { margin-left: -7px; }

/* Aviso de contraste */
.cfg-warn {
  display: flex; flex-direction: column; gap: 4px;
  background: var(--red-soft); color: var(--red); border-radius: var(--r-sm);
  padding: 10px 13px; font-size: 12.5px; font-weight: 500; margin-bottom: 18px;
}
.cfg-warn[hidden] { display: none; }

/* Vista previa en vivo */
.cfg-preview {
  display: grid; grid-template-columns: 152px 1fr; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--r-md); margin-bottom: 22px;
  --pp: var(--gold); --ps: var(--sidebar); --pon: #161618;
}
.cfgp-side { background: var(--ps); padding: 14px 12px; display: flex; flex-direction: column; gap: 6px; }
.cfgp-brand { color: #fff; font-family: var(--font-display); font-weight: 600; font-size: 16px; margin-bottom: 8px; }
.cfgp-item {
  display: flex; align-items: center; gap: 8px; position: relative;
  color: #c9c9cf; font-size: 12.5px; font-weight: 500; padding: 7px 9px; border-radius: 8px;
}
.cfgp-item.active { background: rgba(255,255,255,.07); color: #fff; }
.cfgp-bar { position: absolute; left: -12px; top: 7px; bottom: 7px; width: 3px; border-radius: 0 3px 3px 0; background: var(--pp); }
.cfgp-badge { margin-left: auto; background: var(--pp); color: var(--pon); font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 999px; }
.cfgp-main { background: var(--surface); padding: 18px 16px; display: flex; flex-direction: column; gap: 14px; justify-content: center; }
.cfgp-btn { align-self: flex-start; background: var(--pp); color: var(--pon); font-size: 13px; font-weight: 600; padding: 9px 16px; border-radius: var(--r-sm); }
.cfgp-row { display: flex; align-items: center; gap: 12px; }
.cfgp-chip { background: var(--pp); color: var(--pon); font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.cfgp-link { color: var(--pp); font-size: 13px; font-weight: 600; }

.cfg-mods { display: flex; flex-direction: column; margin-bottom: 20px; }
.cfg-mod {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 4px; border-bottom: 1px solid var(--line);
  font-size: 14.5px; font-weight: 500; color: var(--ink); cursor: default;
}
.cfg-mod:last-child { border-bottom: none; }
.cfg-mod small { color: var(--muted-2); font-weight: 500; }
.cfg-mod.locked { color: var(--muted); }
.switch {
  width: 42px; height: 24px; border-radius: 999px; background: var(--muted-2);
  position: relative; cursor: pointer; transition: background .18s; flex: 0 0 auto;
}
.switch::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px;
  border-radius: 50%; background: #fff; transition: transform .18s;
}
.switch.on { background: var(--gold); }
.switch.on::after { transform: translateX(18px); }
.cfg-mod.locked .switch { opacity: .55; cursor: not-allowed; }

.cfg-suc-list { display: flex; flex-direction: column; gap: 14px; margin-bottom: 18px; }
.cfg-suc {
  border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 16px 16px 2px; background: var(--surface-soft); position: relative;
}
.cfg-suc .cfg-grid { margin: 0; }
.cfg-suc-del {
  position: absolute; top: 12px; right: 12px; border: none; background: none;
  color: var(--muted-2); font-size: 14px; line-height: 1;
  width: 28px; height: 28px; border-radius: 6px; transition: all .15s;
}
.cfg-suc-del:hover { background: var(--red-soft); color: var(--red); }
.cfg-suc-del:disabled { opacity: .3; cursor: not-allowed; }

.toast {
  position: fixed; bottom: 26px; left: 50%; transform: translate(-50%, 20px);
  background: var(--ink); color: #fff; padding: 12px 22px; border-radius: 999px;
  font-size: 14px; font-weight: 500; box-shadow: var(--shadow-lg);
  opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; z-index: 200;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---- Mi perfil ---- */
.pf-header { display: flex; align-items: center; gap: 18px; max-width: 720px; margin-bottom: 20px; }
.pf-avatar {
  width: 72px; height: 72px; border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center; color: #fff;
  font-family: var(--font-display); font-weight: 600; font-size: 26px;
  border: 2px solid var(--gold);
}
.pf-id { flex: 1; min-width: 0; }
.pf-id h3 { margin: 0; font-size: 20px; font-family: var(--font-display); font-weight: 600; }
.pf-org { margin: 5px 0 0; color: var(--muted); font-size: 13px; }
.pf-rol {
  display: inline-block; background: var(--gold-soft); color: #161618;
  font-size: 11.5px; font-weight: 700; padding: 2px 10px; border-radius: 999px;
  border: 1px solid var(--gold); margin-top: 5px;
}
.btn.pf-photo { flex: 0 0 auto; }

.pf-rolcard { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.pf-rolcard-h { font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.pf-rolcard-body { margin-top: 8px; }
.pf-rolcard-body p { margin: 8px 0 0; color: var(--muted); font-size: 13.5px; }

@media (max-width: 640px) {
  .cfg-grid { grid-template-columns: 1fr; }
  .cfg-preview { grid-template-columns: 1fr; }
  .pf-header { flex-wrap: wrap; }
}

/* ============================================================
   PORTAL DEL CLIENTE  (mobile-first)
   ============================================================ */
#clientView { background: var(--bg); }
#clientView.active { display: flex; flex-direction: column; min-height: 100vh; }
.cli-backdrop { display: none; }

/* ---- Sidebar: oculto en móvil ---- */
.cli-sidebar { display: none; }

/* ---- Columna principal ---- */
.cli-main {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
  padding: 18px 16px 90px;   /* espacio para el bottom-nav */
}

/* Top: saludo + sucursal */
.cli-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-bottom: 18px;
}
.cli-greet { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cli-avatar {
  width: 46px; height: 46px; border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center; font-family: var(--font-display); font-weight: 600;
  font-size: 16px; color: #161618; background: var(--gold-soft); border: 2px solid var(--gold);
}
.cli-greet h1 { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 22px; line-height: 1.1; }
.cli-greet p { margin: 2px 0 0; color: var(--muted); font-size: 13px; }
.cli-branch {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 8px 12px; box-shadow: var(--shadow);
}
.cli-branch-ico { width: 30px; height: 30px; border-radius: 8px; overflow: hidden; flex: 0 0 auto; background: var(--ink); }
.cli-branch-ico img { width: 100%; height: 100%; object-fit: cover; }
.cli-branch b { font-size: 13.5px; display: block; }
.cli-branch small { color: var(--muted); font-size: 12px; }
.cli-branch svg { color: var(--muted-2); }

/* Grids */
.cli-grid { display: grid; gap: 16px; margin-bottom: 16px; }
.cli-grid-3, .cli-grid-2b { grid-template-columns: 1fr; }

/* Tarjetas */
.cli-card { display: flex; flex-direction: column; }
.cli-card-soft { background: linear-gradient(180deg, var(--gold-soft), var(--surface) 62%); }
.cli-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.cli-card-head h3 { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 16px; }
.cli-head-between { justify-content: space-between; }
.cli-card-title { margin: 2px 0 6px; font-size: 16px; font-weight: 600; color: var(--ink); }
.cli-muted { color: var(--muted); font-size: 13.5px; margin: 0 0 16px; line-height: 1.5; }
.cli-mt-auto { margin-top: auto; }
.cli-btn { width: 100%; margin-top: auto; }
.cli-btn-sm { padding: 8px; font-size: 13px; margin-top: 8px; }

/* Icono cuadrado suave */
.cli-ico { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; flex: 0 0 auto; }
.cli-ico svg { width: 20px; height: 20px; }
.cli-ico.gold   { background: var(--gold-soft);   color: var(--gold); }
.cli-ico.violet { background: var(--purple-soft); color: var(--purple); }
.cli-ico.green  { background: var(--green-soft);  color: var(--green); }

/* Próxima cita */
.cli-appt { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.cli-appt-av {
  width: 52px; height: 52px; border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center; font-weight: 600; color: #fff; background: var(--gold);
  font-family: var(--font-display); font-size: 17px;
}
.cli-appt b { font-size: 15px; display: block; }
.cli-appt small { color: var(--muted); font-size: 13px; }
.cli-appt-meta { list-style: none; padding: 0; margin: 0 0 16px; display: flex; flex-direction: column; gap: 8px; }
.cli-appt-meta li { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--ink-2); }
.cli-appt-meta svg { width: 16px; height: 16px; color: var(--muted-2); flex: 0 0 auto; }

/* Beneficio: anillo de progreso */
.cli-benef { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.cli-ring {
  width: 84px; height: 84px; border-radius: 50%; flex: 0 0 auto;
  background: conic-gradient(var(--gold) 0 60%, var(--line) 60% 100%);
  display: grid; place-items: center;
}
.cli-ring-ico { width: 62px; height: 62px; border-radius: 50%; background: var(--surface); display: grid; place-items: center; color: var(--gold); }
.cli-ring-ico svg { width: 26px; height: 26px; }
.cli-benef-txt { font-size: 14px; color: var(--ink-2); line-height: 1.5; }
.cli-benef-txt b { color: var(--ink); font-size: 16px; }

/* Enlaces dorados */
.cli-link { color: var(--gold); font-weight: 600; font-size: 13.5px; cursor: pointer; text-decoration: none; }
.cli-link:hover { text-decoration: underline; }
.cli-center { display: block; text-align: center; margin-top: 14px; }

/* Historial */
.cli-hist-row { display: flex; align-items: center; gap: 12px; padding: 10px; border: 1px solid var(--line); border-radius: var(--r-sm); margin-bottom: 10px; }
.cli-hist-thumb { width: 50px; height: 50px; border-radius: 8px; object-fit: cover; flex: 0 0 auto; }
.cli-hist-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cli-hist-info b { font-size: 14px; }
.cli-hist-info small { color: var(--muted); font-size: 12.5px; }
.cli-hist-date { display: flex; align-items: center; gap: 6px; color: var(--muted-2); font-size: 11.5px; margin-top: 2px; }
.cli-hist-date svg { width: 13px; height: 13px; }

/* Estrellas */
.cli-stars { display: flex; gap: 8px; margin-bottom: 16px; }
.cli-stars button { background: none; border: none; font-size: 30px; line-height: 1; color: var(--line); transition: color .12s, transform .12s; }
.cli-stars button:hover { transform: scale(1.12); }
.cli-stars button.on { color: var(--gold); }

/* Servicios destacados */
.cli-svc-grid { margin-bottom: 0; }
.cli-svc { border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: var(--surface); }
.cli-svc img { width: 100%; height: 130px; object-fit: cover; display: block; }
.cli-svc-body { padding: 12px 14px; display: flex; flex-direction: column; }
.cli-svc-body b { font-size: 14.5px; }
.cli-price { color: var(--gold); font-weight: 700; font-size: 15px; margin-top: 2px; }

/* Catálogo de servicios (cliente) */
.cli-cat-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px;
}
.cli-cat-card {
  border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--surface);
  display: flex; flex-direction: column;
  transition: transform .16s var(--ease), box-shadow .16s var(--ease), border-color .16s var(--ease);
  animation: cliCatIn .3s var(--ease) both;
}
.cli-cat-card:hover { transform: translateY(-3px); border-color: var(--gold); box-shadow: 0 12px 26px -14px rgba(0,0,0,.3); }
@keyframes cliCatIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.cli-cat-img { position: relative; height: 150px; }
.cli-cat-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cli-cat-dur {
  position: absolute; left: 10px; bottom: 10px;
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(15,15,20,.72); color: #fff; backdrop-filter: blur(2px);
  font-size: 11.5px; font-weight: 600; padding: 4px 9px; border-radius: 999px;
}
.cli-cat-dur svg { width: 12px; height: 12px; }
.cli-cat-body { padding: 13px 15px 15px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.cli-cat-body b { font-size: 15px; color: var(--ink); }
.cli-cat-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; }
.cli-cat-price { color: var(--gold); font-weight: 700; font-size: 17px; font-family: var(--font-display); }
.cli-cat-btn { width: auto; margin-top: 0; padding: 8px 16px; font-size: 13px; }
@media (max-width: 480px) {
  .cli-cat-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .cli-cat-img { height: 120px; }
  .cli-cat-btn { padding: 8px 12px; }
}

/* Referral */
.cli-referral { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; background: linear-gradient(100deg, var(--gold-soft), var(--surface)); }
.cli-referral-txt { flex: 1; min-width: 180px; }
.cli-referral-txt b { font-family: var(--font-display); font-size: 17px; }
.cli-referral-txt p { margin: 4px 0 0; color: var(--ink-2); font-size: 13.5px; }
.cli-referral .cli-btn { width: auto; margin-top: 0; }

/* Footer */
.cli-foot { text-align: center; color: var(--muted-2); font-size: 12px; padding: 20px 0 8px; margin-top: auto; }

/* Páginas "próximamente" */
.cli-page { display: none; }
.cli-page.active { display: block; }
.cli-soon { text-align: center; padding: 60px 20px; }
.cli-soon-ico { width: 64px; height: 64px; border-radius: 18px; background: var(--gold-soft); color: var(--gold); display: grid; place-items: center; margin: 0 auto 16px; }
.cli-soon-ico svg { width: 30px; height: 30px; }
.cli-soon h3 { font-family: var(--font-display); font-weight: 600; font-size: 20px; margin: 0 0 6px; }
.cli-soon p { color: var(--muted); font-size: 14px; max-width: 360px; margin: 0 auto 14px; }
.cli-soon-tag { display: inline-block; background: var(--gold-soft); color: var(--gold); border: 1px solid var(--gold); font-size: 11.5px; font-weight: 700; padding: 3px 12px; border-radius: 999px; }

/* ---- Bottom nav (móvil) ---- */
.cli-bottomnav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
  display: flex; background: var(--sidebar); border-top: 1px solid var(--sidebar-line);
  padding: 8px 4px calc(8px + env(safe-area-inset-bottom, 0px));
}
.cli-bn-item {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: none; border: none; color: #8a8a92; font-size: 10.5px; font-weight: 600; padding: 4px 2px;
}
.cli-bn-item svg { width: 21px; height: 21px; }
.cli-bn-item.active { color: var(--gold); }

/* ============== Escritorio ============== */
@media (min-width: 880px) {
  #clientView.active { flex-direction: row; align-items: stretch; }
  .cli-bottomnav { display: none; }

  .cli-sidebar {
    display: flex; flex-direction: column;
    width: 250px; flex: 0 0 250px;
    background: var(--sidebar); color: #c9c9cf;
    padding: 22px 16px; position: sticky; top: 0; height: 100vh; overflow-y: auto;
  }
  .cli-brand { display: flex; align-items: center; gap: 12px; margin: 4px 6px 26px; }
  .cli-brand-badge { width: 44px; height: 44px; border-radius: 12px; overflow: hidden; background: var(--ink); flex: 0 0 auto; }
  .cli-brand-badge img { width: 100%; height: 100%; object-fit: cover; }
  .cli-brand-name small { display: block; font-size: 10px; color: var(--muted-2); letter-spacing: .08em; text-transform: uppercase; }
  .cli-brand-name strong { font-size: 20px; color: #fff; font-family: var(--font-display); }

  .cli-nav { display: flex; flex-direction: column; gap: 3px; }
  .cli-nav-item {
    display: flex; align-items: center; gap: 13px; padding: 11px 12px; border-radius: 10px;
    color: #b7b7bf; border: none; background: none; width: 100%; text-align: left;
    font-size: 14.5px; font-weight: 500; position: relative; transition: background .15s, color .15s;
  }
  .cli-nav-item svg { width: 19px; height: 19px; flex: 0 0 auto; }
  .cli-nav-item:hover { background: var(--sidebar-soft); color: #fff; }
  .cli-nav-item.active { background: linear-gradient(90deg, rgba(199,147,48,.22), rgba(199,147,48,.06)); color: #fff; }
  .cli-nav-item.active::before { content: ""; position: absolute; left: -16px; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: var(--gold); }

  .cli-side-foot { margin-top: auto; padding-top: 16px; }
  .cli-help { background: var(--sidebar-soft); border-radius: var(--r-md); padding: 12px; margin-bottom: 12px; }
  .cli-help-ico { color: var(--gold); margin-bottom: 8px; }
  .cli-help-ico svg { width: 22px; height: 22px; }
  .cli-help-txt b { display: block; color: #fff; font-size: 13px; }
  .cli-help-txt small { color: var(--muted-2); font-size: 11.5px; }
  .cli-wa { display: block; text-align: center; margin-top: 10px; background: var(--gold-soft); color: #161618; font-weight: 600; font-size: 13px; padding: 8px; border-radius: 8px; text-decoration: none; }
  .cli-wa:hover { background: var(--gold); }
  .cli-logout { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px; border: none; background: none; color: #9a9aa2; font-size: 13.5px; border-top: 1px solid var(--sidebar-line); }
  .cli-logout svg { width: 18px; height: 18px; }
  .cli-logout:hover { color: #fff; }

  .cli-main { padding: 26px 30px; }
  .cli-grid-3  { grid-template-columns: 1.4fr 1fr 1fr; }
  .cli-grid-2b { grid-template-columns: 1.5fr 1fr; }
  .cli-svc-grid { grid-template-columns: 1fr 1fr 1fr; }
}

/* ---- Flujo de reserva (wizard) ---- */
.rsv-overlay { position: fixed; inset: 0; z-index: 100; background: rgba(16,16,20,.5); display: flex; }
.rsv-overlay[hidden] { display: none; }
.rsv-sheet { background: var(--surface); width: 100%; display: flex; flex-direction: column; max-height: 100%; }
.rsv-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.rsv-icon-btn { width: 36px; height: 36px; border-radius: 10px; border: none; background: var(--surface-soft); color: var(--ink-2); display: grid; place-items: center; flex: 0 0 auto; }
.rsv-icon-btn:hover { background: var(--line); }
.rsv-icon-btn svg { width: 18px; height: 18px; }
.rsv-progress { flex: 1; }
.rsv-progress span { font-size: 12px; font-weight: 600; color: var(--muted); }
.rsv-bar { height: 5px; background: var(--line); border-radius: 999px; margin-top: 5px; overflow: hidden; }
.rsv-bar span { display: block; height: 100%; background: var(--gold); border-radius: 999px; transition: width .3s; }
.rsv-body { flex: 1; overflow-y: auto; padding: 20px 16px; }
.rsv-title { font-family: var(--font-display); font-weight: 600; font-size: 20px; margin: 0 0 4px; }
.rsv-sub { color: var(--muted); font-size: 13px; margin: 0 0 16px; }
.rsv-foot { padding: 14px 16px calc(14px + env(safe-area-inset-bottom,0px)); border-top: 1px solid var(--line); }
.rsv-foot .btn { width: 100%; }
.rsv-foot[hidden] { display: none; }

.rsv-list { display: flex; flex-direction: column; gap: 10px; }
.rsv-opt { display: flex; align-items: center; gap: 13px; width: 100%; text-align: left; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); transition: border-color .15s, box-shadow .15s; }
.rsv-opt:hover { border-color: var(--gold); box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.rsv-opt-img { width: 54px; height: 54px; border-radius: 10px; object-fit: cover; flex: 0 0 auto; }
.rsv-opt-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rsv-opt-main b { font-size: 14.5px; }
.rsv-opt-main small { color: var(--muted); font-size: 12.5px; }
.rsv-opt-price { font-weight: 700; color: var(--gold); font-size: 15px; }
.rsv-barb-av { width: 46px; height: 46px; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center; color: #fff; font-weight: 600; font-size: 14px; }
.rsv-barb-av.any { background: var(--gold-soft); color: var(--gold); }
.rsv-barb-av.any svg { width: 22px; height: 22px; }

.rsv-dates { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 18px; }
.rsv-date { flex: 0 0 auto; width: 58px; padding: 10px 0; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); display: flex; flex-direction: column; align-items: center; gap: 3px; }
.rsv-date small { font-size: 11px; color: var(--muted); text-transform: capitalize; }
.rsv-date b { font-size: 17px; font-family: var(--font-display); }
.rsv-date.sel { background: var(--gold); border-color: var(--gold); }
.rsv-date.sel small, .rsv-date.sel b { color: var(--on-gold); }

.rsv-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.rsv-slots-msg { grid-column: 1 / -1; text-align: center; color: var(--muted); font-size: 13.5px; padding: 18px 0; margin: 0; }
.rsv-slot { padding: 11px 0; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.rsv-slot:hover:not(:disabled) { border-color: var(--gold); }
.rsv-slot.sel { background: var(--gold); border-color: var(--gold); color: var(--on-gold); }
.rsv-slot:disabled { opacity: .4; text-decoration: line-through; cursor: not-allowed; }

.rsv-summary { border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.rsv-sum-row { display: flex; justify-content: space-between; align-items: center; padding: 13px 15px; border-bottom: 1px solid var(--line); font-size: 14px; }
.rsv-sum-row:last-child { border-bottom: none; }
.rsv-sum-row span { color: var(--muted); }
.rsv-sum-row b { color: var(--ink); }
.rsv-sum-total { background: var(--surface-soft); }
.rsv-sum-total b { color: var(--gold); font-size: 16px; }
.rsv-policy { font-size: 12.5px; color: var(--muted); margin: 14px 2px 0; text-align: center; }

.rsv-done { text-align: center; padding: 24px 8px; }
.rsv-done h2 { font-family: var(--font-display); font-weight: 600; font-size: 22px; margin: 14px 0 6px; }
.rsv-done > p { color: var(--muted); font-size: 14px; margin: 0 0 20px; }
.rsv-done .rsv-summary { text-align: left; margin-bottom: 18px; }
.rsv-cal { width: 100%; }

@media (min-width: 880px) {
  .rsv-overlay { padding: 30px; align-items: center; justify-content: center; }
  .rsv-sheet { max-width: 460px; max-height: 90vh; border-radius: var(--r-lg); overflow: hidden; }
}

/* ---- Próxima cita: cuerpo dinámico + estado vacío ---- */
.cli-cita-body { display: flex; flex-direction: column; flex: 1; }
.cli-cita-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 6px 0; margin-top: auto; }
.cli-cita-empty-ico { width: 46px; height: 46px; border-radius: 12px; background: var(--gold-soft); color: var(--gold); display: grid; place-items: center; }
.cli-cita-empty-ico svg { width: 22px; height: 22px; }
.cli-cita-empty p { color: var(--muted); font-size: 14px; margin: 0; }
.cli-cita-empty .cli-btn { margin-top: 0; }
.cli-mas-citas { display: block; text-align: center; margin-top: 12px; color: var(--gold); font-size: 12.5px; font-weight: 600; cursor: pointer; text-decoration: none; }
.cli-mas-citas:hover { text-decoration: underline; }

/* ---- Detalle de la cita (sheet) ---- */
.cita-head { display: flex; align-items: center; justify-content: space-between; padding: 16px; border-bottom: 1px solid var(--line); }
.cita-head h2 { font-family: var(--font-display); font-weight: 600; font-size: 18px; margin: 0; }
.cita-estado { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; padding: 4px 12px; border-radius: 999px; }
.cita-estado::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.cita-estado.ok   { background: var(--green-soft); color: var(--green); }
.cita-estado.late { background: var(--red-soft); color: var(--red); }
.cita-hero { display: flex; align-items: center; gap: 14px; margin: 16px 0; }
.cita-av { width: 56px; height: 56px; font-size: 18px; }
.cita-hero b { font-size: 17px; display: block; }
.cita-hero small { color: var(--muted); font-size: 13.5px; }
.cita-sum { margin-bottom: 16px; }

.cita-suc { border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px; margin-bottom: 16px; }
.cita-suc-info { display: flex; align-items: flex-start; gap: 10px; }
.cita-suc-info > svg { width: 20px; height: 20px; color: var(--gold); flex: 0 0 auto; margin-top: 2px; }
.cita-suc-info b { font-size: 14.5px; display: block; }
.cita-suc-info small { color: var(--muted); font-size: 12.5px; }
.cita-suc-acts { display: flex; gap: 8px; margin-top: 12px; }
.cita-suc-acts a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 10px 4px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-soft); color: var(--ink-2); font-size: 12px; font-weight: 600; text-decoration: none; transition: border-color .15s, color .15s; }
.cita-suc-acts a:hover { border-color: var(--gold); color: var(--gold); }
.cita-suc-acts svg { width: 18px; height: 18px; }

.cita-tip { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); background: var(--gold-soft); border-radius: var(--r-sm); padding: 10px 12px; margin: 0 0 18px; }
.cita-tip svg { width: 17px; height: 17px; color: var(--gold); flex: 0 0 auto; }

.cita-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.cita-actions .btn { width: 100%; margin: 0; }
.cita-danger { color: var(--red); border-color: var(--red-soft); }
.cita-danger:hover { background: var(--red-soft); border-color: var(--red); }
.cita-cal { width: 100%; margin: 0 0 4px; }

/* ---- Modal de confirmación propio (reemplaza confirm() nativo) ---- */
.confirm-overlay { position: fixed; inset: 0; z-index: 300; background: rgba(16,16,20,.5); display: flex; align-items: center; justify-content: center; padding: 24px; }
.confirm-overlay[hidden] { display: none; }
.confirm-box { background: var(--surface); border-radius: var(--r-lg); padding: 26px 24px 22px; max-width: 380px; width: 100%; text-align: center; box-shadow: var(--shadow-lg); animation: cfgFade .2s var(--ease); }
.confirm-ico { width: 54px; height: 54px; border-radius: 15px; background: var(--gold-soft); color: var(--gold); display: grid; place-items: center; margin: 0 auto 16px; }
.confirm-ico svg { width: 26px; height: 26px; }
.confirm-ico.danger { background: var(--red-soft); color: var(--red); }
.confirm-box h3 { font-family: var(--font-display); font-weight: 600; font-size: 19px; margin: 0 0 8px; }
.confirm-box p { color: var(--muted); font-size: 14px; line-height: 1.5; margin: 0 0 22px; }
.confirm-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.confirm-btns .btn { width: 100%; margin: 0; }
.btn-danger { background: var(--red); color: #fff; box-shadow: 0 6px 16px rgba(194,65,12,.28); }
.btn-danger:hover { background: #a53309; }

/* ---- Calificar servicio ---- */
.cli-rate-body { display: flex; flex-direction: column; flex: 1; }
.cli-rate-ctx { color: var(--ink-2); font-size: 13px; margin: 0 0 12px; font-weight: 500; }
.cli-rate-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; margin: auto 0; padding: 8px 0; }
.cli-rate-empty-ico { width: 46px; height: 46px; border-radius: 50%; background: var(--green-soft); color: var(--green); display: grid; place-items: center; }
.cli-rate-empty-ico svg { width: 22px; height: 22px; }
.cli-rate-empty p { color: var(--muted); font-size: 13.5px; margin: 0; max-width: 240px; }

.rate-visita { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-soft); margin-bottom: 18px; }
.rate-visita-ico { width: 40px; height: 40px; border-radius: 10px; background: var(--gold-soft); color: var(--gold); display: grid; place-items: center; flex: 0 0 auto; }
.rate-visita-ico svg { width: 20px; height: 20px; }
.rate-visita b { font-size: 14.5px; display: block; }
.rate-visita small { color: var(--muted); font-size: 12.5px; }

.rate-stars { display: flex; justify-content: center; gap: 10px; margin: 4px 0 10px; }
.rate-stars button { background: none; border: none; font-size: 40px; line-height: 1; color: var(--line); transition: color .12s, transform .12s; }
.rate-stars button:hover { transform: scale(1.12); }
.rate-stars button.on { color: var(--gold); }
.rate-prompt { text-align: center; font-size: 14px; font-weight: 600; color: var(--ink-2); margin: 0 0 20px; min-height: 20px; }

.rate-block { margin-bottom: 18px; }
.rate-label { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink-2); margin-bottom: 9px; }
.rate-label small { color: var(--muted-2); font-weight: 500; }
.rate-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.rate-chip { border: 1px solid var(--line); background: var(--surface-soft); color: var(--muted); padding: 7px 13px; border-radius: 999px; font-size: 13px; font-weight: 600; transition: border-color .15s, background .15s, color .15s; }
.rate-chip:hover { border-color: var(--muted-2); }
.rate-chip.on { background: var(--gold-soft); border-color: var(--gold); color: var(--gold); }
#rateComent { width: 100%; padding: 11px 12px; font-family: inherit; font-size: 14px; color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-soft); resize: vertical; }
#rateComent:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(199,147,48,.16); background: #fff; }

/* ---- Mis citas ---- */
.cli-page-head { margin-bottom: 16px; }
.cli-page-head h2 { font-family: var(--font-display); font-weight: 600; font-size: 22px; margin: 0; }
.cli-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 18px; }
.cli-tab { border: none; background: none; padding: 10px 16px; font-size: 14px; font-weight: 600; color: var(--muted); position: relative; }
.cli-tab:hover { color: var(--ink); }
.cli-tab.active { color: var(--ink); }
.cli-tab.active::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px; background: var(--gold); border-radius: 2px; }
.cli-citas-list { display: flex; flex-direction: column; gap: 12px; }

.cli-cita-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow); }
.cli-cita-prox { display: flex; align-items: center; gap: 13px; width: 100%; text-align: left; padding: 15px; cursor: pointer; transition: box-shadow .15s, border-color .15s; }
.cli-cita-prox:hover { border-color: var(--gold); box-shadow: 0 2px 10px rgba(0,0,0,.07); }
.cli-cita-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cli-cita-info b { font-size: 15px; }
.cli-cita-info small { color: var(--muted); font-size: 12.5px; }
.cli-cita-when { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); font-size: 12.5px; margin-top: 4px; }
.cli-cita-when svg { width: 14px; height: 14px; color: var(--muted-2); }
.cli-cita-right { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: 0 0 auto; }
.cli-chev { color: var(--muted-2); font-size: 22px; line-height: 1; }

.cli-cita-pasada { padding: 15px; }
.cli-cita-main { display: flex; align-items: center; gap: 13px; cursor: pointer; }
.cli-cita-acts { display: flex; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.cli-btn-xs { flex: 1; width: auto; margin: 0; padding: 8px 10px; font-size: 12.5px; }
.cli-btn-rate { color: var(--gold); border-color: var(--gold-soft); }
.cli-btn-rate:hover { background: var(--gold-soft); }

.cli-empty-box { text-align: center; padding: 40px 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); }
.cli-empty-ico { width: 54px; height: 54px; border-radius: 15px; background: var(--gold-soft); color: var(--gold); display: grid; place-items: center; margin: 0 auto 14px; }
.cli-empty-ico svg { width: 26px; height: 26px; }
.cli-empty-box p { color: var(--muted); font-size: 14px; margin: 0 0 16px; }
.cli-empty-btn { width: auto; margin: 0; padding: 11px 22px; }

.cita-actions-1 { grid-template-columns: 1fr; }

/* ---- Beneficios ---- */
.cli-sec-title { font-family: var(--font-display); font-weight: 600; font-size: 16px; margin: 22px 0 12px; }
.cli-sec-title:first-child { margin-top: 0; }

.cli-prog-card { display: flex; align-items: center; gap: 20px; }
.cli-prog-ring { width: 96px; height: 96px; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center; }
.cli-prog-ring-inner { width: 72px; height: 72px; border-radius: 50%; background: var(--surface); display: grid; place-items: center; }
.cli-prog-ring-inner b { font-family: var(--font-display); font-size: 21px; color: var(--gold); }
.cli-prog-kicker { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.cli-prog-txt h3 { font-family: var(--font-display); font-weight: 600; font-size: 19px; margin: 4px 0 2px; }
.cli-prog-txt p { color: var(--muted); font-size: 13.5px; margin: 0; }
.cli-prog-txt p b { color: var(--ink); }

.cli-premios { display: flex; flex-direction: column; gap: 10px; }
.cli-premio { display: flex; align-items: center; gap: 13px; padding: 14px; border: 1px solid var(--gold); border-radius: var(--r-md); background: linear-gradient(100deg, var(--gold-soft), var(--surface)); }
.cli-premio-ico { width: 42px; height: 42px; border-radius: 11px; background: var(--surface); color: var(--gold); display: grid; place-items: center; flex: 0 0 auto; }
.cli-premio-ico svg { width: 21px; height: 21px; }
.cli-premio-body { flex: 1; min-width: 0; }
.cli-premio-body b { font-size: 14.5px; display: block; }
.cli-premio-body small { color: var(--ink-2); font-size: 12.5px; }
.cli-premio-badge { font-size: 11px; font-weight: 700; color: var(--on-gold); background: var(--gold); padding: 3px 10px; border-radius: 999px; flex: 0 0 auto; }
.cli-benef-empty { text-align: center; color: var(--muted); font-size: 13.5px; padding: 24px; background: var(--surface); border: 1px dashed var(--line); border-radius: var(--r-md); }

.cli-cat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.cli-cat-row { display: flex; align-items: center; gap: 13px; padding: 14px 15px; border-bottom: 1px solid var(--line); }
.cli-cat-row:last-child { border-bottom: none; }
.cli-cat-ico { width: 38px; height: 38px; border-radius: 10px; background: var(--gold-soft); color: var(--gold); display: grid; place-items: center; flex: 0 0 auto; }
.cli-cat-ico svg { width: 19px; height: 19px; }
.cli-cat-body { flex: 1; min-width: 0; }
.cli-cat-body b { font-size: 14px; display: block; }
.cli-cat-body small { color: var(--muted); font-size: 12.5px; }

.cli-promos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.cli-promo { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 16px 10px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); }
.cli-promo-ico { color: var(--gold); }
.cli-promo-ico svg { width: 24px; height: 24px; }
.cli-promo b { font-size: 13px; }
.cli-promo small { color: var(--muted-2); font-size: 11px; }

.cli-nivel { display: flex; align-items: center; gap: 14px; }
.cli-nivel-ico { width: 48px; height: 48px; border-radius: 12px; background: var(--surface); color: var(--gold); display: grid; place-items: center; flex: 0 0 auto; box-shadow: var(--shadow); }
.cli-nivel-ico svg { width: 24px; height: 24px; }
.cli-nivel b { font-size: 15px; display: block; font-family: var(--font-display); }
.cli-nivel small { color: var(--muted); font-size: 12.5px; }

.cli-ref-txt { font-size: 13.5px; color: var(--ink-2); line-height: 1.5; margin: 0 0 14px; }
.cli-ref-txt b { color: var(--ink); }
.cli-ref-code { display: flex; align-items: center; gap: 10px; border: 1px dashed var(--gold); border-radius: var(--r-sm); padding: 10px 14px; margin-bottom: 12px; background: var(--gold-soft); }
.cli-ref-code span { flex: 1; font-family: monospace; font-weight: 700; font-size: 17px; letter-spacing: .1em; color: var(--ink); }
.cli-ref-code .cli-btn-xs { flex: 0 0 auto; width: auto; }
.cli-ref .cli-btn { margin-top: 0; }
.cli-ref-count { text-align: center; font-size: 12.5px; color: var(--muted); margin: 12px 0 0; }
.cli-ref-share { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cli-ref-share .cli-btn { margin: 0; text-align: center; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
@media (max-width: 380px) { .cli-ref-share { grid-template-columns: 1fr; } }

@media (max-width: 520px) { .cli-promos { grid-template-columns: repeat(3, 1fr); } }

/* ---- Uso de beneficios ---- */
.cli-premio-btn { flex: 0 0 auto; width: auto; padding: 7px 16px; font-size: 12.5px; margin: 0; }
.cli-premio-uso { border-color: var(--line); background: var(--surface-soft); }
.cli-premio-quitar { flex: 0 0 auto; border: none; background: none; color: var(--red); font-size: 12.5px; font-weight: 600; }
.cli-premio-quitar:hover { text-decoration: underline; }

.rsv-precio-old { color: var(--muted-2); font-weight: 500; margin-right: 4px; }
.rsv-benef-applied { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--gold); border-radius: var(--r-md); background: var(--gold-soft); margin-top: 14px; }
.rsv-benef-ico { width: 38px; height: 38px; border-radius: 10px; background: var(--surface); color: var(--gold); display: grid; place-items: center; flex: 0 0 auto; }
.rsv-benef-ico svg { width: 19px; height: 19px; }
.rsv-benef-txt { flex: 1; min-width: 0; }
.rsv-benef-txt b { font-size: 14px; display: block; }
.rsv-benef-txt small { color: var(--ink-2); font-size: 12px; }
.rsv-benef-remove { flex: 0 0 auto; border: none; background: none; color: var(--red); font-weight: 600; font-size: 12.5px; }
.rsv-benef-remove:hover { text-decoration: underline; }
.rsv-benef-pick { margin-top: 16px; }
.rsv-benef-pick .rate-label { margin-bottom: 10px; }
.rsv-benef-opt { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); margin-bottom: 8px; transition: border-color .15s; }
.rsv-benef-opt:hover { border-color: var(--gold); }
.rsv-benef-opt:last-child { margin-bottom: 0; }
.rsv-benef-plus { flex: 0 0 auto; color: var(--gold); font-weight: 700; font-size: 12.5px; }

.cita-benef-tag { color: var(--gold); }
.benef-pick-lead { font-size: 14px; color: var(--ink-2); margin: 0 0 16px; }
.benef-pick-lead b { color: var(--ink); }

/* ---- Mi experiencia ---- */
.cli-exp-resumen { display: flex; align-items: center; gap: 20px; margin-bottom: 6px; }
.cli-exp-num { text-align: center; flex: 0 0 auto; padding-right: 20px; border-right: 1px solid var(--line); }
.cli-exp-num b { font-family: var(--font-display); font-size: 34px; color: var(--gold); line-height: 1; display: block; }
.cli-exp-num small { font-size: 11.5px; color: var(--muted); }
.cli-exp-avg { display: flex; flex-direction: column; gap: 6px; }
.cli-exp-avg small { font-size: 13px; color: var(--muted); }
.cli-exp-avg small b { color: var(--ink); }

.exp-stars { display: inline-flex; gap: 2px; font-size: 18px; line-height: 1; }
.exp-star { color: var(--line); }
.exp-star.on { color: var(--gold); }

.cli-exp-pend { display: flex; flex-direction: column; gap: 10px; }
.cli-exp-pend-row { display: flex; align-items: center; gap: 12px; padding: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); }
.cli-exp-pend-row .cli-cita-info { flex: 1; min-width: 0; }
.cli-exp-pend-row .cli-btn-xs { flex: 0 0 auto; width: auto; }

.exp-review { margin-bottom: 12px; }
.exp-review-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.exp-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.exp-chip { font-size: 11.5px; font-weight: 600; color: var(--gold); background: var(--gold-soft); padding: 3px 10px; border-radius: 999px; }
.exp-coment { font-size: 13.5px; color: var(--ink-2); font-style: italic; line-height: 1.5; margin: 0 0 12px; }

.exp-reply { display: flex; gap: 10px; padding: 12px; background: var(--surface-soft); border-radius: var(--r-sm); border-left: 3px solid var(--gold); }
.exp-reply-av { width: 34px; height: 34px; border-radius: 9px; overflow: hidden; flex: 0 0 auto; background: var(--ink); }
.exp-reply-av img { width: 100%; height: 100%; object-fit: cover; }
.exp-reply-body b { font-size: 13px; display: block; margin-bottom: 2px; }
.exp-reply-body p { margin: 0; font-size: 13px; color: var(--ink-2); line-height: 1.45; }

/* ---- Perfil cliente ---- */
.cli-perf-head { display: flex; align-items: center; gap: 16px; }
.cli-perf-avatar { width: 68px; height: 68px; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center; color: #fff; font-family: var(--font-display); font-weight: 600; font-size: 24px; border: 2px solid var(--gold); background-size: cover; background-position: center; }
.cli-perf-id { flex: 1; min-width: 0; }
.cli-perf-id h3 { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 19px; }
.cli-perf-tier { display: inline-block; margin-top: 4px; background: var(--gold-soft); color: #161618; border: 1px solid var(--gold); font-size: 11.5px; font-weight: 700; padding: 2px 10px; border-radius: 999px; }
.btn.cli-perf-foto { flex: 0 0 auto; }
.cli-perf-hint { color: var(--muted); font-size: 13px; margin: 0 0 14px; }
.btn.cli-perf-save { width: auto; margin-top: 6px; padding: 11px 20px; }

.cli-fav-list { display: flex; flex-direction: column; }
.cli-fav-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.cli-fav-row:last-child { border-bottom: none; }
.cli-fav-info { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cli-fav-av { width: 42px; height: 42px; font-size: 14px; }
.cli-fav-info b { font-size: 14px; display: block; }
.cli-fav-info small { color: var(--muted); font-size: 12.5px; }
.cli-fav-heart { border: none; background: none; color: var(--muted-2); display: grid; place-items: center; padding: 6px; transition: color .15s, transform .12s; }
.cli-fav-heart:hover { transform: scale(1.1); }
.cli-fav-heart svg { width: 22px; height: 22px; }
.cli-fav-heart.on { color: var(--gold); }
.cli-fav-heart.on svg { fill: currentColor; }

.cli-logout-btn { width: 100%; margin-top: 8px; color: var(--red); display: flex; align-items: center; justify-content: center; gap: 8px; }
.cli-logout-btn svg { width: 18px; height: 18px; }
.cli-logout-btn:hover { background: var(--red-soft); border-color: var(--red); }

.rsv-fav-tag { color: var(--gold); font-size: 11px; font-weight: 700; }

/* ---- Notificaciones cliente (campanita) ---- */
.cli-top-right { display: flex; align-items: center; gap: 10px; }
.cli-bell-wrap { position: relative; }
.cli-bell { position: relative; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); display: grid; place-items: center; box-shadow: var(--shadow); transition: border-color .15s, color .15s; }
.cli-bell:hover { border-color: var(--gold); color: var(--gold); }
.cli-bell svg { width: 20px; height: 20px; }
.cli-bell-badge { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--red); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; border: 2px solid var(--bg); }

.cli-notif-panel { position: absolute; top: calc(100% + 10px); right: 0; width: 320px; max-width: calc(100vw - 32px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-lg); z-index: 60; overflow: hidden; animation: cfgFade .18s var(--ease); }
.cli-notif-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.cli-notif-head b { font-family: var(--font-display); font-size: 15px; }
.cli-notif-read { border: none; background: none; color: var(--gold); font-size: 12.5px; font-weight: 600; }
.cli-notif-read:hover { text-decoration: underline; }
.cli-notif-list { max-height: 380px; overflow-y: auto; }
.cli-notif-item { display: flex; align-items: flex-start; gap: 11px; width: 100%; text-align: left; padding: 13px 16px; border: none; border-bottom: 1px solid var(--line); background: none; transition: background .12s; }
.cli-notif-item:last-child { border-bottom: none; }
.cli-notif-item:hover { background: var(--surface-soft); }
.cli-notif-item.unread { background: rgba(199,147,48,.05); }
.cli-notif-ico { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; flex: 0 0 auto; background: var(--gold-soft); color: var(--gold); }
.cli-notif-ico svg { width: 18px; height: 18px; }
.cli-notif-ico.n-premio { background: var(--green-soft); color: var(--green); }
.cli-notif-ico.n-resena { background: var(--purple-soft); color: var(--purple); }
.cli-notif-ico.n-cancelada { background: var(--red-soft); color: var(--red); }
.cli-notif-txt { flex: 1; min-width: 0; }
.cli-notif-txt p { margin: 0 0 3px; font-size: 13px; color: var(--ink); line-height: 1.4; }
.cli-notif-txt small { color: var(--muted-2); font-size: 11.5px; }
.cli-notif-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); flex: 0 0 auto; margin-top: 6px; }
.cli-notif-empty { text-align: center; padding: 36px 20px; }
.cli-notif-empty b { display: block; font-size: 14px; margin-bottom: 4px; }
.cli-notif-empty small { color: var(--muted); font-size: 12.5px; }


/* ============================================================
   PANEL DEL BARBERO  (#barberView)
   Reutiliza el diseño del admin (.sidebar, .stat, .card, .list-row…).
   Aquí solo van las piezas nuevas propias del barbero.
   ============================================================ */

/* --- Mini-perfil del barbero en el pie del sidebar --- */
.bar-me { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: var(--r-md); background: var(--sidebar-soft); margin-bottom: 8px; }
.bar-me-av { width: 38px; height: 38px; border-radius: 10px; flex: 0 0 auto; display: grid; place-items: center; font-weight: 700; font-size: 13px; color: #fff; background: var(--gold); }
.bar-me-info { min-width: 0; }
.bar-me-info b { display: block; font-size: 13.5px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-me-info small { color: #9a9aa2; font-size: 11.5px; }

/* --- Interruptor "En servicio / Descanso" --- */
.bar-status { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 9px; margin-bottom: 8px; border: 1px solid var(--sidebar-line); border-radius: var(--r-md); background: none; color: #9a9aa2; font-size: 12.5px; font-weight: 600; cursor: pointer; transition: all .18s var(--ease); }
.bar-status-dot { width: 8px; height: 8px; border-radius: 50%; background: #6b7280; transition: all .18s var(--ease); }
.bar-status.is-on { color: #6ee7a8; border-color: rgba(21,128,61,.5); background: rgba(21,128,61,.12); }
.bar-status.is-on .bar-status-dot { background: #34d399; box-shadow: 0 0 0 3px rgba(52,211,153,.2); }
.bar-status:hover { border-color: #3f3f46; }

/* --- Tarjeta HERO: próxima cita (la acción protagonista del Inicio) --- */
.bar-hero {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  background: linear-gradient(135deg, var(--sidebar) 0%, #26262c 100%);
  color: #fff; border-radius: var(--r-lg); padding: 22px 24px; margin-bottom: 16px;
  box-shadow: var(--shadow-lg);
}
.bar-hero-lead { display: flex; align-items: center; gap: 16px; flex: 1 1 260px; min-width: 0; }
.bar-hero-av { width: 58px; height: 58px; border-radius: 16px; flex: 0 0 auto; display: grid; place-items: center; font-weight: 700; font-size: 20px; color: #fff; }
.bar-hero-kicker { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--gold-bright); font-weight: 600; margin: 0 0 3px; }
.bar-hero-name { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 22px; line-height: 1.1; }
.bar-hero-svc { margin: 4px 0 0; color: #c7c7cf; font-size: 13.5px; }
.bar-hero-meta { display: flex; gap: 18px; flex: 0 0 auto; }
.bar-hero-meta div { text-align: left; }
.bar-hero-meta .k { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: #9a9aa2; margin-bottom: 2px; }
.bar-hero-meta .v { font-family: var(--font-display); font-weight: 600; font-size: 18px; }
.bar-hero-actions { display: flex; gap: 10px; flex: 1 1 100%; }
@media (min-width: 900px) { .bar-hero-actions { flex: 0 0 auto; } }
.bar-hero-actions .btn { white-space: nowrap; }
.bar-hero-btn { background: var(--gold); color: var(--on-gold); border: none; }
.bar-hero-btn:hover { background: var(--gold-bright); transform: translateY(-1px); }
.bar-hero-btn:active { transform: scale(.97); }
.bar-hero-ghost { background: rgba(255,255,255,.08); color: #fff; border: 1px solid rgba(255,255,255,.16); }
.bar-hero-ghost:hover { background: rgba(255,255,255,.14); }

/* Estado vacío del hero (sin más citas hoy) */
.bar-hero.is-empty { justify-content: center; text-align: center; }
.bar-hero.is-empty .bar-hero-lead { justify-content: center; flex-basis: auto; }

/* --- Mini-botón de acción dentro de cada fila de la agenda --- */
.bar-row-btn { margin-left: auto; padding: 7px 13px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-size: 12.5px; font-weight: 600; cursor: pointer; transition: all .16s var(--ease); }
.bar-row-btn:hover { background: var(--gold-soft); border-color: var(--gold); color: var(--gold); }
.bar-row-btn:active { transform: scale(.96); }
.bar-row-btn.done { color: var(--green); border-color: var(--green-soft); background: var(--green-soft); cursor: default; }
.bar-row-btn.ghost { color: var(--muted); }
.bar-row-btn.ghost:hover { color: var(--red); border-color: var(--red); background: var(--red-soft); }

/* Píldoras de estado del ciclo de la cita (color por etapa) */
.pill.solicitada { background: var(--gold-soft);   color: #9a6b12; }
.pill.confirmada { background: var(--blue-soft);   color: var(--blue); }
.pill.llego      { background: var(--purple-soft); color: var(--purple); }
.pill.proceso    { background: var(--green-soft);  color: var(--green); display: inline-flex; align-items: center; gap: 6px; }
.pill.completada { background: var(--surface-soft); color: var(--muted); border: 1px solid var(--line); }
.pill.cancelada, .pill.nollego { background: var(--red-soft); color: var(--red); }
/* Punto que "late" en las citas en proceso */
.pill.proceso .pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--green); animation: barPulse 1.4s ease-in-out infinite; }
@keyframes barPulse {
  0%, 100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(21,128,61,.45); }
  50%      { transform: scale(1.15); box-shadow: 0 0 0 4px rgba(21,128,61,0); }
}
@media (prefers-reduced-motion: reduce) { .pill.proceso .pulse { animation: none; } }

/* La fila de la agenda del barbero usa .list-row + alinea el botón a la derecha */
#barAgenda .list-row .who { flex: 1; }


/* ---------- Página AGENDA del barbero ---------- */
/* Cabecera: navegación de fecha (izq) + vistas y acción (der) */
.bar-ag-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.bar-ag-nav { display: flex; align-items: center; gap: 10px; }
.bar-navbtn { width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); display: grid; place-items: center; cursor: pointer; color: var(--ink); transition: all .16s var(--ease); }
.bar-navbtn svg { width: 18px; height: 18px; }
.bar-navbtn:hover { border-color: var(--gold); color: var(--gold); }
.bar-navbtn:active { transform: scale(.94); }
.bar-ag-date { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 600; font-size: 18px; text-transform: capitalize; min-width: 190px; justify-content: center; }
.bar-ag-hoychip { font-family: var(--font-body); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--gold); background: var(--gold-soft); padding: 3px 8px; border-radius: 999px; }
.bar-ag-hoybtn { border: none; background: none; color: var(--gold); font-weight: 600; font-size: 13px; cursor: pointer; }
.bar-ag-hoybtn:hover { text-decoration: underline; }
.bar-ag-right { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* Selector de vista Día / Semana / Mes (segmentado) */
.bar-tabs { display: inline-flex; background: var(--surface-soft); border: 1px solid var(--line); border-radius: 12px; padding: 4px; gap: 3px; }
.bar-tab { padding: 7px 15px; border: none; background: none; border-radius: 9px; font-weight: 600; font-size: 13px; color: var(--muted); cursor: pointer; transition: all .16s var(--ease); }
.bar-tab:hover { color: var(--ink); }
.bar-tab.active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }

/* Franja resumen del día */
.bar-ag-summary { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.bar-ag-summary > div { flex: 1 1 130px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px 16px; }
.bar-ag-summary .k { display: block; font-size: 12px; color: var(--muted); margin-bottom: 3px; }
.bar-ag-summary .v { font-family: var(--font-display); font-weight: 600; font-size: 22px; }
.bar-ag-summary .v.gold { color: var(--gold); }

/* Línea de tiempo de citas */
.bar-sched { display: flex; flex-direction: column; }
.bar-sched-row { display: flex; gap: 14px; align-items: stretch; }
.bar-sched-time { flex: 0 0 58px; text-align: right; padding-top: 16px; }
.bar-sched-time b { font-family: var(--font-display); font-weight: 600; font-size: 15px; display: block; line-height: 1; }
.bar-sched-time span { font-size: 11px; color: var(--muted-2); }
.bar-sched-card { flex: 1; display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--muted-2); border-radius: var(--r-md); padding: 12px 16px; margin-bottom: 12px; transition: all .18s var(--ease); }
.bar-sched-card:hover { box-shadow: var(--shadow); transform: translateY(-1px); }
.bar-sched-row.solicitada .bar-sched-card { border-left-color: var(--gold); }
.bar-sched-row.confirmada .bar-sched-card { border-left-color: var(--blue); }
.bar-sched-row.llego      .bar-sched-card { border-left-color: var(--purple); }
.bar-sched-row.proceso    .bar-sched-card { border-left-color: var(--green); box-shadow: 0 0 0 1px rgba(21,128,61,.18); }
.bar-sched-row.completada .bar-sched-card { opacity: .58; border-left-color: var(--line); }
.bar-sched-row.cancelada  .bar-sched-card,
.bar-sched-row.nollego    .bar-sched-card { opacity: .55; border-left-color: var(--red); }
.bar-sched-card .who { flex: 1; min-width: 0; }
.bar-sched-card .who b { font-size: 14.5px; display: block; }
.bar-sched-card .who small { font-size: 12.5px; color: var(--muted); }
.bar-sched-right { margin-left: auto; display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }
.bar-sched-com { font-family: var(--font-display); font-weight: 600; font-size: 15px; }
@media (max-width: 620px) {
  .bar-sched-com { display: none; }
  .bar-sched-right { gap: 8px; }
}

/* Estado vacío / placeholder de la agenda */
.bar-ag-empty { text-align: center; padding: 44px 24px; }
.bar-ag-empty-ico { width: 52px; height: 52px; margin: 0 auto 14px; border-radius: 14px; display: grid; place-items: center; background: var(--gold-soft); color: var(--gold); }
.bar-ag-empty-ico svg { width: 24px; height: 24px; }
.bar-ag-empty b { display: block; font-size: 16px; margin-bottom: 6px; }
.bar-ag-empty p { color: var(--muted); font-size: 13.5px; margin: 0 0 16px; }
.bar-inline-link { border: none; background: none; color: var(--gold); font-weight: 600; cursor: pointer; padding: 0; font-size: inherit; }
.bar-inline-link:hover { text-decoration: underline; }

/* ---------- Modal "Mover cita" (reagendar) ---------- */
.bar-mover-box { text-align: left; max-width: 400px; }
.bar-mover-box h3 { margin: 0 0 4px; font-family: var(--font-display); font-weight: 600; font-size: 20px; }
.bar-mover-sub { color: var(--muted); font-size: 13.5px; margin: 0 0 18px; }
.bar-mover-box .field { margin-bottom: 14px; text-align: left; }
.bar-mover-box .field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--ink); }
.bar-mover-box input[type="date"],
.bar-mover-box input[type="text"],
.bar-mover-box input[type="tel"],
.bar-mover-box input[type="email"],
.bar-mover-box select {
  width: 100%; padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--r-sm);
  font: inherit; background: var(--surface); color: var(--ink);
}
.bar-mover-box input:focus,
.bar-mover-box select:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft); }
.bar-mover-box .confirm-btns { margin-top: 6px; }

/* ---------- Bloques de disponibilidad en la línea de tiempo ---------- */
.bar-block-card {
  flex: 1; display: flex; align-items: center; gap: 12px;
  border: 1.5px dashed var(--line); border-radius: var(--r-md);
  padding: 11px 14px; margin-bottom: 12px;
}
.bar-block-card.abrir    { background: var(--green-soft); border-color: rgba(21,128,61,.4); }
.bar-block-card.bloquear { background: var(--surface-soft); border-color: #cfd2d8; }
.bar-block-ico { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; flex: 0 0 auto; }
.bar-block-ico svg { width: 18px; height: 18px; }
.bar-block-card.abrir    .bar-block-ico { background: rgba(21,128,61,.15);  color: var(--green); }
.bar-block-card.bloquear .bar-block-ico { background: #e7e8eb; color: var(--muted); }
.bar-block-txt { flex: 1; min-width: 0; }
.bar-block-txt b { font-size: 14px; display: block; }
.bar-block-card.bloquear .bar-block-txt b { color: var(--muted); }
.bar-block-txt small { font-size: 12.5px; color: var(--muted); }
.bar-block-del { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 8px; border: none; background: none; color: var(--muted-2); cursor: pointer; display: grid; place-items: center; transition: all .16s var(--ease); }
.bar-block-del svg { width: 16px; height: 16px; }
.bar-block-del:hover { background: var(--red-soft); color: var(--red); }

/* ---------- Modal "Agregar disponibilidad" ---------- */
.bar-disp-box { text-align: left; max-width: 440px; }
.bar-disp-box h3 { margin: 0 0 4px; font-family: var(--font-display); font-weight: 600; font-size: 20px; }
.bar-disp-box .field { margin-bottom: 14px; text-align: left; }
.bar-disp-box .field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--ink); }
.bar-disp-box input[type="date"],
.bar-disp-box select {
  width: 100%; padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--r-sm);
  font: inherit; background: var(--surface); color: var(--ink); cursor: pointer;
}
.bar-disp-box input[type="date"]:focus,
.bar-disp-box select:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft); }

/* Dos opciones grandes (Abrir hueco / Bloquear) */
.bar-disp-types { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 16px 0 18px; }
.bar-disp-type {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 14px; border: 2px solid var(--line); border-radius: var(--r-md);
  background: var(--surface); cursor: pointer; text-align: left; transition: all .16s var(--ease);
}
.bar-disp-type b { font-size: 15px; }
.bar-disp-type small { font-size: 12px; color: var(--muted); }
.bar-disp-type-ico { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; margin-bottom: 6px; background: var(--surface-soft); color: var(--muted); }
.bar-disp-type-ico svg { width: 18px; height: 18px; }
.bar-disp-type:hover { border-color: var(--muted-2); }
.bar-disp-type.abrir.active    { border-color: var(--green); background: var(--green-soft); }
.bar-disp-type.abrir.active .bar-disp-type-ico { background: var(--green); color: #fff; }
.bar-disp-type.bloquear.active { border-color: var(--gold); background: var(--gold-soft); }
.bar-disp-type.bloquear.active .bar-disp-type-ico { background: var(--gold); color: var(--on-gold); }

/* Fila Desde / Hasta */
.bar-disp-horas { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* Chips de motivo */
.bar-disp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.bar-chip { padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-size: 13px; font-weight: 600; color: var(--muted); cursor: pointer; transition: all .16s var(--ease); }
.bar-chip:hover { border-color: var(--gold); }
.bar-chip.active { background: var(--gold); color: var(--on-gold); border-color: var(--gold); }

/* ---------- Vista SEMANA ---------- */
.bar-week { display: grid; grid-template-columns: repeat(7, minmax(112px, 1fr)); gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.bar-week-col { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; cursor: pointer; transition: all .16s var(--ease); }
.bar-week-col:hover { border-color: var(--gold); box-shadow: var(--shadow); }
.bar-week-col.today { border-color: var(--gold); }
.bar-week-colhead { display: flex; align-items: baseline; justify-content: space-between; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.bar-week-colhead .d { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.bar-week-colhead .n { font-family: var(--font-display); font-weight: 600; font-size: 16px; }
.bar-week-col.today .bar-week-colhead { background: var(--gold-soft); }
.bar-week-col.today .bar-week-colhead .n { color: var(--gold); }
.bar-week-colbody { display: flex; flex-direction: column; gap: 6px; padding: 8px; min-height: 92px; }
.bar-week-appt { border-radius: 8px; padding: 6px 8px; background: var(--surface-soft); border-left: 3px solid var(--muted-2); }
.bar-week-appt b { display: block; font-size: 12px; font-family: var(--font-display); }
.bar-week-appt span { font-size: 12px; color: var(--muted); }
.bar-week-appt.proceso    { border-left-color: var(--green); }
.bar-week-appt.confirmada { border-left-color: var(--blue); }
.bar-week-appt.solicitada { border-left-color: var(--gold); }
.bar-week-appt.completada { border-left-color: var(--line); opacity: .68; }
.bar-week-appt.cancelada, .bar-week-appt.nollego { border-left-color: var(--red); opacity: .6; }
.bar-week-block { border-radius: 8px; padding: 6px 8px; font-size: 11.5px; color: var(--muted); background: var(--surface-soft); border: 1px dashed var(--line); }
.bar-week-empty { color: var(--muted-2); text-align: center; font-size: 13px; padding: 14px 0; }

/* ---------- Vista MES ---------- */
.bar-month { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.bar-month-dow { display: grid; grid-template-columns: repeat(7, 1fr); background: var(--surface-soft); border-bottom: 1px solid var(--line); }
.bar-month-dow span { text-align: center; padding: 10px 0; font-size: 12px; font-weight: 600; color: var(--muted); }
.bar-month-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.bar-month-cell { position: relative; min-height: 78px; padding: 8px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); cursor: pointer; transition: background .14s var(--ease); }
.bar-month-cell:nth-child(7n) { border-right: none; }
.bar-month-cell:hover { background: var(--surface-soft); }
.bar-month-cell .n { font-size: 13.5px; font-weight: 600; }
.bar-month-cell.muted { background: var(--surface-soft); }
.bar-month-cell.muted .n { color: var(--muted-2); font-weight: 400; }
.bar-month-cell.today .n { background: var(--gold); color: var(--on-gold); width: 26px; height: 26px; border-radius: 50%; display: inline-grid; place-items: center; }
.bar-month-badge { position: absolute; right: 8px; top: 8px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--gold-soft); color: var(--gold); font-size: 11.5px; font-weight: 700; display: inline-grid; place-items: center; }
.bar-month-blockdot { position: absolute; right: 12px; top: 13px; width: 7px; height: 7px; border-radius: 50%; background: var(--muted-2); }
@media (max-width: 620px) {
  .bar-month-cell { min-height: 56px; padding: 5px; }
  .bar-month-cell .n { font-size: 12px; }
  .bar-month-badge { min-width: 16px; height: 16px; font-size: 10px; right: 4px; top: 4px; }
}

/* ============================================================
   BARBERO · MIS CLIENTES
   ============================================================ */
.bar-cli-toolbar { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.bar-cli-search { flex: 1; min-width: 220px; display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 0 14px; }
.bar-cli-search svg { width: 18px; height: 18px; color: var(--muted-2); flex: 0 0 auto; }
.bar-cli-search input { flex: 1; border: none; background: none; padding: 12px 0; font: inherit; color: var(--ink); outline: none; }

/* Segmentos (chips con contador) */
.bar-cli-segs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.bar-seg { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-size: 13px; font-weight: 600; color: var(--muted); cursor: pointer; transition: all .16s var(--ease); }
.bar-seg span { font-size: 11.5px; background: var(--surface-soft); color: var(--muted); border-radius: 999px; padding: 1px 7px; }
.bar-seg:hover { border-color: var(--gold); }
.bar-seg.active { background: var(--sidebar); color: #fff; border-color: var(--sidebar); }
.bar-seg.active span { background: rgba(255,255,255,.16); color: #fff; }

/* Lista de tarjetas */
.bar-cli-list { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 780px) { .bar-cli-list { grid-template-columns: 1fr 1fr; } }
.bar-cli-card { display: flex; align-items: center; gap: 13px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px; cursor: pointer; transition: all .16s var(--ease); }
.bar-cli-card:hover { border-color: var(--gold); box-shadow: var(--shadow); transform: translateY(-1px); }
.bar-cli-av { width: 46px; height: 46px; border-radius: 13px; flex: 0 0 auto; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 15px; }
.bar-cli-av.lg { width: 60px; height: 60px; border-radius: 16px; font-size: 20px; }
.bar-cli-info { flex: 1; min-width: 0; }
.bar-cli-info b { font-size: 15px; display: flex; align-items: center; gap: 8px; }
.bar-cli-tag { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--green); background: var(--green-soft); padding: 2px 7px; border-radius: 999px; }
.bar-cli-meta { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 3px; font-size: 12.5px; color: var(--muted); }
.bar-cli-actions { display: flex; align-items: center; gap: 7px; flex: 0 0 auto; }
.bar-cli-iconbtn { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; border: 1px solid var(--line); background: var(--surface); color: var(--ink); transition: all .16s var(--ease); }
.bar-cli-iconbtn svg { width: 17px; height: 17px; }
.bar-cli-iconbtn:hover { border-color: var(--gold); color: var(--gold); }
.bar-cli-iconbtn.wa:hover { border-color: var(--green); color: var(--green); }
.bar-cli-agendar { padding: 8px 13px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-size: 12.5px; font-weight: 600; cursor: pointer; transition: all .16s var(--ease); }
.bar-cli-agendar:hover { background: var(--gold-soft); border-color: var(--gold); color: var(--gold); }
@media (max-width: 520px) {
  .bar-cli-agendar { display: none; }   /* en móvil, agendar se hace desde el detalle */
}

/* Modal de detalle del cliente */
.bar-cli-box { text-align: left; max-width: 480px; width: 100%; max-height: 88vh; overflow-y: auto; position: relative; }
.bar-cli-close { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border: none; background: var(--surface-soft); border-radius: 9px; display: grid; place-items: center; cursor: pointer; color: var(--muted); }
.bar-cli-close svg { width: 18px; height: 18px; }
.bar-cli-close:hover { background: var(--line); color: var(--ink); }
.bar-cli-modal-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.bar-cli-modal-head h3 { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 20px; }
.bar-cli-modal-head p { margin: 2px 0 0; color: var(--muted); font-size: 13.5px; }
.bar-cli-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; }
.bar-cli-stats > div { background: var(--surface-soft); border-radius: var(--r-md); padding: 12px; text-align: center; }
.bar-cli-stats b { display: block; font-family: var(--font-display); font-weight: 600; font-size: 16px; }
.bar-cli-stats span { font-size: 11.5px; color: var(--muted); }
.bar-cli-modal-acts { display: flex; gap: 8px; margin-bottom: 20px; }
.bar-cli-modal-acts .btn { flex: 1; padding: 10px; font-size: 13px; }
.bar-cli-sec { margin-bottom: 18px; }
.bar-cli-sec h4 { margin: 0 0 10px; font-size: 14px; display: flex; align-items: center; gap: 8px; }
.bar-cli-lock { font-size: 11px; font-weight: 500; color: var(--muted-2); }
.bar-cli-notas { width: 100%; min-height: 72px; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 11px 13px; font: inherit; font-size: 13.5px; resize: vertical; background: var(--surface); color: var(--ink); }
.bar-cli-notas:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft); }
.bar-cli-savenote { margin-top: 10px; width: 100%; padding: 10px; font-size: 13px; }
.bar-cli-hist, .bar-cli-revs { display: flex; flex-direction: column; gap: 8px; }
.bar-cli-hrow { display: flex; align-items: center; justify-content: space-between; padding: 10px 13px; background: var(--surface-soft); border-radius: var(--r-sm); font-size: 13.5px; }
.bar-cli-hrow small { color: var(--muted); font-size: 12px; }
.bar-cli-rev { padding: 12px 13px; background: var(--surface-soft); border-radius: var(--r-sm); }
.bar-cli-rev p { margin: 6px 0 4px; font-size: 13.5px; color: var(--ink); }
.bar-cli-rev small { color: var(--muted); font-size: 12px; }
.bar-cli-none { color: var(--muted); font-size: 13px; margin: 0; }
.bar-stars span { color: var(--line); font-size: 15px; letter-spacing: 1px; }
.bar-stars span.on { color: var(--gold-bright); }

/* ============================================================
   BARBERO · SERVICIOS (solo lectura)
   ============================================================ */
.bar-svc-note { display: flex; align-items: center; gap: 10px; background: var(--gold-soft); color: #9a6b12; border-radius: var(--r-md); padding: 11px 15px; font-size: 13px; margin-bottom: 18px; }
.bar-svc-note svg { width: 18px; height: 18px; flex: 0 0 auto; }
.bar-svc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.bar-svc-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; transition: all .16s var(--ease); }
.bar-svc-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.bar-svc-img { height: 120px; background: var(--surface-soft); }
.bar-svc-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bar-svc-body { padding: 13px 15px; }
.bar-svc-body b { font-size: 15px; display: block; }
.bar-svc-meta { display: flex; align-items: center; gap: 6px; margin-top: 5px; font-size: 12.5px; color: var(--muted); }
.bar-svc-meta svg { width: 14px; height: 14px; flex: 0 0 auto; }
.bar-svc-bottom { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
.bar-svc-price { font-family: var(--font-display); font-weight: 600; font-size: 18px; color: var(--gold); }

/* Estrella de especialidad (esquina inferior derecha) */
.bar-svc-star { width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--muted-2); cursor: pointer; display: grid; place-items: center; transition: all .16s var(--ease); }
.bar-svc-star svg { width: 18px; height: 18px; }
.bar-svc-star:hover { border-color: var(--gold); color: var(--gold); }
.bar-svc-star:active { transform: scale(.85); }
.bar-svc-star.on { background: var(--gold); border-color: var(--gold); color: var(--on-gold); animation: barStarPop .32s var(--ease); }
@keyframes barStarPop { 0% { transform: scale(.6); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .bar-svc-star.on { animation: none; } }

/* Tarjeta marcada como especialidad */
.bar-svc-card.esp { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold-soft); }

/* Cabecera de la sección "Mi especialidad" */
.bar-svc-esp-head { margin-bottom: 12px; }
.bar-svc-esp-head h3 { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 17px; display: flex; align-items: center; gap: 8px; }
.bar-svc-esp-ico { color: var(--gold-bright); }
.bar-svc-esp-head p { margin: 3px 0 0; color: var(--muted); font-size: 13px; }

/* Separador "Todos los servicios" */
.bar-svc-sep { display: flex; align-items: center; gap: 14px; margin: 24px 0 14px; color: var(--muted); font-size: 13px; font-weight: 600; }
.bar-svc-sep::before, .bar-svc-sep::after { content: ""; height: 1px; background: var(--line); flex: 1; }

/* ============================================================
   BARBERO · HISTORIAL
   ============================================================ */
.bar-hist-toolbar { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.bar-hist-toolbar .bar-cli-search { flex: 1; min-width: 220px; }
.bar-hist { display: flex; flex-direction: column; gap: 8px; }
.bar-hist-row { display: flex; align-items: center; gap: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px 15px; cursor: pointer; transition: all .16s var(--ease); }
.bar-hist-row:hover { border-color: var(--gold); box-shadow: var(--shadow); }
.bar-hist-date { flex: 0 0 auto; min-width: 62px; text-align: center; padding-right: 14px; border-right: 1px solid var(--line); }
.bar-hist-date b { display: block; font-family: var(--font-display); font-weight: 600; font-size: 14px; }
.bar-hist-date span { font-size: 11px; color: var(--muted-2); }
.bar-hist-who { flex: 1; min-width: 0; display: flex; align-items: center; gap: 11px; }
.bar-hist-who .who b { font-size: 14.5px; display: flex; align-items: center; gap: 6px; }
.bar-hist-who .who small { font-size: 12.5px; color: var(--muted); }
.bar-hist-rvw { color: var(--gold-bright); font-size: 13px; }
.bar-hist-right { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.bar-hist-com { font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--green); }
.bar-hist-com.zero { color: var(--muted-2); }
@media (max-width: 560px) {
  .bar-hist-com { display: none; }
  .bar-hist-date { min-width: 52px; padding-right: 10px; }
}

/* ============================================================
   BARBERO · ESTADÍSTICAS
   ============================================================ */
/* Badge de comparación en los KPIs */
.stat-cmp { font-weight: 700; font-size: 12px; }
.stat-cmp.up   { color: var(--green); }
.stat-cmp.down { color: var(--red); }

/* Tarjeta de la gráfica */
.bar-stat-chartcard { margin-bottom: 16px; }
.bar-stat-total { font-family: var(--font-display); font-weight: 600; font-size: 18px; color: var(--gold); }
.bar-stat-chart { margin-top: 8px; }
.bar-stat-svg { width: 100%; height: auto; display: block; }

/* La línea se "traza" de izquierda a derecha (estilo gráfica de acciones) */
.bar-stat-line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: barDraw 1.15s var(--ease) forwards; }
@keyframes barDraw { to { stroke-dashoffset: 0; } }
/* El área se rellena detrás, en sincronía con la línea */
#barStatClipRect { transform: scaleX(0); transform-origin: left; transform-box: fill-box; animation: barWipe 1.15s var(--ease) forwards; }
@keyframes barWipe { to { transform: scaleX(1); } }
/* Los puntos aparecen conforme la línea los alcanza */
.bar-stat-dot { opacity: 0; animation: barDotIn .3s ease forwards; }
@keyframes barDotIn { to { opacity: 1; } }

/* Barras horizontales (servicios / calificaciones) */
.bar-stat-hbars { display: flex; flex-direction: column; gap: 12px; }
.bar-stat-hrow { display: grid; grid-template-columns: 108px 1fr 42px; align-items: center; gap: 10px; }
.bar-stat-hrow.star { grid-template-columns: 40px 1fr 44px; }
.bar-stat-hrow .lbl { font-size: 13px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-stat-hrow .num { font-size: 13px; font-weight: 600; text-align: right; color: var(--muted); }
.bar-stat-track { height: 10px; background: var(--surface-soft); border-radius: 999px; overflow: hidden; }
.bar-stat-fill { height: 100%; border-radius: 999px; background: var(--sidebar); transform: scaleX(0); transform-origin: left; animation: barGrowX .6s var(--ease) forwards; }
.bar-stat-fill.gold { background: linear-gradient(90deg, var(--gold), var(--gold-bright)); }
@keyframes barGrowX { to { transform: scaleX(1); } }

/* Cabecera de calificaciones */
.bar-stat-calhead { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.bar-stat-calavg { font-family: var(--font-display); font-weight: 600; font-size: 40px; line-height: 1; color: var(--gold); }
.bar-stat-calhead small { color: var(--muted); font-size: 12.5px; display: block; margin-top: 2px; }

@media (prefers-reduced-motion: reduce) {
  .bar-stat-line { animation: none; stroke-dashoffset: 0; }
  #barStatClipRect { animation: none; transform: none; }
  .bar-stat-dot { animation: none; opacity: 1; }
  .bar-stat-fill { animation: none; transform: none; }
}

/* ============================================================
   BARBERO · MI CUENTA
   ============================================================ */
.bcta-hero {
  border-radius: var(--r-lg); padding: 20px 22px; margin-bottom: 16px; color: #fff;
  box-shadow: 0 12px 28px -16px rgba(0,0,0,.5);
  animation: baRowIn .32s var(--ease) both;
}
.bcta-hero.owe {
  background: radial-gradient(120% 140% at 100% 0, rgba(217,131,36,.22), transparent 60%),
              linear-gradient(135deg, #241d14, #33281a);
}
.bcta-hero.get {
  background: radial-gradient(120% 140% at 100% 0, rgba(21,128,61,.24), transparent 60%),
              linear-gradient(135deg, #14241a, #1a3326);
}
.bcta-hero-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.bcta-hero-lbl { font-size: 13px; color: rgba(255,255,255,.72); font-weight: 500; }
.bcta-hero-badge { font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: rgba(255,255,255,.1); color: rgba(255,255,255,.85); white-space: nowrap; }
.bcta-hero-val { font-family: var(--font-display); font-weight: 600; font-size: 40px; line-height: 1; display: block; }
.bcta-hero.owe .bcta-hero-val { color: #e8a04d; }
.bcta-hero.get .bcta-hero-val { color: #5bd08a; }
.bcta-hero-sub { font-size: 12.5px; color: rgba(255,255,255,.55); margin-top: 8px; display: block; }

.bcta-card { margin-bottom: 16px; }
.bcta-break { display: flex; flex-direction: column; }
.bcta-brow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 14px; color: var(--ink-2); }
.bcta-brow:last-child { border-bottom: none; }
.bcta-brow b { font-family: var(--font-display); font-weight: 600; color: var(--ink); font-size: 15px; }
.bcta-brow.total span { font-weight: 600; color: var(--ink); }
.bcta-brow.total b { color: var(--gold); font-size: 19px; }
.bcta-note { display: flex; align-items: flex-start; gap: 7px; margin: 12px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.bcta-note svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 1px; color: var(--muted-2); }

.bcta-hist { display: flex; flex-direction: column; }
.bcta-mrow { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.bcta-mrow:last-child { border-bottom: none; }
.bcta-mtag { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.bcta-mtag.in  { background: var(--green-soft); color: var(--green); }
.bcta-mtag.out { background: #fbecd6; color: #b56a12; }
.bcta-mconcept { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bcta-mdate { font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.bcta-mamt { font-family: var(--font-display); font-weight: 600; font-size: 15px; white-space: nowrap; text-align: right; }
.bcta-mamt.in  { color: var(--green); }
.bcta-mamt.out { color: #d98324; }
.bcta-empty { font-size: 13.5px; color: var(--muted); text-align: center; padding: 22px 0; }

@media (max-width: 560px) {
  .bcta-mrow { grid-template-columns: 1fr auto; grid-template-areas: "tag amt" "meta meta"; row-gap: 3px; }
  .bcta-mtag { grid-area: tag; justify-self: start; }
  .bcta-mamt { grid-area: amt; }
  .bcta-mconcept { grid-area: meta; }
  .bcta-mdate { display: none; }
}

/* ============================================================
   BARBERO · MI PERFIL
   ============================================================ */
.bar-perfil-hero { display: flex; align-items: center; gap: 20px; margin-bottom: 16px; }
.bar-perfil-avwrap { position: relative; flex: 0 0 auto; }
.bar-perfil-av { width: 84px; height: 84px; border-radius: 22px; overflow: hidden; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 30px; font-family: var(--font-display); }
.bar-perfil-av img { width: 100%; height: 100%; object-fit: cover; }
.bar-perfil-camera { position: absolute; right: -4px; bottom: -4px; width: 32px; height: 32px; border-radius: 50%; background: var(--gold); color: var(--on-gold); display: grid; place-items: center; cursor: pointer; border: 3px solid var(--surface); transition: transform .16s var(--ease); }
.bar-perfil-camera svg { width: 15px; height: 15px; }
.bar-perfil-camera:hover { transform: scale(1.08); }
.bar-perfil-hero-info h3 { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 22px; }
.bar-perfil-hero-info p { margin: 2px 0 6px; color: var(--muted); font-size: 13.5px; }
.bar-perfil-rating { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.bar-perfil-rating b { font-weight: 700; }
.bar-perfil-rating small { color: var(--muted); }

/* Cabecera de sección (público / privado) */
.bar-perfil-sechead { display: flex; align-items: center; gap: 11px; margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.bar-perfil-secico { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; font-size: 18px; flex: 0 0 auto; }
.bar-perfil-sechead.pub  .bar-perfil-secico { background: var(--blue-soft); }
.bar-perfil-sechead.priv .bar-perfil-secico { background: var(--surface-soft); }
.bar-perfil-sechead h3 { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 16px; }
.bar-perfil-sechead small { color: var(--muted); font-size: 12.5px; }

.bar-perfil-lbl { display: block; font-size: 13px; font-weight: 600; margin: 0 0 6px; }
.bar-perfil-lbl:not(:first-of-type) { margin-top: 14px; }
.bar-perfil-lbl .hint { color: var(--muted-2); font-weight: 400; }
.bar-perfil-inp, .bar-perfil-bio { width: 100%; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 11px 13px; font: inherit; font-size: 14px; background: var(--surface); color: var(--ink); }
.bar-perfil-bio { min-height: 74px; resize: vertical; font-size: 13.5px; }
.bar-perfil-inp:focus, .bar-perfil-bio:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft); }

.bar-perfil-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.bar-perfil-chip { font-size: 12.5px; font-weight: 600; color: var(--gold); background: var(--gold-soft); padding: 5px 11px; border-radius: 999px; }
.bar-perfil-none { color: var(--muted); font-size: 13px; }
.bar-perfil-link { display: inline-block; margin-top: 12px; color: var(--gold); font-weight: 600; font-size: 13px; cursor: pointer; }
.bar-perfil-link:hover { text-decoration: underline; }

.bar-perfil-pass { display: flex; align-items: center; gap: 8px; margin-top: 18px; padding: 10px 14px; width: 100%; justify-content: center; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); font-size: 13.5px; font-weight: 600; color: var(--ink); cursor: pointer; transition: all .16s var(--ease); }
.bar-perfil-pass svg { width: 16px; height: 16px; }
.bar-perfil-pass:hover { border-color: var(--gold); color: var(--gold); }

.bar-perfil-foot { display: flex; gap: 12px; margin-top: 16px; flex-wrap: wrap; }
.bar-perfil-foot .btn-primary { flex: 1; min-width: 160px; }
.bar-perfil-logout { display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--red); border: 1px solid var(--line); background: var(--surface); }
.bar-perfil-logout svg { width: 17px; height: 17px; }
.bar-perfil-logout:hover { background: var(--red-soft); border-color: var(--red); }

/* ============================================================
   ADMIN · BARBEROS → pestaña INGRESOS
   ============================================================ */
.barb-ing-note { display: flex; align-items: center; gap: 10px; background: var(--gold-soft); color: #9a6b12; border-radius: var(--r-md); padding: 11px 15px; font-size: 13px; margin-bottom: 16px; }
.barb-ing-note svg { width: 18px; height: 18px; flex: 0 0 auto; }
table.data tfoot td { font-weight: 700; border-top: 2px solid var(--line); background: var(--surface-soft); }

/* ── Resumen "Por cobrar" ─────────────────────────────────── */
.ba-summary {
  display: flex; align-items: stretch; gap: 14px; margin-bottom: 14px;
  padding: 18px 20px; border-radius: var(--r-lg);
  background:
    radial-gradient(120% 140% at 100% 0, rgba(199,147,48,.10), transparent 60%),
    linear-gradient(135deg, #1f1d1a, #2c2823);
  color: #fff; box-shadow: 0 10px 26px -14px rgba(0,0,0,.55);
}
.ba-sum-block { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.ba-sum-div { width: 1px; background: rgba(255,255,255,.12); flex: 0 0 auto; }
.ba-sum-lbl { font-size: 12px; color: rgba(255,255,255,.62); font-weight: 500; letter-spacing: .02em; }
.ba-sum-val { font-family: var(--font-display); font-weight: 600; font-size: 28px; line-height: 1.05; color: var(--gold-bright); }
.ba-sum-val.in  { color: #5bd08a; }   /* entra dinero (te lo deben) */
.ba-sum-val.out { color: #e8a04d; }   /* sale dinero (tú debes) */
.ba-sum-sub { font-size: 11.5px; color: rgba(255,255,255,.5); }

/* ── Lista de cuentas ─────────────────────────────────────── */
.ba-list { display: flex; flex-direction: column; }
.ba-row {
  overflow: hidden; margin-bottom: 10px;
  transition: height .3s var(--ease), margin-bottom .3s var(--ease);
  animation: baRowIn .32s var(--ease) both;
}
.ba-row:last-child { margin-bottom: 0; }
@keyframes baRowIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.ba-row-inner {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 16px; border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface);
  transition: transform .32s cubic-bezier(.5,0,.2,1), opacity .3s var(--ease),
              box-shadow .16s var(--ease), border-color .16s var(--ease);
}
.ba-row:not(.is-paid):not(.is-empty):hover .ba-row-inner {
  border-color: var(--gold); box-shadow: 0 6px 18px -12px rgba(199,147,48,.6);
}
/* Deslizamiento al marcar pagado */
.ba-row.is-paying .ba-row-inner { transform: translateX(-115%); opacity: 0; }
.ba-row.is-paid   .ba-row-inner { background: var(--surface-soft); border-style: dashed; opacity: .72; }
.ba-row.is-empty  .ba-row-inner { opacity: .6; }

.ba-who { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.ba-who-txt { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.ba-who-txt b { font-size: 14.5px; color: var(--ink); font-weight: 600; }
.ba-who-txt small { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Toggle "quién cobró" por barbero */
.ba-dest { display: inline-flex; gap: 3px; padding: 3px; border-radius: 9px; background: var(--surface-soft); border: 1px solid var(--line); width: fit-content; }
.ba-dest-btn {
  border: none; background: transparent; cursor: pointer; border-radius: 6px;
  padding: 4px 10px; font-size: 11.5px; font-weight: 600; color: var(--muted);
  font-family: var(--font-body); transition: background .16s var(--ease), color .16s var(--ease), box-shadow .16s var(--ease);
}
.ba-dest-btn:hover:not(.on) { color: var(--ink-2); }
.ba-dest-btn.on { background: var(--surface); color: var(--gold); box-shadow: 0 1px 3px rgba(0,0,0,.1); }

.ba-amount { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; text-align: right; flex-shrink: 0; }
.ba-amount-val { font-family: var(--font-display); font-weight: 600; font-size: 18px; color: var(--ink); }
.ba-row:not(.is-paid):not(.is-empty) .ba-amount.in  .ba-amount-val { color: var(--green); }
.ba-row:not(.is-paid):not(.is-empty) .ba-amount.out .ba-amount-val { color: #d98324; }
.ba-amount-lbl { font-size: 10.5px; color: var(--muted-2); text-transform: uppercase; letter-spacing: .04em; }

.ba-action { flex-shrink: 0; width: 130px; display: flex; justify-content: flex-end; }
.ba-pay {
  padding: 9px 14px; border-radius: var(--r-sm); white-space: nowrap; cursor: pointer;
  border: none; background: var(--green); color: #fff; font-size: 12.5px; font-weight: 700;
  font-family: var(--font-body); box-shadow: 0 4px 12px -5px var(--green);
  transition: transform .12s var(--ease), filter .16s var(--ease);
}
.ba-pay:hover { filter: brightness(1.06); }
.ba-pay:active { transform: scale(.96); }
.ba-pay.out { background: #d98324; box-shadow: 0 4px 12px -5px #d98324; }
.ba-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 700; padding: 6px 11px; border-radius: 999px; white-space: nowrap;
}
.ba-badge svg { width: 13px; height: 13px; }
.ba-badge.ok   { background: var(--green-soft);   color: var(--green); }
.ba-badge.none { background: var(--surface-soft); color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  .ba-row, .ba-row-inner { transition: none; animation: none; }
}
@media (max-width: 640px) {
  .ba-summary { flex-direction: column; }
  .ba-sum-div { width: auto; height: 1px; }
  .ba-row-inner { flex-wrap: wrap; gap: 10px 12px; }
  .ba-action { width: auto; flex: 1; }
}

/* ============================================================
   ADMIN · BARBEROS → pestaña HISTORIAL
   ============================================================ */
.bh-summary {
  margin-bottom: 14px; padding: 18px 20px; border-radius: var(--r-lg);
  background:
    radial-gradient(120% 140% at 100% 0, rgba(199,147,48,.10), transparent 60%),
    linear-gradient(135deg, #1f1d1a, #2c2823);
  color: #fff; box-shadow: 0 10px 26px -14px rgba(0,0,0,.55);
}
.bh-sum-main { display: flex; flex-direction: column; gap: 3px; }
.bh-sum-lbl { font-size: 12.5px; color: rgba(255,255,255,.62); font-weight: 500; }
.bh-sum-val { font-family: var(--font-display); font-weight: 600; font-size: 30px; line-height: 1.05; color: var(--gold-bright); }
.bh-sum-sub { font-size: 12px; color: rgba(255,255,255,.5); }

/* Filtros */
.bh-filters {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 16px;
}
.bh-ranges { display: flex; gap: 8px; flex-wrap: wrap; }
.bh-range {
  padding: 8px 14px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: var(--surface);
  font-size: 12.5px; font-weight: 600; color: var(--muted);
  transition: all .15s var(--ease);
}
.bh-range:hover { border-color: var(--gold); color: var(--ink); }
.bh-range.on { border-color: var(--gold); background: var(--gold); color: #fff; }
.bh-pickers { display: flex; gap: 8px; }
.bh-mes, .bh-barb {
  padding: 8px 11px; border: 1px solid var(--line); border-radius: var(--r-sm);
  font: inherit; font-size: 13px; background: var(--surface); color: var(--ink); cursor: pointer;
}
.bh-mes:focus, .bh-barb:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft); }

/* Grupos por mes */
.bh-list { display: flex; flex-direction: column; gap: 16px; }
.bh-group { animation: baRowIn .3s var(--ease) both; }
.bh-group-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  margin-bottom: 8px; padding: 0 2px;
}
.bh-group-mes { font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--ink); }
.bh-group-sub { font-size: 12.5px; color: var(--muted); font-weight: 500; }
.bh-group-body {
  border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: var(--surface);
}
.bh-row {
  display: flex; align-items: center; gap: 14px; padding: 12px 16px;
  border-bottom: 1px solid var(--line); transition: background .14s var(--ease);
}
.bh-row:last-child { border-bottom: none; }
.bh-row:hover { background: var(--surface-soft); }
.bh-who { display: flex; align-items: center; gap: 11px; flex: 1; min-width: 0; }
.bh-who-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.bh-who-txt b { font-size: 14px; color: var(--ink); font-weight: 600; }
.bh-who-txt small { font-size: 12px; color: var(--muted); }
.bh-tag { font-weight: 700; font-size: 10.5px; padding: 1px 6px; border-radius: 999px; }
.bh-tag.in  { background: var(--green-soft); color: var(--green); }
.bh-tag.out { background: #fbecd6; color: #b56a12; }
.bh-fecha { font-size: 12.5px; color: var(--muted); white-space: nowrap; flex-shrink: 0; }
.bh-monto {
  font-family: var(--font-display); font-weight: 600; font-size: 16px; color: var(--green);
  min-width: 84px; text-align: right; flex-shrink: 0;
}
.bh-monto.out { color: #d98324; }

/* Vacío */
.bh-empty {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 46px 20px; text-align: center; color: var(--muted);
  border: 1px dashed var(--line); border-radius: var(--r-lg); background: var(--surface);
}
.bh-empty svg { width: 40px; height: 40px; color: var(--muted-2); margin-bottom: 4px; }
.bh-empty b { font-size: 15px; color: var(--ink-2); }
.bh-empty span { font-size: 13px; }

@media (max-width: 640px) {
  .bh-filters { flex-direction: column; align-items: stretch; }
  .bh-pickers { flex-direction: column; }
  .bh-mes, .bh-barb { width: 100%; }
  .bh-row { flex-wrap: wrap; gap: 6px 12px; }
  .bh-fecha { order: 3; }
  .bh-monto { margin-left: auto; }
}

/* Sección "Acuerdo de pago" en la ficha del barbero (admin) */
.pb-acuerdo { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.pb-acuerdo-head { margin-bottom: 12px; }
.pb-acuerdo-head small { display: block; color: var(--muted-2); font-size: 11.5px; margin-top: 2px; }
.pb-pay-row { border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px 14px; margin-bottom: 10px; transition: all .16s var(--ease); }
.pb-pay-row.on { border-color: var(--gold); background: var(--gold-soft); }
.pb-check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; }
.pb-check input { width: 17px; height: 17px; accent-color: var(--gold); cursor: pointer; }
.pb-check .box { display: none; }
.pb-pay-fields { display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.pb-pay-fields input[type="number"] { width: 78px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-sm); font: inherit; background: var(--surface); color: var(--ink); }
.pb-pay-fields select { padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-sm); font: inherit; background: var(--surface); color: var(--ink); cursor: pointer; }
.pb-pay-fields input:focus, .pb-pay-fields select:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft); }
.pb-pay-fields input:disabled, .pb-pay-fields select:disabled { opacity: .45; cursor: not-allowed; }
.pb-unit { font-size: 13px; color: var(--muted); }
.pb-save-acuerdo { width: 100%; margin-top: 6px; }
.pb-acuerdo-hint { text-align: center; color: var(--muted-2); font-size: 12px; margin: 8px 0 0; }

/* Entrada suave de la sección de especialidades */
.bar-svc-esp-head, .bar-svc-esp-head + .bar-svc-grid { animation: barFadeUp .3s var(--ease); }
@keyframes barFadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .bar-svc-esp-head, .bar-svc-esp-head + .bar-svc-grid { animation: none; } }

/* ============================================================
   LOGIN PREMIUM — split cinematográfico (imagen izq · formulario der)
   Etapa 1: estructura + carrusel. Gana por orden de fuente a las
   reglas del split/full-screen anteriores.
   ============================================================ */
#authView {
  position: relative;
  grid-template-columns: 1.06fr .94fr;
  padding: 0;
  width: 100%;
  min-height: 100vh; min-height: 100dvh;
  overflow: hidden;
}
/* display SÓLO cuando la vista está activa: así `.view{display:none}` sigue
   ocultando el login tras iniciar sesión (el ID no debe fijar display global). */
#authView.active { display: grid; }

/* ── Panel IZQUIERDO · media / carrusel ── */
.auth-media {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: #0c0b0e;             /* respaldo mientras cargan las fotos */
}
#authView .auth-media .auth-slides { position: absolute; inset: 0; z-index: 0; }

/* Velo sutil: profundidad + legibilidad futura de las frases (Etapa 2) */
.auth-media-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0,0,0,.34) 0%, transparent 26%, transparent 52%, rgba(0,0,0,.66) 100%),
    linear-gradient(90deg, transparent 60%, rgba(0,0,0,.30) 100%);
}

/* Marca sobre la foto, arriba a la izquierda */
.auth-media-brand {
  position: absolute; z-index: 2;
  top: clamp(26px, 3.4vw, 44px); left: clamp(26px, 3.4vw, 46px);
  pointer-events: none;
  text-shadow: 0 2px 18px rgba(0,0,0,.85), 0 1px 3px rgba(0,0,0,.6);
}
.auth-media-brand .brand-name { font-family: 'Hanken Grotesk', sans-serif; line-height: .98; }
.auth-media-brand .brand-name small {
  display: block; color: var(--gold-bright, #f2ca50);
  font-size: 11px; letter-spacing: .38em; font-weight: 600; text-transform: uppercase;
}
.auth-media-brand .brand-name strong {
  display: block; color: #fff; font-size: 26px; letter-spacing: .06em; font-weight: 700;
}

/* Frase por imagen — abajo a la izquierda, sincronizada con el carrusel.
   Entra subiendo con fade; sale bajando con fade (clase .is-out desde JS). */
.auth-media-phrase {
  position: absolute; z-index: 2;
  left: clamp(26px, 3.4vw, 46px);
  right: clamp(26px, 4vw, 64px);
  bottom: clamp(34px, 5vw, 58px);
  pointer-events: none;
  text-shadow: 0 2px 22px rgba(0,0,0,.9), 0 1px 4px rgba(0,0,0,.65);
  opacity: 1; transform: none;
  transition: opacity .6s ease, transform .6s cubic-bezier(.22,.61,.36,1);
}
.auth-media-phrase.is-out { opacity: 0; transform: translateY(12px); }
.auth-media-phrase .ph-a,
.auth-media-phrase .ph-b {
  display: block;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(23px, 2.4vw, 37px);
  line-height: 1.14;
  letter-spacing: -.01em;
}
.auth-media-phrase .ph-a { font-weight: 600; color: #fff; }
.auth-media-phrase .ph-b { font-style: italic; font-weight: 600; color: var(--gold-bright, #f2ca50); }
@media (prefers-reduced-motion: reduce) {
  .auth-media-phrase { transition: opacity .3s ease; }
  .auth-media-phrase.is-out { transform: none; }
}

/* ── Panel DERECHO · formularios ── */
.auth-panel {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(28px, 4vw, 64px);
  overflow-y: auto;
  background:
    radial-gradient(680px 480px at 84% 6%, rgba(212,175,55,.08), transparent 60%),
    linear-gradient(180deg, #141311 0%, #100e0b 60%, #0b0a08 100%);
  border-left: 1px solid rgba(212,175,55,.10);
}
.auth-panel-inner {
  width: 100%; max-width: 400px;
  display: flex; flex-direction: column;
}
/* La tarjeta ocupa el ancho del panel (las inactivas siguen con [hidden]) */
#authView .auth-panel .card-auth {
  width: 100%; max-width: none; margin: 0;
  background: transparent; border: none; box-shadow: none; padding: 0;
}

/* Entrada suave al cargar */
.auth-media { animation: authMediaIn .8s var(--ease, ease) both; }
.auth-panel-inner { animation: authPanelIn .6s var(--ease, ease) .08s both; }
@keyframes authMediaIn { from { opacity: 0; } }
@keyframes authPanelIn { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) {
  .auth-media, .auth-panel-inner { animation: none; }
}

/* ── Responsive móvil: FOTO A PANTALLA COMPLETA + formulario flotante ── */
@media (max-width: 860px) {
  #authView { overflow-x: hidden; overflow-y: auto; min-height: 100vh; min-height: 100svh; }
  #authView.active { display: block; }                 /* ya no es grid de 2 columnas */
  /* La foto/carrusel cubre TODA la pantalla, fija detrás */
  .auth-media { position: fixed; inset: 0; height: 100svh; width: 100%; z-index: 0; }
  /* Velo un poco más marcado para que la tarjeta flote con contraste */
  .auth-media-scrim {
    background:
      linear-gradient(180deg, rgba(0,0,0,.48) 0%, rgba(0,0,0,.24) 30%, rgba(0,0,0,.34) 60%, rgba(0,0,0,.78) 100%);
  }
  /* El panel del formulario flota encima, centrado y transparente */
  .auth-panel {
    position: relative; z-index: 1;
    min-height: 100svh;
    display: flex; align-items: center; justify-content: center;
    padding: calc(env(safe-area-inset-top, 0px) + 96px) 18px calc(env(safe-area-inset-bottom, 0px) + 40px);
    background: none; border: none; box-shadow: none;
  }
  /* La TARJETA flotante (vidrio sobrio sobre la foto) */
  .auth-panel-inner {
    max-width: 400px;
    background: rgba(18,16,14,.74);
    -webkit-backdrop-filter: blur(18px) saturate(1.1);
    backdrop-filter: blur(18px) saturate(1.1);
    border: 1px solid rgba(212,175,55,.20);
    border-radius: 22px;
    padding: 28px 22px 30px;
    box-shadow: 0 26px 70px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.05);
  }
  /* Logo prominente arriba centrado, sobre la foto */
  .auth-media-brand {
    top: calc(env(safe-area-inset-top, 0px) + 24px);
    left: 50%; transform: translateX(-50%); text-align: center;
  }
  .auth-media-brand .brand-mark { justify-content: center; }
  /* Frase abajo, centrada y más corta */
  .auth-media-phrase {
    left: 20px; right: 20px; bottom: calc(env(safe-area-inset-bottom, 0px) + 20px); text-align: center;
  }
  .auth-media-phrase .ph-a, .auth-media-phrase .ph-b { font-size: clamp(18px, 5.2vw, 25px); }
}
@media (max-width: 480px) {
  .auth-media-brand .brand-name strong { font-size: 22px; }
  .auth-media-phrase { display: none; }   /* pantallas muy chicas: prioridad total al formulario */
  .auth-panel { padding-top: calc(env(safe-area-inset-top, 0px) + 78px); }
}

/* ============================================================
   LOGIN PREMIUM — Etapa 4: panel del formulario (profundidad, inputs, botón)
   Van al final para ganar por orden a los overrides previos (misma especificidad).
   ============================================================ */

/* Profundidad: filo de luz sutil en la costura del panel */
.auth-panel { box-shadow: inset 1px 0 0 rgba(255,255,255,.045); }

/* Espaciado que respira */
#authView .auth-head { margin-bottom: 30px; }
#authView .card-auth .field { margin-bottom: 20px; }
#authView #loginForm .row-between { margin: 4px 0 26px; }

/* Inputs: reposo refinado + transición suave */
#authView .card-auth .field input {
  border-color: rgba(212,175,55,.16);
  background: rgba(28,26,23,.72);
  transition: border-color .2s ease, box-shadow .25s ease, background .2s ease;
}
/* Focus: glow dorado DISCRETO (doble sombra suave) + borde elegante */
#authView .card-auth .field input:focus {
  border-color: var(--gold, #d4af37);
  background: rgba(40,37,31,.9);
  box-shadow: 0 0 0 3px rgba(var(--gold-rgb), .14), 0 6px 20px rgba(var(--gold-rgb), .08);
}
/* El icono del campo se enciende con el foco */
#authView .auth-input .ic { transition: color .2s ease; }
#authView .auth-input:focus-within .ic { color: var(--gold-bright, #f2ca50); }

/* Botón primario: elevación en hover + compresión natural al click */
#authView .card-auth .btn-primary {
  transition: background .2s ease, box-shadow .25s ease, transform .12s ease;
  will-change: transform;
}
#authView .card-auth .btn-primary:hover {
  transform: translateY(-1.5px);
  box-shadow: 0 14px 36px rgba(var(--gold-rgb), .34);
}
#authView .card-auth .btn-primary:active {
  transform: translateY(0) scale(.987);
  box-shadow: 0 6px 18px rgba(var(--gold-rgb), .26);
  transition: transform .07s ease, box-shadow .12s ease;
}
@media (prefers-reduced-motion: reduce) {
  #authView .card-auth .btn-primary { transition: background .2s ease; }
  #authView .card-auth .btn-primary:hover,
  #authView .card-auth .btn-primary:active { transform: none; }
}

/* ── Etapa 5: lockup de marca sobre la foto (badge dorado + wordmark) ── */
.auth-media-brand .brand-mark { display: flex; align-items: center; gap: 13px; }
.auth-media-brand .brand-badge {
  width: 46px; height: 46px; border-radius: 13px;
  background: linear-gradient(145deg, var(--gold-bright, #f2ca50), var(--gold, #d4af37));
  display: grid; place-items: center; overflow: hidden;
  box-shadow: 0 10px 26px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.25);
  animation: authBadgePop .6s var(--ease, ease) .28s both;
}
.auth-media-brand .brand-badge .brand-badge-img {
  width: 72%; height: 72%; object-fit: contain;
  mix-blend-mode: multiply;   /* el poste negro se funde sobre el oro; el blanco desaparece */
}
@keyframes authBadgePop { from { opacity: 0; transform: scale(.82); } }
@media (prefers-reduced-motion: reduce) {
  .auth-media-brand .brand-badge { animation: none; }
}

/* ── Etapa: badge del formulario SIN caja (opción A) — logo suelto y prominente.
   El poste (negro sobre blanco, JPG) se blanquea con invert + screen sobre el
   panel oscuro; sin recuadro, más grande y centrado. ── */
#authView .auth-badge {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 58px;                 /* altura firme; el logo nunca la excede */
  background: none; border: none; box-shadow: none; border-radius: 0;
  margin: 0 auto 18px;
  overflow: hidden;                          /* por si acaso: nada se desborda */
  animation: authBadgePop .6s var(--ease, ease) .18s both;
}
#authView .auth-badge .brand-logo-img {
  width: auto; height: 58px; max-height: 58px; flex: 0 0 auto;   /* tamaño EXPLÍCITO, no % */
  filter: none; mix-blend-mode: normal;   /* PNG blanco con transparencia: sin trucos frágiles */
}
@media (prefers-reduced-motion: reduce) {
  #authView .auth-badge { animation: none; }
}

/* ============================================================
   LOGIN multitenant — acentos ligados a la VARIABLE de color.
   Al inyectar el color del negocio en #authView (desde script.js),
   el acento (botón, links, icono, checkbox, frases) se adapta;
   la base oscura cinematográfica se mantiene → siempre premium.
   ============================================================ */
#authView { --gold-rgb: 212, 175, 55; }   /* respaldo; script.js lo cambia por el color del negocio */
#authView .card-auth .btn-primary {
  background: var(--gold, #d4af37); color: var(--on-gold, #241a00);
  box-shadow: 0 8px 26px rgba(var(--gold-rgb), .26);
}
#authView .card-auth .btn-primary:hover { background: var(--gold-bright, #f2ca50); }
#authView .auth-input .ic { color: var(--gold, #d4af37); }
#authView .auth-input:focus-within .ic { color: var(--gold-bright, #f2ca50); }
#authView .card-auth .row-between a,
#authView .auth-alt a { color: var(--gold-bright, #f2ca50); }
#authView .check input:checked + .box { background: var(--gold-bright, #f2ca50); border-color: var(--gold-bright, #f2ca50); }
#authView .card-auth .field input:focus { border-color: var(--gold, #d4af37); }
.auth-media-brand .brand-name small,
.auth-media-phrase .ph-b { color: var(--gold-bright, #f2ca50); }

/* Logo subido por la barbería → se muestra TAL CUAL (sin invert/multiply del poste demo). */
#authView .auth-badge.has-tenant-logo .brand-logo-img {
  filter: none; mix-blend-mode: normal;
  height: 56px; width: auto; max-width: 210px; object-fit: contain;
}
#authView .auth-media-brand .brand-badge.has-tenant-logo {
  background: rgba(255,255,255,.08); overflow: hidden;
}
#authView .auth-media-brand .brand-badge.has-tenant-logo .brand-badge-img {
  filter: none; mix-blend-mode: normal; width: 100%; height: 100%; object-fit: contain;
}

/* ── Agenda admin · búsqueda por cliente ── */
.ag-search { position: relative; max-width: 340px; margin: 0 0 16px; }
.ag-search-ico { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--muted-2); pointer-events: none; }
.ag-search input {
  width: 100%; padding: 10px 14px 10px 40px; font-size: 14px;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface); color: var(--ink);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.ag-search input::placeholder { color: var(--muted-2); }
.ag-search input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(var(--gold-rgb, 199,147,48), .16); }

/* ── Agenda admin · filtros (chips) + agrupación por día ── */
.ag-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.ag-filtros { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.ag-chip {
  padding: 8px 16px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface);
  color: var(--muted); font-size: 13px; font-weight: 600;
  transition: color .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease), box-shadow .18s var(--ease), transform .12s var(--ease);
}
.ag-chip:hover { color: var(--ink-2); border-color: var(--gold); }
.ag-chip:active { transform: scale(.96); }
.ag-chip.active {
  background: var(--gold); color: var(--on-gold); border-color: var(--gold);
  box-shadow: 0 4px 14px rgba(var(--gold-rgb, 199,147,48), .28);
}
/* Fila de filtro por barbero */
.ag-barberos { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: -2px 0 18px; }
.ag-barberos:empty { display: none; }
.ag-fil-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted-2); margin-right: 4px; }
.ag-chip-b, .ag-chip-e { display: inline-flex; align-items: center; gap: 7px; }
.ag-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; display: inline-block; box-shadow: 0 0 0 2px rgba(0,0,0,.05); }
/* Filtro de estado (a la derecha de la barra) */
.ag-estados { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.ag-estados:empty { display: none; }
.ag-dot-ok   { background: var(--green); }
.ag-dot-wait { background: #9a6b12; }
.ag-dot-late { background: var(--red); }
.ag-groups { display: flex; flex-direction: column; gap: 16px; }
.ag-day { animation: agDayIn .42s var(--ease) both; }
@keyframes agDayIn { from { opacity: 0; transform: translateY(10px); } }
.ag-day-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.ag-day-head h3 { margin: 0; font-size: 15px; font-weight: 700; color: var(--ink); }
.ag-day-badge {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--on-gold); background: var(--gold); padding: 3px 9px; border-radius: 6px;
}
.ag-day-badge.alt { color: var(--ink-2); background: var(--gold-soft); }
.ag-day-count { margin-left: auto; font-size: 12px; color: var(--muted-2); font-weight: 500; }
.ag-empty { text-align: center; padding: 44px 22px; color: var(--muted); }
.ag-empty-ico { color: var(--muted-2); margin-bottom: 8px; display: inline-flex; }
.ag-empty b { display: block; color: var(--ink-2); margin: 4px 0 2px; }
.ag-empty p { margin: 0; font-size: 13px; }

/* ── Configuración · galería de "Fotos del login" ── */
.cfg-fotos { display: flex; flex-direction: column; gap: 10px; margin: 6px 0 14px; }
/* Fila: miniatura + frase + quitar */
.cfg-foto-row { display: flex; align-items: center; gap: 10px; }
.cfg-foto-thumb { width: 46px; height: 60px; flex: 0 0 auto; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); }
.cfg-foto-frase { flex: 1 1 auto; min-width: 0; font-size: 13px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); font-family: inherit; }
.cfg-foto-frase:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(var(--gold-rgb,199,147,48),.14); }
.cfg-foto-del2 { flex: 0 0 auto; width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--muted); cursor: pointer; transition: border-color .15s, color .15s; }
.cfg-foto-del2:hover { border-color: #d14d6b; color: #d14d6b; }
.cfg-foto {
  position: relative; width: 92px; height: 122px; border-radius: 10px; overflow: hidden;
  border: 1px solid var(--line, rgba(255,255,255,.12)); background: rgba(0,0,0,.2);
}
.cfg-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cfg-foto-del {
  position: absolute; top: 5px; right: 5px; width: 22px; height: 22px;
  border: none; border-radius: 50%; background: rgba(0,0,0,.62); color: #fff;
  font-size: 12px; line-height: 1; cursor: pointer; display: grid; place-items: center;
  transition: background .15s;
}
.cfg-foto-del:hover { background: #d14d6b; }
.cfg-foto-empty { color: var(--muted-2, #8a8790); font-size: 13px; }

/* ── Fidelización · modos de membresía (opciones tipo tarjeta) ── */
.memb-modos { display: flex; flex-direction: column; gap: 10px; margin: 6px 0 14px; }
.memb-modo {
  display: flex; gap: 11px; align-items: flex-start; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: 12px; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.memb-modo:hover { border-color: var(--gold); }
.memb-modo:has(input:checked) { border-color: var(--gold); background: var(--gold-soft); }
.memb-modo input { margin-top: 3px; accent-color: var(--gold); flex: 0 0 auto; }
.memb-modo span { display: flex; flex-direction: column; gap: 2px; }
.memb-modo b { font-size: 14px; color: var(--ink); }
.memb-modo small { font-size: 12.5px; color: var(--muted); line-height: 1.35; }
.memb-count-badge { display: inline-flex; align-items: center; gap: 7px; margin-top: 10px; font-size: 13px; color: var(--ink-2); background: var(--gold-soft); border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; }
.memb-count-badge b { color: var(--ink); }
/* Input de fecha de nacimiento en la tabla de clientes */
.cli-bday { border: 1px solid var(--line); border-radius: 7px; padding: 4px 8px; font-size: 12.5px; color: var(--ink-2); background: var(--surface); font-family: inherit; cursor: pointer; }
.cli-bday:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(var(--gold-rgb, 199,147,48), .14); }

/* ── Cliente · tarjeta de membresía (comprar / activa) ── */
.cli-memb { display: flex; align-items: center; gap: 14px; }
.cli-memb-ico { width: 46px; height: 46px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 13px; background: var(--gold-soft); color: var(--gold); }
.cli-memb-body { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cli-memb-body b { font-size: 15px; }
.cli-memb-body small { color: var(--muted); font-size: 13px; }
.cli-memb-buy .cli-btn-xs { flex: 0 0 auto; }
.cli-memb-activa { border: 1px solid var(--gold); }
.cli-memb-badge { flex: 0 0 auto; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--on-gold); background: var(--gold); padding: 4px 10px; border-radius: 999px; }
.cli-memb-cancel { display: block; margin: 8px auto 0; border: none; background: none; color: var(--muted); font-size: 12.5px; cursor: pointer; }
.cli-memb-cancel:hover { color: var(--red); text-decoration: underline; }
.memb-pay-note { font-size: 12.5px; color: var(--muted); background: var(--surface-soft); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin: 6px 0 14px; }
#membBrickCont { margin: 10px 0 6px; min-height: 40px; }
/* Zona con scroll del modal de pago (para que el formulario alto se pueda deslizar) */
.modal-scroll { overflow-y: auto; flex: 1 1 auto; padding: 16px 20px 18px; }
.memb-loading { text-align: center; color: var(--muted); font-size: 13.5px; padding: 26px 0; }

/* Reserva · elegir método de pago (efectivo / tarjeta) */
.rsv-pago { margin: 16px 0 4px; }
.rsv-pago-opts { display: flex; gap: 10px; margin-top: 8px; }
.rsv-pago-opt { flex: 1; display: flex; align-items: center; gap: 9px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; transition: border-color .15s, background .15s; }
.rsv-pago-opt:has(input:checked) { border-color: var(--gold); background: var(--gold-soft); }
.rsv-pago-opt input { accent-color: var(--gold); flex: 0 0 auto; }
.rsv-pago-opt span { display: flex; flex-direction: column; gap: 1px; }
.rsv-pago-opt b { font-size: 13.5px; }
.rsv-pago-opt small { font-size: 11.5px; color: var(--muted); }

/* Reserva · beneficio aplicado por membresía (automático) */
.rsv-benef-memb { border-color: var(--gold) !important; }
.rsv-benef-auto { flex: 0 0 auto; align-self: center; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--gold); }

/* ============================================================
   ROL RECEPCIÓN · ajustes de vista (usa el panel del dueño con menos cosas)
   ============================================================ */
body.rol-recepcion #revenueCard { display: none; }
body.rol-recepcion #page-dashboard .grid.split { grid-template-columns: 1fr; }

/* ============================================================
   COBRO EN MOSTRADOR (recepción/dueño) · botón en agenda + modal
   ============================================================ */
.ag-cobrar {
  margin-top: 6px; padding: 5px 12px; font-size: 12.5px; font-weight: 700;
  border: 1px solid var(--green, #16a34a); color: var(--green, #16a34a);
  background: var(--green-soft, rgba(22,163,74,.08)); border-radius: 999px; cursor: pointer;
  transition: background .15s, color .15s;
}
.ag-cobrar:hover { background: var(--green, #16a34a); color: #fff; }

.cobro-premios-lbl { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin: 4px 0 8px; }
.cobro-premio-opt {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin-bottom: 8px;
  border: 1px solid var(--line); border-radius: 12px; cursor: pointer; transition: border-color .15s, background .15s;
}
.cobro-premio-opt:has(input:checked) { border-color: var(--gold); background: rgba(var(--gold-rgb, 190,150,60), .07); }
.cobro-premio-opt input { accent-color: var(--gold); flex: 0 0 auto; }
.cobro-premio-ico { flex: 0 0 auto; display: inline-flex; width: 28px; height: 28px; }
.cobro-premio-ico svg { width: 22px; height: 22px; }
.cobro-premio-txt { display: flex; flex-direction: column; gap: 1px; }
.cobro-premio-txt b { font-size: 13.5px; }
.cobro-premio-txt small { font-size: 11.5px; color: var(--muted); }

.cobro-total {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 12px 4px; margin: 6px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  font-size: 14px; color: var(--muted);
}
.cobro-total b { font-size: 22px; color: var(--ink); font-weight: 800; }
.cobro-base { color: var(--muted); font-weight: 500; font-size: 15px; margin-right: 6px; }

.cobro-metodo { display: flex; gap: 10px; margin: 12px 0; }
.cobro-opt {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 11px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer;
  font-size: 13.5px; font-weight: 600; transition: border-color .15s, background .15s;
}
.cobro-opt:has(input:checked) { border-color: var(--gold); background: rgba(var(--gold-rgb, 190,150,60), .08); }
.cobro-opt input { accent-color: var(--gold); }

.cobro-btns { display: flex; gap: 10px; margin-top: 8px; }
.cobro-btns .btn { flex: 1; margin-top: 0; }   /* anula margin-top de .btn-ghost para alinear */

/* Chip de premio canjeado en el historial de citas del cliente */
.cli-cita-premio {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 4px;
  font-size: 11.5px; font-weight: 700; color: var(--gold);
}

/* Recepción no ve dinero: oculta la columna "Gasto total" de la tabla de clientes */
body.rol-recepcion .col-gasto { display: none; }
.cobro-nota { font-size: 11.5px; color: var(--muted); margin: -4px 0 12px; line-height: 1.4; }

/* ============================================================
   GESTIÓN DE RECEPCIÓN (pestaña en Barberos · solo dueño)
   ============================================================ */
.recep-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 16px;
}
.recep-head .btn-add { flex: 0 0 auto; }
.recep-intro { flex: 1 1 300px; min-width: 0; }
.recep-intro h3 { margin: 0; font-size: 17px; }
.recep-intro p { margin: 3px 0 0; font-size: 13px; color: var(--muted); max-width: 460px; }
.recep-list { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.recep-empty { text-align: center; color: var(--muted); font-size: 14px; }
.recep-row { display: flex; align-items: center; gap: 14px; padding: 14px 16px; }
.recep-av {
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--gold-soft, rgba(190,150,60,.15)); color: var(--gold);
  font-weight: 800; font-size: 15px;
}
.recep-info { flex: 1 1 auto; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.recep-info b { font-size: 14.5px; }
.recep-info small { font-size: 12.5px; color: var(--muted); }
.recep-del {
  flex: 0 0 auto; width: auto; margin-top: 0;      /* anula width:100% y margin-top de .btn/.btn-ghost */
  padding: 8px 16px; font-size: 13px;
  color: var(--red, #dc2626); border-color: var(--red, #dc2626);
}
.recep-del:hover { background: var(--red, #dc2626); color: #fff; }

.recep-fld { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
.recep-fld span { font-size: 12.5px; font-weight: 700; color: var(--muted); }
.recep-fld input {
  padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px;
  font-size: 14px; background: var(--surface, #fff); color: var(--ink);
}
.recep-fld input:focus { outline: none; border-color: var(--gold); }

/* ============================================================
   MEMBRESÍAS MULTI-PLAN
   ============================================================ */
/* Admin: tarjeta editable por plan */
.memb-plan-card {
  border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px;
  margin-bottom: 12px; background: var(--surface-soft, rgba(0,0,0,.02));
}
.memb-plan-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.memb-plan-num { font-size: 13px; font-weight: 700; color: var(--gold); text-transform: uppercase; letter-spacing: .04em; }
.memb-plan-del {
  border: none; background: none; cursor: pointer; font-size: 15px; line-height: 1;
  color: var(--muted); padding: 4px 7px; border-radius: 8px;
}
.memb-plan-del:hover { background: rgba(220,38,38,.1); color: var(--red, #dc2626); }

/* Cliente: lista de planes para elegir */
.cli-planes { display: flex; flex-direction: column; gap: 10px; }

/* ============================================================
   FICHA DEL CLIENTE (modal) + membresía de mostrador
   ============================================================ */
.cli-ficha-btn {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: none; border: none; padding: 0; cursor: pointer; text-align: left; color: inherit;
}
.cli-ficha-btn b { transition: color .15s; }
.cli-ficha-btn:hover b { color: var(--gold); text-decoration: underline; }

.ficha-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.ficha-av {
  flex: 0 0 auto; width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--gold-soft, rgba(190,150,60,.15)); color: var(--gold); font-weight: 800; font-size: 18px;
}
.ficha-head-txt { flex: 1 1 auto; min-width: 0; }
.ficha-head-txt h2 { margin: 0; font-size: 20px; }
.ficha-head-txt small { color: var(--muted); font-size: 13px; }
.ficha-close { flex: 0 0 auto; border: none; background: none; cursor: pointer; font-size: 18px; color: var(--muted); padding: 6px 9px; border-radius: 8px; }
.ficha-close:hover { background: var(--surface-soft, rgba(0,0,0,.05)); color: var(--ink); }

.ficha-datos { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }
.ficha-dato { display: flex; justify-content: space-between; padding: 9px 2px; border-bottom: 1px solid var(--line); font-size: 14px; }
.ficha-dato span { color: var(--muted); }
.ficha-dato b { color: var(--ink); }

.ficha-sec { margin: 18px 0 10px; font-size: 15px; }
.ficha-memb { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.ficha-memb.activa { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-color: var(--gold); background: rgba(var(--gold-rgb, 190,150,60), .06); }
.ficha-memb-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ficha-memb-badge { font-size: 11.5px; font-weight: 700; color: var(--gold); text-transform: uppercase; letter-spacing: .04em; }
.ficha-memb-info b { font-size: 15px; }
.ficha-memb-info small { font-size: 12.5px; color: var(--muted); }
.ficha-memb > b { font-size: 15px; }
.ficha-activar-btn { width: auto; margin-top: 10px; padding: 9px 18px; }
.ficha-memb-cancel { flex: 0 0 auto; width: auto; margin-top: 0; color: var(--red, #dc2626); border-color: var(--red, #dc2626); }
.ficha-memb-cancel:hover { background: var(--red, #dc2626); color: #fff; }
.ficha-memb-form { margin-top: 14px; }

/* ============================================================
   FORMULARIO DE CAMPAÑA · selector de tipo (tarjetas) + vista previa
   ============================================================ */
.camp-tipos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.camp-tipo-card {
  position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 5px;
  padding: 12px 8px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.camp-tipo-card input { position: absolute; opacity: 0; pointer-events: none; }
.camp-tipo-card:has(input:checked) { border-color: var(--gold); background: rgba(var(--gold-rgb, 190,150,60), .08); }
.camp-tipo-ico { font-size: 22px; line-height: 1; }
.camp-tipo-txt { display: flex; flex-direction: column; gap: 1px; }
.camp-tipo-txt b { font-size: 12.5px; }
.camp-tipo-txt small { font-size: 10.5px; color: var(--muted); line-height: 1.2; }
.camp-preview {
  font-size: 12.5px; color: var(--muted); line-height: 1.4;
  background: var(--surface-soft, rgba(0,0,0,.03)); border-radius: 8px; padding: 9px 11px; margin: 4px 0 12px;
}

/* El formulario de campaña es el área con scroll (la cabecera queda fija) */
#campForm { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 16px 20px 18px; }

/* ============================================================
   MICROANIMACIONES SUTILES (feedback al tocar) · nivel "sutil"
   Respetan 'reducir movimiento' del sistema.
   ============================================================ */
button, .btn, .nav-item, .cli-nav-item, .bar-tab, .btn-add, .ag-cobrar,
.cli-btn, .cell-user, a { -webkit-tap-highlight-color: transparent; }

@media (prefers-reduced-motion: no-preference) {
  .btn, .btn-primary, .btn-ghost, .btn-add, .cli-btn, .cli-btn-xs, .ag-cobrar,
  .recep-del, .btn-danger, .cli-cta, .btn-dark {
    transition: transform .12s ease, background .16s ease, box-shadow .16s ease, border-color .16s ease;
  }
  .btn:active:not(:disabled), .btn-primary:active:not(:disabled),
  .btn-ghost:active:not(:disabled), .btn-add:active:not(:disabled),
  .cli-btn:active:not(:disabled), .cli-btn-xs:active:not(:disabled),
  .ag-cobrar:active:not(:disabled), .recep-del:active:not(:disabled),
  .btn-danger:active:not(:disabled), .btn-dark:active:not(:disabled) { transform: scale(.97); }
  /* Tarjetas seleccionables: leve hundido al tocar */
  .cobro-premio-opt:active, .cobro-opt:active, .camp-tipo-card:active,
  .memb-modo:active, .rsv-pago-opt:active { transform: scale(.99); }
}

/* ============================================================
   MÓVIL · notificaciones admin abajo/ancho + fin del zoom en inputs
   ============================================================ */
@media (max-width: 880px) {
  /* Panel de notificaciones del admin: dropdown fijo debajo de la barra, a lo ancho */
  #adminNotifPanel:not([hidden]) {
    position: fixed;
    top: 70px; left: 10px; right: 10px;
    width: auto; max-width: none;
    max-height: calc(100svh - 88px);
    display: flex; flex-direction: column;
  }
  #adminNotifPanel .cli-notif-list { max-height: none; flex: 1 1 auto; }

  /* Fin del zoom automático al enfocar un campo: 16px mínimo en móvil */
  input, select, textarea { font-size: 16px; }
}

/* ============================================================
   MÓVIL · pulido de modales (bottom-sheet) — solo aditivo
   ============================================================ */
@media (max-width: 620px) {
  /* Respeta la barra inferior del teléfono para no cortar el último botón */
  .modal-scroll, #campForm, #fichaBody {
    padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    overscroll-behavior: contain;   /* el scroll no se brinca a la página de atrás */
  }
  /* Barrita de arrastre arriba del bottom-sheet (afordancia visual) */
  .modal-box::before {
    content: ""; flex: 0 0 auto;
    width: 40px; height: 4px; border-radius: 999px;
    background: var(--line); margin: 8px auto 2px;
  }
}

/* ============================================================
   CLIENTE en móvil · menú lateral en cajón (3 rayas)
   Reemplaza la barra inferior por el cajón (a pedido del usuario).
   ============================================================ */
@media (max-width: 879px) {
  .cli-hamburger { display: inline-flex; margin-right: 2px; }
  .cli-bottomnav { display: none; }               /* el cajón sustituye la barra inferior */
  .cli-main { padding-bottom: 32px; }

  .cli-backdrop { position: fixed; inset: 0; z-index: 55; background: rgba(0,0,0,.5); }
  .cli-backdrop.show { display: block; }

  .cli-sidebar {
    display: flex; flex-direction: column;
    position: fixed; left: 0; top: 0; bottom: 0; z-index: 60;
    width: 82%; max-width: 300px;
    background: var(--sidebar); color: #c9c9cf;
    padding: 22px 16px; overflow-y: auto;
    transform: translateX(-100%);
    transition: transform .26s var(--ease);
    box-shadow: var(--shadow-lg);
  }
  .cli-sidebar.open { transform: translateX(0); }

  .cli-brand { display: flex; align-items: center; gap: 12px; margin: 4px 6px 26px; }
  .cli-brand-badge { width: 44px; height: 44px; border-radius: 12px; overflow: hidden; background: var(--ink); flex: 0 0 auto; }
  .cli-brand-badge img { width: 100%; height: 100%; object-fit: cover; }
  .cli-brand-name small { display: block; font-size: 10px; color: var(--muted-2); letter-spacing: .08em; text-transform: uppercase; }
  .cli-brand-name strong { font-size: 20px; color: #fff; font-family: var(--font-display); }

  .cli-nav { display: flex; flex-direction: column; gap: 3px; }
  .cli-nav-item {
    display: flex; align-items: center; gap: 13px; padding: 13px 12px; border-radius: 10px;
    color: #b7b7bf; border: none; background: none; width: 100%; text-align: left;
    font-size: 15px; font-weight: 500; position: relative;
  }
  .cli-nav-item svg { width: 20px; height: 20px; flex: 0 0 auto; }
  .cli-nav-item.active { background: linear-gradient(90deg, rgba(199,147,48,.22), rgba(199,147,48,.06)); color: #fff; }

  .cli-side-foot { margin-top: auto; padding-top: 16px; }
  .cli-help { background: var(--sidebar-soft); border-radius: var(--r-md); padding: 12px; margin-bottom: 12px; }
  .cli-help-ico { color: var(--gold); margin-bottom: 8px; }
  .cli-help-ico svg { width: 22px; height: 22px; }
  .cli-help-txt b { display: block; color: #fff; font-size: 13px; }
  .cli-help-txt small { color: var(--muted-2); font-size: 11.5px; }
  .cli-wa { display: block; text-align: center; margin-top: 10px; background: var(--gold-soft); color: #161618; font-weight: 600; font-size: 13px; padding: 10px; border-radius: 8px; text-decoration: none; }
  .cli-logout { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px; border: none; background: none; color: #9a9aa2; font-size: 14px; border-top: 1px solid var(--sidebar-line); }
  .cli-logout svg { width: 18px; height: 18px; }
}

/* ============================================================
   SUPER ADMIN (plataforma) — vista oscura, distinta de las barberías
   ============================================================ */
#superView { display: none; }
#superView.active {
  display: block; min-height: 100vh; background: #0e0d11; color: #ece7dd;
  --sa-gold: #e2b656; --sa-ok: #4ade80; --sa-red: #f87171; --sa-exp: #fb923c;
  --sa-panel: #1a1813; --sa-line: rgba(212,175,55,.16); --sa-muted: #9a9186;
  font-family: "Hanken Grotesk", system-ui, sans-serif;
}
.sa-top {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  padding: 15px clamp(18px,4vw,40px);
  background: rgba(12,11,15,.95); border-bottom: 1px solid var(--sa-line); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.sa-brand { display: flex; align-items: center; gap: 11px; }
.sa-logo { width: 38px; height: 38px; border-radius: 10px; background: linear-gradient(145deg,#f2ca50,#a9791f); display:grid; place-items:center; font-size:19px; }
.sa-brand b { font-family: "Oswald", system-ui, sans-serif; font-size: 18px; letter-spacing: .03em; color: #fff; font-weight: 600; }
.sa-brand b span { color: var(--sa-gold); }
.sa-brand b em { font-style: normal; color: var(--sa-muted); font-weight: 500; font-size: 14px; }
.sa-logout { background: none; border: 1px solid var(--sa-line); color: var(--sa-muted); padding: 8px 16px; border-radius: 9px; font-size: 13.5px; cursor: pointer; }
.sa-logout:hover { color: #fff; border-color: var(--sa-gold); }

.sa-main { max-width: 1080px; margin: 0 auto; padding: clamp(24px,4vw,40px) clamp(16px,4vw,40px) 60px; }
.sa-loading, .sa-empty { text-align: center; color: var(--sa-muted); padding: 80px 20px; line-height: 1.6; }

.sa-metrics { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; margin-bottom: 34px; }
@media (max-width: 620px) { .sa-metrics { grid-template-columns: 1fr 1fr; } }
.sa-metric { background: var(--sa-panel); border: 1px solid var(--sa-line); border-radius: 14px; padding: 20px; text-align: center; }
.sa-m-num { display: block; font-family: "Oswald", system-ui, sans-serif; font-size: 34px; font-weight: 600; color: #fff; line-height: 1; }
.sa-m-lbl { font-size: 12px; color: var(--sa-muted); text-transform: uppercase; letter-spacing: .06em; }
.sa-c-ok { color: var(--sa-ok); } .sa-c-gold { color: var(--sa-gold); } .sa-c-red { color: var(--sa-red); }

.sa-h { font-family: "Oswald", system-ui, sans-serif; font-size: 15px; letter-spacing: .06em; text-transform: uppercase; color: var(--sa-muted); margin-bottom: 14px; }
.sa-list { display: flex; flex-direction: column; gap: 14px; }
.sa-card { background: var(--sa-panel); border: 1px solid var(--sa-line); border-radius: 16px; padding: 18px 20px; }
.sa-card-top { display: flex; align-items: center; gap: 13px; }
.sa-av { width: 46px; height: 46px; border-radius: 12px; overflow: hidden; background: linear-gradient(145deg,#f2ca50,#a9791f); color:#1a1408; font-weight:800; font-size:19px; display:grid; place-items:center; flex:0 0 auto; }
.sa-av img { width: 100%; height: 100%; object-fit: cover; }
.sa-card-name { flex: 1 1 auto; min-width: 0; }
.sa-card-name b { display: block; color: #fff; font-size: 16px; }
.sa-card-name small { color: var(--sa-muted); font-size: 12.5px; word-break: break-word; }
.sa-badge { flex: 0 0 auto; font-size: 11px; font-weight: 700; padding: 5px 11px; border-radius: 999px; text-transform: uppercase; letter-spacing: .04em; }
.sa-st-ok { background: rgba(74,222,128,.14); color: var(--sa-ok); }
.sa-st-trial { background: rgba(226,182,86,.14); color: var(--sa-gold); }
.sa-st-susp { background: rgba(248,113,113,.14); color: var(--sa-red); }
.sa-st-exp { background: rgba(251,146,60,.14); color: var(--sa-exp); }

.sa-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 14px 0; font-size: 13px; color: var(--sa-muted); }
.sa-actions { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; }
.sa-plan { background: rgba(0,0,0,.25); border: 1px solid var(--sa-line); color: #ece7dd; border-radius: 9px; padding: 8px 10px; font-size: 13px; }
.sa-btn { border: 1px solid var(--sa-line); background: none; color: #ece7dd; padding: 8px 15px; border-radius: 9px; font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; transition: background .15s, border-color .15s, color .15s, transform .1s; }
.sa-btn:active { transform: scale(.97); }
.sa-pay { background: var(--sa-gold); color: #1a1408; border-color: var(--sa-gold); }
.sa-pay:hover { background: #f2ca50; }
.sa-susp:hover { border-color: var(--sa-red); color: var(--sa-red); }
.sa-react { border-color: var(--sa-ok); color: var(--sa-ok); }
.sa-visit { color: var(--sa-muted); margin-left: auto; }
.sa-visit:hover { color: #fff; }

/* Aviso de suscripción para el dueño (prueba / vencimiento) */
.sub-banner {
  padding: 12px clamp(18px, 4vw, 30px); font-size: 14px; line-height: 1.5; text-align: center;
  border-bottom: 1px solid var(--line);
}
.sub-banner b { font-weight: 700; }
.sub-banner.sub-trial { background: var(--gold-soft, rgba(199,147,48,.12)); color: var(--gold-ink, #8a6a1a); }
.sub-banner.sub-exp   { background: rgba(220,38,38,.10); color: #b42318; }

/* Cliente · botón "Mándanos un WhatsApp" (Experiencia) */
.cli-wa-card { display: flex; align-items: center; gap: 14px; text-decoration: none; color: inherit; transition: border-color .15s, transform .12s; }
.cli-wa-card:active { transform: scale(.99); }
.cli-wa-card:hover { border-color: #25D366; }
.cli-wa-card-ico { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: rgba(37,211,102,.14); color: #1faa52; }
.cli-wa-card-ico svg { width: 24px; height: 24px; }
.cli-wa-card-txt { flex: 1 1 auto; min-width: 0; }
.cli-wa-card-txt b { display: block; font-size: 15px; color: var(--ink); }
.cli-wa-card-txt small { color: var(--muted); font-size: 12.5px; }
.cli-wa-card-go { color: var(--muted); font-size: 20px; flex: 0 0 auto; }

/* Admin · caja "Conectar MercadoPago" */
.mp-connect-box { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-soft, rgba(0,0,0,.02)); }
.mp-connect-txt b { display: block; font-size: 14px; }
.mp-connect-txt small { color: var(--muted); font-size: 12.5px; }
.mp-connect-btn { width: auto; margin-top: 0; flex: 0 0 auto; background: #009ee3; color: #fff; box-shadow: none; }
.mp-connect-btn:hover { background: #0089c7; }