/* ────────────────────────────────────────────────────────────
   Reserva embebida — Cesar Rosano.
   Misma lámina impresa que el sitio: papel, tinta, oliva y la
   Bodoni para los nombres y los números. Nada redondeado, nada
   de sombras de plástico: reglas finas de 1px y aire.
   ──────────────────────────────────────────────────────────── */

.tb-scrim{
  position:fixed; inset:0; z-index:200;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(12px,4vw,40px);
  background:rgba(25,26,23,.52);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  opacity:0; transition:opacity .22s ease;
}
.tb-scrim[hidden]{ display:none; }
.tb-scrim.is-on{ opacity:1; }

.tb-modal{
  position:relative;
  display:flex; flex-direction:column;
  width:100%; max-width:760px; max-height:100%;
  background:var(--paper,#f1f0ea);
  color:var(--ink,#191a17);
  font-family:var(--ff-text,Archivo,sans-serif);
  border:1px solid var(--rule,#cbc9bd);
  border-radius:2px;
  box-shadow:0 26px 70px rgba(25,26,23,.28);
  transform:translateY(14px);
  transition:transform .26s cubic-bezier(.4,0,.2,1);
}
.tb-scrim.is-on .tb-modal{ transform:none; }

/* ── cabecera ───────────────────────────────────────────── */
.tb-head{
  display:flex; align-items:center; gap:12px;
  padding:9px clamp(16px,3vw,32px);
  border-bottom:1px solid var(--rule,#cbc9bd);
  flex:none;
}
.tb-head__logo{ width:78px; height:auto; flex:none; }
.tb-head__t{
  flex:1 1 auto; min-width:0;
  font-family:var(--ff-text,Archivo,sans-serif);
  font-size:11px; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-soft,#4e5248);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.tb-x{
  flex:none; width:44px; height:44px; margin-right:-10px;
  display:grid; place-items:center;
  background:transparent; border:0; cursor:pointer;
  color:var(--ink-soft,#4e5248);
  font-size:19px; line-height:1;
  transition:color .18s ease;
}
.tb-x:hover{ color:var(--ink,#191a17); }

.tb-kicker{
  font-size:11px; font-weight:600; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-faint,#7d8175);
  font-family:var(--ff-text,Archivo,sans-serif);
}

/* ── cuerpo con scroll ──────────────────────────────────── */
.tb-body{
  flex:1 1 auto; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:clamp(16px,2.6vw,26px) clamp(16px,3vw,32px) 34px;
  min-height:180px;
}

/* ── indicador de progreso ──────────────────────────────── */
.tb-prog{
  flex:none; display:flex; align-items:center; gap:12px; flex-wrap:nowrap;
  padding:8px clamp(16px,3vw,32px);
  border-bottom:1px solid var(--rule-soft,#dddbd1);
}
.tb-prog__l{ display:flex; align-items:center; gap:6px; margin:0; padding:0; list-style:none; flex:none; }
.tb-prog__i button{
  width:28px; height:28px; padding:0; display:grid; place-items:center;
  background:transparent; color:var(--ink-faint,#7d8175);
  border:1px solid var(--rule,#cbc9bd); border-radius:50%; cursor:pointer;
  font-family:var(--ff-display,"Bodoni Moda",serif); font-size:14px; font-weight:500;
  font-variant-numeric:lining-nums;
  transition:background .18s ease, border-color .18s ease, color .18s ease;
}
.tb-prog__i.is-done button{ border-color:var(--olive,#4f5b33); color:var(--olive,#4f5b33); }
.tb-prog__i.is-done button:hover{ background:var(--olive,#4f5b33); color:#f4f3ee; }
.tb-prog__i.is-now button{ background:var(--olive,#4f5b33); border-color:var(--olive,#4f5b33); color:#f4f3ee; }
.tb-prog__i button[disabled]{ opacity:.45; cursor:default; }
.tb-prog__n{
  margin:0; min-width:0; display:flex; align-items:baseline; gap:8px;
  font-size:10.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-soft,#4e5248);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.tb-prog__c{
  font-family:var(--ff-display,"Bodoni Moda",serif); font-size:13px; font-weight:500;
  letter-spacing:0; text-transform:none; color:var(--ink-faint,#7d8175);
  font-variant-numeric:lining-nums;
}

/* ── una pantalla ───────────────────────────────────────── */
.tb-screen__h{
  margin:0 0 14px; text-wrap:balance;
  font-family:var(--ff-display,"Bodoni Moda",serif);
  font-size:clamp(22px,2.6vw,28px); font-weight:500; line-height:1.14;
}
.tb-cta2{ display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
/* la ayuda del paso, pegada a lo que explica */
.tb-help{
  margin:12px 0 0; font-size:12.5px; line-height:1.5; color:var(--ink-faint,#7d8175);
}
.tb-help.is-bad{ color:#9c3327; font-weight:500; }
.tb-help[hidden]{ display:none; }

/* ── un paso ────────────────────────────────────────────── */
.tb-step{ padding:20px 0; border-bottom:1px solid var(--rule-soft,#dddbd1); }
.tb-step:last-child{ border-bottom:0; }
.tb-step[hidden]{ display:none; }
.tb-step__h{ display:flex; align-items:baseline; gap:10px; margin-bottom:13px; flex-wrap:wrap; }
.tb-step__n{
  font-family:var(--ff-display,"Bodoni Moda",serif);
  font-size:15px; font-weight:600; color:var(--olive,#4f5b33);
  font-variant-numeric:lining-nums;
}
.tb-step__n::after{ content:" ·"; color:var(--ink-faint,#7d8175); }
.tb-step__note{ font-size:12px; color:var(--ink-faint,#7d8175); margin-left:auto; }

/* ── chips ──────────────────────────────────────────────── */
.tb-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.tb-chips--scroll{
  flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch;
  padding-bottom:6px; scrollbar-width:thin;
  scroll-snap-type:x proximity;
}
.tb-chips--scroll > *{ scroll-snap-align:start; }
.tb-chips--grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(88px,1fr)); }
.tb-chips--col{ flex-direction:column; align-items:stretch; }
.tb-chips--dias{ display:grid; grid-template-columns:repeat(auto-fill,minmax(94px,1fr)); }
.tb-chip--row{ width:100%; min-height:58px; justify-content:space-between; gap:16px; }
.tb-chip--row .tb-chip__sub{ font-size:13px; letter-spacing:.04em; }

.tb-chip{
  appearance:none; -webkit-appearance:none;
  display:inline-flex; align-items:center; gap:9px;
  min-height:46px; padding:6px 15px;
  background:transparent; color:var(--ink,#191a17);
  border:1px solid var(--rule,#cbc9bd); border-radius:2px;
  font-family:var(--ff-text,Archivo,sans-serif); font-size:14px; font-weight:500;
  text-align:left; cursor:pointer; flex:none;
  transition:border-color .16s ease, background .16s ease, color .16s ease;
}
.tb-chip:hover{ border-color:var(--ink,#191a17); }
.tb-chip[aria-pressed="true"]{
  background:var(--olive,#4f5b33); border-color:var(--olive,#4f5b33); color:#f4f3ee;
}
.tb-chip[aria-pressed="true"] .tb-chip__sub{ color:rgba(244,243,238,.78); }
.tb-chip[disabled]{ opacity:.42; cursor:not-allowed; }

.tb-chip__txt{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.tb-chip__name{ font-family:var(--ff-display,"Bodoni Moda",serif); font-size:16px; font-weight:500; line-height:1.2; white-space:nowrap; }
.tb-chip__sub{ font-size:11px; letter-spacing:.06em; color:var(--ink-faint,#7d8175); white-space:nowrap; }
.tb-chip__ph{
  width:30px; height:30px; border-radius:50%; object-fit:cover; flex:none;
  background:var(--paper-3,#dcdad0); border:1px solid rgba(25,26,23,.12);
}
/* ── paso 1: se tildan varios ────────────────────────────
   La casilla a la izquierda es lo que dice "acá podés marcar más de uno".
   Sin ella un chip verde parece un radio y nadie prueba el segundo. */
.tb-chip__lead{ display:flex; align-items:center; gap:11px; min-width:0; }
.tb-chip__ck{
  width:19px; height:19px; flex:none; border-radius:2px;
  border:1px solid var(--rule,#cbc9bd);
  display:inline-flex; align-items:center; justify-content:center;
  transition:border-color .16s ease, background .16s ease;
}
.tb-chip__ck svg{ width:13px; height:13px; opacity:0; transition:opacity .12s ease; }
.tb-chip--pick:hover .tb-chip__ck{ border-color:var(--ink,#191a17); }
.tb-chip[aria-pressed="true"] .tb-chip__ck{ border-color:#f4f3ee; background:rgba(244,243,238,.18); }
.tb-chip[aria-pressed="true"] .tb-chip__ck svg{ opacity:1; }
.tb-chip__why{
  font-size:11px; letter-spacing:.04em; color:var(--ink-faint,#7d8175);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.tb-chip[aria-pressed="true"] .tb-chip__why{ color:rgba(244,243,238,.78); }
.tb-chip[disabled]:hover{ border-color:var(--rule,#cbc9bd); }

/* el total del pie, al lado de lo ya elegido */
.tb-sum__tot{ color:var(--ink-faint,#7d8175); font-variant-numeric:tabular-nums; }

/* el repaso del paso 5, arriba del nombre */
.tb-recap{
  margin:14px 0 0; max-width:340px;
  display:flex; flex-direction:column; gap:2px;
  padding:11px 14px; border-left:2px solid var(--olive,#4f5b33);
  background:var(--paper-2,#e7e5dc);
}
.tb-recap + .tb-note{ margin-top:14px; }
.tb-recap + .tb-input, .tb-recap + .tb-inputrow{ margin-top:14px; }
.tb-recap b{ font-family:var(--ff-display,"Bodoni Moda",serif); font-size:16px; font-weight:500; }
.tb-recap span{ font-size:12px; letter-spacing:.04em; color:var(--ink-soft,#4e5248); font-variant-numeric:tabular-nums; }

.tb-chip--day{ flex-direction:column; align-items:flex-start; gap:0; min-width:78px; justify-content:center; }
.tb-chip--hora{ justify-content:center; font-variant-numeric:tabular-nums; letter-spacing:.02em; }
.tb-chip--all{ font-style:italic; }

/* ── estados dentro de un paso ──────────────────────────── */
.tb-note{ font-size:13.5px; color:var(--ink-soft,#4e5248); line-height:1.55; }
.tb-note a{ color:var(--olive,#4f5b33); }
.tb-empty{
  display:flex; flex-direction:column; align-items:flex-start; gap:12px;
  padding:16px 18px; background:var(--paper-2,#e7e5dc);
  border:1px solid var(--rule-soft,#dddbd1); border-radius:2px;
}
.tb-empty p{ margin:0; font-size:13.5px; color:var(--ink-soft,#4e5248); max-width:52ch; }
.tb-skel{ display:flex; gap:8px; }
.tb-skel i{
  display:block; height:46px; width:104px; border-radius:2px;
  background:linear-gradient(90deg,var(--paper-2,#e7e5dc),var(--paper-3,#dcdad0),var(--paper-2,#e7e5dc));
  background-size:220% 100%; animation:tb-shimmer 1.25s linear infinite;
}
@keyframes tb-shimmer{ from{ background-position:120% 0 } to{ background-position:-120% 0 } }

/* ── pie ────────────────────────────────────────────────── */
.tb-foot{
  flex:none;
  display:flex; flex-direction:column; gap:8px;
  padding:10px clamp(16px,3vw,32px);
  padding-bottom:calc(10px + env(safe-area-inset-bottom));
  border-top:1px solid var(--rule,#cbc9bd);
  background:var(--paper-2,#e7e5dc);
}
/* lo ya elegido, en UNA línea con ellipsis; cada ítem vuelve a su paso */
.tb-sum{
  margin:0; display:block;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  font-size:13.5px; color:var(--ink-soft,#4e5248);
}
.tb-sum[hidden]{ display:none; }
.tb-sum__i{
  display:inline; background:none; border:0; padding:0; cursor:pointer;
  font-family:var(--ff-display,"Bodoni Moda",serif); font-size:14.5px; font-weight:500;
  color:var(--ink,#191a17);
  border-bottom:1px solid var(--rule,#cbc9bd);
  transition:color .16s ease, border-color .16s ease;
}
.tb-sum__i:hover{ color:var(--olive,#4f5b33); border-bottom-color:var(--olive,#4f5b33); }
.tb-sum__s{ padding:0 4px; color:var(--ink-faint,#7d8175); }
.tb-actions{ display:flex; align-items:center; gap:12px; flex-wrap:nowrap; min-height:44px; }
.tb-actions .tb-btn{ flex:0 0 auto; margin-left:auto; }
.tb-back{
  flex:none; background:none; border:0; padding:10px 2px 10px 0; cursor:pointer;
  font-family:var(--ff-text,Archivo,sans-serif); font-size:12px; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint,#7d8175);
}
.tb-back[hidden]{ display:none; }
.tb-back:hover{ color:var(--ink,#191a17); }

/* botones propios (no dependen del CSS del sitio) */
.tb-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:48px; padding:0 24px;
  font-family:var(--ff-text,Archivo,sans-serif); font-size:14px; font-weight:600; letter-spacing:.02em;
  text-decoration:none; border:1px solid transparent; border-radius:2px; cursor:pointer;
  transition:background .18s ease, color .18s ease, border-color .18s ease, opacity .18s ease;
}
.tb-btn--primary{ background:var(--olive,#4f5b33); color:#f4f3ee; }
.tb-btn--primary:hover{ background:var(--olive-deep,#3c4527); }
.tb-btn--ghost{ background:transparent; border-color:var(--ink,#191a17); color:var(--ink,#191a17); }
.tb-btn--ghost:hover{ background:var(--ink,#191a17); color:var(--paper,#f1f0ea); }
.tb-btn[hidden]{ display:none !important; }
.tb-btn[disabled]{ opacity:.38; cursor:not-allowed; }
.tb-btn[disabled]:hover{ background:var(--olive,#4f5b33); }
.tb-btn svg{ width:16px; height:16px; flex:none; }

/* ── formularios (celular, código, nombre) ──────────────── */
.tb-form{ padding:clamp(22px,4vw,34px) 0; display:flex; flex-direction:column; gap:8px; }
.tb-form[hidden]{ display:none; }
.tb-form h3{
  margin:0; font-family:var(--ff-display,"Bodoni Moda",serif);
  font-size:clamp(22px,3vw,30px); font-weight:500; line-height:1.15;
}
.tb-form p.tb-note{ max-width:46ch; }
.tb-inputrow{ display:flex; align-items:stretch; gap:0; margin-top:14px; max-width:340px; }
.tb-prefix{
  display:grid; place-items:center; padding:0 13px;
  border:1px solid var(--rule,#cbc9bd); border-right:0; border-radius:2px 0 0 2px;
  background:var(--paper-2,#e7e5dc);
  font-family:var(--ff-display,"Bodoni Moda",serif); font-size:17px; font-weight:500;
  color:var(--ink-soft,#4e5248);
}
.tb-input{
  flex:1 1 auto; min-width:0; width:100%;
  min-height:52px; padding:0 14px;
  background:var(--paper,#f1f0ea); color:var(--ink,#191a17);
  border:1px solid var(--rule,#cbc9bd); border-radius:2px;
  font-family:var(--ff-display,"Bodoni Moda",serif);
  font-size:19px; font-weight:500; letter-spacing:.04em;
  font-variant-numeric:tabular-nums lining-nums;
}
.tb-inputrow .tb-input{ border-radius:0 2px 2px 0; }
.tb-input::placeholder{ color:var(--ink-faint,#7d8175); opacity:.7; letter-spacing:.1em; }
.tb-input:focus{ outline:2px solid var(--olive,#4f5b33); outline-offset:1px; }
.tb-input--code{ max-width:220px; letter-spacing:.4em; text-align:center; font-size:24px; }
.tb-input--name{ max-width:340px; letter-spacing:0; font-size:19px; }
.tb-resend{
  margin-top:12px; background:none; border:0; padding:0; cursor:pointer;
  font-size:12.5px; color:var(--olive,#4f5b33); text-decoration:underline; text-underline-offset:3px;
}
.tb-resend[disabled]{ color:var(--ink-faint,#7d8175); cursor:default; text-decoration:none; }

/* spinner del botón */
.tb-btn.is-busy{ pointer-events:none; opacity:.7; }
.tb-btn.is-busy::after{
  content:""; width:14px; height:14px; border-radius:50%;
  border:2px solid currentColor; border-top-color:transparent;
  animation:tb-spin .7s linear infinite;
}
@keyframes tb-spin{ to{ transform:rotate(360deg) } }

/* ── móvil: hoja desde abajo ────────────────────────────── */
@media (max-width:760px){
  .tb-scrim{ padding:0; align-items:stretch; justify-content:stretch; }
  /* pantalla completa de verdad: nada de la página asomando por atrás */
  .tb-modal{
    position:fixed; inset:0;
    width:100%; max-width:none;
    height:100vh; height:100dvh;
    max-height:100vh; max-height:100dvh;
    border:0; border-radius:0; box-shadow:none;
    transform:translateY(2%);
  }
  .tb-head, .tb-prog, .tb-foot{ flex:none; }   /* cabezal y pie fijos */
  .tb-body{ flex:1 1 auto; min-height:0; }     /* sólo el paso scrollea */
  .tb-head__logo{ width:66px; }
  .tb-head{ padding:7px 16px; }
  .tb-actions .tb-btn{ flex:1 1 auto; margin-left:0; min-height:50px; }
  .tb-prog{ gap:10px; }
}
@media (min-width:761px){
  .tb-modal{ max-height:min(92vh,860px); }
}

@media (max-width:430px){
  .tb-screen__h{ font-size:22px; margin-bottom:12px; }
  .tb-note{ font-size:13px; }
  .tb-chip--row{ min-height:54px; }
}

html.tb-locked, body.tb-locked{ overflow:hidden; }

@media (prefers-reduced-motion:reduce){
  .tb-scrim, .tb-modal{ transition:none; }
  .tb-skel i, .tb-btn.is-busy::after{ animation:none; }
}

/* ════════════════════════════════════════════════════════════
   Las secciones del SITIO que se llenan con la API.
   Mismo papel, misma tinta: no se distinguen del resto.
   ════════════════════════════════════════════════════════════ */

/* pill de EJEMPLO — que se lea de lejos que no son los datos reales */
.tb-ej{
  display:inline-flex; align-items:center; gap:9px; margin:0 0 16px;
  padding:5px 12px 5px 5px;
  border:1px dashed var(--brick,#a5633c); border-radius:2px;
  background:rgba(165,99,60,.06);
  font-size:11.5px; letter-spacing:.02em; color:var(--brick,#a5633c);
}
.tb-ej span{
  display:inline-block; padding:3px 8px; border-radius:2px;
  background:var(--brick,#a5633c); color:#fbf7f3;
  font-size:9.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
}

/* ── el equipo ──────────────────────────────────────────── */
.tb-eq__lead{ margin:0 0 18px; font-size:13.5px; color:var(--ink-soft,#4e5248); }
.tb-eq{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr));
  gap:20px 14px; padding:0; margin:0; list-style:none;
}
.tb-eq__p{ display:flex; flex-direction:column; align-items:center; gap:9px; text-align:center; }
.tb-eq__p img, .tb-eq__ini{
  width:76px; height:76px; border-radius:50%; object-fit:cover;
  border:1px solid var(--rule,#cbc9bd); background:var(--paper-3,#dcdad0);
  filter:saturate(.92) contrast(1.02);
}
.tb-eq__ini{
  display:grid; place-items:center; filter:none;
  font-family:var(--ff-display,"Bodoni Moda",serif); font-size:26px; font-weight:500;
  color:var(--ink-soft,#4e5248);
}
.tb-eq__p b{ font-family:var(--ff-display,"Bodoni Moda",serif); font-size:16px; font-weight:500; }

/* ── la carta ───────────────────────────────────────────── */
.tb-menu{
  margin:clamp(26px,4vw,40px) 0 0; padding:0; list-style:none;
  border-top:1px solid var(--rule,#cbc9bd);
}
.tb-menu li{
  display:flex; align-items:baseline; gap:8px 16px; flex-wrap:wrap;
  padding:15px 0; border-bottom:1px solid var(--rule-soft,#dddbd1);
}
.tb-menu li b{
  flex:1 1 180px; min-width:0;
  font-family:var(--ff-display,"Bodoni Moda",serif);
  font-size:clamp(17px,2vw,21px); font-weight:500;
}
.tb-menu__dur{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint,#7d8175); }
.tb-menu__p{
  font-family:var(--ff-display,"Bodoni Moda",serif); font-size:19px; font-weight:500;
  font-variant-numeric:tabular-nums lining-nums; min-width:88px; text-align:right;
}
.tb-menu__go{
  flex:none; min-height:38px; padding:0 15px;
  background:transparent; color:var(--ink,#191a17);
  border:1px solid var(--rule,#cbc9bd); border-radius:2px; cursor:pointer;
  font-family:var(--ff-text,Archivo,sans-serif); font-size:12px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase;
  transition:background .18s ease, color .18s ease, border-color .18s ease;
}
.tb-menu__go:hover{ background:var(--olive,#4f5b33); border-color:var(--olive,#4f5b33); color:#f4f3ee; }
.tb-menu__go[disabled]{ opacity:.4; cursor:not-allowed; }
@media (max-width:559px){
  .tb-menu__p{ min-width:0; text-align:left; margin-left:auto; }
  .tb-menu__go{ flex:1 1 100%; }
}

/* ── próximos huecos libres ─────────────────────────────── */
.tb-libres{ margin-top:clamp(26px,4vw,38px); }
.tb-libres__t{ margin:0 0 10px; font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint,#7d8175); }
.tb-libres__t a{ color:var(--olive,#4f5b33); }
.tb-libres__h{ display:flex; flex-wrap:wrap; gap:8px; }
.tb-libres__b{
  min-height:44px; padding:0 18px;
  background:var(--paper,#f1f0ea); color:var(--ink,#191a17);
  border:1px solid var(--ink,#191a17); border-radius:2px; cursor:pointer;
  font-family:var(--ff-display,"Bodoni Moda",serif); font-size:17px; font-weight:500;
  font-variant-numeric:tabular-nums lining-nums;
  transition:background .18s ease, color .18s ease;
}
.tb-libres__b:hover{ background:var(--olive,#4f5b33); border-color:var(--olive,#4f5b33); color:#f4f3ee; }
.tb-libres__b[disabled]{ opacity:.4; cursor:not-allowed; border-style:dashed; }
.tb-libres__wa{ margin:12px 0 0; font-size:13px; color:var(--ink-soft,#4e5248); }
.tb-libres__wa a{ color:var(--olive,#4f5b33); }