/* ============================================================
   campos.css — Formularios: etiquetas, controles, casillas.

   Estaba dentro de formulario.css, que solo se carga en el
   formulario de registro. Las demás páginas con formulario (el
   acceso administrativo, los filtros del reporte) usaban `.campo`
   sin esa hoja, y la etiqueta acababa montada sobre el control.
   Ahora esto va en todas las páginas y formulario.css se queda
   con lo que de verdad es del registro.

   Depende de: base.css
   ============================================================ */

/* ---------- Secciones ---------- */
.formulario__seccion {
  /* Un <fieldset> no encoge por debajo de su contenido salvo que se
     le fuerce: sin esto desborda en pantallas estrechas. */
  min-width: 0;
  margin: 0 0 var(--espacio-6);
  padding: var(--espacio-6) clamp(var(--espacio-4), 3vw, var(--espacio-6));
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-lg);
  background-color: var(--color-superficie-alt);
}

.formulario__leyenda {
  max-width: 100%;
  padding: var(--espacio-1) var(--espacio-4);
  margin-left: calc(var(--espacio-2) * -1);
  border-radius: var(--radio-full);
  background-color: var(--color-primario);
  color: #ffffff;
  font-size: var(--texto-sm);
  font-weight: 600;
  letter-spacing: var(--track-suelto);
  text-transform: uppercase;
}

.formulario__subtitulo {
  margin: var(--espacio-6) 0 var(--espacio-4);
  padding-bottom: var(--espacio-2);
  border-bottom: 1px solid var(--color-borde);
  font-size: var(--texto-sm);
  font-weight: 600;
  letter-spacing: var(--track-suelto);
  text-transform: uppercase;
  color: var(--color-texto-suave);
}

.formulario__subtitulo:first-of-type { margin-top: var(--espacio-2); }

/* ---------- Rejilla de campos ----------
   Se adapta sola al ancho disponible: sin media queries. */
.campos {
  display: grid;
  /* min(): evita que el mínimo de columna supere al contenedor
     en pantallas estrechas y desborde la tarjeta. */
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  gap: var(--espacio-4) var(--espacio-5);
  margin-bottom: var(--espacio-5);
}

.campos:last-child { margin-bottom: 0; }
.campos--dos { grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr)); }
.campos--uno { grid-template-columns: 1fr; }

.campo { min-width: 0; }
.campo--ancho { grid-column: 1 / -1; }

/* ---------- Etiquetas y controles ---------- */
/* `:not(.casilla)` evita que esta regla gane sobre el bloque de la
   casilla de aceptación, que necesita su propia maquetación. */
.campo label,
.formulario label:not(.casilla) {
  display: block;
  margin-bottom: var(--espacio-2);
  font-size: var(--texto-sm);
  font-weight: 600;
  color: var(--color-texto);
  line-height: 1.35;
}

.requerido {
  color: var(--color-error);
  font-weight: 700;
}

.formulario input,
.formulario select,
.formulario textarea {
  width: 100%;
  min-height: 2.75rem;
  padding: var(--espacio-3) var(--espacio-4);
  border: 1px solid var(--color-borde-fuerte);
  border-radius: var(--radio-sm);
  background-color: var(--color-superficie);
  font-size: var(--texto-md);
  transition: border-color var(--transicion), box-shadow var(--transicion);
}

.formulario textarea { resize: vertical; min-height: 6rem; }

.formulario input:hover,
.formulario select:hover,
.formulario textarea:hover { border-color: var(--color-primario-suave); }

.formulario input:focus,
.formulario select:focus,
.formulario textarea:focus {
  outline: none;
  border-color: var(--color-primario);
  box-shadow: 0 0 0 3px rgba(7, 81, 159, 0.16);
}

/* Validación nativa: solo se colorea cuando el campo ya se tocó */
.formulario input:user-invalid,
.formulario select:user-invalid {
  border-color: var(--color-error);
  box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.12);
}

.formulario input:user-valid,
.formulario select:user-valid { border-color: var(--color-exito); }

.campo__ayuda {
  display: block;
  margin-top: var(--espacio-2);
  font-size: var(--texto-xs);
  font-weight: 400;
  color: var(--color-texto-suave);
  line-height: 1.4;
}

.campo label .campo__ayuda {
  display: inline;
  font-weight: 400;
}

.campo[hidden] { display: none; }

/* ---------- Acciones ---------- */
.formulario__acciones {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--espacio-4);
  margin-top: var(--espacio-7);
  padding-top: var(--espacio-6);
  border-top: 1px solid var(--color-borde);
}

.formulario__acciones .btn { min-width: 18rem; }

.formulario__nota {
  margin: 0;
  text-align: center;
  font-size: var(--texto-xs);
  color: var(--color-texto-suave);
  max-width: 34rem;
}

/* ---------- Casilla de aceptación ---------- */
.casilla {
  display: flex;
  align-items: flex-start;
  gap: var(--espacio-3);
  margin-bottom: var(--espacio-5);
  padding: var(--espacio-4);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-md);
  background-color: var(--color-superficie-alt);
  cursor: pointer;
  transition: border-color var(--transicion), background-color var(--transicion);
}

.casilla:hover { border-color: var(--color-primario-suave); }

.casilla:has(input:checked) {
  border-color: var(--color-primario);
  background-color: var(--color-primario-tenue);
}

.casilla input[type="checkbox"] {
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.15rem;
  flex: 0 0 auto;
  accent-color: var(--color-primario);
  cursor: pointer;
}

.casilla span {
  font-weight: 400;
  font-size: var(--texto-sm);
  color: var(--color-texto);
  line-height: 1.5;
}


/* Un campo suelto, fuera de la rejilla `.campos` (el acceso
   administrativo tiene uno solo): sin esto queda pegado al botón,
   porque el margen lo pone la rejilla, no el campo. */
.formulario > .campo { margin-bottom: var(--espacio-4); }