/* =========================
   Base Layout & Typography
   ========================= */
:root{
  --brand:#6b5f3b;
  --brand-2:#b19b61;
  --ink:#222;
  --muted:#555;
  --bg:#fcfcfa;
  --card:#fefdf9;
  --border:#dcd7c9;
  --border-2:#e6e0d2;
  --focus-ring:rgba(177,155,97,.22);
  --warn-bg:#fff9e6;
  --warn-border:#f2d174;
  --radius:12px;
  --radius-sm:8px;
  --gap-x:12px;
  --gap-y:10px;
  --control-h:42px;
  --font:"Segoe UI",system-ui,Arial,sans-serif;
  --chip-bg:#f9fafb;
  --chip-border:#e5e7eb;
  --chip-shadow:0 1px 2px rgba(0,0,0,.06);
  --chip-name:#111827;
  --chip-addr:#6b7280;
  --chip-hover:#f3f4f6;
  --chip-accent:#2563eb;
}

*{box-sizing:border-box}

body{
  background:#fff;
  color:var(--ink);
  font-family:var(--font);
}

#bukasForm{
  max-width:900px;
  margin:30px auto;
  padding-top:10px;
  color:var(--ink);
}

/* En móviles, asegurar espacio suficiente después del header */
@media (max-width: 768px) {
  #bukasForm{
    margin:20px auto;
    padding-top:15px;
  }
}

.form-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin:20px auto;
  max-width:900px;
  flex-wrap:wrap;
}

/* En móviles, ajustar el header para que no tape el contenido */
@media (max-width: 768px) {
  .form-head{
    margin:15px auto 20px auto;
    gap:8px;
    align-items:flex-start;
    position:relative;
    z-index:1;
  }
  
  .form-head h2{
    font-size:1.5rem;
    margin-bottom:8px;
    width:100%;
    flex-shrink:0;
  }
  
  .lang-switcher{
    width:100%;
    justify-content:flex-start;
    margin-top:4px;
  }
  
  /* Asegurar espacio después del header antes del stepper */
  .form-head + form,
  .form-head + #bukasForm {
    margin-top:10px;
  }
}

.form-head h2{
  margin:0;
  color:var(--brand);
  font-weight:800;
  letter-spacing:.5px;
}

.btn-gold{
  appearance:none;
  border:0;
  border-radius:12px;
  cursor:pointer;
  padding:10px 16px;
  font:700 14px/1 var(--font);
  color:#fff;
  background:linear-gradient(180deg,#c8b782 0%,var(--brand-2) 100%);
  box-shadow:0 6px 18px rgba(0,0,0,.16);
  transition:transform .06s ease, filter .18s ease, box-shadow .18s ease;
  white-space:nowrap;
}

.btn-gold:hover{
  filter:brightness(1.03);
  box-shadow:0 8px 22px rgba(0,0,0,.18);
}

.btn-gold:active{
  transform:translateY(1px);
  box-shadow:0 4px 14px rgba(0,0,0,.15);
}

#bukasForm fieldset{
  border:1px solid var(--border);
  padding:6px 16px 22px;
  border-radius:var(--radius);
  margin:18px 0;
  background:var(--bg);
  box-shadow:0 1px 3px rgba(0,0,0,.04);
}

#bukasForm legend{
  font-weight:700;
  color:var(--brand);
  padding:0 6px;
  font-size:1rem;
}

#bukasForm label br{ display:none; }

#bukasForm label{
  display:grid;
  grid-template-rows:auto auto;
  row-gap:2px;
  align-content:start;
  margin:.1rem 0;
  font-size:.95rem;
}

#bukasForm small.hint{
  color:var(--muted);
  font-size:.85rem;
  margin-top:.25rem;
}

#bukasForm input[type="text"],
#bukasForm input[type="email"],
#bukasForm input[type="number"],
#bukasForm input[type="date"],
#bukasForm input[type="time"],
#bukasForm select,
#bukasForm textarea{
  width:100%;
  height:var(--control-h);
  padding:8px 10px;
  font-size:15px;
  border:1px solid #cfd3d7;
  border-radius:6px;
  background:#fff;
  transition:border-color .18s, box-shadow .18s, background-color .18s;
}

#bukasForm textarea{
  min-height:110px;
  height:auto;
  resize:vertical;
}

#bukasForm input:focus,
#bukasForm select:focus,
#bukasForm textarea:focus{
  outline:none;
  border-color:var(--brand-2);
  box-shadow:0 0 0 3px var(--focus-ring);
}

#bukasForm input[readonly]{background:#fafafa;color:#555}

/* ========= Grid ========= */
.fs-grid{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:var(--gap-y) var(--gap-x);
}

.span-12{grid-column:span 12;}

@media (min-width:900px){
  .span-2{grid-column:span 2;}
  .span-3{grid-column:span 3;}
  .span-4{grid-column:span 4;}
  .span-5{grid-column:span 5;}
  .span-6{grid-column:span 6;}
  .span-7{grid-column:span 7;}
  .span-8{grid-column:span 8;}
  .span-9{grid-column:span 9;}
  .span-10{grid-column:span 10;}
  .span-11{grid-column:span 11;}
}

/* ========= Extras & Notices ========= */
.extras{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:var(--gap-y) var(--gap-x);
  padding:4px 0;
}

.extras label{
  display:flex;
  align-items:center;
  gap:.65rem;
  min-height:56px;
  padding:10px 14px;
  border-radius:var(--radius);
  background:#fbfaf7;
  border:1px solid var(--border-2);
  transition:background .18s, box-shadow .18s, border-color .18s;
}

.extras input[type="checkbox"]{
  width:22px;
  height:22px;
  flex:0 0 auto;
  accent-color:var(--brand);
}

.extras label:hover{background:#f7f4eb;}

.aviso-otros{
  margin:.35rem 0 0;
  padding:.5rem .6rem;
  border:1px solid var(--warn-border);
  background:var(--warn-bg);
  border-radius:var(--radius-sm);
  font-size:.92rem;
  color:var(--brand);
}

/* ========= Form Blocks ========= */
.form-block{
  position:relative;
  padding-bottom:90px;
}

.form-block[hidden]{display:none !important;}

.form-block[data-active="1"]{display:block;}

/* ========= Helpers ========= */
.visually-hidden-select{
  position:absolute !important;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
}

.yn-toggle{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:3px;
  border-radius:9999px;
  border:1px solid #e0dccb;
  background:#fff;
  width:fit-content;
  max-width:100%;
  justify-self:start;
  box-shadow:0 1px 0 rgba(0,0,0,.03);
}

.yn-toggle button{
  appearance:none;
  border:0;
  border-radius:9999px;
  padding:8px 14px;
  min-width:72px;
  line-height:1;
  font:600 14px/1 var(--font);
  background:transparent;
  color:#3b3b3b;
  cursor:pointer;
  transition:background .18s, color .18s, box-shadow .18s, transform .02s;
}

.yn-toggle button:hover{background:#f7f4eb;}

.yn-toggle button.is-active{
  background:var(--brand);
  color:#fff;
  box-shadow:0 1px 0 rgba(0,0,0,.12),0 0 0 2px rgba(177,155,97,.25);
}

.hint-inline{ font-size:.86rem; color:#6b6b6b; margin-top:4px; }
.muted{ color:#6b6b6b; font-size:.85em; margin-top:.25rem; }

#comentarios textarea{
  min-height:80px;
  height:auto;
}

/* ========= Validation ========= */
.field-error{
  color:#7f1d1d;
  font-size:.85rem;
  margin-top:.35rem;
}

.is-invalid{
  border-color:#ef4444 !important;
  box-shadow:0 0 0 3px rgba(239,68,68,.15) !important;
}

.req-empty{
  background-color:#e0f2fe !important;
  transition:background-color .15s ease;
}

.req-empty:focus{
  outline:0;
  box-shadow:0 0 0 2px rgba(59,130,246,.2);
}

.has-field-error{
  display:flex;
  flex-direction:column;
}