/* ============================================================
   D-TOMATE — Design System
   Mobile-first. Flex-based. Elegante y mantenible.
============================================================ */

/* ── Fuentes locales (incluye ejes SOFT/WONK de Fraunces) ─── */
@font-face {
  font-family: "Fraunces";
  src:
    url("../fonts/Fraunces/Fraunces-VariableFont_SOFT,WONK,opsz,wght.woff2")
      format("woff2"),
    url("../fonts/Fraunces/Fraunces-VariableFont_SOFT,WONK,opsz,wght.ttf")
      format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src:
    url("../fonts/Fraunces/Fraunces-Italic-VariableFont_SOFT,WONK,opsz,wght.woff2")
      format("woff2"),
    url("../fonts/Fraunces/Fraunces-Italic-VariableFont_SOFT,WONK,opsz,wght.ttf")
      format("truetype");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Chivo";
  src:
    url("../fonts/Chivo/Chivo-VariableFont_wght.woff2") format("woff2"),
    url("../fonts/Chivo/Chivo-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Chivo";
  src:
    url("../fonts/Chivo/Chivo-Italic-VariableFont_wght.woff2") format("woff2"),
    url("../fonts/Chivo/Chivo-Italic-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

[hidden] {
  display: none !important;
}

/* Iconos: antes glifos de la fuente de Google (Material Symbols Outlined),
   ahora <svg><use> contra el sprite de partials/icon-sprite.php. Se deja la
   misma clase para no tocar el resto de reglas (tamaño/color por elemento
   siguen funcionando igual, vía font-size + currentColor). */
.material-symbols-outlined {
  display: inline-block;
  width: 1em;
  height: 1em;
  font-size: 24px;
  line-height: 1;
  fill: currentColor;
  flex-shrink: 0;
  vertical-align: -0.2em;
}

/* --- Tokens de diseño --- */
:root {
  /* Marca — Pantone 185 C | HEX #E73E56 */
  --red: #e73e56;
  --red-dark: #c0293f;
  --red-glow: rgba(231, 62, 86, 0.12);
  --red-border: rgba(231, 62, 86, 0.22);

  /* Superficies — Pantone 600 C al 10% | HEX #FFFEF3 */
  --bg: #fffef3;
  --surface: #ffffff;
  --surface-alt: #fafaf3;
  --surface-sub: #f5f4e8;

  /* Texto */
  --text: #1c1814;
  --text-sec: #5a5550;
  --text-muted: #9a948e;

  /* Bordes */
  --border: rgba(0, 0, 0, 0.07);
  --border-med: rgba(0, 0, 0, 0.11);
  --border-str: rgba(0, 0, 0, 0.16);

  /* Sombras */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08), 0 1px 4px rgba(0, 0, 0, 0.05);
  --shadow-red: 0 3px 12px rgba(231, 62, 86, 0.25);

  /* Radios */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 20px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* Layout */
  --header-h: 60px;
  --nav-h: 68px;
  --max-w: 480px;
  --gap: 14px;
  --gap-sm: 10px;
  --gap-lg: 20px;
  --sidebar-w: 232px;
}

/* --- Reset base --- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-family: "Chivo", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-family: "Fraunces", Georgia, serif;
  font-weight: 800;
  font-variation-settings: "SOFT" 100;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  /* El único scroll de la app vive dentro de main.container. Sin esto, un
     arrastre iniciado en una zona sin scroll propio (p.ej. la nav inferior,
     o main cuando el contenido es corto) se encadena al documento y el
     navegador móvil desplaza la página entera: la barra de navegación se
     despega del borde y se queda a media altura. */
  overflow: hidden;
  overscroll-behavior: none;
}

img {
  display: block;
  max-width: 100%;
}
p {
  margin: 0;
}

button,
input,
textarea,
select,
span,
a {
  font: inherit;
  color: inherit;
  font-family: "Chivo", Georgia, serif;
}
button {
  cursor: pointer;
}
a {
  text-decoration: none;
}

/* ============================================================
   HEADER
============================================================ */
.header-bar {
  height: var(--header-h);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 16px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-xs);
  position: relative;
  z-index: 100;
}

.header-bar h1 {
  margin: 0;
  font-size: 1rem;
  font-weight: 800;
  color: var(--red);
  letter-spacing: -0.025em;
  text-align: end;
  text-transform: uppercase;
  flex: 1;
}

/* Logo animado en header */
.header-logo-wrap {
  position: relative;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  animation: header-logo-float 6s ease-in-out infinite;
}

.header-logo-layer {
  position: absolute;
  inset: 0;
  border-radius: var(--r-sm);
  background: var(--surface);
}

.header-logo-layer--back {
  transform: rotate(6deg);
  opacity: 0.5;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.09);
}

.header-logo-layer--front {
  transform: rotate(-3deg);
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.06);
}

.header-logo-img {
  position: relative;
  z-index: 2;
  width: 28px;
  height: 28px;
  object-fit: contain;
  border-radius: var(--r-xs);
}

@keyframes header-logo-float {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
  100% {
    transform: translateY(0);
  }
}

/* ============================================================
   CONTENEDOR PRINCIPAL
============================================================ */
main.container {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* Al llegar al tope/fondo del scroll interno, no encadenar el gesto al
     documento (evita el rebote que descoloca la nav inferior en iOS). */
  overscroll-behavior-y: contain;
  padding: var(--gap) var(--gap) 24px;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  width: 100%;
  max-width: var(--max-w);
  margin-left: auto;
  margin-right: auto;
}

main.container.container--wide {
  max-width: none;
  width: 100%;
}

@media (min-width: 640px) {
  main.container {
    padding-bottom: calc(var(--nav-h) + 24px);
  }
}

/* Variante centrada verticalmente (login, landing, confirmación) */
main.container.container--center {
  justify-content: center;
  min-height: 0;
}

/* ============================================================
   NAVEGACIÓN INFERIOR (mobile)
============================================================ */
.nav-bottom {
  /* En iPhone con home indicator (viewport-fit=cover en el <meta>), el
     safe-area-inset baja el contenido de la barra para que el gesto del
     sistema no lo tape. En pantallas sin inset, env() vale 0 y queda igual. */
  height: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px));
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0 8px env(safe-area-inset-bottom, 0px);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--border);
}

.nav-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  padding: 8px 20px;
  border-radius: var(--r-md);
  -webkit-tap-highlight-color: transparent;
  transition: color 0.15s ease;
}

.nav-item .material-symbols-outlined {
  font-size: 22px;
}

.nav-badge {
  position: absolute;
  top: 2px;
  right: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--r-pill);
  background: var(--red);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 4px 10px rgba(230, 61, 86, 0.24);
}
.nav-item span:not(.material-symbols-outlined) {
  display: flex;
}
.nav-item.active {
  color: var(--red);
}

/* Escritorio: la barra inferior (pensada para pulgar en móvil) se
   convierte en un sidebar fijo a la izquierda. header-bar/.nav-bottom/
   main.container son hijos directos de <body> — con Grid no importa el
   orden en el DOM, así que ninguna de las 7 páginas que incluyen nav.php
   necesita tocar su HTML. Los modales (position:fixed, hermanos directos
   de <header>) no se ven afectados por este cambio de layout.
   :has(.nav-bottom) evita que este grid (con su columna fantasma de
   sidebar) se aplique en páginas sin nav (login, schedule, etc.), que si
   no quedaban descentradas en escritorio. */
@media (min-width: 1024px) {
  body:has(.nav-bottom) {
    display: grid;
    grid-template-columns: var(--sidebar-w) 1fr;
    grid-template-rows: var(--header-h) 1fr;
    grid-template-areas: "header header" "nav main";
    height: 100dvh;
  }

  .header-bar {
    grid-area: header;
  }

  .nav-bottom {
    grid-area: nav;
    height: auto;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding: 20px 12px;
    gap: 4px;
    border-top: none;
    border-right: 1px solid var(--border);
    overflow-y: auto;
  }

  .nav-item {
    flex-direction: row;
    justify-content: flex-start;
    gap: 12px;
    padding: 10px 14px;
    font-size: 0.85rem;
  }

  .nav-item .material-symbols-outlined {
    font-size: 20px;
  }

  main.container {
    grid-area: main;
  }
}
@media (min-width: 1024px) {
  .appointments-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ============================================================
   CARDS
============================================================ */
.card {
  background: var(--surface);
  border: 1px solid var(--border-med);
  border-radius: var(--r-xl);
  padding: var(--gap-lg);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

.card-sm {
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);
}

#date-card,
#times-card {
  gap: 0px !important;
}

/* Card destacada (landing, confirmación) */
.card-hero {
  background: var(--surface);
  border: 1px solid var(--border-med);
  border-radius: var(--r-xl);
  padding: 28px 24px;
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  gap: var(--gap-lg);
}

/* ============================================================
   TIPOGRAFÍA
============================================================ */

.appointments-grid {
  display: grid;
  gap: 18px;
}

@media (min-width: 1680px) {
  .appointments-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.appointments-grid .booking-card {
  width: 100%;
}

/* ============================================================
   GESTOS: hoja inferior (agarradera) y swipe-reveal en tarjetas
============================================================ */
.sheet-handle {
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: var(--border-med);
  margin: 0 auto 14px;
}

.booking-card--swipeable {
  padding: 0;
  overflow: hidden;
  position: relative;
}

.booking-card__content {
  padding: var(--gap-lg);
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  background: var(--surface);
  position: relative;
  z-index: 1;
  transition: transform 0.2s ease;
  border-radius: var(--r-xl);
}

.booking-card__actions {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
}

.booking-card__action {
  width: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-decoration: none;
  border: none;
}

.booking-card__action--edit {
  background: var(--text-sec);
}

.booking-card__action--cancel {
  background: var(--red);
}

/* En escritorio no hay gesto de swipe (solo eventos táctiles), así que la
   capa de acciones oculta tras la tarjeta no debe existir ni asomar. */
@media (min-width: 860px) {
  .booking-card__actions {
    display: none;
  }

  .booking-card__content {
    transform: none !important;
  }
}

/* ============================================================
   TIPOGRAFÍA
============================================================ */
.hero-title {
  font-family: "Fraunces", Georgia, serif;
  font-variation-settings: "SOFT" 100;
  font-size: clamp(1.5rem, 6vw, 2rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text);
  text-align: center;
}

.section-title {
  font-family: "Fraunces", Georgia, serif;
  font-variation-settings: "SOFT" 100;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
}

.subtitle {
  color: var(--text-sec);
  font-size: 0.875rem;
  line-height: 1.65;
}

.label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

/* ============================================================
   BADGES
============================================================ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  background: var(--surface-sub);
  color: var(--text-sec);
  border: 1px solid var(--border-med);
  border-radius: var(--r-pill);
  font-size: 0.76rem;
  font-weight: 600;
  line-height: 1;
}

.badge .material-symbols-outlined {
  font-size: 14px;
}

.badge--red {
  background: var(--red-glow);
  color: var(--red);
  border-color: var(--red-border);
}

.badge--green {
  background: rgba(34, 197, 94, 0.1);
  color: #15803d;
  border-color: rgba(34, 197, 94, 0.22);
}

/* ============================================================
   ICON BOX (icono en cuadrado redondeado)
============================================================ */
.icon-box {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  background: var(--red-glow);
  border: 1px solid var(--red-border);
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-box .material-symbols-outlined {
  color: var(--red);
  font-size: 20px;
}

.icon-box--danger {
  background: var(--red-glow);
  border-color: var(--red-border);
}

.icon-box--danger .material-symbols-outlined {
  color: var(--red);
}

.icon-box--success {
  background: rgba(34, 197, 94, 0.1);
  border-color: rgba(34, 197, 94, 0.22);
}

.icon-box--success .material-symbols-outlined {
  color: #15803d;
}

.icon-box--neutral {
  background: var(--surface-sub);
  border-color: var(--border-med);
}

.icon-box--neutral .material-symbols-outlined {
  color: var(--text-sec);
}

.icon-box--default {
  background: var(--surface);
  border-color: var(--border);
}

.icon-box--default .material-symbols-outlined {
  color: var(--text);
}

/* ============================================================
   BOTONES
============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: none;
  border-radius: var(--r-lg);
  padding: 13px 18px;
  font-weight: 700;
  font-size: 0.875rem;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    opacity 0.15s ease,
    transform 0.1s ease;
}

.btn:active {
  transform: scale(0.97);
  opacity: 0.88;
}
.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: 0.45;
  pointer-events: none;
}

.btn .material-symbols-outlined {
  font-size: 18px;
  flex-shrink: 0;
}

/* Variantes */
.btn-primary {
  background: var(--red);
  color: #fff;
  box-shadow: var(--shadow-red);
}

.btn-secondary {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border-str);
}

.btn-ghost {
  background: transparent;
  color: var(--red);
}

.btn-link {
  background: transparent;
  color: var(--red);
  padding: 6px 4px;
  font-weight: 600;
}

.booking-step-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.step-chip-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(220, 38, 38, 0.08);
  color: #dc2626;
  border: 1.5px solid rgba(220, 38, 38, 0.2);
  border-radius: 20px;
  padding: 5px 12px 5px 14px;
  font-size: 0.82rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}

.step-chip-btn:hover {
  background: rgba(220, 38, 38, 0.15);
}

.collapsible-body {
  overflow: hidden;
  max-height: 900px;
  opacity: 1;
  margin-top: 12px;
  transition:
    max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.25s ease,
    margin-top 0.4s ease;
}

.collapsible-body.collapsed {
  max-height: 0;
  opacity: 0;
  margin-top: 0;
}

/* Tarjeta colapsada: se puede pulsar en cualquier punto para reabrirla, no
   solo en el chip con el resumen. */
.card.is-collapsed {
  cursor: pointer;
}
#booking-summary {
  display: flex;
  align-items: center;
  gap: 7px;
  background: rgba(220, 38, 38, 0.05);
  border: 1px solid rgba(220, 38, 38, 0.15);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 0.85rem;
  font-weight: 600;
  color: #dc2626;
  cursor: pointer;
  transition: background 0.15s;
}

#booking-summary:hover {
  background: rgba(220, 38, 38, 0.1);
}

/* Aparición/desaparición de date-card/times-card/datos-card (schedule.php):
   en vez de saltar de golpe con display:none → '', se revelan con un
   fundido + pequeño desplazamiento para suavizar el "salto" del botón
   inferior. Las tres comparten reglas porque, en el paso de "Datos", tanto
   la fecha como la hora se ocultan por completo (no solo se colapsan a
   chip) para que todo quepa en una pantalla de móvil. */
#date-card,
#times-card,
#datos-card {
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}

#date-card.is-hidden,
#times-card.is-hidden,
#datos-card.is-hidden {
  display: none;
}

#date-card.is-entering,
#times-card.is-entering,
#datos-card.is-entering {
  opacity: 0;
  transform: translateY(10px);
}

/* Compactado al enfocar "Tus datos" con el teclado abierto (móvil): se
   reduce el margen del título y el espaciado general para ganar hueco. */
#booking-title {
  overflow: hidden;
  max-height: 60px;
  opacity: 1;
  transition:
    max-height 0.25s ease,
    opacity 0.2s ease;
}

main.container.keyboard-open {
  gap: 8px;
}

main.container.keyboard-open #booking-title {
  max-height: 0;
  opacity: 0;
}

/* ============================================================
   STEPPER DE RESERVA (schedule.php → review.php → confirmed.php)
============================================================ */
.booking-stepper {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 2px var(--gap-lg) 4px;
}

.bs-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  width: 62px;
  cursor: pointer;
}

.bs-dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--surface-sub);
  border: 1.5px solid var(--border-med);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition:
    background 0.2s,
    border-color 0.2s;
}

.bs-num {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-muted);
}

.bs-check {
  display: none;
  font-size: 14px;
  color: #fff;
}

.bs-label {
  font-size: 0.66rem;
  font-weight: 600;
  color: var(--text-muted);
  text-align: center;
  white-space: nowrap;
  transition: color 0.2s;
}

.bs-line {
  flex: 1;
  height: 1.5px;
  background: var(--border-med);
  margin-top: 12px;
  min-width: 10px;
  transition: background 0.2s;
}

.bs-line.is-done {
  background: var(--red);
}

.bs-step.is-active .bs-dot {
  background: var(--red);
  border-color: var(--red);
}

.bs-step.is-active .bs-num {
  color: #fff;
}

.bs-step.is-active .bs-label {
  color: var(--red);
  font-weight: 700;
}

.bs-step.is-done .bs-dot {
  background: var(--red);
  border-color: var(--red);
}

.bs-step.is-done .bs-num {
  display: none;
}

.bs-step.is-done .bs-check {
  display: block;
}

.bs-step.is-done .bs-label {
  color: var(--text-sec);
}

/* Icono solo */
.btn-icon {
  width: 42px;
  height: 42px;
  padding: 0;
  border-radius: var(--r-md);
  flex-shrink: 0;
}

.w-100,
.btn-block {
  width: 100%;
}

/* ============================================================
   GRUPOS DE BOTONES (stack vertical)
============================================================ */
.button-group {
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);
}

/* Grid de días (selector de fecha) */
.days-grid {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
}

.days-grid .btn {
  flex: 1 1 calc(20% - 8px);
  min-width: 0;
  flex-direction: column;
  gap: 2px;
  padding: 10px 4px;
  font-size: 0.78rem;
  border-radius: var(--r-md);
}

/* Grid de horas (2 columnas) */
.times-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

@media (prefers-reduced-motion: no-preference) {
  .times-grid .time-btn {
    animation: time-btn-in 0.25s ease both;
  }
}

@keyframes time-btn-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================================
   FORMULARIOS
============================================================ */
.input-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.input-icon {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 18px;
  pointer-events: none;
  line-height: 1;
}

input {
  width: 100%;
  border-radius: var(--r-md);
  border: 1.5px solid var(--border-str);
  padding: 12px 14px 12px 40px;
  background: var(--surface-alt);
  color: var(--text);
  /* 16px: por debajo de eso, iOS/Android hacen zoom automático al enfocar */
  font-size: 16px;
  -webkit-appearance: none;
  appearance: none;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}

input:focus {
  outline: none;
  border-color: var(--red);
  box-shadow: 0 0 0 1px var(--red-glow);
}

input:disabled,
select:disabled,
textarea:disabled {
  background: var(--surface-sub);
  color: var(--text-sec);
  cursor: default;
}

/* Validación en línea (teléfono/email en schedule.php): borde rojo + texto
   de ayuda, para que un botón "Revisar reserva" deshabilitado no sea un
   callejón sin salida silencioso. */
.input-wrapper.has-error input {
  border-color: var(--red);
}

.field-hint {
  display: none;
  font-size: 0.76rem;
  color: var(--red);
  margin-top: -2px;
}

.field-hint.is-visible {
  display: block;
}

select {
  width: 100%;
  border-radius: var(--r-md);
  border: 1.5px solid var(--border-str);
  padding: 12px 14px 12px 40px;
  background: var(--surface-alt);
  color: var(--text);
  /* 16px: por debajo de eso, iOS/Android hacen zoom automático al enfocar */
  font-size: 16px;
  -webkit-appearance: none;
  appearance: none;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
  cursor: pointer;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a5550' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 18px;
  padding-right: 38px;
}

select:focus {
  outline: none;
  border-color: var(--red);
  box-shadow: 0 0 0 3px var(--red-glow);
}

textarea {
  width: 100%;
  border-radius: var(--r-md);
  border: 1.5px solid var(--border-str);
  padding: 12px 14px;
  background: var(--surface-alt);
  color: var(--text);
  /* 16px: por debajo de eso, iOS/Android hacen zoom automático al enfocar */
  font-size: 16px;
  -webkit-appearance: none;
  appearance: none;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
  resize: vertical;
  min-height: 80px;
}

textarea:focus {
  outline: none;
  border-color: var(--red);
  box-shadow: 0 0 0 3px var(--red-glow);
}

/* ============================================================
   NOTA / INFO BOX
============================================================ */
.small-note,
.note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--red-glow);
  border: 1px solid var(--red-border);
  border-radius: var(--r-lg);
  padding: 14px 16px;
  font-size: 0.85rem;
  color: var(--text-sec);
  line-height: 1.55;
}

.small-note .material-symbols-outlined,
.note .material-symbols-outlined {
  color: var(--red);
  font-size: 18px;
  flex-shrink: 0;
  margin-top: 1px;
}

/* ============================================================
   SEPARADOR
============================================================ */
.divider {
  border: none;
  border-top: 1px solid var(--border-med);
  margin: 2px 0;
}

/* ============================================================
   FILA DE DETALLE (label + valor)
============================================================ */
.detail-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.detail-row + .detail-row {
  margin-top: 12px;
}

.detail-value {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text);
  text-align: right;
}

/* ============================================================
   UTILIDADES FLEX
============================================================ */
.flex-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.flex-col {
  display: flex;
  flex-direction: column;
}
.flex-between {
  justify-content: space-between;
}
.flex-center {
  justify-content: center;
  align-items: center;
}
.flex-start {
  align-items: flex-start;
}
.flex-wrap {
  flex-wrap: wrap;
}
.flex-1 {
  flex: 1;
  min-width: 0;
}

.gap-4 {
  gap: 4px;
}
.gap-6 {
  gap: 6px;
}
.gap-8 {
  gap: 8px;
}
.gap-10 {
  gap: 10px;
}
.gap-12 {
  gap: 12px;
}
.gap-16 {
  gap: 16px;
}
.gap-20 {
  gap: 20px;
}

/* ============================================================
   UTILIDADES GENERALES
============================================================ */
.text-center {
  text-align: center;
}
.text-muted {
  color: var(--text-muted);
}
.text-red {
  color: var(--red);
}
.font-bold {
  font-weight: 700;
}
.word-break {
  word-break: break-all;
}

/* Seccion legacy — el gap del container ya maneja el espaciado */
/* .section {
} */

/* ============================================================
   RESPONSIVE
============================================================ */
@media (min-width: 640px) {
  main.container {
    padding: 28px 24px;
  }
}

@media (min-width: 1024px) {
  main.container {
    padding: 40px 24px;
  }
  .card-hero {
    padding: 36px 32px;
  }
}

/* ============================================================
   CALENDARIO DE RESERVAS
============================================================ */
.cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.cal-title {
  font-family: "Fraunces", Georgia, serif;
  font-variation-settings: "SOFT" 100;
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.01em;
  text-align: center;
  flex: 1;
  text-transform: capitalize;
}

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.cal-day-header {
  text-align: center;
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--text-muted);
  padding: 4px 0 2px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.cal-cell {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border-radius: var(--r-sm);
  font-size: 0.82rem;
  font-weight: 700;
  border: none;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    background 0.15s,
    color 0.15s;
  padding: 0;
  color: var(--text);
  line-height: 1;
  position: relative;
}

.cal-empty {
  cursor: default;
}

.cal-bar {
  width: 40%;
  height: 3px;
  border-radius: 999px;
  overflow: hidden;
}

.cal-bar-fill {
  display: block;
  width: 0;
  height: 100%;
  margin-left: 50%;
  transform: translateX(-50%);
  border-radius: 999px;
  transition:
    width 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    background-color 0.6s ease;
}

/* Skeleton mostrado en #calendar-container antes de que BookingCalendar
   renderice el calendario real (lo sustituye por completo al arrancar). */
.cal-skeleton-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.cal-skeleton-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.cal-skeleton-box {
  background: var(--surface-alt);
  border-radius: var(--r-sm);
  position: relative;
  overflow: hidden;
}

.cal-skeleton-box--nav {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
}

.cal-skeleton-box--title {
  flex: 1;
  max-width: 140px;
  height: 15px;
  border-radius: var(--r-xs);
}

.cal-skeleton-box--cell {
  aspect-ratio: 1;
}

@media (prefers-reduced-motion: no-preference) {
  .cal-skeleton-box::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.5),
      transparent
    );
    animation: cal-skeleton-shimmer 1.4s ease-in-out infinite;
  }
}

@keyframes cal-skeleton-shimmer {
  100% {
    transform: translateX(100%);
  }
}

.cal-disabled {
  color: var(--text-muted);
  opacity: 0.35;
  cursor: not-allowed;
}

.cal-off {
  color: var(--text-muted);
  opacity: 0.4;
  cursor: not-allowed;
  background: transparent;
}

.cal-blocked {
  background: var(--red-glow);
  color: var(--red);
  cursor: not-allowed;
}

.cal-blocked::after {
  content: "×";
  position: absolute;
  top: 1px;
  right: 3px;
  font-size: 0.6rem;
  font-weight: 900;
  line-height: 1;
  opacity: 0.7;
}

.cal-full {
  color: var(--text-muted);
  cursor: not-allowed;
  opacity: 0.45;
  text-decoration: line-through;
}

.cal-available {
  background: var(--surface-sub);
  color: var(--text);
}

.cal-available:hover:not([disabled]) {
  background: var(--red-glow);
  color: var(--red);
}

.cal-available.cal-selected,
.cal-available.cal-selected:hover {
  background: var(--red);
  color: #fff;
  box-shadow: var(--shadow-red);
}

.cal-today:not(.cal-selected):not(.cal-disabled):not(.cal-blocked) {
  box-shadow: inset 0 0 0 1.5px var(--red);
}

.cal-has-bookings {
  background: rgba(59, 130, 246, 0.1);
  color: #1d4ed8;
}

.cal-has-bookings:hover {
  background: rgba(59, 130, 246, 0.18);
}

/* Badge de conteo de citas */
.cal-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #3b82f6;
  color: #fff;
  font-size: 0.55rem;
  font-weight: 800;
  line-height: 1;
}

.cal-selected .cal-badge {
  background: rgba(255, 255, 255, 0.9);
  color: var(--red);
}

/* Hora ocupada en el grid de horas */
.time-booked {
  opacity: 0.45;
}

/* ============================================================
   CALENDARIO ADMIN — extras
============================================================ */
.admin-cal-grid .admin-clickable {
  cursor: pointer;
}

.admin-cal-grid .admin-blocked {
  cursor: pointer;
  opacity: 0.85;
}

.admin-cal-grid .admin-blocked:hover {
  opacity: 1;
}

/* Leyenda */
.cal-legend {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  flex-shrink: 0;
}
.cal-legend--avail {
  background: var(--surface-sub);
  border: 1px solid var(--border-str);
}
.cal-legend--blocked {
  background: var(--red-glow);
  border: 1px solid var(--red-border);
}
.cal-legend--booked {
  background: rgba(59, 130, 246, 0.15);
  border: 1px solid rgba(59, 130, 246, 0.3);
}
.cal-legend--off {
  background: var(--border);
  border: 1px solid var(--border-med);
}

/* ============================================================
   DÍAS LABORABLES — toggles
============================================================ */
.weekday-toggles {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.weekday-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0;
}

.weekday-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
}

.toggle-btn {
  position: relative;
  width: 42px;
  height: 24px;
  border-radius: var(--r-pill);
  border: none;
  cursor: pointer;
  transition: background 0.2s;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}

.toggle-btn::after {
  content: "";
  position: absolute;
  top: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  transition:
    left 0.2s,
    transform 0.2s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.toggle-on {
  background: var(--red);
}
.toggle-off {
  background: var(--border-str);
}

.toggle-on::after {
  left: calc(100% - 21px);
}
.toggle-off::after {
  left: 3px;
}

/* ============================================================
   CALENDAR — partial day & legend extra
============================================================ */
.cal-partial {
  background: rgba(245, 158, 11, 0.12);
  border: 1.5px solid rgba(245, 158, 11, 0.5);
  color: var(--text);
}
.cal-partial:hover {
  background: rgba(245, 158, 11, 0.22);
  border-color: #f59e0b;
}
.cal-legend--partial {
  background: rgba(245, 158, 11, 0.2);
  border: 1px solid rgba(245, 158, 11, 0.5);
}

/* ============================================================
   ACTION PANEL — tab switcher
============================================================ */
.tab-switcher {
  display: flex;
  gap: 4px;
  background: var(--surface-sub);
  border-radius: var(--r-md);
  padding: 4px;
}

.tab-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 7px 10px;
  border-radius: calc(var(--r-md) - 2px);
  border: none;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-sec);
  background: transparent;
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s;
  -webkit-tap-highlight-color: transparent;
}

.tab-btn.tab-active {
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* ============================================================
   ACTION PANEL — hours grid
============================================================ */
.hours-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
  gap: 6px;
}

.time-slot-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 8px 4px;
  border-radius: var(--r-md);
  border: 1.5px solid var(--border-str);
  background: var(--surface-sub);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  transition:
    background 0.15s,
    border-color 0.15s,
    color 0.15s;
  -webkit-tap-highlight-color: transparent;
  line-height: 1.2;
}

.time-slot-available {
  border-color: var(--border-str);
  background: var(--surface-sub);
  color: var(--text-sec);
}
.time-slot-available:hover {
  border-color: var(--red-border);
  background: var(--red-glow);
  color: var(--red);
}

.time-slot-admin-blocked {
  border-color: var(--red-border);
  background: var(--red-glow);
  color: var(--red);
}
.time-slot-admin-blocked:hover {
  background: rgba(var(--red-rgb, 220, 38, 38), 0.18);
}

.time-slot-client {
  border-color: rgba(59, 130, 246, 0.35);
  background: rgba(59, 130, 246, 0.1);
  color: rgba(59, 130, 246, 0.9);
  cursor: not-allowed;
  opacity: 0.8;
}

/* flex-col helper */
.flex-col {
  display: flex;
  flex-direction: column;
}
.gap-8 {
  gap: 8px;
}

/* ── Page entrance animation ────────────────────────────────────────── */
@keyframes page-fadein {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
body {
  animation: page-fadein 0.2s ease both;
}

/* ── Client-side tab transitions ────────────────────────────────────── */
.tab-panel {
  transition: opacity 0.18s ease;
}
.tab-panel.tab-panel--hidden {
  display: none;
}

/* ============================================================
   BANNER DE ACTIVACIÓN DE NOTIFICACIONES PUSH
============================================================ */
.push-banner {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(var(--nav-h) + 12px + env(safe-area-inset-bottom));
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
  animation: page-fadein 0.2s ease both;
}

.push-banner-text {
  margin: 0;
  font-size: 0.85rem;
}

.push-banner-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}