/* Sistema de reserva de Legacy Barber.
   Usa la misma paleta y tipografia que el resto de la web:
   oro #C6A15B, realce #E4C879, crema #F4EFE4, tarjeta #161616,
   Anton para titulos, Space Mono para cifras y etiquetas, Inter para texto. */

.lb-bk { --oro:#C6A15B; --oro-2:#E4C879; --crema:#F4EFE4; --linea:rgba(138,112,56,.2); }

/* Las reglas de display de abajo (flex/grid) ganan al [hidden] del navegador,
   asi que al confirmar la reserva los pasos anteriores se quedaban a la vista.
   Esto hace que ocultar de verdad oculte. */
.lb-bk [hidden] { display:none !important; }

.lb-bk__label{
  display:block;font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.28em;
  text-transform:uppercase;color:var(--oro);margin-bottom:14px;
}

/* ---------- servicio + maestro ---------- */
.lb-bk__top{
  display:grid;grid-template-columns:1fr 1fr;gap:34px;
  padding:clamp(26px,3.4vw,40px);border-bottom:1px solid var(--linea);
}
.lb-bk__chips{display:flex;flex-direction:column;gap:9px}
.lb-bk__chip{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;width:100%;
  background:rgba(255,255,255,.02);border:1px solid var(--linea);border-radius:4px;
  padding:13px 16px;cursor:pointer;text-align:left;color:var(--crema);
  font-family:'Inter',system-ui,sans-serif;
  transition:border-color .25s ease,background .25s ease,color .25s ease;
}
.lb-bk__chip:hover{border-color:rgba(198,161,91,.55);background:rgba(198,161,91,.05)}
.lb-bk__chip:focus-visible{outline:2px solid var(--oro-2);outline-offset:2px}
.lb-bk__chip.is-on{border-color:var(--oro);background:rgba(198,161,91,.1);box-shadow:0 0 26px rgba(198,161,91,.1)}
.lb-bk__chipName{font-size:14px;letter-spacing:.02em}
.lb-bk__chip.is-on .lb-bk__chipName{color:var(--oro-2)}
.lb-bk__chipMeta{
  font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.08em;
  color:rgba(244,239,228,.5);white-space:nowrap;
}

/* ---------- calendario + horas ---------- */
.lb-bk__main{
  display:grid;grid-template-columns:auto 1fr;gap:44px;
  padding:clamp(26px,3.4vw,40px);
}
.lb-bk__calHead{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:6px}
.lb-bk__calHead .lb-bk__label{margin-bottom:0}
.lb-bk__nav{display:flex;align-items:center;gap:10px}
.lb-bk__navBtn{
  display:grid;place-items:center;width:30px;height:30px;flex:none;
  background:transparent;border:1px solid var(--linea);border-radius:999px;
  color:var(--crema);cursor:pointer;transition:border-color .25s ease,color .25s ease;
}
.lb-bk__navBtn:hover:not(:disabled){border-color:var(--oro);color:var(--oro-2)}
.lb-bk__navBtn:disabled{opacity:.3;cursor:not-allowed}
.lb-bk__navBtn:focus-visible{outline:2px solid var(--oro-2);outline-offset:2px}
.lb-bk__month{
  font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--crema);min-width:132px;text-align:center;
}
.lb-bk__cal{max-width:430px}
.lb-bk__dows,.lb-bk__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.lb-bk__dows{margin:16px 0 8px}
.lb-bk__dows span{
  font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.18em;
  text-align:center;color:rgba(244,239,228,.34);
}
.lb-bk__day{
  position:relative;min-height:46px;display:grid;place-items:center;
  background:rgba(255,255,255,.02);border:1px solid transparent;border-radius:4px;
  font-family:'Space Mono',monospace;font-size:13px;color:var(--crema);cursor:pointer;
  transition:border-color .2s ease,background .2s ease,color .2s ease;
}
.lb-bk__day:hover:not(:disabled){border-color:rgba(198,161,91,.55)}
.lb-bk__day:focus-visible{outline:2px solid var(--oro-2);outline-offset:1px}
.lb-bk__day:disabled{color:rgba(244,239,228,.2);background:transparent;cursor:not-allowed}
.lb-bk__day.is-empty{background:none;cursor:default}
.lb-bk__day.is-on{background:var(--oro);border-color:var(--oro);color:#0A0A0A;font-weight:700}
.lb-bk__day.has-free::after{
  content:'';position:absolute;bottom:6px;left:50%;transform:translateX(-50%);
  width:3px;height:3px;border-radius:999px;background:var(--oro);
}
.lb-bk__day.is-on.has-free::after{background:#0A0A0A}
.lb-bk__legend{
  display:flex;align-items:center;gap:7px;margin-top:16px;
  font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.1em;
  color:rgba(244,239,228,.4);
}
.lb-bk__dot{width:4px;height:4px;border-radius:999px;background:var(--oro);flex:none}

.lb-bk__slotList{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px;
  align-content:start;max-height:296px;overflow-y:auto;padding-right:4px;
}
.lb-bk__slot{
  background:rgba(255,255,255,.02);border:1px solid var(--linea);border-radius:999px;
  padding:11px 6px;font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.06em;
  color:var(--crema);cursor:pointer;transition:border-color .2s ease,background .2s ease,color .2s ease;
}
.lb-bk__slot:hover{border-color:rgba(198,161,91,.6);color:var(--oro-2)}
.lb-bk__slot:focus-visible{outline:2px solid var(--oro-2);outline-offset:2px}
.lb-bk__slot.is-on{background:var(--oro);border-color:var(--oro);color:#0A0A0A;font-weight:700}
.lb-bk__hint{
  font-family:'Inter',sans-serif;font-size:13px;line-height:1.6;
  color:rgba(244,239,228,.42);grid-column:1/-1;margin:0;
}

/* ---------- resumen ---------- */
.lb-bk__foot{
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  padding:clamp(22px,2.6vw,30px) clamp(26px,3.4vw,40px);
  border-top:1px solid var(--linea);background:rgba(255,255,255,.015);
}
.lb-bk__summary{
  font-family:'Inter',sans-serif;font-size:14px;line-height:1.65;color:rgba(244,239,228,.72);
}
.lb-bk__summary b{color:var(--oro-2);font-weight:600}
.lb-bk__cta{
  flex:none;background:var(--oro);color:#0A0A0A;border:1px solid var(--oro);border-radius:999px;
  padding:14px 34px;font-family:'Inter',sans-serif;font-size:13px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;cursor:pointer;
  transition:background .3s ease,color .3s ease,opacity .3s ease,transform .3s ease;
}
.lb-bk__cta:hover:not(:disabled){background:var(--oro-2);border-color:var(--oro-2);transform:translateY(-1px)}
.lb-bk__cta:focus-visible{outline:2px solid var(--oro-2);outline-offset:3px}
.lb-bk__cta:disabled{opacity:.32;cursor:not-allowed;background:transparent;color:rgba(244,239,228,.6)}

/* ---------- confirmacion ---------- */
.lb-bk__done{padding:clamp(46px,6vw,74px) clamp(26px,3.4vw,40px);text-align:center}
.lb-bk__doneMark{
  width:56px;height:56px;margin:0 auto 22px;display:grid;place-items:center;
  border:1.5px solid var(--oro);border-radius:999px;color:var(--oro);
  box-shadow:0 0 40px rgba(198,161,91,.2);
}
.lb-bk__doneTitle{
  font-family:'Anton',sans-serif;font-weight:400;text-transform:uppercase;
  font-size:clamp(26px,3.6vw,38px);color:var(--crema);margin:0 0 14px;
}
.lb-bk__doneText{
  font-family:'Inter',sans-serif;font-size:15px;line-height:1.7;
  color:rgba(244,239,228,.74);max-width:440px;margin:0 auto;
}
.lb-bk__doneText b{color:var(--oro-2);font-weight:600}
.lb-bk__ref{
  font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(244,239,228,.44);margin:20px 0 0;
}
.lb-bk__ref span{color:var(--oro)}
.lb-bk__demo{
  font-family:'Inter',sans-serif;font-size:12px;line-height:1.6;
  color:rgba(244,239,228,.34);max-width:430px;margin:26px auto 0;
}
.lb-bk__again{
  margin-top:26px;background:transparent;border:1px solid rgba(138,112,56,.5);border-radius:999px;
  color:var(--crema);padding:12px 28px;font-family:'Inter',sans-serif;font-size:12px;
  letter-spacing:.12em;text-transform:uppercase;cursor:pointer;
  transition:border-color .3s ease,color .3s ease;
}
.lb-bk__again:hover{border-color:var(--oro);color:var(--oro-2)}
.lb-bk__again:focus-visible{outline:2px solid var(--oro-2);outline-offset:2px}

/* ---------- movil ---------- */
@media (max-width:860px){
  .lb-bk__top,.lb-bk__main{grid-template-columns:1fr;gap:28px}
  .lb-bk__slotList{max-height:none}
  .lb-bk__foot{flex-direction:column;align-items:stretch;text-align:center}
  .lb-bk__cta{width:100%}
}

@media (prefers-reduced-motion:reduce){
  .lb-bk *{transition:none!important}
  .lb-bk__cta:hover:not(:disabled){transform:none}
}