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

/* ==========================================================================
   UI SYSTEM CSS
   Fuente de verdad para:
   - tokens globales
   - botones e inputs compartidos
   - formularios base (user/admin)

   TOCABLE rápido:
   - Colores: --ui-ink, --ui-surface, --ui-danger, --ui-status-active
   - Tamaños control: --ui-control-height, --ui-control-font-size, --ui-button-font-size
   - Radios/bordes: --ui-radius-pill, --ui-radius-popup, --ui-border-width
   - Formularios: --ui-form-max-width, --ui-form-gap, --ui-form-padding-x
   ========================================================================== */

:root {
  /* ----------------------------------------------------------
     ALIASES → tokens.css (fuente de verdad única)
     Para cambiar valores: editar tokens.css, no aquí.
  ---------------------------------------------------------- */

  /* Tipografía */
  --ui-font-family:             var(--font-family);
  --ui-section-title-size:      var(--font-size-title);      /* 29px */
  --ui-subsection-title-size:   var(--font-size-price);      /* 24px */
  --ui-control-font-size:       var(--font-size-control);    /* 17px */
  --ui-button-font-size:        var(--font-size-body);       /* 19px */
  --ui-button-font-weight:      var(--font-weight-semibold); /* 600  */
  --ui-form-label-size:         var(--font-size-small);      /* 16px */
  --ui-form-label-weight:       var(--font-weight-semibold); /* 600  */
  --ui-form-input-weight:       var(--font-weight-regular);  /* 400  */
  --ui-form-placeholder-weight: var(--font-weight-regular);  /* 400  */
  --ui-form-helper-size:        14px; /* sin equivalente en tokens */

  /* Colores */
  --ui-ink:            var(--color-ink-deep);   /* #060606 */
  --ui-ink-inverse:    var(--color-white);       /* #ffffff */
  --ui-muted:          var(--color-muted);       /* #b9b9b9 */
  --ui-danger:         var(--color-danger);      /* #e94d4d */
  --ui-danger-strong:  var(--color-danger);
  --ui-success:        #2f7d4c;                  /* verde texto — sin equiv. en tokens */
  --ui-surface:        var(--color-white);       /* #ffffff */
  --ui-surface-soft:   var(--color-bg);          /* #f5f5f5 */
  --ui-surface-strong: var(--color-ink-deep);    /* #060606 */
  --ui-sheet:          var(--color-white);       /* #ffffff */
  --ui-border:         var(--color-ink-deep);    /* #060606 */
  --ui-border-inverse: var(--color-white);       /* #ffffff */
  --ui-line:           var(--color-border);      /* #d9d9d9 */
  --ui-line-strong:    var(--color-surface-dim); /* #e5e5e5 */

  /* Geometría */
  --ui-radius-pill:    var(--radius-pill);    /* 999px */
  --ui-radius-popup:   var(--radius-popup);   /* 24px  */
  --ui-radius-card:    var(--radius-card);    /* 20px  */
  --ui-shadow-popup:   var(--shadow-popup);   /* 0 18px 50px rgba(0,0,0,.28) */
  --ui-border-width:   2px;
  --ui-control-height: var(--control-height); /* 64px — botones de acción */
  --ui-input-height:   var(--input-height);   /* 50px — inputs y selects */

  /* Formularios */
  --ui-form-max-width: 332px;
  --ui-form-gap:       var(--space-3); /* 12px */
  --ui-form-padding-x: var(--space-6); /* 24px */

  /* ----------------------------------------------------------
     TOKENS PROPIOS — sin equivalente en tokens.css
     (calendario, chips, estados de día)
  ---------------------------------------------------------- */
  --ui-badge-size: 22.73px;
  --ui-badge-font-size: 15.79px;
  --ui-chip-height: 41px;
  --ui-chip-min-width: 96px;
  --ui-chip-font-size: 1.05rem;
  --ui-chip-border: #bababa;
  --ui-chip-text: #a1a1a1;
  --ui-status-active: #6fe398;
  --ui-status-inactive: #ececef;
  --ui-day-cell-gap: 7px;
  --ui-day-cell-radius: 10px;
  --ui-day-cell-min-height: clamp(42px, 7.4vw, 58px);
  --ui-day-cell-font-size: clamp(1.25rem, 5.2vw, 2rem);
  --ui-day-color: #121212;
  --ui-day-outside: #d2d2d2;
  --ui-day-neutral: #d7d7d7;
  --ui-day-blocked: #d5d5d5;
  --ui-day-available: #6fe398;
  --ui-day-full: #e85353;
  --ui-day-selected-dot: #e85353;
  --ui-vacation: #f4e239;
  --ui-vacation-range: #fff089;
  --ui-vacation-selected: #ffe95e;
  --ui-vacation-preview: #fff4b4;
  --ui-selection-range: #fff7bf;
  --ui-selection-solid: #fff16e;
  --ui-selection-preview: #fff9d4;
}

/* Unified form/text primitives (safe layer, low-specificity). */
.ui-form {
  width: 100%;
}

.ui-form-shell {
  width: 100%;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}

.ui-form-shell .ui-form {
  width: 100%;
}

.ui-form-shell .ui-control,
.ui-form-shell .ui-input {
  width: 100%;
}

.ui-form-shell .ui-control,
.ui-form-shell .ui-input,
.ui-form-shell input,
.ui-form-shell select,
.ui-form-shell textarea {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Espaciado entre campos — compartido user + admin.
   Cubre inputs directos y campos envueltos en .ui-field (ej: campo con botón ojo) */
.ui-form-shell .ui-input + .ui-input,
.ui-form-shell .ui-field  + .ui-field,
.ui-form-shell .ui-field  + .ui-input,
.ui-form-shell .ui-input  + .ui-field {
  margin-top: var(--space-3); /* 12px */
}

/* Espaciado último campo → bloque de acciones (botones) */
.ui-form-shell .ui-input + .ui-actions,
.ui-form-shell .ui-field  + .ui-actions {
  margin-top: var(--space-5); /* 20px — igual que user */
}

.ui-field {
  width: 100%;
  max-width: var(--ui-form-max-width);
  margin-left: auto;
  margin-right: auto;
  display: grid;
  gap: 6px;
}

.ui-label {
  color: var(--ui-ink);
  font-family: var(--ui-font-family);
  font-size: var(--ui-form-label-size);
  line-height: 1.25;
  font-weight: var(--ui-form-label-weight);
}

.ui-control {
  width: 100%;
  max-width: var(--ui-form-max-width);
  margin-left: auto;
  margin-right: auto;
  border: var(--ui-border-width) solid var(--ui-border);
  border-radius: var(--ui-radius-pill);
  background: var(--ui-surface);
  color: var(--ui-ink);
  height: var(--ui-input-height);
  padding: 0 var(--ui-form-padding-x);
  font-family: var(--ui-font-family);
  font-size: var(--ui-control-font-size);
  line-height: 1;
  letter-spacing: -0.01em;
  font-weight: var(--ui-form-input-weight);
  outline: none;
  transition: border-color var(--motion-fast) var(--ease-out);
  box-sizing: border-box;
}

.ui-actions {
  width: 100%;
  max-width: var(--ui-form-max-width);
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ui-form-gap);
}

.ui-form-shell .ui-actions {
  display: flex;
  flex-direction: column;
  gap: var(--ui-form-gap);
  align-items: center;
}

.ui-form-shell .ui-actions .ui-btn:not(.ui-btn--icon) {
  width: 100%;
}

.ui-help {
  color: var(--ui-muted);
  font-family: var(--ui-font-family);
  font-size: var(--ui-form-helper-size);
  line-height: 1.35;
  font-weight: var(--font-weight-regular);
}

.ui-error {
  color: var(--ui-danger);
  font-family: var(--ui-font-family);
  font-size: var(--ui-form-helper-size);
  line-height: 1.3;
  font-weight: var(--font-weight-medium);
}

/* ── TOAST MESSAGES ─────────────────────────────── */
.message {
  font-family: var(--font-family);
  font-size: var(--font-size-small);
  line-height: 1.35;
}
.message.ok {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1.5px solid color-mix(in srgb, var(--color-success) 55%, transparent);
  background: color-mix(in srgb, var(--color-success) 14%, transparent);
  color: color-mix(in srgb, var(--color-success) 75%, #000);
  font-weight: var(--font-weight-medium);
  animation: message-in var(--motion-base) var(--ease-out) both;
}
.message.ok::before {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10l4 4 8-8'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10l4 4 8-8'/%3E%3C/svg%3E") center/contain no-repeat;
}
.message.err {
  color: var(--color-danger);
  font-weight: var(--font-weight-medium);
}
@keyframes message-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.ui-title {
  color: var(--ui-ink);
  font-family: var(--ui-font-family);
  font-size: var(--ui-section-title-size);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: var(--font-weight-semibold); /* 600 — igual que Figma */
  margin: 0 0 var(--space-6);              /* 24px bajo el título — compartido user+admin */
}

/* Shared header (logo + close) */
.app-panel-head,
.ui-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  position: sticky;
  top: 0;
  z-index: 6;
  isolation: isolate;
  padding: 0;
  margin-bottom: var(--space-8);    /* 32px — separación header → contenido */
  background: var(--ui-head-bg, var(--color-white));   /* fondo al hacer scroll; sobreescribible por contexto */
}

/* Safe-area padding en header — compartido por todos los overlays
   .sheet y .admin-management-menu-screen: header es hijo directo del contenedor
   .admin-content-shell: usamos > (hijo directo) para excluir headers anidados */
.sheet .app-panel-head,
.sheet .ui-head,
.admin-content-shell > .app-panel-head,
.admin-content-shell > .ui-head,
.admin-management-menu-screen .app-panel-head,
.admin-management-menu-screen .ui-head {
  padding-top: max(calc(env(safe-area-inset-top, 0px) + var(--sheet-safe-extra)), var(--top-anchor));
  padding-bottom: 9px;
}

/* Admin: el header no hereda el padding horizontal del shell (a diferencia de .sheet)
   → se lo damos directamente para igualar el indentado del user */
.admin-content-shell > .app-panel-head,
.admin-content-shell > .ui-head {
  padding-left: var(--home-x, var(--app-padding-x));
  padding-right: var(--home-x, var(--app-padding-x));
}

/* Truco sticky extendido — SOLO para .sheet (su contenedor tiene padding-top: 52px) */
.sheet .app-panel-head,
.sheet .ui-head {
  top: min(calc((env(safe-area-inset-top, 0px) + 18px) * -1), -52px);
  margin-top: min(calc((env(safe-area-inset-top, 0px) + 18px) * -1), -52px);
}

/* Botón "Cambiar contraseña" — compartido user + admin
   Triple clase (0,3,0) gana sobre .ui-btn--text.ui-btn--ghost (0,2,0) que usa color:inherit */
.profile-change-password-btn.ui-btn.ui-btn--ghost,
.admin-profile-change-password-btn.ui-btn.ui-btn--ghost {
  background: none;
  border: none;
  font-family: var(--font-family);
  font-size: 15px;                       /* gana sobre var(--ui-button-font-size)=19px */
  font-weight: var(--font-weight-semibold);
  color: var(--color-muted);             /* gana sobre var(--ui-ink) de .ui-btn--ghost */
  letter-spacing: 0;
  text-decoration: underline;
  display: block;
  max-width: 332px;
  margin: 0 auto;
  cursor: pointer;
  min-height: auto;
  padding: var(--space-2) 0;
}

/* Espaciado extra: "Guardar cambios" respira más del enlace que lo precede */
#btn-profile-save,
#btn-admin-profile-save {
  margin-top: 36px;
}

/* Estado deshabilitado — botones "Guardar" de perfil y contraseña (user + admin)
   Usamos IDs para ganar especificidad sobre .auth-primary-btn:disabled de home.css */
#btn-profile-save:disabled,
#btn-admin-profile-save:disabled,
#btn-change-password-save:disabled,
#btn-admin-profile-change-password-save:disabled {
  border-color: var(--color-muted);
  background: var(--color-muted);
  color: var(--color-white);
  opacity: 1;
  pointer-events: none;
}

.app-panel-head::before,
.ui-head::before {
  content: none;
}

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

/* Botón X unificado: 44×44px — user + admin */
.ui-head__close,
.booking-flow-close-btn,
.appointments-close-btn {
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  color: inherit;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
}

.ui-head__close:active,
.ui-head__close:focus,
.ui-head__close:focus-visible {
  transform: none;
  top: auto;
}

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

/* Título de sheet unificado: user + admin */
.appointments-title-row h2,
.booking-flow-title-row h2,
.admin-content-sheet-title {
  font-family: var(--font-family);
  font-size: var(--font-size-title);
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--color-ink);
  margin: 0;
}

.ui-screen-body {
  margin-top: 0;
  padding-top: 0;                          /* sin padding — el header admin no solapa */
  padding-bottom: clamp(16px, 3vh, 30px);
}

/* Breathing room bajo el header — compartido por todos los overlays */
.sheet .ui-screen-body,
.admin-content-shell > .admin-content-scroll > .ui-screen-body,
.admin-management-menu-screen .ui-screen-body,
.admin-content-shell > .admin-content-scroll > .admin-management-title {
  padding-top: 36px;
}

/* Formulario centrado: 332px, auto-margin — compartido user + admin
   (user lo tenía en home.css; aquí aplica a ambos automáticamente) */
.auth-body {
  max-width: 332px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.ui-subtitle {
  color: var(--ui-ink);
  font-family: var(--ui-font-family);
  font-size: var(--ui-subsection-title-size);
  line-height: 1.08;
  letter-spacing: -0.02em;
  font-weight: var(--font-weight-semibold);
}

.ui-text {
  color: var(--ui-ink);
  font-family: var(--ui-font-family);
  font-size: var(--ui-control-font-size);
  line-height: 1.35;
  font-weight: var(--font-weight-regular);
}

.ui-input {
  border-radius: var(--ui-radius-pill);
  min-height: var(--ui-input-height);
  font-family: var(--ui-font-family);
  font-size: var(--ui-control-font-size);
  line-height: 1;
  letter-spacing: -0.01em;
}

.ui-btn {
  font-family: var(--ui-font-family);
  font-size: var(--ui-button-font-size);
  line-height: 1;
  letter-spacing: -0.01em;
  font-weight: var(--ui-button-font-weight);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.ui-btn--pill {
  border-radius: var(--ui-radius-pill);
  min-height: var(--ui-control-height);
  padding-inline: 24px;
}

.ui-btn--text {
  min-height: auto;
  border: 0;
  background: transparent;
  padding: 0;
  border-radius: 0;
}

.ui-btn--compact {
  min-height: 40px;
  padding-inline: 12px;
  border-radius: 12px;
}

.ui-btn--primary {
  border: 2px solid var(--ui-border);
  background: var(--ui-surface-strong);
  color: var(--ui-ink-inverse);
}

.ui-btn--ghost {
  border: 2px solid var(--ui-border);
  background: var(--ui-surface);
  color: var(--ui-ink);
}

.ui-btn--light {
  border: 0;
  background: var(--ui-surface);
  color: var(--ui-ink);
  box-shadow: var(--shadow-subtle);
}

.ui-btn--danger {
  border: 2px solid transparent;
  background: var(--ui-danger-strong);
  color: var(--ui-ink-inverse);
}

.ui-btn--icon {
  min-height: auto;
  border: 0;
  background: transparent;
  padding: 0;
  border-radius: 0;
}

/* Password toggle buttons: keep icon inside input and avoid jump on interaction. */
.password-field-wrap,
.auth-input-wrap {
  position: relative;
}

.password-field-wrap input.password-field,
.password-field-wrap input.auth-input-password,
.auth-input-wrap input.password-field,
.auth-input-wrap input.auth-input-password {
  padding-right: 64px;
}

.password-field-wrap .password-eye-btn,
.password-field-wrap .auth-eye-btn,
.auth-input-wrap .password-eye-btn,
.auth-input-wrap .auth-eye-btn {
  position: absolute;
  right: 14px;
  top: 50%;
  margin: 0;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  transform: translateY(-50%);
}

.password-field-wrap .password-eye-btn:active,
.password-field-wrap .password-eye-btn:focus,
.password-field-wrap .password-eye-btn:focus-visible,
.password-field-wrap .auth-eye-btn:active,
.password-field-wrap .auth-eye-btn:focus,
.password-field-wrap .auth-eye-btn:focus-visible,
.auth-input-wrap .password-eye-btn:active,
.auth-input-wrap .password-eye-btn:focus,
.auth-input-wrap .password-eye-btn:focus-visible,
.auth-input-wrap .auth-eye-btn:active,
.auth-input-wrap .auth-eye-btn:focus,
.auth-input-wrap .auth-eye-btn:focus-visible {
  transform: translateY(-50%);
  top: 50%;
  outline-offset: 2px;
}

.password-field-wrap .password-eye-btn svg,
.password-field-wrap .auth-eye-btn svg,
.auth-input-wrap .password-eye-btn svg,
.auth-input-wrap .auth-eye-btn svg {
  width: 24px;
  height: 24px;
  display: block;
  stroke: currentColor;
  fill: none;
  stroke-width: var(--stroke-icon);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.password-field-wrap .password-eye-btn svg *,
.password-field-wrap .auth-eye-btn svg *,
.auth-input-wrap .password-eye-btn svg *,
.auth-input-wrap .auth-eye-btn svg * {
  stroke: currentColor;
  fill: none;
  stroke-width: var(--stroke-icon);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ui-btn--solid-light {
  border: 2px solid transparent;
  background: var(--ui-surface);
  color: var(--ui-ink);
}

.ui-btn--outline {
  border: 2px solid var(--ui-border);
  background: var(--ui-surface);
  color: var(--ui-ink);
}

.ui-btn--light svg {
  stroke: currentColor;
  fill: none;
}

.ui-btn--light img {
  filter: none;
}

/* Text shape always wins over intent variants for navigation/link buttons. */
.ui-btn--text.ui-btn--primary,
.ui-btn--text.ui-btn--ghost,
.ui-btn--text.ui-btn--danger,
.ui-btn--text.ui-btn--solid-dark,
.ui-btn--text.ui-btn--solid-light,
.ui-btn--text.ui-btn--outline {
  min-height: auto;
  border: 0;
  background: transparent;
  padding: 0;
  border-radius: 0;
  color: inherit;
}

/* ----------------------------------------------------------
   POPUP SYSTEM — Overlay + Card base unificado
   Un solo cambio aquí se propaga a TODOS los popups (user + admin).
---------------------------------------------------------- */

/* Overlay: scrim + centrado + z-index */
.ui-popup-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--app-padding-x);
  z-index: var(--z-popup);
  background: var(--color-scrim);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--motion-base) var(--ease-out);
}
.ui-popup-overlay:not(.hidden) {
  pointer-events: auto;
  opacity: 1;
}

/* Modificador: popup apilado sobre otro popup */
.ui-popup-overlay--over {
  z-index: var(--z-popup-over);
}

/* Card: contenedor del popup */
.ui-popup-card {
  border-radius: var(--ui-radius-popup);
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-popup);
  padding: var(--space-6);
  width: 100%;
  max-width: 360px;
  text-align: center;
  animation: popup-in var(--motion-base) var(--ease-out) both;
}

/* Animación compartida (eliminar duplicados en home.css y admin.css) */
@keyframes popup-in {
  from { transform: scale(0.95); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}

/* Success popup — card compartida user + admin */
.success-popup-content,
.admin-success-popup-content {
  padding: clamp(44px, 8dvh, 72px) var(--app-padding-x);
  width: calc(100% - 28px); max-width: 400px;
  height: min(624px, 80dvh);
  text-align: center;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: clamp(24px, 4.2dvh, 36px);
}

.success-popup-icon,
.admin-success-popup-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);
}

.success-popup-icon svg,
.admin-success-popup-icon svg {
  width: 44px; height: 44px;
  stroke: var(--color-white); fill: none;
  stroke-width: var(--stroke-icon-lg); stroke-linecap: round; stroke-linejoin: round;
}

.success-popup-text,
.admin-success-popup-text {
  margin: 0;
  font-family: var(--font-family);
  font-size: clamp(28px, 7.8vw, 41px);
  font-weight: var(--font-weight-bold);
  color: var(--color-ink-deep); line-height: 1.15;
}

.ui-btn-link {
  font-family: var(--ui-font-family);
  font-size: 19px;
  font-weight: var(--font-weight-semibold);
  line-height: 1;
}

.ui-actions .ui-btn-link,
.ui-actions .ui-btn--text {
  min-height: auto;
  height: auto;
  padding: 0;
}

.ui-menu-list {
  display: grid;
  gap: 20px;
  margin: 0;
  padding: 0;
}

.ui-menu-item {
  width: 100%;
  display: inline-flex;
  border: 0;
  box-shadow: none;
  background: transparent;
  color: var(--ui-ink);
  font-family: var(--ui-font-family);
  font-size: 26px;
  font-weight: var(--font-weight-medium);
  line-height: 31px;
  text-align: left;
  justify-content: flex-start;
  padding-top: 0;
  padding-bottom: 0;
}

.ui-menu-item--indent {
  /* margin-left en vez de padding-left para no ser sobreescrito por .ui-btn */
  margin-left: 36px;
  width: calc(100% - 36px);
}

.ui-menu-item:hover,
.ui-menu-item:active,
.ui-menu-item:focus,
.ui-menu-item:focus-visible {
  transform: none;
  border: 0;
  box-shadow: none;
  background: transparent;
}

.ui-count-badge {
  width: var(--ui-badge-size);
  min-width: var(--ui-badge-size);
  height: var(--ui-badge-size);
  border-radius: 999px;
  background: var(--ui-danger-strong);
  color: var(--ui-ink-inverse);
  font-size: var(--ui-badge-font-size);
  line-height: 1;
  font-weight: var(--font-weight-bold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.ui-filter-chip {
  min-width: var(--ui-chip-min-width);
  min-height: var(--ui-chip-height);
  height: var(--ui-chip-height);
  border-radius: var(--ui-radius-pill);
  border: var(--ui-border-width) solid var(--ui-chip-border);
  background: transparent;
  color: var(--ui-chip-text);
  font-family: var(--ui-font-family);
  font-size: var(--ui-chip-font-size);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
}

.ui-filter-chip.is-active {
  background: var(--ui-surface-strong);
  border-color: var(--ui-surface-strong);
  color: var(--ui-ink-inverse);
}

/* Inputs: shared behavior and geometry. */
:is(
  .ui-input,
  .auth-input,
  .admin-create-input,
  .admin-profile-form-input,
  .admin-profile-editor-input,
  .admin-service-editor-input,
  .admin-contact-input
) {
  border-radius: var(--ui-radius-pill);
  min-height: var(--ui-input-height);
  font-family: var(--ui-font-family);
  font-size: var(--ui-control-font-size);
  line-height: 1;
  letter-spacing: -0.01em;
  font-weight: var(--ui-form-input-weight);
  padding-left: var(--ui-form-padding-x);
  padding-right: var(--ui-form-padding-x);
}

:is(
  .ui-input::placeholder,
  .auth-input::placeholder,
  .admin-create-input::placeholder,
  .admin-profile-form-input::placeholder,
  .admin-profile-editor-input::placeholder,
  .admin-service-editor-input::placeholder,
  .admin-contact-input::placeholder
) {
  color: var(--ui-muted);
  opacity: 1;
  font-weight: var(--ui-form-placeholder-weight);
}

/* Buttons: shared typography and pill radius (all tiers). */
:is(
  .ui-btn--pill,
  .auth-primary-btn,
  .auth-secondary-btn,
  .admin-create-submit-btn,
  .admin-profile-save-btn,
  .admin-contact-save-btn,
  .admin-service-editor-save,
  .admin-service-editor-cancel,
  .appointments-empty-book-btn,
  .booking-confirm-primary-btn,
  .appointments-action-confirm-btn,
  .appointments-action-cancel-btn
) {
  border-radius: var(--ui-radius-pill);
  font-family: var(--ui-font-family);
  font-size: var(--ui-button-font-size);
  line-height: 1;
  letter-spacing: -0.01em;
  font-weight: var(--ui-button-font-weight);
}

/* Tier 1 — Primary CTAs: 64 px touch target. */
:is(
  .auth-primary-btn,
  .admin-create-submit-btn,
  .admin-profile-save-btn,
  .admin-contact-save-btn,
  .admin-service-editor-save,
  .appointments-empty-book-btn,
  .booking-confirm-primary-btn,
  .appointments-action-confirm-btn,
  .admin-users-new-appt-btn
) {
  height: var(--ui-control-height); /* 64px — explícito: gana sobre min-height de .ui-btn--pill */
}

/* Tier 2 — Secondary / ghost: compact 50 px height. */
:is(
  .ui-btn--pill,
  .auth-secondary-btn,
  .admin-service-editor-cancel,
  .appointments-action-cancel-btn
) {
  min-height: var(--ui-input-height); /* 50px */
}

:is(
  .ui-btn--solid-dark,
  .auth-primary-btn,
  .admin-profile-save-btn,
  .admin-contact-save-btn,
  .admin-service-editor-save,
  .booking-confirm-primary-btn,
  .appointments-action-confirm-btn
) {
  border: 2px solid var(--ui-border);
  background: var(--ui-surface-strong);
  color: var(--ui-ink-inverse);
}

:is(
  .ui-btn--outline,
  .auth-secondary-btn,
  .admin-service-editor-cancel,
  .appointments-action-cancel-btn
) {
  border: 2px solid var(--ui-border);
  background: var(--ui-surface);
  color: var(--ui-ink);
}

:is(
  .auth-primary-btn:hover,
  .auth-secondary-btn:hover,
  .ui-btn:hover,
  .admin-create-submit-btn:hover,
  .admin-profile-save-btn:hover,
  .admin-service-editor-save:hover,
  .admin-service-editor-cancel:hover,
  .appointments-empty-book-btn:hover,
  .booking-confirm-primary-btn:hover,
  .appointments-action-confirm-btn:hover,
  .appointments-action-cancel-btn:hover
) {
  transform: none;
}

/* Admin auth/create flow keeps light button on dark background. */
:is(
  .ui-btn--solid-light,
  body.admin-auth-mode #btn-login,
  body.admin-auth-mode #btn-admin-send-reset-link,
  body.admin-auth-mode #btn-admin-reset-password,
  body.admin-auth-mode #btn-admin-temp-change-password,
  .admin-create-submit-btn
) {
  border: 2px solid transparent;
  background: var(--ui-surface);
  color: var(--ui-ink);
}

/* Popups/cards: shared radius and surface. */
:is(
  .ui-popup-card,
  .success-popup-content,
  .booking-confirm-popup-card,
  .appointments-action-card,
  .admin-confirm-card,
  .admin-vacation-popup-card,
  .admin-service-editor-card,
  .admin-service-delete-card,
  .admin-success-popup-content
) {
  border-radius: var(--ui-radius-popup);
  background: var(--ui-surface);
}

:is(
  .auth-msg.err,
  .field-inline-error,
  .section-global-error,
  .admin-create-msg,
  .admin-profile-feedback.err,
  .admin-profiles-delete-password-msg
) {
  color: var(--ui-danger);
}

:is(
  .auth-msg.ok,
  .admin-create-msg.ok,
  .admin-profile-feedback.ok
) {
  color: var(--ui-success);
}

/* Shared form layout: keep controls centered and equal-width across app forms. */
:is(
  .auth-input,
  .auth-input-wrap,
  .auth-primary-btn,
  .auth-secondary-btn,
  .auth-link-btn,
  .auth-msg,
  .field-inline-error,
  .section-global-error,
  .admin-profile-form-input,
  .admin-create-input,
  .admin-contact-input,
  .admin-create-role-wrap,
  .admin-create-submit-btn,
  .admin-contact-save-btn,
  .admin-contact-field-error,
  .admin-create-msg,
  .admin-profile-editor-fields,
  .admin-profile-editor-save-btn,
  #admin-profile-editor-msg,
  #contact-msg
) {
  max-width: var(--ui-form-max-width);
  margin-left: auto;
  margin-right: auto;
}

/* Admin auth views follow the same control width/spacing as user forms. */
body.admin-auth-mode .admin-auth-card :is(
  input,
  .password-field-wrap,
  .password-field,
  #btn-login,
  #btn-admin-send-reset-link,
  #btn-admin-reset-password,
  #btn-admin-temp-change-password,
  .admin-auth-link-btn,
  .message
) {
  max-width: var(--ui-form-max-width);
  margin-left: auto;
  margin-right: auto;
}

body.admin-auth-mode .admin-auth-card :is(input, .password-field) {
  min-height: var(--ui-input-height);
  border-radius: var(--ui-radius-pill);
  border-width: var(--ui-border-width);
  padding-left: var(--ui-form-padding-x);
  padding-right: var(--ui-form-padding-x);
  font-size: var(--ui-control-font-size);
  font-weight: var(--ui-form-input-weight);
}

/* Create barber flow: same geometry as primary forms. */
.admin-create-body :is(.admin-create-input, .admin-create-role-wrap, .admin-create-submit-btn, .admin-create-msg) {
  max-width: var(--ui-form-max-width);
  margin-left: auto;
  margin-right: auto;
}

.admin-create-body .admin-create-input {
  min-height: var(--ui-input-height);
  border-radius: var(--ui-radius-pill);
  border-width: var(--ui-border-width);
  padding-left: var(--ui-form-padding-x);
  padding-right: var(--ui-form-padding-x);
  font-size: var(--ui-control-font-size);
  font-weight: var(--ui-form-input-weight);
}

.admin-create-body .admin-create-role-trigger {
  min-height: var(--ui-input-height);
  border-radius: var(--ui-radius-pill);
  border-width: var(--ui-border-width);
  padding-left: var(--ui-form-padding-x);
  padding-right: var(--ui-form-padding-x);
  font-size: var(--ui-control-font-size);
  font-weight: var(--font-weight-semibold);
}

.admin-create-body .admin-create-role-option {
  font-size: var(--ui-control-font-size);
}

/* Profile editor: align to the same input/button system. */
.admin-profile-editor-fields {
  gap: var(--ui-form-gap);
}

.admin-profile-editor-input {
  min-height: var(--ui-input-height);
  border-radius: var(--ui-radius-pill);
  border-width: var(--ui-border-width);
  padding-left: var(--ui-form-padding-x);
  padding-right: var(--ui-form-padding-x);
  font-size: var(--ui-control-font-size);
  font-weight: var(--ui-form-input-weight);
}

.admin-profile-editor-select {
  min-height: var(--ui-input-height);
  padding-right: calc(var(--ui-form-padding-x) + 34px);
}

/* Selects estilizados: fondo sólido, texto oscuro y borde fuerte.
   Misma identidad visual en "Rol" (Perfil de Barbero) y
   los desplegables de Servicio/Barbero en "Nueva cita". */
:is(
  .admin-profile-editor-select,
  .admin-appt-editor-select
) {
  background: var(--ui-surface);
  color: var(--ui-ink);
  border-color: var(--ui-border);
}

/* Menú flotante — Perfil de Barbero (Rol), Nueva cita (Servicio/Barbero), Crear barbero (Rol)
   y autocompletado de nombre en Nueva cita.
   Token único: cambiar aquí propaga a todos los desplegables de la app. */
:is(
  .admin-profile-editor-role-menu,
  .admin-appt-custom-select-menu,
  .admin-create-role-menu,
  .admin-appt-name-suggest-menu
) {
  position: absolute;
  top: calc(100% + var(--space-2));
  left: 0;
  right: 0;
  background: var(--ui-surface);
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius-card);
  overflow: hidden;
  z-index: 10;
  box-shadow: var(--ui-shadow-popup);
}

/* Opciones dentro del menú */
:is(
  .admin-profile-editor-role-option,
  .admin-appt-custom-select-option,
  .admin-create-role-option,
  .admin-appt-name-suggest-option
) {
  width: 100%;
  padding: var(--space-4) var(--ui-form-padding-x);
  background: transparent;
  border: none;
  border-radius: 0;
  color: var(--ui-muted);
  font-family: var(--ui-font-family);
  font-size: var(--ui-control-font-size);
  text-align: left;
  cursor: pointer;
}

/* Opción seleccionada activa */
:is(
  .admin-profile-editor-role-option.is-active,
  .admin-appt-custom-select-option.is-active,
  .admin-create-role-option.is-active,
  .admin-appt-name-suggest-option.is-active
) {
  color: var(--ui-ink);
  font-weight: var(--ui-button-font-weight);
}

.admin-profile-editor-save-btn {
  min-height: var(--ui-control-height);
  border-radius: var(--ui-radius-pill);
  font-size: var(--ui-button-font-size);
}

/* Service editor: unify field and button sizes with other forms. */
.admin-service-editor-label {
  font-size: var(--ui-form-label-size);
  font-weight: var(--ui-form-label-weight);
}

.admin-service-editor-input {
  min-height: var(--ui-input-height);
  border-radius: var(--ui-radius-pill);
  border-width: var(--ui-border-width);
  padding-left: var(--ui-form-padding-x);
  padding-right: var(--ui-form-padding-x);
  font-size: var(--ui-control-font-size);
  font-weight: var(--ui-form-input-weight);
}

.admin-service-editor-small {
  min-height: var(--ui-input-height);
  font-size: var(--ui-control-font-size);
}

.admin-service-editor-save,
.admin-service-editor-cancel,
.admin-appt-form-delete-btn {
  min-height: var(--ui-control-height);
  border-radius: var(--ui-radius-pill);
  font-size: var(--ui-button-font-size);
}

/* Contact settings form uses the same app-wide form system. */
#contact-settings-card :is(
  .admin-contact-input,
  .admin-contact-save-btn,
  .admin-contact-msg,
  .admin-contact-field-error
) {
  width: 100%;
  max-width: var(--ui-form-max-width);
  margin-left: auto;
  margin-right: auto;
}

#contact-settings-card .admin-contact-label {
  width: 100%;
  max-width: var(--ui-form-max-width);
  margin-left: auto;
  margin-right: auto;
  color: var(--ui-ink);
  font-family: var(--ui-font-family);
  font-size: var(--ui-form-label-size);
  font-weight: var(--ui-form-label-weight);
  line-height: 1.2;
}

#contact-settings-card .admin-contact-input {
  min-height: var(--ui-input-height);
  border-radius: var(--ui-radius-pill);
  border: var(--ui-border-width) solid var(--ui-border);
  background: var(--ui-surface);
  color: var(--ui-ink);
  font-family: var(--ui-font-family);
  font-size: var(--ui-control-font-size);
  font-weight: var(--ui-form-input-weight);
  padding-left: var(--ui-form-padding-x);
  padding-right: var(--ui-form-padding-x);
}

#contact-settings-card .admin-contact-input::placeholder {
  color: var(--ui-muted);
  opacity: 1;
}

/* Layout del formulario: gap entre campos igual que Perfil de Barbero */
#contact-settings-card .admin-contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

#contact-settings-card .admin-contact-save-btn {
  width: 100%;
  max-width: var(--ui-form-max-width);
  margin: var(--space-5) auto 0;
  min-height: var(--ui-control-height);
  border-radius: var(--ui-radius-pill);
  border: var(--ui-border-width) solid var(--ui-border);
  background: var(--ui-surface-strong);
  color: var(--ui-ink-inverse);
  font-family: var(--ui-font-family);
  font-size: var(--ui-button-font-size);
  font-weight: var(--ui-button-font-weight);
}

#contact-settings-card .admin-contact-save-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* ============================================================
   DRAWER COMPARTIDO — menú lateral (user + admin)
   Selectores agrupados: un cambio aquí actualiza ambos.
   Tokens usados: --font-size-nav, --font-size-item,
   --font-weight-medium, --font-weight-semibold,
   --app-padding-x, --space-2, --space-3, --space-10
   ============================================================ */

/* Cabecera del drawer: margin-bottom responsive (solo drawer, no afecta sheets ni panels) */
#side-drawer .drawer-head,
#admin-side-drawer .admin-drawer-head {
  margin-bottom: min(var(--space-8), 4vh);
}

/* Lista de ítems de navegación */
#side-drawer .drawer-menu,
#admin-side-drawer .admin-drawer-menu {
  /* Responsive: se reducen en pantallas pequeñas para evitar scroll en el drawer */
  margin-top: min(80px, 6vh);
  gap: min(14px, 1.5vh);
  display: flex;
  flex-direction: column;
  padding-left: 69px;
  padding-right: 69px;
  flex: 1 0 auto;
}

/* Ítem individual de navegación */
#side-drawer .drawer-item,
#admin-side-drawer .admin-drawer-item {
  width: 100%;
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  border: none;
  background: none;
  color: var(--color-ink);
  font-family: var(--font-family);
  font-size: var(--font-size-nav);
  font-weight: var(--font-weight-medium);
  line-height: 1.2;
  padding: var(--space-2) 0;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  box-shadow: none;
}

/* Botón Cerrar Sesión — fluye dentro del nav, siempre al fondo del drawer */
#side-drawer .drawer-login-btn.logged-in,
#admin-side-drawer .admin-drawer-logout {
  /* Empuja al fondo del nav; el aside tiene padding-bottom: 100px → queda a 100px del borde */
  margin-top: auto;
  /* Rompe el padding-left: 69px del nav para abarcar el ancho completo del drawer */
  margin-left: -69px;
  width: calc(100% + 69px + var(--app-padding-x));
  /* Apariencia */
  border: none;
  background: none;
  color: var(--color-ink);
  font-family: var(--font-family);
  font-size: var(--font-size-item);
  font-weight: var(--font-weight-semibold);
  text-align: center;
  justify-content: center;
  padding: var(--space-3) 0;
  cursor: pointer;
  box-shadow: none;
}

/* ============================================================
   HOME HERO — compartido (user + admin)
   Un cambio aquí actualiza ambas pantallas principales.
   ============================================================ */

/* Iconos de cabecera */
.top-actions,
.admin-home-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-1); /* 4px */
}

/* Icono SVG dentro de botones CTA (Reservar cita / Mis citas) */
.cta svg,
.admin-home-cta svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: var(--stroke-icon);
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Titular principal h1 */
.home-screen h1,
.admin-home-main h1 {
  margin: 0;
  width: 100%;
  line-height: 0.96;
  font-size: clamp(36px, 12.62vw, 58px); /* 54px en 428px */
  letter-spacing: -0.04em;
}

.home-screen h1 span,
.admin-home-main h1 span { display: block; }

/* Pesos tipográficos del h1 */
h1 .bold  { font-weight: var(--font-weight-bold); } /* Inter Bold — igual que Figma */
h1 .light { font-weight: var(--font-weight-light); } /* Inter Light */

/* "R E T O ' S" con línea decorativa — user y admin */
.brand-line,
.admin-home-brand-line {
  margin-bottom: clamp(16px, 3.5vh, 28px);
}

.brand-line span,
.admin-home-brand-line span {
  display: block;
  margin-bottom: var(--space-3);
  font-size: clamp(22px, 6.5vw, 30px);
  letter-spacing: 0.18em;
  line-height: 1;
  font-weight: var(--font-weight-light);
}

.brand-line .line,
.admin-home-brand-line .line {
  width: clamp(120px, 34vw, 155px);
  height: 3px;
  background: rgba(255, 255, 255, 0.9);
  border: none;
}

/* Badge de notificación sobre icono — user y admin */
.icon-btn-badge,
.admin-home-icon-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 22px;
  min-width: 22px;
  height: 22px;
  border-radius: var(--radius-pill);
  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;
  pointer-events: none;
  box-shadow: var(--shadow-badge);
}

/* Botones CTA de portada — base estructural compartida */
.cta,
.admin-home-cta {
  height: var(--control-height);
  border-radius: var(--radius-pill);
  border: 2px solid var(--color-white);
  background: var(--color-white);
  color: var(--color-ink-deep);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  text-decoration: none;
  font-family: var(--font-family);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-semibold);
  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;
}

.cta:active,
.admin-home-cta:active {
  transform: scale(0.97);
  opacity: 0.85;
}

/* Logo de portada (isologo) — user y admin */
.logo-mark,
.admin-home-logo {
  width: clamp(100px, 26vw, 120px);
  height: auto;
  object-fit: contain;
  filter: brightness(0) invert(1);
  transition: width var(--motion-base) var(--ease-out);
}

/* Logo reducido cuando un panel está abierto */
.mobile-app.booking-overlay-open .logo-mark,
body.admin-sheet-open .admin-home-logo {
  width: var(--logo-collapsed-width);
}


/* ==========================================================================
   ROTATE OVERLAY — Bloqueo de orientación landscape en móvil
   Solo aplica en móviles (max-height: 600px excluye tablets en landscape).
   En modo PWA ya lo bloquea el manifest ("orientation": "portrait").
   ========================================================================== */

.rotate-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--color-black);
  color: var(--color-white);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  z-index: 100000;
  padding: var(--space-8);
  text-align: center;
}

.rotate-icon {
  width: 56px;
  height: 56px;
  animation: rotate-hint 2.4s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes rotate-hint {
  0%   { transform: rotate(90deg); }
  35%  { transform: rotate(0deg);  }
  65%  { transform: rotate(0deg);  }
  100% { transform: rotate(90deg); }
}

.rotate-msg {
  font-family: var(--font-family);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-medium);
  line-height: 1.4;
  color: var(--color-white);
  margin: 0;
}

/* Mostrar solo en móviles en landscape (tablets quedan fuera por max-height) */
@media (orientation: landscape) and (max-height: 600px) {
  .rotate-overlay {
    display: flex;
  }
}

/* ----------------------------------------------------------
   PULL-TO-REFRESH INDICATOR
   Componente compartido: user + admin.
   El JS anima height de 0 → Npx al arrastrar.
---------------------------------------------------------- */
.ui-pull-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 0;
  overflow: hidden;
  color: var(--color-muted);
  transition: none;
}
.ui-pull-spinner {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  animation: ui-pull-spin 1.4s linear infinite;
}
.ui-pull-indicator.is-loading .ui-pull-spinner {
  animation-duration: 0.7s;
}
@keyframes ui-pull-spin {
  to { transform: rotate(360deg); }
}

/* ----------------------------------------------------------
   RESPONSIVE — Paneles laterales slide-in (≥ 768px)
   Esquinas izquierdas redondeadas: un solo cambio aquí
   se propaga a drawers y paneles de contenido slide-in.
---------------------------------------------------------- */
@media (min-width: 768px) {
  #side-drawer,
  .admin-side-drawer,
  .admin-content-shell:not(.is-sheet) {
    border-radius: var(--radius-card) 0 0 var(--radius-card);
  }
}

/* ----------------------------------------------------------
   RESPONSIVE — Bottom sheets (≥ 768px)
   Ambas esquinas superiores redondeadas: un solo cambio aquí
   se propaga a user (.sheet, .booking-flow-screen, .appointments-screen)
   y admin (.admin-content-shell.is-sheet).
---------------------------------------------------------- */
@media (min-width: 768px) {
  .sheet:not(.slide-in),
  .booking-flow-screen,
  .appointments-screen,
  .admin-content-shell.is-sheet {
    border-radius: var(--radius-card) var(--radius-card) 0 0;
    overflow: hidden;   /* clip children to border-radius */
  }
}