/* ============================================================
   components/form.css — campos, avisos y consentimiento
   Par de resources/views/components/field.blade.php

   Los tres formularios del sitio (contacto, cotización y Libro de
   Reclamaciones) tenían ESTE MISMO CSS repetido con tres prefijos
   distintos (.ct-, .cot-, .lr-): unas 60 líneas duplicadas y `.req`
   declarado tres veces. Cada página conserva solo lo suyo (la rejilla,
   los fieldsets, los radios del Libro).

   Donde los tres valores no coincidían se tomó el que estaba en 2 de 3.
   ============================================================ */

/* ---- Formulario ---- */
.form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.form .btn { align-self: flex-start; }

/* Dos columnas que se apilan en pantalla chica. */
.form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}
@media (max-width: 520px) {
  .form__row { grid-template-columns: 1fr; }
}

/* ---- Campo ---- */
.field {
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.field--grow { flex: 1 1 60%; }

.field label,
.field__label {
  font-weight: 700;
  font-size: .9rem;
  color: var(--color-ink);
}

/* El asterisco de campo obligatorio. */
.req { color: var(--color-danger); }

/* Las casillas y los radios quedan fuera: son controles con forma propia.
   La regla anterior (`.lr-field input`) sí los alcanzaba, y por eso los
   radios apilados del Libro salían con el control estirado a todo el
   ancho y el texto empujado al otro extremo de la línea. */
.field input:not([type="checkbox"]):not([type="radio"]),
.field select,
.field textarea {
  font: inherit;
  color: var(--color-ink);
  background: var(--color-bg);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: .6em .8em;
  width: 100%;
}
.field textarea { resize: vertical; }

.field input:not([type="checkbox"]):not([type="radio"]):focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: none;
  border-color: var(--color-brand-green);
  box-shadow: 0 0 0 3px rgba(0, 152, 72, .15);
}

.field__error {
  color: var(--color-danger);
  font-size: .85rem;
  font-weight: 600;
  margin: 0;
}

/* ---- Casilla (consentimiento, "es menor de edad"…) ---- */
.form__check {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
}
.form__check input {
  margin-top: .2rem;
  accent-color: var(--color-brand-green);
}
.form__check label {
  font-weight: 400;
  font-size: .92rem;
  color: var(--color-text-body);
}

/* El consentimiento del Libro va en una caja: la ley pide que se lea. */
.form__check--boxed {
  background: var(--color-surface-tint);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: .9rem 1rem;
}

/* ---- Avisos ---- */
.form__alert {
  background: var(--color-danger-bg);
  border: 1px solid var(--color-danger-border);
  color: var(--color-danger-strong);
  border-radius: var(--radius-sm);
  padding: .8rem 1rem;
  margin-bottom: var(--space-lg);
}
.form__alert--ok {
  background: var(--color-surface-tint);
  border-color: var(--color-brand-green);
  color: var(--color-brand-green-text);
  font-weight: 500;
}

/* ---- Honeypot ---- */
/* Fuera de vista para personas, a la mano para los bots. No usa
   `display:none`: algunos bots saltan justamente lo que está oculto así. */
.form__honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}