/* ============================================================
   BVT · Formulario de reserva
   wp-content/mu-plugins/bvt-reservas/form.css

   Todo cuelga de .bvt-reserva, que es el <form>. Nunca se usa el
   combinador ">" : Elementor mete divs propios en el medio y las
   reglas de hijo directo dejan de matchear sin avisar.

   --- Por qué la clase va repetida y por qué el !important ---
   Este archivo compite con el tema y con el kit de Elementor, que estilan
   input, button y select por su cuenta y a veces con !important propio.
   Son dos defensas y hacen falta las dos: la clase repetida sube la
   especificidad y desempata cuando el otro también fuerza; el !important
   gana cuando el otro no fuerza pero es más específico. Además el archivo
   se enqueue con prioridad 20, para cargar después de Elementor y ganar
   también los empates por orden de aparición.

   Al agregar reglas nuevas, mantener las dos cosas. Las variables (--x) no
   se fuerzan: no las pisa nadie, se resuelven donde se usan.
   ============================================================ */

.bvt-reserva.bvt-reserva{
  --uva-900:#2C0E42; --uva-800:#3E1259; --uva-700:#5B1D7E; --uva-500:#8A3FB0;
  --oro:#E8B21E; --oro-soft:#F7DA8C; --oro-ink:#8A6A0B;
  --wa:#1EB255; --wa-d:#159447; --req:#B2364A;
  --ink:#241C2B; --ink-70:#584C63; --ink-50:#8A7F93;
  --line:#E6DEEC; --niebla:#F8F5FA; --lila:#F3ECF7; --campo:#FBF9FC;
  /* Los separadores van más suaves que el borde de un input: no dividen
     nada que haya que mirar, solo ordenan. */
  --linea-suave:#EFE9F4;

  display:block !important;
  position:relative !important;      /* para que el honeypot quede adentro y lo recorte overflow */
  background:#fff !important;
  border:1px solid var(--line) !important;
  border-radius:16px !important;
  overflow:hidden !important;
  box-shadow:0 20px 44px -30px rgba(44,14,66,.7) !important;
  color:var(--ink) !important;
  font-family:'Work Sans','Segoe UI',system-ui,sans-serif !important;
  font-size:15px !important;
  line-height:1.55 !important;
}

/* reset local: el tema trae margenes y list-style propios */
.bvt-reserva.bvt-reserva *{ box-sizing:border-box !important }
/* algunos temas ponen display en todo y le ganan al atributo hidden */
.bvt-reserva.bvt-reserva [hidden]{ display:none !important }
.bvt-reserva.bvt-reserva p{ margin:0 !important }
.bvt-reserva.bvt-reserva h3{ margin:0 !important }
.bvt-reserva.bvt-reserva .bvt-i{
  width:20px !important; height:20px !important; flex:none !important;
  fill:none !important; stroke:currentColor !important; stroke-width:2 !important; stroke-linecap:round !important; stroke-linejoin:round !important;
}

/* --- cabecera --- */
.bvt-reserva.bvt-reserva .bvt-head{
  padding:15px 20px !important; color:#fff !important;
  background:linear-gradient(148deg,var(--uva-800),var(--uva-700)) !important;
}
.bvt-reserva.bvt-reserva .bvt-head h3{
  font-family:REM,'Segoe UI',sans-serif !important; font-size:23px !important; font-weight:600 !important; letter-spacing:-.015em !important;
}
.bvt-reserva.bvt-reserva .bvt-head p{ font-size:13px !important; color:rgba(255,255,255,.82) !important; margin-top:4px !important }
.bvt-reserva.bvt-reserva .bvt-flag{
  display:inline-block !important; margin-top:9px !important; padding:3px 10px !important; border-radius:999px !important;
  background:var(--oro-soft) !important; color:var(--oro-ink) !important;
  font-size:11px !important; font-weight:600 !important; letter-spacing:.08em !important; text-transform:uppercase !important;
}

.bvt-reserva.bvt-reserva .bvt-body{ padding:20px 20px 22px !important; display:flex !important; flex-direction:column !important; gap:18px !important }

/* --- campos ---
   Las etiquetas van en 500, no en 600: a 14 px la REM en semibold pesa
   demasiado y el formulario entero se lee gritado. Lo que separa una etiqueta
   del texto de un input no es la negrita, es el tamaño y el color —la misma
   regla que el resto del sitio. El 600 queda para lo que de verdad manda:
   el título de la cabecera, los números de los contadores y los botones. */
.bvt-reserva.bvt-reserva .bvt-campo{ display:flex !important; flex-direction:column !important; gap:6px !important; min-width:0 !important }
.bvt-reserva.bvt-reserva .bvt-campo label{
  display:flex !important; align-items:baseline !important; justify-content:space-between !important; gap:12px !important;
  font-family:REM,'Segoe UI',sans-serif !important; font-size:14px !important; font-weight:500 !important; color:var(--ink) !important;
}
.bvt-reserva.bvt-reserva .bvt-req{ color:var(--req) !important; font-weight:500 !important }
.bvt-reserva.bvt-reserva .bvt-opc{ font-size:12px !important; font-weight:500 !important; color:var(--ink-50) !important }

.bvt-reserva.bvt-reserva input[type=text],
.bvt-reserva.bvt-reserva input[type=email],
.bvt-reserva.bvt-reserva input[type=tel],
.bvt-reserva.bvt-reserva input[type=date],
.bvt-reserva.bvt-reserva select,
.bvt-reserva.bvt-reserva textarea{
  width:100% !important; min-height:46px !important; padding:10px 13px !important;
  font-family:'Work Sans','Segoe UI',sans-serif !important; font-size:15.5px !important; color:var(--ink) !important;
  background:var(--campo) !important; border:1.5px solid var(--line) !important; border-radius:11px !important;
  box-shadow:none !important; transition:border-color .15s, box-shadow .15s, background .15s !important;
}
.bvt-reserva.bvt-reserva textarea{ min-height:76px !important; resize:vertical !important; line-height:1.5 !important }
.bvt-reserva.bvt-reserva input::placeholder,
.bvt-reserva.bvt-reserva textarea::placeholder{ color:#A79CAF !important; opacity:1 !important }
.bvt-reserva.bvt-reserva input:focus,
.bvt-reserva.bvt-reserva select:focus,
.bvt-reserva.bvt-reserva textarea:focus{
  outline:none !important; background:#fff !important; border-color:var(--uva-500) !important;
  box-shadow:0 0 0 3px rgba(138,63,176,.16) !important;
}
/* el navegador marca en rojo recién después de intentar enviar */
.bvt-reserva.bvt-reserva.se-valido input:invalid,
.bvt-reserva.bvt-reserva.se-valido select:invalid{ border-color:var(--req) !important }

.bvt-reserva.bvt-reserva select{
  appearance:none !important; -webkit-appearance:none !important; cursor:pointer !important; padding-right:44px !important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A7F93' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important; background-position:right 15px center !important; background-size:18px !important;
}


/* --- contadores − / + ---
   Los dos van en dos columnas, con la etiqueta ARRIBA del stepper. Puestos
   uno al lado del otro en la misma línea entran solo arriba de ~420px de
   formulario, y abajo de eso se apilan y el bloque vuelve a medir lo mismo
   que antes. Así, en cambio, cada columna necesita apenas el ancho del
   stepper y las dos entran a cualquier ancho, teléfono incluido.
   La aclaración de las edades se dice una vez arriba y no en cada fila: era
   lo que metía una segunda línea en la etiqueta y estiraba las dos filas. */
.bvt-reserva.bvt-reserva .bvt-grupo{
  display:flex !important; flex-wrap:wrap !important; gap:12px 16px !important;
  padding:16px 0 !important; border-top:1px solid var(--linea-suave) !important; border-bottom:1px solid var(--linea-suave) !important;
}
.bvt-reserva.bvt-reserva .bvt-grupo-t{
  flex:1 1 100% !important;
  font-family:REM,'Segoe UI',sans-serif !important; font-size:14px !important; font-weight:500 !important; color:var(--ink) !important; margin-bottom:-2px !important;
}
.bvt-reserva.bvt-reserva .bvt-grupo-t span{ font-size:12.5px !important; color:var(--ink-50) !important }
.bvt-reserva.bvt-reserva .bvt-conteo{
  flex:1 1 130px !important;
  display:flex !important; flex-direction:column !important; align-items:stretch !important; gap:6px !important;
}
.bvt-reserva.bvt-reserva .bvt-conteo-lab{
  font-family:REM,'Segoe UI',sans-serif !important; font-size:14.5px !important; font-weight:500 !important; color:var(--ink) !important;
}

/* El contador es un campo más: misma altura, mismo fondo, mismo borde y mismo
   radio que un input. Antes eran tres círculos sueltos flotando al lado de una
   etiqueta, que no se parecían a ningún otro control del formulario. */
.bvt-reserva.bvt-reserva .bvt-stepper{
  display:flex !important; align-items:center !important; justify-content:space-between !important;
  width:100% !important; min-height:46px !important; padding:0 3px !important;
  background:var(--campo) !important; border:1.5px solid var(--line) !important; border-radius:11px !important;
}
.bvt-reserva.bvt-reserva .bvt-stepper button{
  width:38px !important; height:38px !important; flex:none !important; padding:0 !important;
  border:0 !important; border-radius:50% !important; background:transparent !important;
  color:var(--uva-700) !important; font-size:19px !important; font-weight:400 !important; line-height:1 !important; cursor:pointer !important;
  transition:background .15s, color .15s, opacity .15s !important;
}
.bvt-reserva.bvt-reserva .bvt-stepper button:hover{ background:var(--lila) !important; color:var(--uva-800) !important }
.bvt-reserva.bvt-reserva .bvt-stepper button[disabled]{ opacity:.3 !important; cursor:default !important }
.bvt-reserva.bvt-reserva .bvt-stepper button[disabled]:hover{ background:transparent !important }
.bvt-reserva.bvt-reserva .bvt-stepper output{
  flex:1 !important; text-align:center !important;
  font-family:REM,'Segoe UI',sans-serif !important; font-size:17px !important; font-weight:600 !important; color:var(--ink) !important;
  font-variant-numeric:tabular-nums !important;
}

/* --- campo condicional (edades) --- */
.bvt-reserva.bvt-reserva .bvt-cond{ flex:1 1 100% !important; display:none !important; padding-top:4px !important }
.bvt-reserva.bvt-reserva .bvt-cond.is-visible{ display:flex !important }

/* --- desplegable --- */
.bvt-reserva.bvt-reserva .bvt-extras{ border-bottom:1px solid var(--linea-suave) !important; padding-bottom:16px !important }
.bvt-reserva.bvt-reserva .bvt-extras summary{
  display:flex !important; align-items:center !important; gap:12px !important; padding:2px 0 !important;
  list-style:none !important; cursor:pointer !important;
  font-family:REM,'Segoe UI',sans-serif !important; font-size:14.5px !important; font-weight:500 !important; color:var(--ink) !important;
}
.bvt-reserva.bvt-reserva .bvt-extras summary::-webkit-details-marker{ display:none !important }
.bvt-reserva.bvt-reserva .bvt-mas{
  width:16px !important; flex:none !important; text-align:center !important; font-size:21px !important; line-height:1 !important;
  color:var(--uva-500) !important; transition:transform .2s ease !important;
}
.bvt-reserva.bvt-reserva .bvt-extras[open] .bvt-mas{ transform:rotate(45deg) !important }
.bvt-reserva.bvt-reserva .bvt-extras summary .bvt-opc{ margin-left:auto !important }
.bvt-reserva.bvt-reserva .bvt-extras-body{ display:flex !important; flex-direction:column !important; gap:12px !important; margin-top:13px !important }

/* --- honeypot: fuera de pantalla, no display:none (los bots lo detectan) --- */
.bvt-reserva.bvt-reserva .bvt-hp{
  position:absolute !important; left:-9999px !important; width:1px !important; height:1px !important; overflow:hidden !important;
}

/* --- botones --- */
.bvt-reserva.bvt-reserva .bvt-acciones{ display:flex !important; flex-direction:column !important; gap:10px !important; margin-top:4px !important }
.bvt-reserva.bvt-reserva .bvt-btn{
  display:flex !important; align-items:center !important; justify-content:center !important; gap:10px !important;
  width:100% !important; min-height:50px !important; padding:0 16px !important;
  border:1.5px solid transparent !important; border-radius:12px !important;
  font-family:REM,'Segoe UI',sans-serif !important; font-size:16.5px !important; font-weight:600 !important; letter-spacing:-.005em !important;
  cursor:pointer !important; text-decoration:none !important;
  transition:background .18s, transform .1s, box-shadow .18s, opacity .18s !important;
}
.bvt-reserva.bvt-reserva .bvt-btn-wa{ background:var(--wa) !important; color:#fff !important; box-shadow:0 10px 20px -12px rgba(21,148,71,.95) !important }
.bvt-reserva.bvt-reserva .bvt-btn-wa:hover{ background:var(--wa-d) !important }
.bvt-reserva.bvt-reserva .bvt-btn-mail{ background:#fff !important; color:var(--uva-700) !important; border-color:var(--uva-700) !important }
.bvt-reserva.bvt-reserva .bvt-btn-mail:hover{ background:var(--lila) !important }
.bvt-reserva.bvt-reserva .bvt-btn:active{ transform:translateY(1px) !important }
.bvt-reserva.bvt-reserva .bvt-btn[disabled]{ opacity:.6 !important; cursor:default !important; transform:none !important }

.bvt-reserva.bvt-reserva .bvt-micro{ font-size:12px !important; line-height:1.45 !important; color:var(--ink-50) !important; text-align:center !important }

/* --- aviso de resultado --- */
.bvt-reserva.bvt-reserva .bvt-aviso{
  padding:11px 14px !important; border-radius:11px !important; font-size:14px !important; line-height:1.5 !important;
  background:var(--lila) !important; color:var(--uva-800) !important; border:1.5px solid #DCC9E8 !important;
}
.bvt-reserva.bvt-reserva .bvt-aviso.es-error{ background:#FDF1F3 !important; color:#8C2033 !important; border-color:#F0C9D0 !important }
.bvt-reserva.bvt-reserva .bvt-aviso a{ color:inherit !important; font-weight:600 !important }

/* --- enviado: se reemplaza el cuerpo por el agradecimiento --- */
.bvt-reserva.bvt-reserva.es-enviado .bvt-acciones,
.bvt-reserva.bvt-reserva.es-enviado .bvt-micro{ display:none !important }

/* --- mobile --- */
@media (max-width:767px){
  .bvt-reserva.bvt-reserva input[type=text],
  .bvt-reserva.bvt-reserva input[type=email],
  .bvt-reserva.bvt-reserva input[type=tel],
  .bvt-reserva.bvt-reserva input[type=date],
  .bvt-reserva.bvt-reserva select,
  .bvt-reserva.bvt-reserva textarea{ font-size:16px !important; min-height:50px !important } /* 16px o iOS hace zoom al enfocar */
  .bvt-reserva.bvt-reserva .bvt-stepper{ min-height:50px !important }
  .bvt-reserva.bvt-reserva .bvt-stepper button{ width:40px !important; height:40px !important }
  .bvt-reserva.bvt-reserva .bvt-head,
  .bvt-reserva.bvt-reserva .bvt-body{ padding-left:17px !important; padding-right:17px !important }
}