/* ==========================================================================
   Brasa Negra — booking.css
   Banda de cierre "Reservar", motor de reservas, formulario de contacto,
   controles de formulario, validación y diálogo de confirmación.
   ========================================================================== */

:root{
  --error:#ff8f78;
  --error-bg:rgba(255,120,95,.08);
  --ok:#9ccf8f;
  --field-bg:rgba(255,255,255,.035);
  --field-bg-hover:rgba(255,255,255,.06);
  --field-line:rgba(214,170,120,.28);
}

/* ---------- Banda de cierre: "Una mesa. Dos formas de desconectar." ---------- */
.booking-band{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,8vw,8rem);align-items:center;min-height:680px;padding:clamp(5rem,9vw,7rem) var(--gutter);background:radial-gradient(ellipse at 50% 110%,rgba(163,68,25,.4),transparent 60%),var(--bg-warm)}
.booking-band::before{content:"";position:absolute;inset:0;z-index:-2;background:url("../assets/atmosfera-brasas.jpg") center bottom/cover no-repeat;opacity:.55;transform-origin:65% 90%;animation:ember-breath 11s ease-in-out infinite alternate}
.booking-band::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(21,20,17,.93) 0%,rgba(21,20,17,.66) 45%,rgba(21,20,17,.32) 100%),linear-gradient(0deg,rgba(21,20,17,.45),transparent 40%,rgba(21,20,17,.75))}
.booking-aura{position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse at var(--light-x,72%) var(--light-y,65%),rgba(245,139,46,.12),transparent 40%)}
.booking-copy,.booking-choices{position:relative;z-index:3;min-width:0}
.booking-copy .eyebrow{color:#e0a87b}
.booking-copy h2{font-size:clamp(3.2rem,2.2rem + 3.8vw,5.75rem);line-height:.98;margin-bottom:1.75rem}
.booking-copy>p:not(.eyebrow){font-size:1rem;color:#d8cab6;line-height:1.8}
.booking-signature{display:block;max-width:270px;margin-top:1.75rem;padding-top:1.5rem;border-top:1px solid rgba(191,150,102,.25);font-family:var(--font-serif);font-style:italic;font-size:1.6rem;color:#d9a77c}
.choice-label{font-size:var(--fs-xs);letter-spacing:.18em;text-transform:uppercase;color:#d5c0a2;margin-bottom:1.5rem}
.booking-choice{position:relative;display:flex;align-items:center;gap:1.5rem;width:100%;min-height:164px;margin-bottom:1.1rem;padding:0 1.5rem 0 0;overflow:hidden;border:1px solid rgba(223,180,122,.3);background:linear-gradient(110deg,rgba(39,33,24,.85),rgba(32,28,22,.8));box-shadow:0 20px 50px rgba(0,0,0,.25);text-align:left;transition:transform .5s var(--ease-out),border-color .35s,background .35s}
.booking-choice:hover,.booking-choice:focus-visible{transform:translateX(-8px);border-color:#d1a16d;background:linear-gradient(110deg,rgba(61,46,32,.93),rgba(43,33,24,.92))}
.choice-image{position:relative;flex:none;align-self:stretch;width:150px;overflow:hidden}
.choice-image::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(33,28,22,.4))}
.choice-image>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.9);transition:transform .8s var(--ease-out)}
.booking-choice:hover .choice-image>img{transform:scale(1.06)}
.choice-copy{display:flex;flex-direction:column;gap:.55rem;min-width:0;padding:1.4rem 0}
.choice-copy small{font-size:var(--fs-xs);letter-spacing:.06em;color:#cdb698}
.choice-copy strong{font-family:var(--font-serif);font-weight:400;font-size:clamp(1.9rem,1.6rem + .8vw,2.35rem);line-height:1.05;color:#f3e9da}
.choice-cta{align-self:flex-start;padding-bottom:.2rem;border-bottom:1px solid rgba(212,122,55,.45);font-size:var(--fs-xs);font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:#e3b17e}
.choice-arrow{margin-left:auto;font-size:1.6rem;color:#d4a06b;transition:transform .4s var(--ease-out)}
.booking-choice:hover .choice-arrow{transform:translate(4px,-4px)}
.booking-footnote{margin:1.5rem 0 0;font-size:var(--fs-sm);color:#cdb698}
.booking-footnote a{color:var(--ember-hot);font-weight:600;border-bottom:1px solid rgba(212,122,55,.45)}
@keyframes ember-breath{0%{filter:brightness(.85);transform:scale(1)}45%{filter:brightness(1.12);transform:scale(1.018)}100%{filter:brightness(.96);transform:scale(1.035)}}

/* ---------- Página de reservas ---------- */
.booking{padding-top:0}
.booking-layout{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(300px,1fr);gap:clamp(2rem,5vw,4.5rem);align-items:start;max-width:var(--container);margin-inline:auto}
.booking-form{min-width:0}
.booking-progress{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;list-style:none;margin:0 0 2.5rem;padding:0;counter-reset:bstep}
.booking-progress li{position:relative;padding-top:1rem;font-size:var(--fs-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);counter-increment:bstep;transition:color .35s}
.booking-progress li::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--line-soft);transition:background-color .45s}
.booking-progress li.is-done{color:var(--text-2)}
.booking-progress li.is-done::before{background:var(--ember)}
.booking-progress li.is-current{color:var(--text)}
.booking-progress li.is-current::before{background:linear-gradient(90deg,var(--ember),var(--line-soft))}

.booking-block{margin:0 0 1.25rem;padding:clamp(1.5rem,3vw,2.25rem);border:1px solid var(--line-soft);border-radius:var(--radius);background:linear-gradient(170deg,rgba(31,28,24,.85),rgba(20,20,20,.7));transition:border-color .4s}
.booking-block:focus-within{border-color:var(--line)}
.booking-block legend{float:left;width:100%;display:flex;align-items:baseline;gap:1rem;margin-bottom:1.5rem;padding:0;font-family:var(--font-serif);font-size:clamp(1.75rem,1.4rem + 1vw,2.2rem);line-height:1.1;color:var(--text)}
.booking-block legend+*{clear:both}
.booking-block legend .num{font-style:italic;font-size:1.1rem;color:var(--ember)}
.booking-block legend .opt{margin-left:auto;font-family:var(--font-sans);font-size:var(--fs-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

/* Campos */
.field-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem 1.25rem}
.field{display:flex;flex-direction:column;gap:.5rem;min-width:0}
.field--full{grid-column:1/-1}
.field+.field-grid,.field-grid+.field,.field+.field{margin-top:1.25rem}
.field label,.field-label{font-size:var(--fs-sm);font-weight:500;color:var(--text-2)}
.field label .req,.field-label .req{color:var(--ember)}
.field input,.field select,.field textarea{width:100%;min-height:52px;padding:.85rem 1rem;border:1px solid var(--field-line);border-radius:2px;background:var(--field-bg);color:var(--text);font-size:1rem;line-height:1.4;transition:border-color .25s,background-color .25s,box-shadow .25s;-webkit-appearance:none;appearance:none}
.field textarea{min-height:120px;resize:vertical}
.field select{padding-right:2.75rem;background-image:linear-gradient(45deg,transparent 50%,var(--ember) 50%),linear-gradient(135deg,var(--ember) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px;background-repeat:no-repeat}
.field select option{background:#1b1916;color:var(--text)}
.field input::placeholder,.field textarea::placeholder{color:#857b6f}
.field input:hover,.field select:hover,.field textarea:hover{background-color:var(--field-bg-hover)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--ember);box-shadow:0 0 0 3px rgba(212,122,55,.22)}
.field input[type="date"]{color-scheme:dark}
.field input[type="date"]::-webkit-calendar-picker-indicator{filter:invert(.7) sepia(1) saturate(4) hue-rotate(-15deg);cursor:pointer}
.field-hint{font-size:var(--fs-xs);color:var(--muted);margin:0}
.field-error{display:flex;align-items:center;gap:.4rem;min-height:0;font-size:var(--fs-xs);font-weight:500;color:var(--error);margin:0}
.field-error:empty{display:none}
.field-error::before{content:"!";display:grid;place-items:center;flex:none;width:16px;height:16px;border-radius:50%;background:var(--error);color:#1a0f0b;font-size:.65rem;font-weight:700}
.is-invalid input,.is-invalid select,.is-invalid textarea,.field input[aria-invalid="true"],.field textarea[aria-invalid="true"],.field select[aria-invalid="true"]{border-color:var(--error);background-color:var(--error-bg)}
.is-valid input:not([type="checkbox"]),.is-valid select,.is-valid textarea{border-color:rgba(156,207,143,.45)}
.field.is-valid .field-label-row::after{content:"✓";color:var(--ok);font-size:.8rem}
.field-label-row{display:flex;justify-content:space-between;align-items:baseline;gap:.5rem}

/* Turnos y horas */
.segmented{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;padding:.35rem;border:1px solid var(--field-line);border-radius:3px;background:var(--field-bg)}
.segmented label{position:relative;cursor:pointer}
.segmented input{position:absolute;opacity:0;width:1px;height:1px}
.segmented span{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;line-height:1.25;min-height:42px;padding:.4rem .75rem;border-radius:2px;font-size:var(--fs-sm);font-weight:500;color:var(--text-2);transition:background-color .3s,color .3s}
.segmented span small{font-size:var(--fs-xs);font-weight:400;color:inherit;opacity:.75}
.segmented label:hover span{color:var(--text);background:rgba(255,255,255,.04)}
.segmented input:checked+span{background:var(--ember);color:#120d09;font-weight:600}
.segmented input:focus-visible+span{outline:2px solid var(--ember-hot);outline-offset:2px}
.time-slots{display:flex;flex-wrap:wrap;gap:.5rem;min-height:46px}
.time-slot{min-width:78px;min-height:44px;padding:.5rem .85rem;border:1px solid var(--field-line);border-radius:2px;background:var(--field-bg);font-size:var(--fs-sm);font-variant-numeric:tabular-nums;color:var(--text-2);transition:background-color .25s,border-color .25s,color .25s,transform .3s var(--ease-out)}
.time-slot:hover{border-color:var(--ember);color:var(--text);transform:translateY(-1px)}
.time-slot[aria-checked="true"]{background:var(--ember);border-color:var(--ember);color:#120d09;font-weight:600}
.time-slots__empty{display:flex;align-items:center;min-height:46px;font-size:var(--fs-sm);color:var(--muted);margin:0}

/* Comensales */
.counter{display:inline-grid;grid-template-columns:56px 90px 56px;align-items:stretch;border:1px solid var(--field-line);border-radius:2px;background:var(--field-bg)}
.counter button{display:grid;place-items:center;min-height:56px;font-size:1.4rem;color:var(--text);transition:background-color .25s,color .25s}
.counter button:hover:not([disabled]){background:rgba(212,122,55,.18);color:var(--ember-hot)}
.counter button[disabled]{opacity:.3;cursor:not-allowed}
.counter input{width:100%;min-height:56px;border:0;border-inline:1px solid var(--field-line);background:transparent;text-align:center;font-family:var(--font-serif);font-size:1.9rem;color:var(--text);-moz-appearance:textfield;appearance:textfield}
.counter input::-webkit-outer-spin-button,.counter input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.counter input:focus{outline:none;box-shadow:inset 0 0 0 2px var(--ember)}
.guests-row{display:flex;align-items:center;flex-wrap:wrap;gap:1rem 1.5rem}
.guests-row .field-hint{max-width:22rem}

/* Checkbox */
.check{display:grid;grid-template-columns:24px 1fr;gap:.85rem;align-items:start;font-size:var(--fs-sm);color:var(--text-2);cursor:pointer}
.check input,.field .check input{width:22px;height:22px;min-height:0;padding:0;margin:1px 0 0;border:1px solid var(--field-line);border-radius:2px;background:var(--field-bg);-webkit-appearance:none;appearance:none;display:grid;place-items:center;cursor:pointer;transition:background-color .25s,border-color .25s}
.check input::after{content:"";width:6px;height:11px;border:solid #120d09;border-width:0 2px 2px 0;transform:rotate(45deg) translate(-1px,-1px) scale(0);transition:transform .25s var(--ease-out)}
.check input:checked{background:var(--ember);border-color:var(--ember)}
.check input:checked::after{transform:rotate(45deg) translate(-1px,-1px) scale(1)}
.check input:focus-visible{outline:2px solid var(--ember-hot);outline-offset:3px}
.check input[aria-invalid="true"]{border-color:var(--error)}
.check a{color:var(--text);border-bottom:1px solid rgba(212,122,55,.5)}

/* Honeypot antispam */
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

.form-status{margin:1rem 0 0;font-size:var(--fs-sm);color:var(--text-2)}
.form-status.is-error{color:var(--error)}
.booking-submit{display:flex;align-items:center;flex-wrap:wrap;gap:1rem 1.5rem;margin-top:2rem}
.booking-submit p{flex:1 1 16rem;margin:0;font-size:var(--fs-xs);color:var(--muted);line-height:1.6}

/* Resumen lateral */
.booking-summary{position:sticky;top:calc(var(--header-h) + 1.5rem);overflow:hidden;border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(170deg,#1e1a15,#141311);box-shadow:var(--shadow-lg)}
.booking-summary__media{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--surface)}
.booking-summary__media img{width:100%;height:100%;object-fit:cover;filter:brightness(.62);transition:opacity .5s}
.booking-summary__media .logo{position:absolute;left:50%;top:50%;width:64%;height:auto;transform:translate(-50%,-50%);filter:drop-shadow(0 2px 10px rgba(0,0,0,.7))}
.booking-summary__body{padding:1.6rem 1.6rem 1.75rem}
.booking-summary h2{font-size:2rem;margin-bottom:1.25rem}
.summary-list{display:grid;gap:0;margin:0 0 1.25rem;border-top:1px solid var(--line-soft)}
.summary-list>div{display:flex;justify-content:space-between;gap:1rem;padding:.75rem 0;border-bottom:1px solid var(--line-soft)}
.summary-list dt{font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.summary-list dd{margin:0;font-size:var(--fs-sm);text-align:right;color:var(--text)}
.summary-list dd.is-empty{color:#7d7366}
.booking-summary__help{font-size:var(--fs-sm);color:var(--muted);margin:0}
.booking-summary__help a{color:var(--ember-hot);font-weight:600}

/* Diálogo de reserva */
.booking-dialog .summary-list{margin-top:1.25rem}
.booking-dialog .state-icon{display:grid;place-items:center;width:64px;height:64px;margin-bottom:1.25rem;border:1px solid var(--ember);border-radius:50%;color:var(--ember);font-size:1.6rem;box-shadow:0 0 0 10px rgba(212,122,55,.07)}
.booking-dialog .state-icon.is-spinning{border-color:var(--line);border-top-color:var(--ember);animation:spin .9s linear infinite;box-shadow:none}
.booking-dialog .channels-mini{display:grid;gap:.6rem;margin-top:1.5rem}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- Formulario de contacto (sobre marfil) ---------- */
.contact-form{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(2rem,7vw,7rem);align-items:start}
.contact-form__intro p{max-width:24rem}
.ivory .field label,.ivory .field-label{color:#3c342c}
.ivory .field input,.ivory .field select,.ivory .field textarea{background-color:#f8f2e8;border-color:rgba(92,82,71,.35);color:var(--ink)}
.ivory .field input::placeholder,.ivory .field textarea::placeholder{color:#8b7f72}
.ivory .field input:hover,.ivory .field select:hover,.ivory .field textarea:hover{background-color:#fffaf2}
.ivory .field input:focus,.ivory .field select:focus,.ivory .field textarea:focus{border-color:#a8622f;box-shadow:0 0 0 3px rgba(168,98,47,.2)}
.ivory .field select{background-image:linear-gradient(45deg,transparent 50%,#a8622f 50%),linear-gradient(135deg,#a8622f 50%,transparent 50%)}
.ivory .field select option{background:#fff;color:var(--ink)}
.ivory .field-hint{color:#6a6054}
.ivory .field-error{color:#a6321b}
.ivory .field-error::before{background:#a6321b;color:#fff}
.ivory .is-invalid input,.ivory .is-invalid select,.ivory .is-invalid textarea,.ivory .field [aria-invalid="true"]{border-color:#a6321b;background-color:#fbece6}
.ivory .check{color:#4a4138}
.ivory .check input{background-color:#f8f2e8;border-color:rgba(92,82,71,.45)}
.ivory .check input:checked{background:#a8622f;border-color:#a8622f}
.ivory .check input::after{border-color:#fff}
.ivory .check a{color:var(--ink);border-color:rgba(138,85,48,.5)}
.ivory .form-status{color:#4a4138}
.ivory .form-status.is-error{color:#a6321b}
.ivory .btn{background:#2a221b;border-color:#2a221b;color:#f3ede4}
.ivory .btn:hover{background:#8a5530;border-color:#8a5530;box-shadow:0 12px 30px rgba(138,85,48,.3)}
.form-success{padding:2rem;border:1px solid rgba(92,82,71,.25);border-radius:var(--radius);background:#f8f2e8}
.form-success h3{font-size:2.2rem;margin-bottom:.75rem;color:var(--ink)}

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .booking-band{gap:4rem}
  .choice-image{width:110px}
  .booking-choice{gap:1.1rem;padding-right:1.1rem}
}
@media (max-width:960px){
  .booking-layout{grid-template-columns:1fr}
  .booking-summary{position:relative;top:0;order:-1;display:grid;grid-template-columns:200px 1fr}
  .booking-summary__media{aspect-ratio:auto;height:100%}
  .contact-form{grid-template-columns:1fr}
}
@media (max-width:760px){
  .booking-band{grid-template-columns:1fr;gap:3rem;min-height:0}
  .booking-band::after{background:linear-gradient(rgba(21,20,17,.95),rgba(21,20,17,.7) 48%,rgba(21,20,17,.5))}
  
  .booking-choice{min-height:146px}
  .choice-image{width:118px}
  .booking-progress li{font-size:.6rem;letter-spacing:.06em}
  .field-grid{grid-template-columns:1fr}
  .booking-summary{grid-template-columns:1fr}
  .booking-summary__media{aspect-ratio:16/7}
}
@media (max-width:420px){
  .choice-image{width:92px}
    .choice-copy strong{font-size:1.65rem}
  .booking-choice{gap:.9rem}
  .counter{grid-template-columns:52px 72px 52px}
}
@media (prefers-reduced-motion:reduce){
  .booking-band::before{animation:none}
  .booking-choice:hover,.booking-choice:focus-visible{transform:none}
}

/* Primera capa informativa (RGPD / LOPDGDD) */
.form-legal{margin:1.5rem 0 0;padding:1rem 1.15rem;border-left:2px solid var(--line);font-size:.75rem;line-height:1.65;color:var(--muted)}
.form-legal strong{color:var(--text-2);font-weight:600}
.form-legal a{color:var(--text-2);border-bottom:1px solid rgba(212,122,55,.5)}
.ivory .form-legal{border-left-color:rgba(92,82,71,.3);color:#5c5247}
.ivory .form-legal strong,.ivory .form-legal a{color:var(--ink)}