/* =========================================================
   sc-reserva.css — Asistente de reserva de semanas (/reserva/, inc/reserva-asistente.php).
   Copiado de la maqueta (styles/reserva.css), 06/10/2026, sin lo que no se usa: extras,
   check-in, confirmación y el formulario de tarjeta (el pago es en la página del banco).
   El selector de producto (paso 0) estaba como <style> dentro de reserva-app.jsx.
   ========================================================= */
body.wz-body{background:var(--cream)}

/* ---- wizard header ---- */
.wz-head{position:sticky;top:0;z-index:60;background:var(--white);border-bottom:1px solid var(--line)}
.wz-head-row{height:60px;display:flex;align-items:center;justify-content:space-between;gap:14px}
.wz-head .brand img{height:30px}
.wz-secure{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--green)}
.wz-secure .ic{width:15px;height:15px}
.wz-close{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--slate);padding:8px 10px;border:1px solid var(--line)}
.wz-close:hover{color:var(--green-ink);border-color:var(--ink)}
.wz-close .ic{width:14px;height:14px}

/* ---- progress ---- */
.wz-progress{background:var(--white);border-bottom:1px solid var(--line)}
.wz-steps{display:flex;align-items:center;gap:0;overflow-x:auto;scrollbar-width:none}
.wz-steps::-webkit-scrollbar{display:none}
.wz-step{flex:1 0 auto;min-width:max-content;display:flex;align-items:center;gap:9px;padding:14px 16px;font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--slate);white-space:nowrap;position:relative}
.wz-step .n{width:24px;height:24px;border:1.5px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:12px;flex-shrink:0;transition:.2s}
.wz-step .n .ic{width:13px;height:13px}
.wz-step.done{color:var(--green-ink)}
.wz-step.done .n{background:var(--green);border-color:var(--green);color:#fff}
.wz-step.active{color:var(--green-ink)}
.wz-step.active .n{border-color:var(--green);color:var(--green)}
.wz-step+.wz-step::before{content:"";width:14px;height:1.5px;background:var(--line);flex-shrink:0;margin-inline:-2px}

/* ---- layout ---- */
.wz-main{max-width:1180px;margin-inline:auto;padding:26px 18px calc(120px + env(safe-area-inset-bottom))}
.wz-grid{display:grid;grid-template-columns:1fr;gap:22px;align-items:start}
.wz-h{font-size:clamp(24px,5vw,34px);text-transform:uppercase;font-weight:600;letter-spacing:.005em;color:var(--green-ink);line-height:1}
.wz-sub{color:var(--slate);font-size:15px;margin-top:9px;margin-bottom:22px;max-width:54ch;text-wrap:pretty}
.wz-back{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--slate);margin-bottom:16px}
.wz-back:hover{color:var(--green-ink)}
.wz-back .ic{width:15px;height:15px}

/* ---- cards / panels ---- */
.wz-card{background:var(--white);border:1px solid var(--line);padding:22px}
.wz-card+.wz-card{margin-top:1px}
.wz-card h3{font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--green-ink);margin-bottom:16px;display:flex;align-items:center;gap:9px}
.wz-card h3 .ic{width:17px;height:17px;color:var(--green)}

/* alert / ambient note */
.wz-note{display:flex;gap:12px;align-items:flex-start;padding:15px 16px;background:var(--cream);border:1px solid var(--line);font-size:13.5px;font-weight:500;color:var(--green-ink);line-height:1.5}
.wz-note .ic{width:19px;height:19px;color:var(--green);flex-shrink:0;margin-top:1px}
.wz-note.warn{background:rgba(238,99,54,.08);border-color:rgba(238,99,54,.3)}
.wz-note.warn .ic{color:var(--orange-deep)}
.wz-note.hold{background:var(--black);color:#fff;border-color:var(--black)}
.wz-note.hold .ic{color:var(--cyan-soft)}
.wz-note.hold b{color:var(--cyan-soft)}


/* ---- selectable option cards ---- */
.opt{display:flex;align-items:center;gap:14px;padding:16px;border:1.5px solid var(--line);background:var(--white);cursor:pointer;transition:.16s;text-align:left;width:100%}
.opt+.opt{margin-top:10px}
.opt:hover{border-color:var(--cyan)}
.opt.sel{border-color:var(--green);background:rgba(6,145,131,.05)}
.opt .radio{width:22px;height:22px;border-radius:50%;border:2px solid var(--line);flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:.16s}
.opt.sel .radio{border-color:var(--green)}
.opt.sel .radio::after{content:"";width:11px;height:11px;border-radius:50%;background:var(--green)}
.opt .oico{width:42px;height:42px;color:var(--green);border-color:rgba(6,145,131,.3);flex-shrink:0}
.opt .obody{flex:1;min-width:0}
.opt .obody .ot{font-size:14.5px;font-weight:600;color:var(--green-ink);text-transform:uppercase;letter-spacing:.02em}
.opt .obody .od{font-size:13px;color:var(--slate);margin-top:3px;text-wrap:pretty}
/* Nombre y descripción en líneas separadas (08/10/2026): eran <span> en línea, el margin-top no hacía nada y salían pegados. */
.opt .obody .ot,.opt .obody .od{display:block}
.opt .obody .od[hidden]{display:none}
.opt .opx{font-size:14px;font-weight:700;color:var(--green-ink);white-space:nowrap;flex-shrink:0}
.opt.disabled{opacity:.5;cursor:not-allowed}


/* ---- quantity stepper ---- */
.qty{display:inline-flex;align-items:center;border:1.5px solid var(--line);flex-shrink:0}
.qty button{width:38px;height:38px;display:flex;align-items:center;justify-content:center;color:var(--green-ink);background:var(--white);transition:.15s}
.qty button:hover:not(:disabled){background:var(--cream)}
.qty button:disabled{opacity:.3;cursor:not-allowed}
.qty button .ic{width:16px;height:16px}
.qty .qv{min-width:42px;text-align:center;font-size:15px;font-weight:700;color:var(--green-ink)}
.qty.sm button{width:32px;height:32px}
.qty.sm .qv{min-width:34px;font-size:14px}

/* ---- form fields ---- */
.fields{display:grid;grid-template-columns:1fr;gap:14px}
.fields.two{grid-template-columns:1fr 1fr}
.field{display:flex;flex-direction:column;gap:6px}
.field.col2{grid-column:1/-1}
.field label{font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--green-ink)}
.field label .req{color:var(--orange-deep)}
.field input,.field select,.field textarea{border:1.5px solid var(--line);background:var(--white);padding:13px 14px;font-size:15px;color:var(--ink);width:100%;transition:.15s;border-radius:0}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--green)}
.field input.err,.field select.err{border-color:var(--orange-deep);background:rgba(238,99,54,.04)}
.field .hint{font-size:12px;color:var(--slate)}
.field .errmsg{font-size:12px;color:var(--orange-deep);font-weight:500}

/* checkboxes */
.check{display:flex;align-items:flex-start;gap:11px;padding:13px 14px;border:1px solid var(--line);background:var(--white);cursor:pointer;transition:.15s}
.check+.check{margin-top:10px}
.check:hover{border-color:var(--cyan)}
.check .box{width:22px;height:22px;border:2px solid var(--line);flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:.15s;margin-top:1px}
.check.on .box{background:var(--green);border-color:var(--green);color:#fff}
.check .box .ic{width:14px;height:14px;opacity:0;transition:.15s}
.check.on .box .ic{opacity:1}
.check .ctext{font-size:13.5px;color:var(--ink);line-height:1.5}
.check .ctext a{color:var(--green);text-decoration:underline}
.check.err .box{border-color:var(--orange-deep)}


/* ---- order summary ---- */
.sum{background:var(--white);border:1px solid var(--line)}
.sum-head{padding:18px;border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.sum-head .smedia{position:absolute;inset:0;z-index:0}
.sum-head .smedia img{width:100%;height:100%;object-fit:cover;opacity:.22}
.sum-head .smedia::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(251,246,238,.7),rgba(251,246,238,.95))}
.sum-head .sh-in{position:relative;z-index:2}
.sum-head .stipo{font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--green)}
.sum-head .sname{font-size:18px;font-weight:700;color:var(--green-ink);text-transform:uppercase;line-height:1.05;margin-top:5px}
.sum-head .sdates{font-size:13px;color:var(--slate);font-weight:500;margin-top:5px;display:flex;align-items:center;gap:7px}
.sum-head .sdates .ic{width:14px;height:14px;color:var(--green)}
.sum-rows{padding:16px 18px}
.sum-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:13.5px;padding:6px 0;color:var(--ink)}
.sum-row .sl{color:var(--slate)}
.sum-row .sl b{color:var(--green-ink);font-weight:600}
.sum-row .sv{font-weight:600;color:var(--green-ink);white-space:nowrap}
.sum-row.muted .sv{color:var(--slate);font-weight:500}
.sum-div{height:1px;background:var(--line);margin:10px 0}
.sum-total{display:flex;justify-content:space-between;align-items:baseline;padding:16px 18px;border-top:1px solid var(--line);background:var(--cream)}
.sum-total .tl{font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--green-ink)}
.sum-total .tv{font-size:26px;font-weight:700;color:var(--green-ink);line-height:1}
.sum-total .tv small{font-size:12px;font-weight:500;color:var(--slate);display:block;text-align:right;margin-top:2px}
.sum-urgency{display:flex;align-items:center;gap:9px;padding:10px 18px;color:#fff;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.sum-urgency .ic{width:15px;height:15px;flex-shrink:0}
.sum-perks{padding:0 18px 18px;display:flex;flex-direction:column;gap:8px}
.sum-perk{display:flex;align-items:center;gap:9px;font-size:12.5px;font-weight:500;color:var(--green-ink)}
.sum-perk .ic{width:15px;height:15px;color:var(--green);flex-shrink:0}

/* collapsible summary (mobile) */
.sum-toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:14px 16px;background:var(--white);border:1px solid var(--line);cursor:pointer}
.sum-toggle .stl{font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--green-ink);display:flex;align-items:center;gap:9px}
.sum-toggle .stl .ic{width:16px;height:16px;color:var(--green);transition:transform .25s}
.sum-toggle.open .stl .ic{transform:rotate(180deg)}
.sum-toggle .stv{font-size:17px;font-weight:700;color:var(--green-ink)}
.sum-collapse{overflow:hidden;max-height:0;transition:max-height .3s ease}

/* ---- in-content actions (desktop) ---- */
.wz-actions{display:flex;align-items:center;gap:12px;margin-top:24px}
@media(max-width:979px){.wz-actions{display:none}}

/* ---- sticky action footer ---- */
.wz-foot{position:fixed;left:0;right:0;bottom:0;z-index:55;background:var(--white);border-top:1px solid var(--line);box-shadow:0 -8px 30px -18px rgba(6,63,58,.4);padding:12px 16px calc(12px + env(safe-area-inset-bottom))}
.wz-foot-in{max-width:1180px;margin-inline:auto;display:flex;align-items:center;gap:14px}
.wz-foot .ftotal{flex:1;min-width:0}
.wz-foot .ftotal .fl{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--slate)}
.wz-foot .ftotal .fv{font-size:20px;font-weight:700;color:var(--green-ink);line-height:1.1}
.wz-foot .btn{flex-shrink:0}

/* ---- payment ---- */
.card-badges{display:flex;gap:8px;align-items:center}
.card-badges .pc{border:1px solid var(--line);padding:6px 10px;font-size:11px;font-weight:700;color:var(--green-ink)}
.hold-timer{font-variant-numeric:tabular-nums}



/* ---- desktop ---- */
@media(min-width:980px){
  .wz-main{padding:34px 22px 60px}
  .wz-grid{grid-template-columns:1fr 372px;gap:30px}
  .sum-sticky{position:sticky;top:140px}
  .wz-foot{display:none}
  .sum-toggle{display:none}
  .sum-collapse{max-height:none!important;overflow:visible}
}
@media(max-width:979px){
  .sum-sticky .sum{display:none}
}

/* ---- paso 0 · ¿Qué quieres reservar? (de reserva-app.jsx) ---- */
.pk-wrap{max-width:1080px;margin:0 auto}
.pk-intro{margin-bottom:28px}
.pk-h{font-size:clamp(28px,5vw,44px);margin-bottom:8px}
.pk-intro .wz-sub{max-width:56ch}
.pk-grid{display:grid;grid-template-columns:1fr;gap:1px;background:var(--line);border:1px solid var(--line)}
.pk-card{display:flex;gap:0;align-items:stretch;background:#fff;text-align:left;cursor:pointer;border:none;font-family:inherit;transition:background .15s;color:inherit;text-decoration:none}
.pk-card:hover{background:var(--cream)}
.pk-media{position:relative;width:120px;flex-shrink:0;overflow:hidden;background:var(--sea);min-height:120px}
.pk-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pk-ico{position:absolute;top:10px;left:10px;width:36px;height:36px;color:#fff;border-color:rgba(255,255,255,.7);background:rgba(6,40,38,.3);backdrop-filter:blur(3px)}
.pk-ico .ic{width:18px;height:18px}
.pk-body{padding:18px 20px;flex:1;display:flex;flex-direction:column;gap:6px;justify-content:center}
.pk-t{font-size:17px;font-weight:700;text-transform:uppercase;letter-spacing:.02em;color:var(--green-ink)}
.pk-d{font-size:13.5px;color:var(--slate);line-height:1.5}
.pk-go{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--green);margin-top:4px}
.pk-go .ic{width:15px;height:15px}
.pk-promos-wrap{margin-top:48px}
.pk-h2{font-size:clamp(20px,3.5vw,28px);text-transform:uppercase;font-weight:600;color:var(--green-ink);margin:8px 0 6px}
.pk-promos-wrap .wz-sub{margin:0 0 20px}
.pk-promos{display:grid;grid-template-columns:1fr;gap:1px;background:var(--line);border:1px solid var(--line)}
.pk-promo{background:#fff;text-align:left;cursor:pointer;border:none;font-family:inherit;padding:18px 20px;display:flex;flex-direction:column;gap:9px;transition:background .15s;color:inherit;text-decoration:none}
.pk-promo:hover{background:var(--cream)}
.pk-promo-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.pk-promo-tags{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end;align-items:center}
.pk-promo-name{font-size:15px;font-weight:700;text-transform:uppercase;letter-spacing:.02em;color:var(--green-ink)}
.pk-promo-dates{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:500;color:var(--slate)}
.pk-promo-dates .ic{width:15px;height:15px;color:var(--green)}
.pk-promo-bottom{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-top:2px;padding-top:10px;border-top:1px solid var(--line)}
.pk-promo-price{font-size:18px;font-weight:700;color:var(--green-ink)}
.pk-promo-price .old{font-size:12px;font-weight:500;color:var(--slate);text-decoration:line-through;margin-right:4px}
.pk-promo-state{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:3px 8px;border:1px solid currentColor}
.pk-promo-state.few{color:var(--warn)}.pk-promo-state.last{color:var(--hot)}
.pk-promo-bottom .pk-go{margin:0}
@media(min-width:760px){
  .pk-grid{grid-template-columns:1fr 1fr}
  .pk-promos{grid-template-columns:1fr 1fr 1fr}
  .pk-media{width:160px}
}

/* ---- añadido: lo que en la maqueta hacía React y aquí es HTML de formulario ---- */
.wz-mb{margin-bottom:14px}
.wz-mt{margin-top:14px}
.wz-card .sum-row{padding:4px 0}
.wz-note a{color:var(--green);text-decoration:underline}
.wz-step{text-decoration:none}
a.wz-step:hover{color:var(--green)}
.wz-qty-row{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.wz-qty-t{display:block;font-size:14px;font-weight:600;color:var(--green-ink);text-transform:uppercase;letter-spacing:.02em}
.wz-qty-d{font-size:12.5px;color:var(--slate);margin-top:3px}
.qty input.qv{width:48px;border:none;background:none;text-align:center;-moz-appearance:textfield;appearance:textfield;padding:0}
.qty input.qv::-webkit-outer-spin-button,.qty input.qv::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.opt{position:relative}
.opt input{position:absolute;opacity:0;pointer-events:none}
.opt:has(input:focus-visible){outline:2px solid var(--green);outline-offset:2px}
.opt-fijo{cursor:default}
.opt-fijo:hover{border-color:var(--green)}
.opt.disabled:hover{border-color:var(--line)}
.check{position:relative}
.check input{position:absolute;opacity:0;pointer-events:none}
.check:has(input:checked) .box{background:var(--green);border-color:var(--green);color:#fff}
.check:has(input:checked) .box .ic{opacity:1}
.check:has(input:focus-visible){outline:2px solid var(--green);outline-offset:2px}
.wz-err-cond{display:block;margin-top:8px}
.errmsg[hidden]{display:none}
.wz-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.wz-tpv{margin-left:auto;font-size:12px;font-weight:600;color:var(--green);display:inline-flex;align-items:center;gap:7px}
.wz-tpv .ic{width:14px;height:14px}
.wz-actions .btn:last-child{margin-left:auto}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.only-mobile-sum{margin-bottom:20px}
.only-mobile-sum summary{list-style:none}
.only-mobile-sum summary::-webkit-details-marker{display:none}
.only-mobile-sum[open] .sum-toggle .stl .ic{transform:rotate(180deg)}
.sum-mobile{margin-top:1px}
@media(min-width:980px){.only-mobile-sum{display:none}}
.wz-content .acc{margin-top:4px}

/* ---- alquiler de material (inc/reserva-material.php, 07/10/2026) ---- */
.mat-campo{display:flex;flex-direction:column;gap:6px}
.mat-campo>span{font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--green-ink)}
.mat-campo[hidden]{display:none}
.mat-campo input[type=date],.mat-campo select{border:1.5px solid var(--line);background:var(--white);padding:10px 12px;font:inherit;font-size:15px;color:var(--ink);border-radius:0;min-height:42px}
.mat-campo input[type=date]:focus,.mat-campo select:focus{outline:none;border-color:var(--green)}
.mat-linea{display:grid;grid-template-columns:1fr;gap:12px;padding:14px 0;border-top:1px solid var(--line);position:relative}
.mat-linea:first-child{border-top:0;padding-top:0}
.mat-quitar{position:absolute;top:12px;right:0;width:30px;height:30px;border:1px solid var(--line);background:var(--white);color:var(--slate);cursor:pointer;font-size:13px}
.mat-linea:first-child .mat-quitar{top:0}
.mat-quitar:hover{color:var(--orange-deep);border-color:var(--orange-deep)}
.mat-quitar[hidden]{display:none}
.mat-anadir{display:inline-flex;align-items:center;gap:8px;margin-top:14px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--green);border:1px dashed var(--green);padding:10px 14px;background:none;cursor:pointer}
.mat-anadir .ic{width:14px;height:14px}
.mat-anadir:hover{background:rgba(6,145,131,.06)}
@media(min-width:620px){
  .mat-linea{grid-template-columns:1.6fr 1fr auto 30px;align-items:end}
  .mat-quitar,.mat-linea:first-child .mat-quitar{position:static;align-self:end;margin-bottom:6px}
  .mat-linea .mat-campo--talla[hidden]{display:flex;visibility:hidden}
}