/* =================================================================
   JRI Core — formularios
   Primitivas del diseño: rejilla, etiquetas, campos, casillas y avisos.

   Las usan la sección `Formulario` (solicitar cotización) y el checkout de
   WooCommerce. Vivían solo en `woo/formularios.css` porque el carrito fue lo
   primero que las necesitó; el puente con el marcado de WooCommerce sigue
   allí, que eso sí es específico suyo.
   ================================================================= */
/* ---------------- Primitivas ---------------- */
.jri-form-page { max-width: 900px; }

.jri-form-intro {
  font-size: 15px;
  color: var(--text-muted-2);
  margin-bottom: var(--space-7);
  max-width: 70ch;
}
.jri-form-intro--center { text-align: center; margin-inline: auto; }

.jri-form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
}
.jri-form-grid--single { grid-template-columns: 1fr; }

.jri-form-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.jri-form-field--full { grid-column: 1 / -1; }

.jri-form-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--near-black);
}

fieldset.jri-form-field { border: none; margin: 0; padding: 0; }
fieldset.jri-form-field > .jri-form-label { padding: 0; margin-bottom: 6px; }

.jri-input,
.jri-textarea,
.jri-select {
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  padding: 12px 14px;
  border: 1px solid var(--gray-150);
  border-radius: var(--radius-md);
  background: var(--white);
  color: var(--text);
  width: 100%;
  transition: border-color .2s, box-shadow .2s;
}
.jri-textarea { resize: vertical; min-height: 110px; line-height: 1.6; }

.jri-input::placeholder,
.jri-textarea::placeholder { color: var(--text-muted); }

.jri-input:focus,
.jri-textarea:focus,
.jri-select:focus {
  outline: none;
  border-color: var(--brand-gold);
  box-shadow: 0 0 0 3px rgba(247, 236, 0, .35);
}

/* `:user-invalid` solo marca el campo después de que el usuario lo haya
   tocado; `:invalid` lo pintaría en rojo nada más cargar la página. */
.jri-input:user-invalid,
.jri-textarea:user-invalid { border-color: #C81E1E; }

.jri-check-group { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-6); }
.jri-check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted-2);
  cursor: pointer;
  line-height: 1.5;
}
.jri-check input { flex: none; width: 17px; height: 17px; margin-top: 2px; accent-color: var(--brand-gold); }
.jri-check a { color: var(--near-black); text-decoration: underline; }
.jri-check a:hover { color: var(--brand-gold); }

.jri-form-hint { font-size: 12px; color: var(--text-muted); line-height: 1.6; }
.jri-form-hint a { color: var(--near-black); text-decoration: underline; }

.jri-form > .jri-btn { margin-top: var(--space-7); }

.jri-fieldset { border: none; margin: 0 0 var(--space-8); padding: 0; }
.jri-fieldset-title {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  padding: 0 0 var(--space-4);
  margin-bottom: var(--space-5);
  border-bottom: 2px solid var(--brand-yellow);
  width: 100%;
}

/* ---------------- Avisos de envío ---------------- */
.jri-form-aviso {
  margin: 0 0 var(--space-6);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  border-left: 4px solid var(--brand-yellow);
  background: var(--gray-100);
  font-size: 14px;
  font-weight: 600;
}
.jri-form-aviso--error { border-left-color: #C81E1E; }

/* El campo trampa tiene que estar en el DOM y ser invisible sin usar
   `display:none`: algunos robots ignoran los campos ocultos así. */
.jri-trampa {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.jri-required { color: #C81E1E; font-weight: 700; }

/* ---------------- Nota legal bajo el formulario ---------------- */
.jri-legal-note {
  margin-top: var(--space-9);
  padding: var(--space-7);
  background: var(--gray-100);
  border-left: 4px solid var(--brand-yellow);
  border-radius: var(--radius-lg);
}
.jri-legal-note-title {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: var(--space-4);
}
.jri-legal-note p { font-size: 13px; line-height: 1.8; color: var(--text-muted-2); margin-bottom: var(--space-3); }
.jri-legal-note p:last-child { margin-bottom: 0; }
.jri-legal-note a { color: var(--near-black); text-decoration: underline; }
.jri-legal-note a:hover { color: var(--brand-gold); }

.jri-legal-defs { margin-bottom: var(--space-5); }
.jri-legal-defs dt { font-weight: 700; font-size: 14px; }
.jri-legal-defs dd { margin: 0 0 var(--space-3); font-size: 13px; color: var(--text-muted-2); }

/* La casilla de aceptación lleva un párrafo dentro del label. */
.jri-check > span { display: block; }