/* ============================================================
   campos.css — los campos configurables de cada tipo de asunto.

   Se usan en tres sitios: el bloque "Datos del asunto" de Nuevo
   asunto, el mismo bloque al editar, y el cuadro de "Campos" de
   Ajustes (que además usa las filas de css/ajustes.css para el
   catálogo y las filas ya puestas).
   ============================================================ */

/* El cuadro de Editar un asunto, cuando el tipo trae campos propios:
   con ellos de más puede quedarse más alto que la pantalla, y el
   cuadro normal no tiene manera de bajar para ver el botón de
   Guardar. Aquí se le deja bajar por dentro, sin agrandarlo a lo
   ancho como el de Campos de Ajustes (`cuadro-ancho`). */
.cuadro-alto {
  max-height: calc(100vh - 40px);
  overflow: auto;
}

.campos-lista { display: flex; flex-direction: column; gap: 10px; margin: 10px 0 4px; }

.campo-fila {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: #f7f9fc; border: 1px solid var(--linea); border-radius: 8px;
  padding: 10px 12px;
}
.campo-fila > .etiqueta { margin: 0; flex: 0 0 170px; }
.campo-fila > .campo { flex: 1 1 200px; width: auto; }
.campo-fila > .interruptor-fila { flex: 0 0 auto; }

@media (max-width: 700px) {
  .campo-fila { flex-direction: column; align-items: stretch; }
  .campo-fila > .etiqueta { flex: none; }
}