/* =========================================================
   Booking SPA • Stylesheet limpio
   ========================================================= */

/* ---------- Variables del tema ---------- */
:root{
  --bg:#0b1210;
  --surface:#0f1714;
  --text:#e8f3ee;
  --muted:#b3c7bf;

  --accent:#0f6d4e;
  --accent-2:#0a4a36;

  --ok:#18a47b;
  --error:#e26d6d;

  --shadow:0 18px 40px rgba(0,0,0,.35);

  --slot-ring:rgba(168,255,216,.35);
  --slot-bg:rgba(168,255,216,.10);
  --slot-bg-2:rgba(168,255,216,.06);

  /* antes 168px */
  --slot-min-w: 140px;
  /* compacta padding y alto */
  --slot-pad-x: 10px;
  --slot-height: 36px;
  /* badge más estrecha (antes 88px) */
  --slot-badge-min: 72px;
  /* ancho típico de scrollbar en Windows/Chromium */
  --scrollbar-w: 16px;
}

/* ---------- Base / Reset ligero ---------- */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:var(--bg);
  background-image:
    radial-gradient(1000px 720px at 8% -16%, rgba(15,109,78,.10) 0%, rgba(15,109,78,.05) 40%, rgba(15,109,78,0) 74%),
    radial-gradient(1000px 760px at 110% 8%, rgba(10,74,54,.12) 0%, rgba(10,74,54,.05) 42%, rgba(10,74,54,0) 78%);
  background-repeat:no-repeat;
  line-height:1.6;
  padding-top:64px; /* deja hueco a la nav fija */
}
:focus-visible{
  outline:2px solid #a8ffd8;
  outline-offset:2px;
}

/* ---------- Layout contenedor y tarjetas ---------- */
.container{ width:min(980px,94%); margin:0 auto; }
.card{
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;
  box-shadow:var(--shadow);
  padding:18px 18px 22px;
  margin:18px 0;
}

/* ---------- Header / Nav ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px min(3vw,22px);
  background:rgba(11,18,16,.88);
  backdrop-filter:blur(6px) saturate(1.05);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.brand{ display:flex; align-items:center; gap:10px; font-weight:800; }
.brand__logo{ height:24px }
.brand .dot{ color:var(--accent) }
.nav__links a{ color:var(--text); opacity:.9; text-decoration:none; margin-left:12px }
.nav__links a:hover{ opacity:1 }

/* ---------- Tipografía / utilidades ---------- */
h1{ font-size:clamp(24px,4.6vw,36px); margin:8px 0 10px }
h2{ font-size:clamp(20px,4vw,28px);  margin:8px 0 10px }
.muted{ color:var(--muted); font-size:14px }

/* ---------- Botones ---------- */
.btn{
  display:inline-block; cursor:pointer; user-select:none;
  background:linear-gradient(180deg,var(--accent),var(--accent-2));
  color:#fff; padding:10px 16px; border-radius:14px;
  font-weight:600; text-decoration:none;
  border:1px solid rgba(12,180,120,.28);
  box-shadow:0 10px 24px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.12);
  transition:transform .15s ease, filter .15s ease;
}
.btn:hover{ filter:saturate(1.05); transform:translateY(-1px) }
.btn--ghost{ background:transparent; outline:1px solid rgba(255,255,255,.18); color:var(--text) }

/* ---------- Formularios básicos ---------- */
.row{ display:grid; grid-template-columns:1fr 1fr; gap:12px }
.row--split{ grid-template-columns:auto auto; justify-content:space-between }
input,select,textarea{
  width:100%; background:rgba(255,255,255,.06); color:var(--text);
  border:1px solid rgba(255,255,255,.12); border-radius:14px;
  padding:12px 14px; outline:none;
}

/* =========================================================
   Calendario + Horas (layout tipo management)
   ========================================================= */
.cal-and-slots{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(280px,420px);
  gap:24px; align-items:start;
}
.cal-left{ min-width:0; display:flex; flex-direction:column; gap:12px }

/* Toolbar del calendario */
.calendar-toolbar{
  display:flex; align-items:center; gap:10px; margin:6px 0 10px;
}
.month-label{ font-weight:800; letter-spacing:.3px }

/* Rejilla del calendario */
.calendar{
  display:grid;
  grid-template-columns:repeat(7, minmax(32px,1fr));
  gap:4px; margin-top:8px; width:100%;
}
.cal-head{
  opacity:.8; font-size:12px; text-transform:uppercase;
}

/* Celda de día */
.cal-cell{
  position:relative;
  aspect-ratio:1/1;
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; user-select:none;
  background:rgba(255,255,255,.04);
  transition:filter .12s ease;
}
.cal-cell .num{ font-weight:700; color:#fff }            /* números en blanco */
.cal-cell.disabled{ opacity:.45; filter:grayscale(1); cursor:not-allowed }
.cal-cell.full{ background:#0b2440; border-color:#0b2440 }
.cal-cell.avail{ background:#0e3d2e; border-color:#0e3d2e }
.cal-cell.selected{ outline:2px solid #a8ffd8; box-shadow:0 0 0 3px rgba(168,255,216,.2) }
.cal-cell:hover{ filter:brightness(1.06) }

/* Loader sobre el calendario */
.calendar-wrap{ position:relative }
.calendar .loader{
  position:absolute; inset:0; display:grid; place-items:center;
  background:rgba(0,0,0,.18); backdrop-filter:blur(1.5px);
  opacity:0; pointer-events:none; transition:opacity .18s ease;
  border-radius:12px;
}
.calendar.loading .loader{ opacity:1; pointer-events:all }
.calendar .loader .spinner{
  width:38px; height:38px; border-radius:50%;
  border:3px solid rgba(255,255,255,.35); border-top-color:#fff;
  animation:spin .8s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg) } }

/* Picker de comensales */
.pax-picker{ display:flex; align-items:center; gap:10px; flex-wrap:wrap }
.pax-label{ font-weight:700; min-width:110px }

/* Panel de horas */
.slots-panel{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  padding:8px 12px 12px;
  position:sticky; top:84px;
  max-height:calc(100vh - 120px);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.slots-head{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin:0 0 4px }
.slots-scroller{
  flex:1 1 auto; min-height:0;
  overflow-y: auto;           /* solo vertical */
  overflow-x: hidden;
  border-radius:10px;

  /* Fallback: reservar hueco fijo */
  padding-right: var(--scrollbar-w);

  /* Scrollbar estable cuando haya soporte */
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;

  /* si usas Firefox: thin; en Chromium lo ignorará */
  scrollbar-width: thin;
  scrollbar-color: rgba(12,180,120,.65) rgba(255,255,255,.06);
}
.slots-scroller::-webkit-scrollbar{ width:10px; }
.slots-scroller::-webkit-scrollbar-track{ background:rgba(255,255,255,.06); border-radius:8px; }
.slots-scroller::-webkit-scrollbar-thumb{ background:linear-gradient(180deg,var(--accent),var(--accent-2)); border-radius:8px; border:2px solid rgba(0,0,0,.25); }
.slots-scroller::-webkit-scrollbar-thumb:hover{ filter:brightness(1.08); }
.slots-status{ margin:0 0 6px; min-height:1.25em; }
@supports (scrollbar-gutter: stable both-edges){
  .slots-scroller{
    padding-right: 0;
    scrollbar-gutter: stable both-edges;
  }
}
@supports (scrollbar-gutter: stable){
  .slots{ padding-right: 0; }
}
.form__status{ margin-top:8px; min-height:1.3em; color:#d6efe5 }
.form__status--err{ color:var(--error) }
.form__status--ok{  color:var(--ok) }

/* ---------- Leyenda (coordinada con las celdas) ---------- */
.legend{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  font-size:12px; opacity:.9; margin:2px 0 6px;
}
.legend__item{ display:flex; align-items:center; gap:6px }
.legend__swatch{
  width:12px; height:12px; border-radius:4px;
  border:1px solid rgba(255,255,255,.18);
}
.legend .swatch--avail{   background:#0e3d2e; border-color:#0e3d2e; }
.legend .swatch--full{    background:#0b2440; border-color:#0b2440; }
.legend .swatch--selected{
  background:transparent; box-shadow:0 0 0 2px #a8ffd8 inset; border-color:#a8ffd8;
}

/* =========================================================
   Slots (horas) – Grid uniforme + “tiempo limitado”
   ========================================================= */

/* Contenedor: grid responsivo, todas las tarjetas con el mismo ancho */
.slots{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--slot-min-w), 1fr));
  gap:10px;
  align-items:stretch;
  margin-top:8px;
  padding-right: var(--scrollbar-w);
}

/* Tarjeta de hora */
.slot{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  min-height:var(--slot-height); padding:6px var(--slot-pad-x); border-radius:12px;
  white-space:nowrap; line-height:1;
  color:var(--text);
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.14);
  cursor: pointer;
}

/* Badge “tiempo limitado” */
.slot__badge{
  flex:0 0 auto;
  min-width:var(--slot-badge-min);        /* cabe “1h 45min” sin cortar */
  text-align:center;
  font-size:12px; font-weight:800; line-height:1.1;
  padding: 2px 6px; border-radius:999px;
  background:rgba(255,193,7,.28);
  border:1px solid rgba(255,193,7,.65);
  color:#ffefb0;
}

/* Si no hay badge, reserva el hueco para que no baile */
.slot__badge--empty{
  visibility:hidden;
  min-width:var(--slot-badge-min);
  padding: 2px 6px;
  border:1px solid transparent;
  border-radius:999px;
}

/* todavía más compacto en móviles */
@media (max-width: 520px){
  :root{ --slot-min-w: 120px; --slot-height: 34px; }
}

.slot:focus-visible{
  outline: 2px solid #a8ffd8;
  outline-offset: 2px;
}

/* Estado visual “limitado” */
.slot--limited{
  box-shadow:0 0 0 1px rgba(255,193,7,.35) inset;
  background:linear-gradient(180deg, rgba(255,193,7,.10), rgba(255,193,7,.06));
}

/* Hover/activo coherente con el tema */
.slot--active,
.slot:hover{
  background:linear-gradient(180deg, var(--accent), var(--accent-2));
  border-color:rgba(12,180,120,.22);
}

/* ---------- Responsive general ---------- */
@media (max-width:980px){
  .cal-and-slots{ grid-template-columns:1fr }
  .slots-panel{ position:static; max-height:none }
}

/* ---------- Footer ---------- */
.footer{
  padding:28px 0 54px;
  color:#b7cec5; font-size:14px; text-align:left;
}
.powered{ color:#aaccbf; opacity:.9; margin-top:16px }

/* ---------- Menos movimiento si el usuario lo prefiere ---------- */
@media (prefers-reduced-motion:reduce){
  .btn{ transition:none }
  .calendar .loader{ transition:none }
  .slot{ transition:none }
}

/* --- Aparición suave del bloque --- */
.mount-fade{
  opacity: 0;
  transform: translateY(6px);
}
.mount-fade.is-in{
  opacity: 1;
  transform: none;
  transition: opacity .18s ease, transform .18s ease;
}

/* --- Stagger por elemento (slots) --- */
.stagger-in{
  opacity: 0;
  transform: translateY(6px);
  animation: slotIn .22s ease both;
  animation-delay: calc(var(--i) * 19ms);
}
@keyframes slotIn{
  to { opacity: 1; transform: none; }
}

/* Rendimiento */
.stagger-in, .slot{ will-change: transform, opacity; }

/* Respeta preferencias del usuario */
@media (prefers-reduced-motion: reduce){
  .mount-fade, .mount-fade.is-in{ transition: none !important; opacity: 1 !important; transform: none !important; }
  .stagger-in{ animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* Pantalla de elección de sede */
.place-step{
  text-align:left;
  margin-top:24px;
}

.place-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:16px;
  margin-top:14px;
}

.place-card{
  width:100%;
  border-radius:16px;
  padding:14px 16px;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  color:var(--text);
  text-align:left;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  gap:4px;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
}

.place-card__title{
  font-weight:700;
  font-size:15px;
}

.place-card__subtitle{
  font-size:13px;
  color:var(--muted);
}

.place-card:hover{
  transform:translateY(-1px);
  border-color:rgba(12,180,120,.6);
  box-shadow:0 10px 28px rgba(0,0,0,.45);
  background:linear-gradient(180deg, rgba(15,109,78,.2), rgba(15,109,78,.08));
}

.place-card:focus-visible{
  outline:2px solid #a8ffd8;
  outline-offset:2px;
}