/* ============================================================
   HOME.CSS — Interfaz pública
   App Barbería Reto's
   ============================================================
   Depende de: tokens.css + ui-system.css
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap");

/* ----------------------------------------------------------
   BODY Y LAYOUT BASE
---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  margin: 0;
  /* iOS PWA standalone: WebKit desplaza el viewport hacia abajo por
     safe-area-inset-top (notch/Dynamic Island) pero NO compensa abajo,
     dejando un gap inferior de exactamente esos mismos píxeles.
     Sumar env(safe-area-inset-top) al min-height rellena ese hueco. */
  min-height: calc(100% + env(safe-area-inset-top, 0px));
  background: var(--color-black);
  overflow: hidden;                   /* Bloquea todo scroll del documento (igual que admin) */
  overscroll-behavior: none;          /* Bloquea pull-to-refresh nativo del navegador */
}

body {
  margin: 0;
  min-height: 100%;
  overflow-x: hidden;
  overscroll-behavior-x: none;
  background: var(--color-black);
  font-family: var(--font-family);
  color: var(--color-ink);
}

.mobile-app {
  position: relative;
  width: 100%;
  max-width: var(--app-max-width);
  margin: 0 auto;
  min-height: 100dvh;
  background: var(--color-black);
  overflow: hidden;
}

/* ----------------------------------------------------------
   HOME SCREEN — Pantalla principal con foto de fondo
---------------------------------------------------------- */
.home-screen {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  padding:
    max(calc(env(safe-area-inset-top, 0px) + var(--top-safe-extra)), var(--top-anchor))
    var(--app-padding-x)
    calc(env(safe-area-inset-bottom, 0px) + var(--space-5));
  background-image: url("https://elquestudio.es/assets/Home_Barberia_Retos.jpg");
  background-size: cover;
  background-position: center;
  color: var(--color-white);
  isolation: isolate;
}

.home-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(0,0,0,0.70) 0%,
      rgba(0,0,0,0.55) 35%,
      rgba(0,0,0,0.72) 75%,
      rgba(0,0,0,1.00) 100%),   /* fundido a negro: se funde con el body negro */
    radial-gradient(circle at 30% 10%, rgba(0,0,0,0.34), transparent 60%);
  z-index: -1;
}

/* Cabecera: logo + botones icono */
.home-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

/* .logo-mark + estado colapsado → unificados en ui-system.css */

/* .top-actions → unificado en ui-system.css */

.icon-btn {
  position: relative;
  width: 44px;
  height: 44px;
  border: none;
  background: transparent;
  color: var(--color-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
}

.icon-btn svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: var(--stroke-icon);
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* .icon-btn-badge → unificado en ui-system.css */

/* Área de texto y CTAs (parte inferior) */
.hero-copy {
  position: relative;
  margin-top: auto;
  width: 100%;
  padding-bottom: clamp(60px, 10vh, 110px);
}

/* "R E T O ' S" con línea → unificado en ui-system.css */

/* Contenedor de botones CTA */
.home-ctas {
  margin-top: clamp(28px, 5vh, 48px);
  display: grid;
  gap: var(--space-4);
}

/* .cta base → unificado en ui-system.css */
.cta .cta-icon { width: 22px; height: 22px; flex-shrink: 0; object-fit: contain; }

/* "Reservar cita" — base blanco en ui-system.css */

/* "Llamar" — transparente oscuro */
.cta-secondary {
  background: rgba(0, 0, 0, 0.78);
  color: var(--color-white);
}

.cta-secondary .cta-icon {
  filter: brightness(0) invert(1);
}

/* ----------------------------------------------------------
   SCRIM — Fondo oscuro detrás del drawer
---------------------------------------------------------- */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: var(--color-scrim);
  opacity: 0;
  pointer-events: none;
  z-index: 900;
  transition: opacity var(--motion-slow) var(--ease-out);
}

body.drawer-open { overflow: hidden; }
body.drawer-open::before { opacity: 1; pointer-events: auto; }
body.sheet-scroll-lock { overflow: hidden; }

@supports ((-webkit-backdrop-filter: blur(8px)) or (backdrop-filter: blur(8px))) {
  body::before {
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    background: rgba(0,0,0,0.28);
  }
}

/* ----------------------------------------------------------
   SIDE DRAWER — Menú lateral (desliza desde la derecha)
---------------------------------------------------------- */
#side-drawer {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100%;
  max-width: var(--app-max-width);
  transform: translateX(-50%) translate3d(100%, 0, 0);
  background: var(--color-white);
  overflow-x: hidden;
  overflow-y: scroll;
  overscroll-behavior: none;
  -webkit-overflow-scrolling: touch;
  opacity: 0;
  visibility: hidden;
  transition: transform var(--motion-slow) var(--ease-out),
              opacity var(--motion-slow) var(--ease-out),
              visibility 0s var(--motion-slow);
  pointer-events: none;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  padding-bottom: max(calc(env(safe-area-inset-bottom, 0px) + 75px), 75px);
}

#side-drawer.open {
  transform: translateX(-50%) translate3d(0, 0, 0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: transform var(--motion-slow) var(--ease-out),
              opacity var(--motion-slow) var(--ease-out),
              visibility 0s;
}

/* ----------------------------------------------------------
   PANEL HEADER — Regla unificada para drawer + todos los sheets
   Garantiza que logo (56px) y botón X estén siempre en la
   misma posición, tanto en el menú como en login/perfil/etc.
---------------------------------------------------------- */
.panel-head,
#side-drawer .drawer-head,
.app-panel-head,
.ui-head,
.ui-screen-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-shrink: 0;
}

/* margin-bottom + background → unificado en ui-system.css */

/* El padding superior del drawer lo maneja él mismo
   (necesita safe-area). Los sheets lo heredan del container. */
#side-drawer .drawer-head {
  padding: max(calc(env(safe-area-inset-top, 0px) + var(--sheet-safe-extra)), var(--top-anchor))
           var(--app-padding-x) 0;
}

/* Logo: siempre 56px en todos los panels */
.drawer-logo,
.ui-head__logo,
.ui-screen-logo {
  width: 56px;
  height: auto;
  display: block;
  flex-shrink: 0;
}

.drawer-close,
.ui-head__close,
.ui-screen-close {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--color-ink);
  cursor: pointer;
  padding: 0;
}

.drawer-close svg,
.ui-head__close svg,
.ui-screen-close svg {
  width: 32px;
  height: 32px;
  stroke: currentColor;
  fill: none;
  stroke-width: var(--stroke-icon);
  stroke-linecap: round;
}

/* Layout de .drawer-menu → ui-system.css (compartido con admin) */

/* Estilos de .drawer-item → ui-system.css (compartido con admin) */

#side-drawer a.drawer-item.call {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: var(--color-ink);
}

.drawer-item-with-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.drawer-item-badge {
  width: 22px;
  min-width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--color-danger);
  color: var(--color-white);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.menu-call-icon { width: 22px; height: 22px; flex-shrink: 0; }

/* Botón "Iniciar sesión" / "Cerrar Sesión" — flujo flex nativo, siempre al fondo del drawer */
#side-drawer .drawer-login-btn {
  flex-shrink: 0;
  margin-top: auto;  /* empuja login + admin al fondo del drawer */
  align-self: center;
  width: var(--form-max-width);
  max-width: 100%;
  height: var(--control-height);
  border-radius: var(--radius-pill);
  border: 2px solid var(--color-black);
  background: var(--color-white);
  color: var(--color-black);
  font-family: var(--font-family);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-semibold);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* "Cerrar Sesión" (logueado) — solo texto, sin pill */
#side-drawer .drawer-login-btn.logged-in {
  height: auto !important;
  min-height: 0 !important;
  padding: var(--space-3) 0 !important;
  border: none !important;
  background: transparent !important;
  font-size: var(--font-size-item) !important;  /* 21px Semi Bold — Figma */
  font-weight: var(--font-weight-semibold) !important;
  width: calc(100% + 69px + var(--app-padding-x)) !important;  /* ancho completo del drawer */
  max-width: none !important;
  text-align: center;
  justify-content: center;
  margin-bottom: 0;  /* sin enlace admin debajo → no necesita separación extra */
}

/* "Acceso Administración" — flujo flex nativo, siempre bajo el botón de login */
#side-drawer .drawer-admin-link {
  flex-shrink: 0;
  display: block;
  align-self: center;
  text-align: center;
  color: var(--color-muted);
  font-family: var(--font-family);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  margin-top: 20px;
}

/* ----------------------------------------------------------
   SHEETS BASE — Todos los paneles (auth, reserva, citas…)
---------------------------------------------------------- */
.sheet {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100%;
  max-width: var(--app-max-width);
  background: var(--color-white);
  transform: translateX(-50%) translateY(100%);
  z-index: 30;
  transition: transform var(--motion-base) var(--ease-out);
}

.sheet.open {
  transform: translateX(-50%) translateY(0);
}

/* Sheets que deslizan desde la derecha */
.sheet.slide-in {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 50%;
  background: var(--color-white);
  overflow-y: scroll;               /* "scroll" (no "auto") fuerza scroll container
                                       incluso si el contenido cabe en pantalla;
                                       sin esto, iOS no respeta overscroll-behavior
                                       en paneles cortos como Contacto/Perfil */
  overscroll-behavior: none;        /* "none" (no "contain") bloquea rubber-band
                                       y propagación de scroll al documento */
  -webkit-overflow-scrolling: touch;
  padding: max(calc(env(safe-area-inset-top, 0px) + var(--sheet-safe-extra)), var(--top-anchor))
           var(--app-padding-x)
           max(calc(env(safe-area-inset-bottom, 0px) + 32px), 48px);
  transform: translateX(-50%) translate3d(100%, 0, 0) scale(0.985);
  opacity: 0;
  visibility: hidden;
  transition: transform var(--motion-slow) var(--ease-out),
              opacity var(--motion-slow) var(--ease-out),
              visibility 0s var(--motion-slow);
  pointer-events: none;
  z-index: 1100;
}

.sheet.slide-in.open {
  transform: translateX(-50%) translate3d(0, 0, 0) scale(1);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: transform var(--motion-slow) var(--ease-out),
              opacity var(--motion-slow) var(--ease-out),
              visibility 0s;
}

.ui-screen-body {
  padding-top: 0;
  padding-bottom: max(calc(env(safe-area-inset-bottom, 0px) + 16px), 24px);
}

/* ----------------------------------------------------------
   AUTH SCREEN — Login, registro, recuperar contraseña
---------------------------------------------------------- */
/* .auth-body centrado → movido a ui-system.css para compartir con admin */

/* .ui-title margin → unificado en ui-system.css */
.auth-body h2 {
  margin: 0 0 var(--space-6); /* resetea margin-top browser del h2 */
}

.auth-help {
  font-size: var(--font-size-small);
  color: var(--color-muted);
  line-height: 1.4;
  margin-bottom: var(--space-5);
}

/* .auth-input — solo overrides de color sobre .ui-control (ui-system.css).
   Estructura (alto, padding, radio, fuente, borde, transición) viene de .ui-control. */
.auth-input {
  background: var(--color-white);
  color: var(--color-ink);
}

.auth-input::placeholder { color: var(--color-muted); opacity: 1; }
.auth-input:focus         { border-color: var(--color-black); }
.auth-input.field-error   { border-color: var(--color-danger); }

.auth-input + .auth-input,
.auth-input + .auth-input-wrap,
.auth-input-wrap + .auth-input,
.auth-input-wrap + .auth-input-wrap {
  margin-top: var(--space-3);
}

.auth-input-wrap,
.password-field-wrap {
  position: relative;
  width: 100%;
  max-width: var(--form-max-width);
  margin-left: auto;
  margin-right: auto;
}

.auth-input-wrap .auth-input,
.auth-input-wrap .auth-input-password,
.password-field-wrap .password-field,
.password-field-wrap .auth-input-password {
  width: 100%;
  max-width: 100%;
  padding-right: 56px;
}

.auth-eye-btn,
.auth-eye-btn-subtle,
.password-eye-btn {
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--color-muted);
  cursor: pointer;
  padding: 0;
}

/* Evita que .ui-btn:hover { transform: none } desplace el ojo */
.auth-eye-btn:hover,
.auth-eye-btn-subtle:hover,
.password-eye-btn:hover {
  transform: translateY(-50%);
}

.auth-eye-btn svg,
.auth-eye-btn-subtle svg,
.password-eye-btn svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  fill: none;
  stroke-width: var(--stroke-icon);
  stroke-linecap: round;
}

/* .auth-primary-btn — solo overrides de color sobre ui-system.css (Tier 1 + shared block).
   Estructura (alto, radio, fuente, display, cursor) viene de ui-system.css. */
.auth-primary-btn {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: opacity var(--motion-fast) var(--ease-out),
              transform var(--motion-fast) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.auth-primary-btn:active   { transform: scale(0.97); opacity: 0.85; }
/* Login/register/reset disabled → semi-opaco. Perfil save → gris sólido (ui-system.css, ID rule) */
.auth-primary-btn:disabled { opacity: 0.4; pointer-events: none; }

.auth-secondary-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: var(--form-max-width);
  height: var(--control-height);
  margin-left: auto;
  margin-right: auto;
  border-radius: var(--radius-pill);
  border: 2px solid var(--color-black);
  background: var(--color-white);
  color: var(--color-black);
  font-family: var(--font-family);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-semibold);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  cursor: pointer;
  transition: opacity var(--motion-fast) var(--ease-out),
              transform var(--motion-fast) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.auth-secondary-btn:active { transform: scale(0.97); opacity: 0.85; }

/* "¿Has olvidado tu contraseña?" — texto pequeño, no botón principal */
.auth-link-btn {
  display: block;
  width: 100%;
  max-width: var(--form-max-width);
  margin-left: auto;
  margin-right: auto;
  background: none;
  border: none;
  color: var(--color-muted);
  font-family: var(--font-family);
  font-size: 14px;
  font-weight: var(--font-weight-regular);
  text-align: center;
  cursor: pointer;
  padding: var(--space-1) 0;
}

/* home.css carga después de ui-system.css → sin !important necesario
   Figma: Inter Semi Bold 15px, color muted */
.auth-body .auth-link-btn,
.sheet.slide-in .auth-link-btn {
  font-size: 15px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-muted);
  letter-spacing: 0;
}

/* Gap Figma entre ¿Has olvidado? y Regístrate = 80px
   Con gap:12px de flex ya aplicado → margin-top extra: 68px */
.auth-body .auth-link-btn + .auth-secondary-btn,
.sheet.slide-in .auth-link-btn + .auth-secondary-btn {
  margin-top: 68px;
}

.auth-msg {
  display: block;
  width: 100%;
  max-width: var(--form-max-width);
  margin-left: auto;
  margin-right: auto;
  font-size: var(--font-size-small);
  line-height: 1.4;
  text-align: center;
}
.auth-msg.err { color: var(--color-danger); }
.auth-msg.ok  { color: var(--color-success); }

.field-inline-error,
.section-global-error {
  display: block;
  width: 100%;
  max-width: var(--form-max-width);
  margin-left: auto;
  margin-right: auto;
  font-size: var(--font-size-small);
  color: var(--color-danger);
  line-height: 1.4;
}

/* Espacio entre el bloque de inputs y el bloque de botones */
.auth-input + .ui-actions,
.auth-input-wrap + .ui-actions {
  margin-top: var(--space-5);
}

/* Registro: más espacio antes del botón — el formulario tiene 6 campos
   y necesita más respiración. Figma: ~83px, intermedio: 48px */
#register-view .ui-actions {
  margin-top: 48px;
}

.auth-context-msg {
  font-size: var(--font-size-small);
  color: var(--color-muted);
  text-align: center;
  line-height: 1.4;
}

/* ----------------------------------------------------------
   CONTACT SCREEN
---------------------------------------------------------- */
.contact-body {
  /* max-width y margin:auto heredados de .auth-body en ui-system.css (var(--form-max-width) centrado) */
  width: 100%;
}

.contact-body h2 {
  font-family: var(--font-family);
  font-size: var(--font-size-title);
  font-weight: var(--font-weight-semibold);
  color: var(--color-ink);
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-6);
}

.contact-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);   /* 32px — mismo ritmo entre todas las secciones */
}

.contact-brand-logo { width: 220px; height: auto; }

.contact-block { display: flex; flex-direction: column; gap: var(--space-3); }

.contact-icon { display: flex; align-items: center; gap: var(--space-3); }
.contact-icon img { width: 24px; height: 24px; flex-shrink: 0; }

.contact-text,
.contact-phone-link {
  margin: 0;             /* anula el margen por defecto del <p> */
  font-family: var(--font-family);
  font-size: var(--font-size-control);
  font-weight: var(--font-weight-medium);
  color: var(--color-ink);
  text-decoration: none;
  line-height: 1.4;
}

.contact-hours-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: var(--space-3);
}

.contact-hours-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);   /* 16px entre columna día y columna horas */
}

/* Columna día — ancho fijo para que todas las horas arranquen en el mismo x */
.contact-hours-day {
  min-width: 80px;       /* cubre "Miércoles" (el más ancho: 73px) + margen */
  flex-shrink: 0;
  font-size: var(--font-size-control);
  font-weight: var(--font-weight-medium);
  color: var(--color-ink);
}

/* Columna horas — alineada verticalmente con todas las filas */
.contact-hours-time {
  font-size: var(--font-size-control);
  font-weight: var(--font-weight-medium);
  color: var(--color-ink);
}

/* Separador: espacio a ambos lados del "|" */
.contact-hours-separator { margin: 0 var(--space-1); }

/*
  Reglas de visualización del horario:
  ─ Día normal         → 9:30-14:00 | 16:30-21:00
  ─ Tarde cerrada      → 9:30-14:00 | Cerrado  (en rojo)
  ─ Todo el día cerrado → Cerrado               (en rojo, sin separador)
*/

/* Todo cerrado: ocultar el "Cerrado" duplicado de mañana y el separador */
.contact-hours-morning.closed { display: none; }
.contact-hours-time:has(.contact-hours-morning.closed) .contact-hours-separator { display: none; }

/* "Cerrado" (tarde o día entero) → color danger */
.contact-hours-afternoon.closed,
.contact-hours-time.closed { color: var(--color-danger); }

.contact-social { display: flex; gap: var(--space-4); padding-top: var(--space-2); }

.contact-social-link {
  display: flex; align-items: center; gap: var(--space-2);
  text-decoration: none; color: var(--color-ink);
  font-size: var(--font-size-small); font-weight: var(--font-weight-semibold);
}

.contact-social-icon { width: 36px; height: 36px; }

/* ----------------------------------------------------------
   PROFILE SCREEN
---------------------------------------------------------- */
.profile-body {
  max-width: var(--form-max-width);
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.profile-password-mask {
  font-size: var(--font-size-body);
  color: var(--color-muted);
  letter-spacing: 0.15em;
  margin-bottom: var(--space-3);
}

/* .profile-change-password-btn → unificado en ui-system.css */
.profile-delete-btn {
  background: none; border: none;
  font-family: var(--font-family);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-semibold);
  color: var(--color-ink-deep);
  cursor: pointer; padding: var(--space-2) 0;
  text-decoration: underline; display: block;
  max-width: var(--form-max-width); margin-left: auto; margin-right: auto;
}

/* Espaciado y color del bloque inferior del perfil */
/* #btn-profile-save margin-top: 36px → unificado en ui-system.css */
#btn-profile-delete { margin-top: 16px; color: var(--color-ink-deep); }

/* ----------------------------------------------------------
   DELETE ACCOUNT SCREEN
---------------------------------------------------------- */
.delete-account-help {
  margin-bottom: var(--space-6);
}

.delete-account-body .ui-actions {
  margin-top: 36px;
}

/* Botón "Eliminar cuenta" habilitado → rojo */
#btn-delete-account-confirm:not(:disabled) {
  background: var(--color-danger);
  border-color: var(--color-danger);
  color: var(--color-white);
}

/* "Cancelar" → botón secundario visible (pill outline), no link */
#btn-delete-account-cancel {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: var(--form-max-width);
  height: var(--control-height);
  margin-left: auto;
  margin-right: auto;
  border-radius: var(--radius-pill);
  border: 2px solid var(--color-ink-deep);
  background: var(--color-white);
  color: var(--color-ink-deep);
  font-family: var(--font-family);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  text-decoration: none;
}

/* ----------------------------------------------------------
   BOOKING FLOW — Panel de reserva (sube desde abajo)
   FIX CRÍTICO: position: fixed (antes era absolute → fuera de pantalla)
---------------------------------------------------------- */
.booking-flow-screen,
.appointments-screen {
  position: fixed;
  left: 50%;
  transform: translateX(-50%) translateY(100%);
  bottom: 0;
  width: 100%;
  max-width: var(--app-max-width);
  top: max(calc(env(safe-area-inset-top, 0px) + 80px), 112px);
  background: transparent;
  pointer-events: none;
  z-index: 30;
  transition: transform var(--motion-base) var(--ease-out);
}

.booking-flow-screen.open,
.appointments-screen.open {
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

/* Panel con fondo gris, tarjetas blancas encima (igual que Figma) */
.booking-flow-sheet,
.appointments-sheet {
  position: relative;
  width: 100%;
  height: 100%;
  background: var(--color-surface-dim);
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  padding: var(--space-6) var(--app-padding-x)
           max(calc(env(safe-area-inset-bottom, 0px) + 12px), 20px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: var(--shadow-popup);
}

.booking-flow-scroll,
.appointments-scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: none;
  -webkit-overflow-scrolling: touch;
  min-height: 0;
}

.booking-flow-sheet.waitlist-range-open .booking-flow-scroll {
  overflow: hidden;
}

.booking-flow-sticky-top,
.appointments-sticky-top {
  flex: 0 0 auto;
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--color-surface-dim);
  padding-bottom: var(--space-3);
}

.appointments-title-row,
.booking-flow-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

/* .appointments-title-row h2, .booking-flow-title-row h2 → tipografía en ui-system.css */

.booking-flow-close-btn,
.appointments-close-btn {
  /* Estructura compartida → ui-system.css */
  color: var(--color-ink);
}

.booking-step { min-height: 0; }

.ui-filter-chip {
  min-width: 96px; height: 41px;
  border-radius: var(--radius-pill);
  border: 2px solid var(--color-border);
  background: transparent;
  color: var(--color-muted);
  font-family: var(--font-family);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-semibold);
  cursor: pointer; padding: 0 var(--space-3);
  transition: background var(--motion-fast) var(--ease-out),
              border-color var(--motion-fast) var(--ease-out),
              color var(--motion-fast) var(--ease-out);
}

.ui-filter-chip.is-active {
  background: var(--color-black);
  border-color: var(--color-black);
  color: var(--color-white);
}

.appointments-list {
  display: flex; flex-direction: column;
  gap: var(--space-3); padding-top: var(--space-2);
}

.appointments-sheet.is-empty .appointments-list,
.appointments-sheet.is-empty .appointments-msg {
  flex: 1; display: flex;
  align-items: center; justify-content: center;
}

.appointments-sheet.popup-open .appointments-scroll { overflow: hidden; }

/* Contenedor flex-column para que .appointments-empty { flex:1 } funcione */
.appointments-scroll { display: flex; flex-direction: column; }

/* ----------------------------------------------------------
   POPUPS — Confirmación de reserva y acciones
   Overlay + card base → ui-system.css (.ui-popup-overlay + .ui-popup-card)
   Aquí solo quedan estilos de CONTENIDO específicos del user.
---------------------------------------------------------- */

.booking-confirm-primary-btn {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: var(--control-height);
  border-radius: var(--radius-pill);
  border: 2px solid var(--color-black);
  background: var(--color-black); color: var(--color-white);
  font-family: var(--font-family);
  font-size: var(--font-size-body); font-weight: var(--font-weight-semibold);
  cursor: pointer; margin-top: var(--space-4);
}

/* ----------------------------------------------------------
   SUCCESS POPUP
   Overlay → ui-system.css (.ui-popup-overlay)
   Aquí solo: tamaño de card y contenido específico.
---------------------------------------------------------- */
/* Success popup: estructura en ui-system.css.
   Aquí solo overrides de contenido si hiciera falta. */

/* ----------------------------------------------------------
   BOOKING FLOW — Botón de volver
---------------------------------------------------------- */
.booking-flow-back-btn {
  width: 44px;
  height: 44px;
  border: none;
  background: transparent;
  color: var(--color-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
}

.booking-flow-back-btn svg {
  width: 34px;
  height: 34px;
  fill: none;
  stroke: currentColor;
  stroke-width: var(--stroke-icon);
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ----------------------------------------------------------
   BOOKING FLOW — Filtros de barbero (Todos / Salvi / Edu)
---------------------------------------------------------- */
.booking-stylist-filters {
  margin-top: var(--space-5);
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-3);
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: var(--space-1);
}

.booking-stylist-filters::-webkit-scrollbar { display: none; }

.booking-filter-chip {
  flex: 1 1 0;
  min-width: 96px;
  height: 41px;
  border-radius: var(--radius-pill);
  border: 2px solid var(--color-border);
  background: transparent;
  color: var(--color-muted);
  font-family: var(--font-family);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--space-3);
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--motion-fast) var(--ease-out),
              border-color var(--motion-fast) var(--ease-out),
              color var(--motion-fast) var(--ease-out);
  /* Resetear estilos de ui-btn */
  box-shadow: none !important;
}

.booking-filter-chip.active,
.booking-filter-chip[aria-pressed="true"] {
  background: var(--color-black);
  border-color: var(--color-black);
  color: var(--color-white);
  box-shadow: none !important;
}

/* ----------------------------------------------------------
   BOOKING FLOW — Cards de servicios
---------------------------------------------------------- */
.booking-service-list {
  margin-top: var(--space-5);
  display: grid;
  gap: var(--space-3);
}

.booking-service-card {
  width: 100%;
  min-height: 71px;
  border-radius: var(--radius-card);
  border: none;
  background: var(--color-white);
  padding: 14px var(--space-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  text-align: left;
  cursor: pointer;
  box-shadow: var(--shadow-subtle);
  transition: box-shadow var(--motion-fast) var(--ease-out);
  /* Resetear ui-btn */
  font-family: var(--font-family);
  color: var(--color-ink-deep);
}

.booking-service-card.active,
.booking-service-card[aria-pressed="true"] {
  box-shadow: inset 0 0 0 2px var(--color-ink-deep);
}

.booking-service-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  flex: 1;
}

.booking-service-name {
  margin: 0;
  color: var(--color-ink-deep);
  font-size: var(--font-size-item);
  font-weight: var(--font-weight-semibold);
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.booking-service-duration {
  margin: 4px 0 0;
  color: var(--color-ink-deep);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-regular);
  line-height: 1.15;
}

.booking-service-price {
  margin: 0;
  color: var(--color-ink-deep);
  font-size: var(--font-size-price);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  letter-spacing: -0.01em;
  white-space: nowrap;
  flex-shrink: 0;
  text-align: right;
}

.sheet-description {
  margin: 0 0 var(--space-3);
  color: var(--color-muted);
  font-size: var(--font-size-body);
  line-height: 1.35;
}

/* ----------------------------------------------------------
   BOOKING FLOW — Calendario
---------------------------------------------------------- */
.booking-calendar-card {
  background: var(--color-white);
  border-radius: var(--radius-card);
  padding: 18px var(--space-4);
}

.booking-calendar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: 10px;
}

.booking-calendar-nav {
  width: 44px;
  height: 44px;
  border: none;
  background: transparent;
  color: var(--color-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
}

.booking-calendar-nav svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: currentColor;
  stroke-width: var(--stroke-icon-lg);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.booking-month-label {
  margin: 0;
  flex: 1;
  text-align: center;
  color: var(--color-ink-deep);
  font-family: var(--font-family);
  font-size: var(--font-size-price);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  letter-spacing: -0.02em;
}

.booking-calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  justify-content: space-between;
  gap: 0;
  margin: 6px 0 10px;
}

.booking-calendar-weekdays span {
  text-align: center;
  color: var(--color-black);
  font-family: var(--font-family);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-regular);
  line-height: 1;
}

.booking-calendar-empty-msg {
  margin: var(--space-4) 0 0;
  color: var(--color-muted);
  font-family: var(--font-family);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-regular);
  line-height: 1.4;
  text-align: center;
}

.booking-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  justify-content: space-between;
  column-gap: 4px;
  row-gap: 4px;
}

/* Celdas de días */
#panel-booking .booking-calendar-grid > * {
  aspect-ratio: 1;
  min-height: 40px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-family);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-body);
  line-height: 1;
  padding: 0;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  cursor: pointer;
}

#panel-booking .booking-calendar-grid > *.outside,
#panel-booking .booking-calendar-grid > *.is-outside,
#panel-booking .booking-calendar-grid > *[aria-disabled="true"] {
  background: var(--color-white);
  color: var(--color-surface-dim);
  border: none !important;
  box-shadow: none !important;
  cursor: default;
}

#panel-booking .booking-calendar-grid > *.available {
  background: var(--color-success);
  color: var(--color-black);
}

#panel-booking .booking-calendar-grid > *.full {
  background: var(--color-danger);
  color: var(--color-white);
}

#panel-booking .booking-calendar-grid > *.blocked,
#panel-booking .booking-calendar-grid > *.holiday,
#panel-booking .booking-calendar-grid > *.pending {
  background: var(--color-border);
  color: var(--color-black);
}

#panel-booking .booking-calendar-grid > *.vacation {
  background: var(--color-vacation);
  color: var(--color-black);
}

#panel-booking .booking-calendar-grid > *.selected:not([aria-disabled="true"]) {
  background: var(--color-white) !important;
  border: 2px solid var(--color-success) !important;
  color: var(--color-ink-deep) !important;
}

/* ----------------------------------------------------------
   BOOKING FLOW — Franjas horarias (slots)
---------------------------------------------------------- */
.booking-day-slots-card {
  margin-top: var(--space-3);
  background: var(--color-white);
  border-radius: var(--radius-card);
  padding: var(--space-4) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.booking-slot-group { display: grid; gap: var(--space-2); }

.booking-slot-group-title {
  margin: 0;
  color: var(--color-ink);
  font-family: var(--font-family);
  font-size: var(--font-size-price);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  letter-spacing: -0.02em;
}

.booking-slots-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
  gap: var(--space-2);
}

.booking-slot-chip {
  width: 100%;
  height: 33px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-ink);
  background: var(--color-white);
  color: var(--color-ink);
  font-family: var(--font-family);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-regular);
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.booking-slot-chip.selected {
  background: var(--color-success);
  color: var(--color-ink);
  border-color: var(--color-success);
}

.booking-slots-empty {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--font-size-body);
  line-height: 1.3;
  font-weight: var(--font-weight-medium);
}

/* ----------------------------------------------------------
   BOOKING FLOW — Botón reservar y lista de espera
---------------------------------------------------------- */
.booking-reserve-btn {
  width: 100%;
  height: var(--control-height);
  margin-top: 14px;
  border-radius: var(--radius-pill);
  border: 2px solid var(--color-border);
  background: var(--color-surface-dim);
  color: var(--color-muted);
  font-family: var(--font-family);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--motion-fast) var(--ease-out),
              color var(--motion-fast) var(--ease-out),
              border-color var(--motion-fast) var(--ease-out);
}

.booking-reserve-btn.is-enabled {
  background: var(--color-black);
  color: var(--color-white);
  border-color: var(--color-black);
}

.booking-waitlist-btn {
  width: 100%;
  height: 44px;
  min-height: 44px;
  border-radius: var(--radius-pill);
  border: none;
  background: var(--color-black);
  color: var(--color-white);
  font-family: var(--font-family);
  font-size: 16px;
  font-weight: var(--font-weight-semibold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.booking-waitlist-btn:disabled {
  background: var(--color-border);
  color: var(--color-muted);
}

.booking-waitlist-periods {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.booking-waitlist-period-chip {
  min-height: 44px;
  border-radius: var(--radius-pill);
  border: 2px solid var(--color-ink);
  background: var(--color-white);
  color: var(--color-ink);
  font-family: var(--font-family);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-medium);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.booking-waitlist-period-chip.active {
  background: var(--color-black);
  color: var(--color-white);
  border-color: var(--color-black);
}

.booking-flow-msg {
  margin: var(--space-5) 0 var(--space-3);
  min-height: 20px;
  color: var(--color-muted);
  font-size: var(--font-size-small);
  line-height: 1.35;
  font-weight: var(--font-weight-medium);
  text-align: center;
}

.booking-flow-msg.ok  { color: var(--color-success); }
.booking-flow-msg.err { color: var(--color-danger); }

/* ----------------------------------------------------------
   BOOKING FLOW — Popup waitlist rango horario
---------------------------------------------------------- */
/* Overlay → ui-system.css (.ui-popup-overlay--over) */
.booking-waitlist-range-popup {
  flex-direction: column;
  padding: var(--app-padding-x) 14px;
}

.booking-waitlist-range-card {
  width: 100%;
  padding: var(--space-8) var(--space-6) var(--space-8);
  display: flex;
  flex-direction: column;
}

.booking-waitlist-range-title {
  margin: 0;
  color: var(--color-ink-deep);
  font-family: var(--font-family);
  font-size: var(--font-size-title);
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.02em;
  text-align: center;
}

.booking-waitlist-range-subtitle {
  margin: var(--space-8) 0 0;
  color: var(--color-ink-deep);
  font-family: var(--font-family);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-semibold);
  text-align: left;
}

.booking-waitlist-range-labels {
  margin-top: var(--space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  color: var(--color-ink-deep);
  font-family: var(--font-family);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-semibold);
}

.booking-waitlist-range-slider {
  position: relative;
  margin-top: var(--space-3);
  height: 46px;
}

.booking-waitlist-range-track {
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  height: 6px;
  border-radius: var(--radius-pill);
  transform: translateY(-50%);
  background: var(--color-border);
}

.booking-waitlist-range-input {
  position: absolute;
  left: 0; right: 0; top: 0;
  width: 100%; height: 100%;
  margin: 0;
  background: transparent;
  border: none;
  outline: none;
  pointer-events: none;
  touch-action: none;
  -webkit-appearance: none;
  appearance: none;
}

.booking-waitlist-range-input::-webkit-slider-runnable-track {
  height: 6px;
  background: transparent;
}

.booking-waitlist-range-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 30px; height: 30px;
  border-radius: 50%;
  border: none;
  background: var(--color-black);
  pointer-events: auto;
  margin-top: -12px;
  box-shadow: var(--shadow-chip);
}

.booking-waitlist-range-input::-moz-range-track {
  height: 6px;
  background: transparent;
  border: none;
}

.booking-waitlist-range-input::-moz-range-thumb {
  width: 30px; height: 30px;
  border-radius: 50%;
  border: none;
  background: var(--color-black);
  pointer-events: auto;
  box-shadow: var(--shadow-chip);
}

.booking-waitlist-range-confirm-btn {
  margin-top: var(--space-8);
  width: 100%;
  height: var(--control-height);
  border-radius: var(--radius-pill);
  border: 2px solid var(--color-black);
  background: var(--color-black);
  color: var(--color-white);
  font-family: var(--font-family);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-semibold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.booking-waitlist-range-confirm-btn:disabled {
  background: var(--color-border);
  color: var(--color-muted);
  border-color: var(--color-border);
}

/* ----------------------------------------------------------
   BOOKING FLOW — Pantalla de confirmación exitosa
---------------------------------------------------------- */
.booking-confirm-card {
  width: calc(100% - 28px);
  max-width: 400px;
  height: min(624px, 80dvh);
  background: var(--color-white);
  border-radius: var(--radius-card);
  padding: clamp(44px, 8dvh, 72px) var(--app-padding-x);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(24px, 4.2dvh, 36px);
}

.booking-confirm-icon {
  width: 78px; height: 78px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--color-black);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-icon);
}

.booking-confirm-icon svg {
  width: 56%; height: 56%;
  fill: none;
  stroke: var(--color-white);
  stroke-width: var(--stroke-icon-lg);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.booking-confirm-title {
  margin: clamp(24px, 4.2dvh, 34px) 0 0;
  width: 100%;
  color: var(--color-ink-deep);
  font-family: var(--font-family);
  font-size: var(--font-size-stat);
  line-height: 1.04;
  letter-spacing: -0.02em;
  font-weight: var(--font-weight-bold);
  text-align: center;
}

.booking-confirm-title-error { color: var(--color-danger); }

.booking-confirm-summary {
  margin: var(--space-4) auto 0;
  max-width: 320px;
  color: var(--color-ink);
  font-family: var(--font-family);
  font-size: var(--font-size-body);
  line-height: 1.3;
  font-weight: var(--font-weight-medium);
  text-align: center;
  white-space: pre-line;
}

.booking-confirm-summary-error { color: var(--color-danger); }

.booking-confirm-primary-btn {
  margin-top: clamp(36px, 6dvh, 52px);
  width: 100%;
  height: var(--control-height);
  border-radius: var(--radius-pill);
  border: 2px solid var(--color-black);
  background: var(--color-white);
  color: var(--color-black);
  font-family: var(--font-family);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-semibold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.booking-confirm-exit-btn {
  margin-top: clamp(24px, 4.6dvh, 40px);
  border: none;
  background: transparent;
  color: var(--color-ink);
  font-family: var(--font-family);
  font-size: var(--font-size-item);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  cursor: pointer;
  padding: 0;
}

/* ----------------------------------------------------------
   SWAP POPUP
---------------------------------------------------------- */
#booking-swap-popup .ui-popup-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.booking-swap-existing-info {
  color: var(--color-ink);
  font-family: var(--font-family);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-semibold);
  line-height: 1.3;
  text-align: center;
  margin: 0;
}

#btn-booking-swap-force {
  margin-top: 0;
  background: var(--color-black);
  color: var(--color-white);
  border-color: var(--color-black);
}

.booking-swap-desc {
  color: var(--color-muted);
  font-family: var(--font-family);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-regular);
  line-height: 1.4;
  text-align: center;
  margin: 0;
}

.booking-legacy-hidden { display: none !important; }

/* ----------------------------------------------------------
   APPOINTMENTS — Notificaciones
---------------------------------------------------------- */
.appointments-notices {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.appointments-notice {
  background: var(--color-white);
  border-radius: var(--radius-card);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.appointments-notice-title {
  margin: 0;
  font-family: var(--font-family);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-semibold);
  color: var(--color-ink);
}

.appointments-notice-body {
  margin: 0;
  font-family: var(--font-family);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-regular);
  color: var(--color-ink);
}

.appointments-notice-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-top: var(--space-1);
}

.appointments-notice-meta {
  margin: 0;
  font-family: var(--font-family);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-regular);
  color: var(--color-muted);
}

.appointments-notice-read-btn {
  all: unset;
  font-family: var(--font-family);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-muted);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: underline;
}

.appointments-notice-read-btn:hover {
  color: var(--color-ink);
}

.appointments-notice-cancelled .appointments-notice-title,
.appointments-notice-cancelled .appointments-notice-body {
  color: var(--color-danger);
}

/* ----------------------------------------------------------
   APPOINTMENTS — Cards de citas
---------------------------------------------------------- */
.appointments-card {
  width: 100%;
  background: var(--color-white);
  border-radius: var(--radius-card);
  padding: var(--space-5) var(--space-5) var(--space-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  box-shadow: var(--shadow-card);
}

.appointments-card-content {
  min-width: 0;
  flex: 1;
}

.appointments-card-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.appointments-card-service {
  margin: 0;
  color: var(--color-ink);
  font-family: var(--font-family);
  font-size: var(--font-size-item);
  font-weight: var(--font-weight-semibold);
  line-height: 1.06;
  letter-spacing: -0.01em;
}

.appointments-card-date,
.appointments-card-time {
  margin: 8px 0 0;
  color: var(--color-ink);
  font-family: var(--font-family);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-medium);
  line-height: 1.15;
}

.appointments-card-time { margin-top: 6px; }

.appointments-card-barber {
  margin: 5px 0 0;
  color: var(--color-muted);
  font-family: var(--font-family);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-regular);
  line-height: 1.2;
}

.appointments-card-waitlist { border: 2px solid var(--color-waitlist); }

.appointments-card-waitlist .appointments-card-service,
.appointments-card-waitlist .appointments-card-date,
.appointments-card-waitlist .appointments-card-time {
  color: var(--color-waitlist);
}

.appointments-waitlist-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  border-radius: var(--radius-sm);
  background: var(--color-waitlist-bg);
  color: var(--color-waitlist);
  padding: 0 11px;
  font-family: var(--font-family);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
}

.appointments-trash-btn {
  width: 56px; height: 56px;
  border: none;
  background: transparent;
  color: var(--color-danger);
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
}

.appointments-trash-icon {
  width: 32px; height: 32px;
  object-fit: contain;
}

.appointments-trash-btn:disabled { opacity: 0.45; }

/* Estado vacío de citas */
.appointments-empty {
  position: relative;
  flex: 1;
  min-height: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.appointments-empty-text {
  position: absolute;
  left: 50%; transform: translateX(-50%);
  bottom: calc(env(safe-area-inset-bottom, 0px) + clamp(300px, 45.2dvh, 421px));
  width: 100%; max-width: 360px;
  margin: 0;
  color: var(--color-muted);
  font-family: var(--font-family);
  font-size: var(--font-size-stat);
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-weight: var(--font-weight-bold);
  text-align: center;
}

.appointments-empty-book-btn {
  position: absolute;
  left: 50%; transform: translateX(-50%);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 102px);
  width: 100%; max-width: var(--form-max-width);
  height: var(--control-height);
  border: none;
  border-radius: var(--radius-pill);
  background: var(--color-white);
  color: var(--color-ink-deep);
  box-shadow: var(--shadow-btn);
  font-family: var(--font-family);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-semibold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  cursor: pointer;
}

.appointments-empty-book-btn svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
  stroke-width: var(--stroke-icon);
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ----------------------------------------------------------
   APPOINTMENTS — Popup de acción (cancelar cita)
---------------------------------------------------------- */
/* Overlay → ui-system.css (.ui-popup-overlay) */
.appointments-action-popup {
  padding: var(--space-8) var(--app-padding-x)
           max(calc(env(safe-area-inset-bottom, 0px) + 18px), 26px);
}

.appointments-action-card-confirm {
  padding: clamp(26px, 4.8dvh, 38px) 29px clamp(22px, 4dvh, 34px);
}

.appointments-action-title {
  margin: 0;
  color: var(--color-ink-deep);
  font-family: var(--font-family);
  font-size: 26px;
  font-weight: var(--font-weight-semibold);
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-align: center;
}

.appointments-action-service {
  margin: var(--popup-detail-gap) 0 0;
  color: var(--color-ink-deep);
  font-family: var(--font-family);
  font-size: var(--font-size-item);
  font-weight: var(--font-weight-bold);
  line-height: 1.08;
  letter-spacing: -0.02em;
}

.appointments-action-date,
.appointments-action-time {
  margin: 10px 0 0;
  color: var(--color-ink-deep);
  font-family: var(--font-family);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-medium);
  line-height: 1.08;
}

.appointments-action-time { margin-top: 7px; }

.appointments-action-confirm-btn,
.appointments-action-cancel-btn {
  width: 100%;
  height: 51px;
  min-height: 51px;
  border-radius: var(--radius-pill);
  font-family: var(--font-family);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.appointments-action-confirm-btn {
  margin-top: var(--popup-detail-gap);
  border: none;
  background: var(--color-danger);
  color: var(--color-white);
}

.appointments-action-cancel-btn {
  margin-top: var(--space-3);
  border: 2px solid var(--color-ink-deep);
  background: var(--color-white);
  color: var(--color-ink-deep);
}

.appointments-action-confirm-btn:disabled { opacity: 0.7; }

/* Pantalla de éxito en popup de cita */
.appointments-action-card-success {
  width: calc(100% - 28px);
  max-width: 400px;
  height: min(624px, 80dvh);
  padding: clamp(44px, 8dvh, 72px) var(--app-padding-x);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(24px, 4.2dvh, 36px);
}

.appointments-action-success-icon {
  width: 78px; height: 78px;
  border-radius: 50%;
  background: var(--color-black);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-icon);
}

.appointments-action-success-icon svg {
  width: 56%; height: 56%;
  fill: none;
  stroke: var(--color-white);
  stroke-width: var(--stroke-icon-lg);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.appointments-action-success-title {
  margin: 0;
  color: var(--color-ink-deep);
  font-family: var(--font-family);
  font-size: var(--font-size-stat);
  line-height: 1.04;
  letter-spacing: -0.02em;
  font-weight: var(--font-weight-bold);
  text-align: center;
}

/* ----------------------------------------------------------
   UTILIDADES
---------------------------------------------------------- */
.hidden { display: none !important; }

/* ----------------------------------------------------------
   RESPONSIVE — Pantallas más anchas que la app (> 430px)
   La app se centra en 430px; añadimos borde lateral sutil
   para que la columna tenga un marco definido en desktop/tablet
---------------------------------------------------------- */
@media (min-width: 431px) {
  .mobile-app {
    box-shadow:
      1px 0 0 0 rgba(255, 255, 255, 0.06),
      -1px 0 0 0 rgba(255, 255, 255, 0.06);
  }
}

/* ----------------------------------------------------------
   RESPONSIVE — iPad / Desktop (≥ 768px)
   Contenedor a pantalla completa; drawer y sheets como
   paneles parciales anclados a la derecha.
---------------------------------------------------------- */
@media (min-width: 768px) {

  /* ---- Contenedor: sin max-width, fondo completo ---- */
  .mobile-app {
    max-width: none;
    box-shadow: none;
  }

  /* ---- Home: padding lateral tablet (60px) ---- */
  .home-screen {
    padding-left: 60px;
    padding-right: 60px;
    transition: padding-right var(--motion-slow) var(--ease-out);
  }

  /* Header: absolute para que padding-right de home-screen no le afecte */
  .home-header {
    position: absolute;
    top: max(calc(env(safe-area-inset-top, 0px) + var(--top-safe-extra)), var(--top-anchor));
    left: 60px;
    right: 60px;
    transition: right var(--motion-slow) var(--ease-out);
  }

  /* Hero: centrado por defecto */
  .hero-copy {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
  }

  /* ---- Scrim: oscurecimiento simple (sin blur) igual que admin ---- */
  body::before {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: rgba(0, 0, 0, 0.4);
  }
  /* Activar scrim también para bottom sheets (Reservar, Mis citas) */
  body.sheet-scroll-lock::before {
    opacity: 1;
    pointer-events: auto;
    z-index: 29;              /* justo debajo del sheet (z-index: 30), igual que admin */
  }

  /* ---- Auto-adjust: contenido se adapta al espacio visible ---- */
  /* Drawer lateral (full height) → ajusta home-screen (hero) Y cabecera */
  body.drawer-open .home-screen {
    padding-right: calc(var(--tablet-drawer-width) + var(--app-padding-x));
  }
  body.drawer-open .home-header {
    right: calc(var(--tablet-drawer-width) + var(--app-padding-x));
  }
  /* Sheet inferior → solo ajusta home-screen (hero se redimensiona);
     la cabecera queda en su posición porque es absolute independiente */
  .mobile-app.booking-overlay-open .home-screen {
    padding-right: calc(var(--tablet-sheet-width) + var(--app-padding-x));
  }

  /* ---- Drawer: panel lateral derecho ---- */
  #side-drawer {
    left: auto;
    right: 0;
    max-width: var(--tablet-drawer-width);
    transform: translateX(100%);
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
  }
  #side-drawer.open {
    transform: translateX(0);
  }

  /* ---- Sheets (bottom): panel derecho que sube desde abajo ---- */
  .sheet {
    left: auto;
    right: 0;
    max-width: var(--tablet-sheet-width);
    transform: translateY(100%);
    /* border-radius → ui-system.css (regla compartida bottom sheets) */
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
  }
  .sheet.open {
    transform: translateY(0);
  }

  /* ---- Sheets slide-in (lateral): panel derecho que entra desde la derecha ---- */
  .sheet.slide-in {
    left: auto;
    right: 0;
    max-width: var(--tablet-sheet-width);
    transform: translateX(100%) scale(0.985);
    border-radius: var(--radius-card) 0 0 var(--radius-card);
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
  }
  .sheet.slide-in.open {
    transform: translateX(0) scale(1);
  }

  /* ---- Booking / Appointments (bottom sheets con contenido) ---- */
  .booking-flow-screen,
  .appointments-screen {
    left: auto;
    right: 0;
    max-width: var(--tablet-sheet-width);
    transform: translateY(100%);
    /* border-radius → ui-system.css (regla compartida bottom sheets) */
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
  }
  .booking-flow-screen.open,
  .appointments-screen.open {
    transform: translateY(0);
  }
}

/* ----------------------------------------------------------
   RESPONSIVE — Desktop (≥ 1280px)
   Padding lateral amplio para pantallas grandes.
---------------------------------------------------------- */
@media (min-width: 1280px) {
  .home-screen {
    padding-left: 150px;
    padding-right: 150px;
  }

  /* Header: actualizar posición para padding desktop */
  .home-header {
    left: 150px;
    right: 150px;
  }

  /* Auto-adjust desktop: padding mayor → las fórmulas necesitan override */
  body.drawer-open .home-screen {
    padding-right: calc(var(--tablet-drawer-width) + 150px);
  }
  .mobile-app.booking-overlay-open .home-screen {
    padding-right: calc(var(--tablet-sheet-width) + 150px);
  }
  body.drawer-open .home-header {
    right: calc(var(--tablet-drawer-width) + 150px);
  }
}

/* ----------------------------------------------------------
   RESPONSIVE — Padding inferior según orientación (≥ 768px)
---------------------------------------------------------- */
@media (min-width: 768px) and (orientation: portrait) {
  .hero-copy { padding-bottom: 240px; }
}
@media (min-width: 768px) and (orientation: landscape) {
  .hero-copy { padding-bottom: 170px; }
}

/* ----------------------------------------------------------
   MOTION REDUCIDO
---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  #side-drawer, .sheet, .sheet.slide-in,
  .booking-flow-screen, .appointments-screen,
  body::before {
    transition: none !important;
  }
}