/* Colores y fuentes llegan desde negocios/<id>.json (tema). */
:root {
  --acento: #1f3b2d; --acento-texto: #fff; --acento-tinta: var(--acento);
  --fondo: #f4efe6; --superficie: #fffdf8; --texto: #16130f; --texto-suave: #5f574b; --borde: #e2d9c8;
  --ok: #1f8a4c; --mal: #b42318; --wa: #1fa855;
  --f-titulo: Georgia, serif; --f-texto: system-ui, sans-serif;
  --radio: 16px; --dur: 220ms; --ease: cubic-bezier(.2, .8, .2, 1);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fondo); color: var(--texto); font: 16px/1.5 var(--f-texto); -webkit-font-smoothing: antialiased; padding-bottom: calc(100px + env(safe-area-inset-bottom)); }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2 { font-family: var(--f-titulo); letter-spacing: -.01em; line-height: 1.1; margin: 0; font-weight: 400; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--acento-tinta); outline-offset: 2px; }
.suave { color: var(--texto-suave); font-weight: 400; }

.banner-demo { display: flex; gap: 8px 14px; align-items: center; justify-content: center; flex-wrap: wrap; padding: 8px 16px; background: var(--texto); color: var(--fondo); font-size: 13.5px; text-align: center; }
.banner-btn { border: 1px solid currentColor; background: transparent; color: inherit; border-radius: 999px; padding: 4px 12px; font-size: 13px; font-weight: 600; cursor: pointer; }

.cabecera, .reserva, .pie { max-width: 680px; margin: 0 auto; padding-left: 20px; padding-right: 20px; }
.cabecera { padding-top: 36px; padding-bottom: 8px; }
.rubro { margin: 0 0 6px; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--acento-tinta); }
.cabecera h1 { font-size: clamp(2.3rem, 9vw, 3.6rem); }
.lema { margin: 10px 0 16px; color: var(--texto-suave); font-size: 1.05rem; max-width: 44ch; }
.datos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.datos li, .datos a { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; color: var(--texto); text-decoration: none; background: var(--superficie); border: 1px solid var(--borde); border-radius: 999px; padding: 6px 12px; }
.datos li:has(> a) { padding: 0; border: 0; background: none; }

.reserva { display: flex; flex-direction: column; gap: 12px; padding-top: 16px; }
.aviso { background: var(--superficie); border: 1px dashed var(--borde); border-radius: 12px; padding: 10px 14px; font-size: 14px; color: var(--texto-suave); margin: 0; }
.paso { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 18px; transition: opacity var(--dur); }
.paso[data-bloqueado] { opacity: .45; pointer-events: none; }
.paso[data-bloqueado] > :not(h2) { display: none; }
.paso h2 { font-size: 1.45rem; display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.paso[data-bloqueado] h2 { margin-bottom: 0; }
.num { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--acento); color: var(--acento-texto); font: 700 14px var(--f-texto); }
.sub { margin: -6px 0 12px; color: var(--texto-suave); font-size: 14px; }

.servicios { display: grid; gap: 8px; }
.opcion { text-align: left; width: 100%; border: 1.5px solid var(--borde); background: var(--fondo); border-radius: 14px; padding: 13px 14px; cursor: pointer; display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; transition: border-color var(--dur), background var(--dur); }
.opcion:hover { border-color: var(--texto-suave); }
.opcion[aria-checked="true"] { border-color: var(--acento-tinta); background: color-mix(in srgb, var(--acento) 8%, var(--superficie)); }
.opcion b { font-weight: 600; }
.opcion .precio { font-weight: 700; }
.opcion small { color: var(--texto-suave); font-size: 13.5px; grid-column: 1 / -1; }

.dias { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px; scroll-snap-type: x proximity; }
.dias::-webkit-scrollbar { display: none; }
.dia { flex: 0 0 64px; scroll-snap-align: start; border: 1.5px solid var(--borde); background: var(--fondo); border-radius: 14px; padding: 8px 4px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.dia small { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--texto-suave); font-weight: 700; }
.dia b { font-size: 1.35rem; font-family: var(--f-titulo); font-weight: 400; }
.dia:disabled { opacity: .35; cursor: not-allowed; text-decoration: line-through; }
.dia[aria-checked="true"] { background: var(--acento); border-color: var(--acento); color: var(--acento-texto); }
.dia[aria-checked="true"] small { color: inherit; opacity: .85; }

.horas { display: grid; grid-template-columns: repeat(auto-fill, minmax(82px, 1fr)); gap: 8px; }
.hora { border: 1.5px solid var(--borde); background: var(--fondo); border-radius: 12px; padding: 11px 6px; font-weight: 600; cursor: pointer; font-variant-numeric: tabular-nums; }
.hora:hover:not(:disabled) { border-color: var(--acento-tinta); }
.hora:disabled { opacity: .35; cursor: not-allowed; text-decoration: line-through; }
.hora[aria-checked="true"] { background: var(--acento); border-color: var(--acento); color: var(--acento-texto); }
.vacio { color: var(--texto-suave); font-size: 14.5px; grid-column: 1 / -1; margin: 0; }

#formDatos { display: flex; flex-direction: column; gap: 12px; }
.campo { display: flex; flex-direction: column; gap: 5px; }
.campo > span { font-size: 13px; font-weight: 700; color: var(--texto-suave); }
.campo input, .campo select, .campo textarea { border: 1.5px solid var(--borde); background: var(--fondo); border-radius: 12px; padding: 11px 12px; font-size: 16px; width: 100%; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--acento-tinta); }
.campo [aria-invalid="true"] { border-color: var(--mal); }
.btn-confirmar { border: 0; border-radius: 14px; padding: 15px; background: var(--acento); color: var(--acento-texto); font-weight: 700; font-size: 16.5px; cursor: pointer; }
.btn-confirmar:disabled { opacity: .6; cursor: progress; }
.ayuda { font-size: 13px; color: var(--texto-suave); text-align: center; margin: 0; }

.resumen-fijo { position: fixed; z-index: 20; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(560px, calc(100% - 28px));
  display: flex; align-items: center; gap: 12px; background: var(--texto); color: var(--fondo); border-radius: 18px; padding: 12px 12px 12px 18px; box-shadow: 0 10px 30px rgb(0 0 0 / .25); animation: subir 300ms var(--ease); }
@keyframes subir { from { transform: translate(-50%, 120%); } }
.resumen-fijo > div { flex: 1; display: flex; flex-direction: column; font-size: 14px; line-height: 1.3; min-width: 0; }
.resumen-fijo b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.resumen-fijo span { opacity: .8; }
.rf-btn { border: 0; border-radius: 12px; padding: 11px 18px; background: var(--fondo); color: var(--texto); font-weight: 700; cursor: pointer; }

.hoja { border: 0; padding: 0; background: var(--superficie); color: var(--texto); width: min(480px, calc(100% - 32px)); border-radius: 22px; box-shadow: 0 20px 60px rgb(0 0 0 / .25); }
.hoja::backdrop { background: rgb(15 12 8 / .5); }
.hoja[open] { animation: aparecer 260ms var(--ease); }
@keyframes aparecer { from { opacity: 0; transform: translateY(24px); } }
.hoja-int { padding: 24px 20px; display: flex; flex-direction: column; gap: 12px; text-align: center; }
.hoja.chica .hoja-int { text-align: left; }
.hoja h2 { font-size: 1.7rem; }
.hoja p { margin: 0; color: var(--texto-suave); }
.tilde { width: 56px; height: 56px; margin: 0 auto; border-radius: 50%; background: var(--ok); color: #fff; display: grid; place-items: center; font-size: 28px; font-weight: 700; }
.fila-botones { display: flex; flex-direction: column; gap: 8px; }
.hoja.chica .fila-botones { flex-direction: row; }
.hoja.chica .fila-botones > * { flex: 1; }
.btn-sec, .btn-pri { display: block; text-align: center; text-decoration: none; color: var(--texto); border-radius: 12px; padding: 12px; font-weight: 700; cursor: pointer; border: 1.5px solid var(--borde); background: var(--fondo); }
.btn-pri { background: var(--acento); border-color: var(--acento); color: var(--acento-texto); }
.btn-link { border: 0; background: none; color: var(--texto-suave); text-decoration: underline; cursor: pointer; padding: 6px; }
.error { color: var(--mal) !important; font-size: 14px; }

.pie { padding-top: 28px; padding-bottom: 28px; color: var(--texto-suave); font-size: 14px; text-align: center; }
.pie p { margin: 4px 0; }
.pie-hecho { font-size: 12.5px; opacity: .8; }
.toast { position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom)); transform: translate(-50%, 20px); opacity: 0; pointer-events: none; background: var(--texto); color: var(--fondo); padding: 10px 16px; border-radius: 999px; font-size: 14px; font-weight: 600; transition: opacity var(--dur), transform var(--dur) var(--ease); z-index: 30; max-width: calc(100% - 32px); text-align: center; }
.toast.ver { opacity: 1; transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }