/* Contenedor general del form */

#consulta-form {

  display: grid;

  gap: 1rem;

  width: 100%;

  max-width: 1200px;

  box-sizing: border-box;

  margin: 0; 

}



/* ---------- Fila de selects ---------- */

#consulta-form .campos-select {

  display: flex;

  gap: 1rem;

  align-items: end;

  flex-wrap: wrap;

}



#consulta-form .campos-select .field {

  display: flex;

  flex-direction: column;

  min-width: 500px;   

  width: auto;

}



#consulta-form .campos-select .field label {

  margin-bottom: 0.25rem;

  font-size: 0.95rem;

  color: #374151;

  font-weight: 600;

}



/* ---------- Filas de input text ---------- */

#consulta-form .row.texto {

  display: grid;

  grid-template-columns: 160px 1fr; 

  gap: 1rem;

  align-items: center;

}



#consulta-form .row.texto label {

  margin: 0;

  text-align: left;

  font-weight: 600;

  color: #374151;

  font-size: 0.95rem;

}



#consulta-form input[type="text"],

#consulta-form select {

  width: 100%;

  height: 44px;

  padding: 0 0.75rem;

  border-radius: 0.6rem;

  border: 1px solid #d1d5db;

  box-sizing: border-box;

  font-size: 0.95rem;

  background: #fff;

}



#consulta-form .form-error {

  grid-column: 1 / -1;

  display: none; 

  color: #b91c1c;

  background: #fff1f2;

  padding: 0.5rem;

  border-radius: 0.5rem;

}



/* ---------- Botones / acciones ---------- */

#consulta-form .botones {

  display: flex;

  justify-content: flex-end;

  gap: 0.75rem;

  margin-top: 0.25rem;

}



/* ---------- Móviles: apilar y mejorar legibilidad ---------- */

@media (max-width: 720px) {

  /* selects se ordenan verticalmente */

  #consulta-form .campos-select {

    flex-direction: column;

    gap: 0.75rem;

  }



  /* label encima del input */

  #consulta-form .row.texto {

    grid-template-columns: 1fr;

  }

  #consulta-form .row.texto label {

    text-align: left;

    margin-bottom: 0.25rem;

  }



  /* acciones: botones apilados */

  #consulta-form .botones {

    flex-direction: column;

    gap: 0.5rem;

  }

  #consulta-form .botones .button {

    width: 100%;

    min-width: 0;

  }

}



/* Evita que selects se vean muy estrechos en pantallas muy grandes */

#consulta-form .campos-select .field select {

  min-width: 220px;

  max-width: 340px;

}



/* Separación entre el título de la sección y el formulario */

section > h1 {

  margin-bottom: 0.75rem;

  color: #4f46e5;

}