/* ------------------------------------------------------------------
   Reserva embebida — Maldito Barber Shop.
   Hereda la paleta de index.html (--ink, --bone, --roble, --line...)
   pero deja fallbacks: si el modal se carga solo, se sigue viendo.
   Nada redondeado, hairlines, Anton en los títulos: es la misma casa.
   ------------------------------------------------------------------ */
/* En el celular esto no es una hoja sobre la página: ES la pantalla.
   Alto real del viewport (dvh, con vh de respaldo), cabezal y pie fijos,
   y sólo el cuerpo del paso scrollea en el medio. */
.tb-ov{
  position:fixed; inset:0; z-index:200;
  display:flex; align-items:stretch; justify-content:center;
  background:var(--ink, #0A0A0B);
  padding:0;
}
.tb-ov[hidden]{ display:none; }

.tb-panel{
  position:relative;
  display:flex; flex-direction:column;
  width:100%; max-width:none;
  height:100vh;            /* respaldo para navegadores sin dvh */
  height:100dvh;
  max-height:100dvh;
  background:var(--ink-2, #121316);
  border:0;
  color:var(--bone, #F0EAE0);
  font-family:var(--f-text, "Archivo", system-ui, sans-serif);
  animation:tb-up .26s ease;
}
@keyframes tb-up{ from{ transform:translateY(26px); opacity:0; } to{ transform:none; opacity:1; } }

/* En escritorio sí es una hoja: centrada, con el sitio detrás. */
@media (min-width:760px){
  .tb-ov{
    align-items:center; padding:24px;
    background:rgba(6,6,7,.80);
    -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  }
  .tb-panel{
    max-width:720px;
    height:auto; max-height:88vh;
    border:1px solid var(--line, #23242A);
    box-shadow:0 24px 60px rgba(0,0,0,.55);
  }
  @keyframes tb-up{ from{ transform:translateY(12px); opacity:0; } to{ transform:none; opacity:1; } }
}
@media (prefers-reduced-motion: reduce){ .tb-panel{ animation:none; } }

/* ---------- cabezal ---------- */
.tb-head{
  display:flex; align-items:center; gap:12px;
  padding:10px clamp(14px,4vw,28px);
  border-bottom:1px solid var(--line, #23242A);
  background:var(--ink, #0A0A0B);
  flex:0 0 auto;
}
.tb-head img{ width:84px; height:auto; display:block; flex:0 0 auto; }
.tb-head h2{
  margin:0; flex:1 1 auto; min-width:0;
  font-family:var(--f-display, "Anton", Arial, sans-serif);
  font-weight:400; text-transform:uppercase; letter-spacing:.02em;
  font-size:clamp(.95rem,3.4vw,1.3rem); line-height:1;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  color:var(--bone, #F0EAE0);
}
.tb-x{
  flex:0 0 auto;
  width:44px; height:44px; margin-right:-10px;
  display:inline-flex; align-items:center; justify-content:center;
  background:transparent; border:0; cursor:pointer;
  color:var(--smoke, #9A9DA4); font-size:1.15rem; line-height:1;
}
.tb-x:hover{ color:var(--bone, #F0EAE0); }

/* ---------- cuerpo ---------- */
.tb-body{
  flex:1 1 auto; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:clamp(14px,3.6vw,26px) clamp(16px,4vw,28px) clamp(20px,5vw,28px);
  scrollbar-width:thin; scrollbar-color:var(--line, #23242A) transparent;
}

/* ---------- servicios (filas, los nombres son largos) ---------- */
.tb-cat{
  margin:18px 0 8px;
  font-size:.66rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--smoke-dim, #6C6F76);
  padding-bottom:6px; border-bottom:1px solid var(--line, #23242A);
}
.tb-cat:first-child{ margin-top:0; }
.tb-svc{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  width:100%; min-height:48px;
  padding:9px 10px 9px 12px;
  background:transparent; cursor:pointer; text-align:left;
  border:0; border-bottom:1px solid var(--line, #23242A);
  border-left:2px solid transparent;
  color:var(--bone, #F0EAE0);
  font-family:inherit; font-size:.92rem; line-height:1.25;
  transition:background-color .18s ease, border-color .18s ease;
}
.tb-svc:hover{ background:rgba(240,234,224,.045); }
.tb-svc .nm{ flex:1 1 auto; }
.tb-svc .mt{
  flex:0 0 auto; text-align:right;
  font-size:.8rem; color:var(--smoke, #9A9DA4);
  font-variant-numeric:tabular-nums;
}
.tb-svc .mt b{ display:block; color:var(--bone, #F0EAE0); font-weight:700; font-size:.92rem; }
.tb-svc[aria-pressed="true"]{
  background:rgba(201,146,78,.12);
  border-left-color:var(--roble, #C9924E);
}
.tb-svc[aria-pressed="true"] .nm{ font-weight:600; }

/* el tilde: varios servicios en un turno */
.tb-hint{
  margin:0 0 12px; font-size:.8rem; line-height:1.45;
  color:var(--smoke, #9A9DA4);
}
.tb-svc .ck{
  flex:0 0 auto; width:19px; height:19px;
  border:1px solid #3A3B42; background:transparent;
  position:relative;
  transition:background-color .18s ease, border-color .18s ease;
}
.tb-svc[aria-pressed="true"] .ck{
  background:var(--roble, #C9924E); border-color:var(--roble, #C9924E);
}
.tb-svc[aria-pressed="true"] .ck::after{
  content:""; position:absolute; left:6px; top:2px;
  width:4px; height:9px;
  border:solid #160F06; border-width:0 2px 2px 0;
  transform:rotate(42deg);
}
.tb-svc[disabled]{ cursor:not-allowed; opacity:.42; }
.tb-svc[disabled]:hover{ background:transparent; }
.tb-svc .why{
  display:block; font-size:.7rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--smoke-dim, #6C6F76);
}

/* ---------- chips (barbero, día, hora) ---------- */
.tb-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.tb-chip{
  min-height:44px;
  padding:10px 15px;
  background:transparent;
  border:1px solid #3A3B42;
  color:var(--bone, #F0EAE0);
  font-family:inherit; font-size:.78rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase;
  cursor:pointer; line-height:1.25;
  font-variant-numeric:tabular-nums;
  transition:background-color .18s ease, border-color .18s ease, color .18s ease;
}
.tb-chip:hover{ border-color:var(--bone, #F0EAE0); background:rgba(240,234,224,.07); }
.tb-chip[aria-pressed="true"]{
  background:var(--roble, #C9924E); border-color:var(--roble, #C9924E); color:#160F06;
}
.tb-chip .sub{
  display:block; font-size:.66rem; letter-spacing:.14em;
  color:var(--smoke, #9A9DA4); font-weight:600; margin-top:2px;
}
.tb-chip[aria-pressed="true"] .sub{ color:#3A2A10; }
.tb-chip.wide{ letter-spacing:.08em; }

.tb-times{ display:grid; grid-template-columns:repeat(auto-fill, minmax(86px, 1fr)); gap:8px; }
.tb-times .tb-chip{ text-align:center; padding-inline:6px; }

/* ---------- estados ---------- */
.tb-note{
  margin:0; padding:12px 0;
  font-size:.88rem; color:var(--smoke, #9A9DA4);
}
.tb-err{
  margin:0 0 14px; padding:11px 13px;
  border:1px solid var(--pole-red, #B0343B);
  background:rgba(176,52,59,.13);
  color:#F3D9DA; font-size:.88rem;
}
.tb-spin{
  display:inline-block; width:15px; height:15px; margin-right:.55rem;
  border:2px solid var(--line, #23242A); border-top-color:var(--roble, #C9924E);
  border-radius:50%; vertical-align:-2px;
  animation:tb-rot .7s linear infinite;
}
@keyframes tb-rot{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .tb-spin{ animation-duration:2s; } }

/* ---------- pie ---------- */
.tb-foot{
  flex:0 0 auto;
  display:flex; flex-direction:column; gap:12px;
  padding:14px clamp(16px,4vw,28px);
  padding-bottom:calc(14px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line, #23242A);
  background:var(--ink, #0A0A0B);
}
.tb-acts{
  display:flex; align-items:center; gap:10px;
}
.tb-acts:empty{ display:none; }
.tb-acts [data-tb-back]{ flex:0 0 auto; }
.tb-acts [data-tb-submit], .tb-acts [data-tb-next]{ flex:1 1 auto; }
/* total del paso 1: "2 servicios · 50 min · $1.100" */
.tb-total{
  margin:0; font-size:.8rem; font-weight:600; letter-spacing:.02em;
  color:var(--bone, #F0EAE0); font-variant-numeric:tabular-nums;
}
.tb-btn{
  flex:0 0 auto; min-height:48px;
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:14px 24px; border:1px solid transparent; cursor:pointer;
  font-family:inherit; font-size:.79rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; text-decoration:none;
  background:var(--roble, #C9924E); color:#160F06;
  transition:background-color .2s ease, color .2s ease, opacity .2s ease;
}
.tb-btn:hover:not(:disabled){ background:var(--bone, #F0EAE0); color:var(--ink, #0A0A0B); }
.tb-btn:disabled{ opacity:.4; cursor:not-allowed; }
.tb-btn.ghost{ background:transparent; border-color:#3A3B42; color:var(--bone, #F0EAE0); }
.tb-btn.ghost:hover:not(:disabled){ border-color:var(--bone, #F0EAE0); background:rgba(240,234,224,.07); color:var(--bone, #F0EAE0); }
.tb-btn.link{
  background:transparent; border:0; padding:10px 0; min-height:44px;
  color:var(--smoke, #9A9DA4); letter-spacing:.1em;
}
.tb-btn.link:hover:not(:disabled){ color:var(--roble, #C9924E); background:transparent; }
@media (max-width:479px){
  .tb-btn{ padding:13px 18px; letter-spacing:.1em; }
}

/* ---------- progreso: una pantalla por paso ---------- */
.tb-nav{
  flex:0 0 auto;
  display:flex; align-items:center; gap:12px; flex-wrap:nowrap;
  padding:9px clamp(14px,4vw,28px);
  border-bottom:1px solid var(--line, #23242A);
  background:var(--ink, #0A0A0B);
}
.tb-nav:empty{ display:none; }
.tb-prog{
  list-style:none; margin:0; padding:0;
  display:flex; align-items:center; gap:7px;
}
.tb-prog li{
  width:28px; height:28px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line, #23242A);
  color:var(--smoke-dim, #6C6F76);
  font-size:.72rem; font-weight:700; font-variant-numeric:tabular-nums;
  transition:background-color .2s ease, color .2s ease, border-color .2s ease;
}
.tb-prog li.is-done{ border-color:var(--roble-dim, #8C6335); color:var(--roble, #C9924E); }
.tb-prog li.is-on{
  background:var(--roble, #C9924E); border-color:var(--roble, #C9924E); color:#160F06;
}
.tb-stepname{
  margin:0; min-width:0; display:flex; align-items:baseline; gap:.5rem; flex-wrap:wrap;
  font-family:var(--f-display, "Anton", Arial, sans-serif); font-weight:400;
  text-transform:uppercase; letter-spacing:.02em; font-size:1.05rem;
  color:var(--bone, #F0EAE0);
}
.tb-stepname span{
  font-family:var(--f-text, "Archivo", system-ui, sans-serif);
  font-size:.62rem; font-weight:700; letter-spacing:.2em;
  color:var(--smoke-dim, #6C6F76);
}

/* En el celular los puntitos ya dicen en qué paso estás: el "Paso N de M"
   sobra y era lo que rompía el renglón del cabezal en el paso 5. */
@media (max-width:430px){
  .tb-stepname{
    display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    font-size:1rem;
  }
  .tb-stepname span{ display:none; }
}

/* La pantalla no debe saltar de alto entre pasos. */
@media (min-width:760px){ .tb-body{ min-height:min(48svh, 330px); } }
.tb-body > *{ animation:tb-in .2s ease; }
@keyframes tb-in{ from{ opacity:0; transform:translateX(10px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){ .tb-body > *{ animation:none; } }

/* días en grilla: ahora el paso es una pantalla entera, no una tira */
.tb-daygrid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(104px, 1fr)); gap:8px; }
.tb-daygrid .tb-chip{ text-align:center; }

/* resumen de una línea: cada ítem vuelve a su paso */
.tb-sumline{
  display:flex; align-items:center; flex-wrap:wrap; gap:2px 6px;
  font-size:.78rem;
}
.tb-sumline .sum-it{ overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.tb-sumline .sep{ flex:0 0 auto; }
.tb-sumline .sum-tot{
  flex:0 0 auto; margin-left:auto; padding-left:8px;
  color:var(--smoke, #9A9DA4); font-weight:600;
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.tb-sumline .sep{ color:var(--smoke-dim, #6C6F76); }
.sum-it{
  background:transparent; border:0; cursor:pointer; padding:4px 0;
  font-family:inherit; font-size:.78rem; font-weight:600; letter-spacing:.02em;
  color:var(--bone, #F0EAE0);
  border-bottom:1px dotted var(--roble-dim, #8C6335);
}
.sum-it:hover{ color:var(--roble, #C9924E); }

/* ---------- identidad (celular / código / nombre) ---------- */
.tb-form{ max-width:420px; }
.tb-form h3{
  margin:0 0 8px;
  font-family:var(--f-display, "Anton", Arial, sans-serif);
  font-weight:400; text-transform:uppercase; letter-spacing:.02em;
  font-size:clamp(1.38rem,5vw,1.7rem); line-height:1.08;
  color:var(--bone, #F0EAE0);
}
@media (max-width:430px){
  .tb-form h3{ font-size:1.38rem; }        /* ~22px */
  .tb-form{ max-width:none; }
}
.tb-form p.sub{ margin:0 0 16px; color:var(--smoke, #9A9DA4); font-size:.88rem; }
.tb-phone{ display:flex; align-items:stretch; gap:0; border:1px solid #3A3B42; background:var(--ink, #0A0A0B); }
.tb-phone .cc{
  display:flex; align-items:center; padding:0 12px;
  border-right:1px solid #3A3B42; color:var(--smoke, #9A9DA4);
  font-size:.95rem; font-variant-numeric:tabular-nums;
}
.tb-input{
  flex:1 1 auto; width:100%; min-height:52px;
  padding:12px 14px;
  background:var(--ink, #0A0A0B); border:1px solid #3A3B42; color:var(--bone, #F0EAE0);
  font-family:inherit; font-size:1.05rem; letter-spacing:.04em;
}
.tb-phone .tb-input{ border:0; }
.tb-input::placeholder{ color:var(--smoke-dim, #6C6F76); letter-spacing:.04em; }
.tb-input:focus-visible{ outline:2px solid var(--roble, #C9924E); outline-offset:2px; }
.tb-code{ letter-spacing:.42em; font-size:1.4rem; text-align:center; font-variant-numeric:tabular-nums; }
.tb-help{ margin:10px 0 0; min-height:1.2em; font-size:.8rem; color:var(--smoke-dim, #6C6F76); }
.tb-help .tb-btn.link{ min-height:0; padding:0; }


.tb-lock{ overflow:hidden; }

/* ==================================================================
   El sitio conectado a la API — equipo, precios, turnos libres.
   Mismo vocabulario que index.html: hairlines, Anton, roble.
   ================================================================== */

/* pill de ejemplo: tiene que leerse como "esto todavía no es tuyo" */
.ej-pill{
  display:inline-block; margin:0 0 20px;
  padding:8px 13px;
  border:1px dashed var(--roble-dim, #8C6335);
  background:rgba(201,146,78,.08);
  color:var(--roble, #C9924E);
  font-size:.66rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
}

/* ---------- precios ---------- */
.price-cat{
  margin:34px 0 0;
  font-family:var(--f-display, "Anton", Arial, sans-serif); font-weight:400;
  text-transform:uppercase; letter-spacing:.03em;
  font-size:1.05rem; color:var(--roble, #C9924E);
}
.price-cat:first-child{ margin-top:0; }
.price-list{ list-style:none; margin:14px 0 0; padding:0; max-width:760px; border-top:1px solid var(--line, #23242A); }
.price-list li{ border-bottom:1px solid var(--line, #23242A); }
.price-list .row{
  display:flex; align-items:baseline; justify-content:space-between; gap:18px;
  width:100%; min-height:56px; padding:15px 0;
  background:transparent; border:0; text-align:left;
  color:var(--bone, #F0EAE0); font-family:inherit; font-size:1rem; line-height:1.35;
}
.price-list button.row{ cursor:pointer; padding-inline:0; }
.price-list button.row:hover .nm{ color:var(--roble, #C9924E); }
.price-list .nm{ flex:1 1 auto; transition:color .18s ease; }
.price-list .mt{
  flex:0 0 auto; text-align:right;
  font-size:.76rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--smoke-dim, #6C6F76); font-variant-numeric:tabular-nums;
}
.price-list .mt b{
  display:block; margin-bottom:2px;
  font-size:1.02rem; letter-spacing:0; text-transform:none;
  color:var(--bone, #F0EAE0); font-weight:700;
}

/* ---------- equipo ---------- */
ul.team{
  list-style:none; margin:0; padding:0;
  display:grid; gap:clamp(18px,3vw,28px);
  grid-template-columns:repeat(auto-fill, minmax(132px, 1fr));
}
.team li{ display:grid; justify-items:center; gap:12px; text-align:center; }
.team .av{
  width:clamp(88px,22vw,116px); aspect-ratio:1;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line, #23242A); background:var(--ink-2, #121316);
  overflow:hidden;
  font-family:var(--f-display, "Anton", Arial, sans-serif);
  font-size:1.7rem; color:var(--roble, #C9924E); letter-spacing:.04em;
}
.team .av img{ width:100%; height:100%; object-fit:cover; }
.team .nm{
  font-size:.78rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--bone, #F0EAE0);
}

/* ---------- turnos libres de hoy ---------- */
.turnos{
  padding-block:clamp(22px,4vw,34px);
  background:var(--ink-2, #121316);
  border-bottom:1px solid var(--line, #23242A);
}
.turnos-inner{ display:flex; align-items:center; flex-wrap:wrap; gap:12px 18px; }
.turnos .eyebrow{ flex:0 0 auto; }
.turnos-lead{ margin:0; flex:0 0 auto; color:var(--smoke, #9A9DA4); font-size:.94rem; }
.turnos-lead b{ color:var(--bone, #F0EAE0); font-weight:700; }
.turnos-chips{ display:flex; flex-wrap:wrap; gap:8px; flex:1 1 auto; }
.turno-chip{
  min-height:44px; padding:10px 15px;
  display:inline-flex; align-items:center;
  border:1px solid #3A3B42; background:transparent;
  color:var(--bone, #F0EAE0);
  font-family:var(--f-text, "Archivo", system-ui, sans-serif);
  font-size:.82rem; font-weight:700; letter-spacing:.1em;
  font-variant-numeric:tabular-nums;
  transition:background-color .18s ease, border-color .18s ease, color .18s ease;
}
button.turno-chip{ cursor:pointer; }
button.turno-chip:hover{ background:var(--roble, #C9924E); border-color:var(--roble, #C9924E); color:#160F06; }
.turno-chip.is-ej{ border-style:dashed; color:var(--smoke, #9A9DA4); }
.turnos .ej-pill{ margin-bottom:0; }
.turnos .btn{ flex:0 0 auto; }
@media (max-width:759px){
  .turnos-inner{ flex-direction:column; align-items:flex-start; }
  .turnos .btn{ width:100%; }
}