/* ==========================================================================
   bilzur · forms.css — COMPONENTE reutilizable "form panel" (Contact Form 7)
   Cargado GLOBALMENTE (cadena de enqueue principal). Estiliza cualquier CF7
   dentro de un .bzr-form-panel. Tokens --bzr-*, sin hex sueltos salvo iconos
   en data-URI (chevron del select, check del RGPD) y el gradiente del botón
   (mismo que .bzr-btn--primary en overrides.css).

   Estructura (receta completa en docs/infraestructura/theme/form-panel.reference.md):
     .bzr-form-panel[ .bzr-form-panel--brandmark ]   → tarjeta navy (+ "B" opcional)
       .bzr-form-grid                                → dos columnas (aside · form)
         .bzr-form-aside                             → kicker + h2 + copy + .bzr-form-reassure
         .bzr-form-wrap                              → [contact-form-7 ...]
           .bzr-form                                 → cuerpo del formulario (markup CF7)
             .bzr-form-row[ .bzr-form-row--2 ]       → fila de 1 o 2 columnas
               .bzr-form-field                       → .bzr-form-label + control
             .bzr-form-consent                       → acceptance RGPD
             .bzr-form-actions                       → submit

   REQUIERE el filtro wpcf7_autop_or_not=false (functions.php): sin él, wpautop
   inyecta <p>/<br> y rompe el grid y el ritmo.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1) PANEL (navy) + MARCA DE AGUA "B" opcional (--brandmark)
   Se combina con .bzr-card (radio/borde base) en el HTML. Inerte hasta usarse.
   -------------------------------------------------------------------------- */
.bzr-form-panel{
  position:relative;
  overflow:hidden;
  border-color:transparent;
  color:var(--bzr-color-on-dark);
  background:var(--bzr-color-brand-navy);
  box-shadow:var(--bzr-shadow-window);
  padding:clamp(1.75rem,5vw,4rem) clamp(1.25rem,4vw,3rem);
}
.bzr-form-panel > *{position:relative;z-index:1}

/* --------------------------------------------------------------------------
   2) DOS COLUMNAS — aside (texto) · formulario
   -------------------------------------------------------------------------- */
.bzr-form-grid{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:clamp(2rem,4vw,3.5rem);
  align-items:stretch;
}
.bzr-form-aside{position:relative}
.bzr-form-aside > *{position:relative;z-index:1}
/* La "B" de marca (opt-in) rellena el hueco BAJO el texto, anclada al fondo de la
   columna izquierda (el aside se estira a la altura del form). z-index bajo el
   contenido; la opacidad la lleva el pseudo. */
.bzr-form-panel--brandmark .bzr-form-aside::after{
  content:"";
  position:absolute;
  left:-1rem;
  bottom:var(--bzr-space-4);
  width:min(22rem,110%);
  height:44%;
  pointer-events:none;
  opacity:.08;
  z-index:0;
  background:url("../img/logo/b-bilzur-blanco.png") left bottom / contain no-repeat;
}
.bzr-form-aside .bzr-kicker{color:var(--bzr-color-kicker-on-dark)}
.bzr-form-aside .bzr-h2{color:var(--bzr-color-on-dark)}
/* Remate del titular en periwinkle claro (marca), NO turquesa: la turquesa está
   reservada a dinero/en vivo (ver overrides.css §3). */
.bzr-form-aside .bzr-accent{color:var(--bzr-color-kicker-on-dark)}
.bzr-form-aside .bzr-copy{color:var(--bzr-color-on-dark-muted)}
.bzr-form-reassure{
  margin:var(--bzr-space-3) 0 0;
  font-size:.8125rem;
  font-weight:600;
  letter-spacing:.01em;
  color:var(--bzr-color-kicker-on-dark);
}
/* Vías de contacto directo (tel · WhatsApp) — pills sobre el navy, opt-in.
   El icono va como SVG inline en el markup del aside. */
.bzr-form-contact{
  display:flex;
  flex-wrap:wrap;
  gap:var(--bzr-space-2);
  margin:var(--bzr-space-4) 0 0;
}
.bzr-form-contact a{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.5rem .875rem;
  border-radius:var(--bzr-radius-pill);
  border:.0625rem solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.06);
  color:var(--bzr-color-on-dark);
  font-size:.875rem;
  font-weight:600;
  text-decoration:none;
  transition:background var(--bzr-motion-fast) var(--bzr-ease),
             border-color var(--bzr-motion-fast) var(--bzr-ease);
}
.bzr-form-contact a:hover{
  background:rgba(255,255,255,.12);
  border-color:var(--bzr-color-accent);
}
.bzr-form-contact svg{width:1.05rem;height:1.05rem;flex:none}
/* El logo de WhatsApp en su verde de marca (#25D366) para que destaque; el resto
   de iconos heredan currentColor. El SVG usa fill="currentColor" en el markup. */
.bzr-form-contact a[href^="https://wa.me"] svg{color:#25D366}

/* --------------------------------------------------------------------------
   3) CONTENEDOR DEL FORMULARIO + defensa anti-wpautop
   -------------------------------------------------------------------------- */
.bzr-form-wrap{margin:0}
.bzr-form-wrap .wpcf7{margin:0}
.bzr-form-wrap .wpcf7 > form > p{margin:0}
.bzr-form br{display:none}

.bzr-form{
  display:flex;
  flex-direction:column;
  gap:var(--bzr-space-4);
}
.bzr-form-row{display:grid;gap:var(--bzr-space-4)}
.bzr-form-row--2{grid-template-columns:repeat(2,minmax(0,1fr))}

.bzr-form-field{
  display:flex;
  flex-direction:column;
  gap:.4375rem;
  margin:0;
}
/* Etiqueta de campo: tratada como "etiqueta de sistema" (versalitas + tracking)
   en periwinkle de marca, para que tenga jerarquía sin competir con el input. */
.bzr-form-label{
  font-size:.75rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--bzr-color-kicker-on-dark);
}
/* El wrap de CF7 es un <span> inline: lo forzamos a bloque para que el control
   ocupe todo el ancho de su campo. */
.bzr-form .wpcf7-form-control-wrap{display:block}

/* --------------------------------------------------------------------------
   4) CONTROLES (input · select · textarea) — blancos sobre el navy
   -------------------------------------------------------------------------- */
.bzr-form .wpcf7-form-control{
  width:100%;
  font-family:var(--bzr-font-body);
  font-size:.9375rem;
  color:var(--bzr-color-ink);
  background:var(--bzr-color-surface);
  border:.0625rem solid var(--bzr-color-border);
  border-radius:var(--bzr-radius-control);
  box-shadow:inset 0 .0625rem .125rem rgba(11,45,91,.05);
  transition:box-shadow var(--bzr-motion-base) var(--bzr-ease),
             border-color var(--bzr-motion-base) var(--bzr-ease);
}
.bzr-form .wpcf7-form-control:hover{border-color:var(--bzr-color-ring)}
.bzr-form input.wpcf7-form-control,
.bzr-form select.wpcf7-form-control{
  height:3rem;
  padding:0 var(--bzr-space-3);
}
.bzr-form textarea.wpcf7-form-control{
  min-height:7rem;
  padding:.75rem var(--bzr-space-3);
  line-height:1.55;
  resize:vertical;
}
.bzr-form .wpcf7-form-control::placeholder{color:var(--bzr-color-muted);opacity:1}

/* Foco de teclado accesible (mismo anillo del sistema) */
.bzr-form .wpcf7-form-control:focus,
.bzr-form .wpcf7-form-control:focus-visible{
  outline:none;
  border-color:var(--bzr-color-accent);
  box-shadow:var(--bzr-focus-ring);
}

/* Select: quitamos el cromo nativo y ponemos un chevron propio (icono en
   data-URI, trazo en navy-slate = --bzr-color-ink #10254D). */
.bzr-form select.wpcf7-form-control{
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  padding-right:2.5rem;
  cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2310254D' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right var(--bzr-space-3) center;
}

/* --------------------------------------------------------------------------
   5) CONSENTIMIENTO RGPD (acceptance)
   CF7 renderiza su propio <label> con el checkbox y una etiqueta vacía. Para
   evitar el <label> anidado, sacamos el control a una CANALETA absoluta a la
   izquierda y el texto fluye con sangría. Arreglo 100% CSS, sin tocar el form.
   -------------------------------------------------------------------------- */
.bzr-form-consent{
  display:block;
  position:relative;
  margin:0;
  padding-left:1.9rem;
  font-size:.8125rem;
  line-height:1.55;
  color:var(--bzr-color-on-dark-muted);
}
.bzr-form-consent .wpcf7-form-control-wrap{
  position:absolute;
  left:0;
  top:.05rem;
  width:auto;
}
.bzr-form-consent .wpcf7-acceptance,
.bzr-form-consent .wpcf7-list-item{margin:0;display:inline}
.bzr-form-consent .wpcf7-list-item-label{display:none}
.bzr-form-consent input[type="checkbox"]{
  -webkit-appearance:none;
  appearance:none;
  width:1.2rem;
  height:1.2rem;
  margin:0;
  border:.0625rem solid rgba(255,255,255,.4);
  border-radius:.375rem;
  background:rgba(255,255,255,.08);
  cursor:pointer;
  vertical-align:top;
  transition:background var(--bzr-motion-fast) var(--bzr-ease),
             border-color var(--bzr-motion-fast) var(--bzr-ease);
}
.bzr-form-consent input[type="checkbox"]:checked{
  background:var(--bzr-color-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / .85rem no-repeat;
  border-color:var(--bzr-color-accent);
}
.bzr-form-consent input[type="checkbox"]:focus-visible{
  outline:none;
  box-shadow:var(--bzr-focus-ring);
}
.bzr-form-consent a{
  color:var(--bzr-color-kicker-on-dark);
  text-decoration:underline;
  text-underline-offset:.125rem;
}
.bzr-form-consent a:hover{color:var(--bzr-color-on-dark)}

/* --------------------------------------------------------------------------
   6) BOTÓN DE ENVÍO — full-width, decisión clara
   El selector input[type=submit] gana a la clase .bzr-btn--primary, así que
   estilamos el submit de forma explícita.
   -------------------------------------------------------------------------- */
.bzr-form-actions{margin-top:var(--bzr-space-1)}
.bzr-form .wpcf7-submit{
  width:100%;
  height:3.25rem;
  border:.0625rem solid transparent;
  border-radius:var(--bzr-radius-control);
  font-family:var(--bzr-font-body);
  font-size:1.0625rem;
  font-weight:700;
  color:var(--bzr-color-on-dark);
  cursor:pointer;
  background:linear-gradient(180deg,#4A89FF,var(--bzr-color-accent));
  box-shadow:var(--bzr-shadow-button),inset 0 1px 0 rgba(255,255,255,.28);
  transition:transform var(--bzr-motion-base) var(--bzr-ease),
             box-shadow var(--bzr-motion-base) var(--bzr-ease);
}
.bzr-form .wpcf7-submit:hover{transform:translateY(-.0625rem)}
.bzr-form .wpcf7-submit:focus-visible{outline:none;box-shadow:var(--bzr-focus-ring)}
.bzr-form .wpcf7-spinner{margin:0 auto;display:block}

/* --------------------------------------------------------------------------
   7) VALIDACIÓN Y RESPUESTA
   -------------------------------------------------------------------------- */
.bzr-form .wpcf7-not-valid{
  border-color:var(--bzr-color-warning);
  box-shadow:0 0 0 .1875rem var(--bzr-color-warning-soft);
}
.bzr-form .wpcf7-not-valid-tip{
  margin-top:.375rem;
  font-size:.75rem;
  font-weight:600;
  color:var(--bzr-color-warning-soft);
}
.bzr-form-wrap .wpcf7-response-output{
  margin:var(--bzr-space-3) 0 0 !important;
  padding:.75rem var(--bzr-space-3) !important;
  border-radius:var(--bzr-radius-control);
  border:.0625rem solid rgba(255,255,255,.24) !important;
  background:rgba(255,255,255,.08);
  font-size:.8125rem;
  color:var(--bzr-color-on-dark);
}

/* --------------------------------------------------------------------------
   8) TURNSTILE (Cloudflare)
   Con flexbox reordenamos el widget para que caiga JUSTO antes del botón, aunque
   la integración lo inyecte arriba. Orden por defecto de los campos = 0.
   -------------------------------------------------------------------------- */
.bzr-form-consent{order:7}
.bzr-form .cf7-turnstile,
.bzr-form [class*="turnstile"]{order:8;margin-top:var(--bzr-space-1)}
.bzr-form-actions{order:9}

/* --------------------------------------------------------------------------
   9) CAMPOS OCULTOS — para valores inyectados por JS (p. ej. puente de la calc).
   No deben verse.
   -------------------------------------------------------------------------- */
.bzr-form-hidden{display:none}

/* --------------------------------------------------------------------------
   10) RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width:62rem){
  .bzr-form-grid{grid-template-columns:1fr;gap:2rem}
  /* La "B" ancla la columna izquierda; apilado en móvil se retira para no
     solaparse con el formulario. */
  .bzr-form-panel--brandmark .bzr-form-aside::after{display:none}
}
@media (max-width:34rem){
  .bzr-form-row--2{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
  .bzr-form .wpcf7-form-control,
  .bzr-form .wpcf7-submit,
  .bzr-form-consent input[type="checkbox"]{transition:none}
  .bzr-form .wpcf7-submit:hover{transform:none}
}