/* Estilos compartidos por todos los formularios del sitio: PQRS,
   seguimiento de PQRS, inicio de sesión y registro (panel/auth/).

   El sitio no tenía todavía un formulario propio (el único de Mobirise
   venía con estilos sueltos por página); nació con pqrs.html y se
   quedó aquí, genérico, para que login/registro no dupliquen las mismas
   reglas de nuevo. Sigue el mismo lenguaje visual de las tarjetas del
   sitio (.tema-card, .service-card): fondo blanco, borde suave, esquinas
   redondeadas y el rojo institucional como acento.

   .form-tarjeta es el contenedor; .form-enviar es siempre azul (nunca
   descarga un archivo, ver el estándar de color de botón en base.css). */

.form-tarjeta {
  background: #ffffff;
  border: 1px solid #e9ecef;
  border-top: 4px solid #e43f3f;
  border-radius: 10px;
  padding: 2rem;
}

/* Bloque de campos con su título, para que el formulario no se lea como
   una lista larga de 10 casillas seguidas. */
.form-bloque + .form-bloque {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid #f1f3f5;
}

.form-bloque-titulo {
  font-family: 'Jost', sans-serif;
  font-size: 19.2px;
  font-weight: 600;
  color: #031f89;
  margin-bottom: 1rem;
}

.form-campo {
  margin-bottom: 1rem;
}

.form-campo label {
  display: block;
  font-family: 'Jost', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin-bottom: 0.35rem;
}

/* Marca de campo obligatorio: se pinta con CSS y no escribiendo un "*"
   en cada etiqueta, para que no se olvide en ninguna. */
.form-campo label.obligatorio::after {
  content: ' *';
  color: #e43f3f;
}

.form-campo input,
.form-campo select,
.form-campo textarea {
  width: 100%;
  font-family: 'Jost', sans-serif;
  font-size: 16px;
  color: #333;
  background: #ffffff;
  border: 1px solid #ced4da;
  border-radius: 6px;
  padding: 10px 12px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.form-campo textarea {
  min-height: 120px;
  resize: vertical;
}

.form-campo input:focus,
.form-campo select:focus,
.form-campo textarea:focus {
  outline: none;
  border-color: #031f89;
  box-shadow: 0 0 0 3px rgba(3, 31, 137, 0.12);
}

.form-campo select:disabled {
  background: #f8f9fa;
  color: #868e96;
  cursor: not-allowed;
}

/* Texto de ayuda debajo de un campo. */
.form-ayuda {
  font-family: 'Jost', sans-serif;
  font-size: 14px;
  color: #6c757d;
  margin-top: 0.35rem;
}

/* Boton de envio: azul, porque no descarga un archivo (ver el estandar
   de colores de boton en base.css). */
.form-enviar {
  display: inline-block;
  background: #031f89;
  color: #ffffff;
  font-family: 'Jost', sans-serif;
  font-size: 16px;
  font-weight: 500;
  border: none;
  border-radius: 6px;
  padding: 12px 32px;
  cursor: pointer;
  transition: background 0.3s, transform 0.2s;
}

.form-enviar:hover:not(:disabled) {
  background: #021663;
  transform: translateY(-1px);
}

.form-enviar:disabled {
  background: #868e96;
  cursor: not-allowed;
}

/* Caja de aviso genérica: se usa para los canales alternativos mientras
   la radicación de PQRS no está conectada al servidor, y para los
   errores de login/registro (panel/auth/). */
.aviso-caja {
  background: #fff8e1;
  border: 1px solid #ffe082;
  border-left: 4px solid #e43f3f;
  border-radius: 8px;
  padding: 1.5rem;
  margin-top: 1.5rem;
}

.aviso-caja p {
  font-family: 'Jost', sans-serif;
  font-size: 16px;
  color: #333;
  margin-bottom: 0.75rem;
}

.aviso-caja ul {
  margin: 0;
  padding-left: 1.25rem;
  font-family: 'Jost', sans-serif;
  font-size: 16px;
  color: #333;
}

.aviso-caja li {
  margin-bottom: 0.4rem;
}

@media (max-width: 767px) {
  .form-tarjeta {
    padding: 1.5rem;
  }

  .form-enviar {
    width: 100%;
  }
}

/* ---- Fila de botones de un formulario ---------------------------- */

/* Los botones van uno al lado del otro, con aire entre ellos, y solo se
   apilan cuando no caben. Antes se usaba .mbr-section-btn (de la
   librería): ahí quedaban pegados uno encima del otro y a todo el ancho,
   como un solo bloque partido en dos. */
.form-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  margin-top: 1.75rem;
}

.form-acciones .form-enviar,
.form-acciones .form-enviar-secundario {
  flex: 1 1 220px;
  max-width: 300px;
  text-align: center;
  text-decoration: none;
}

/* Acción secundaria: el mismo botón pero en contorno, para que se vea
   que es la alternativa y no compita con la principal. */
.form-enviar-secundario {
  display: inline-block;
  background: #ffffff;
  color: #031f89;
  font-family: 'Jost', sans-serif;
  font-size: 16px;
  font-weight: 500;
  border: 2px solid #031f89;
  border-radius: 6px;
  padding: 10px 30px;
  cursor: pointer;
  transition: background 0.3s, color 0.3s, transform 0.2s;
}

.form-enviar-secundario:hover {
  background: #031f89;
  color: #ffffff;
  transform: translateY(-1px);
}

/* Enlace que hace de botón pero todavía no se puede usar (planes.html:
   "Solicitar instalación" antes de elegir un sector con cobertura). Un
   <a> no admite el atributo disabled, así que se marca con esta clase y
   con aria-disabled para quien use lector de pantalla.

   Se pinta gris, igual que .form-enviar:disabled: antes solo se le
   bajaba la opacidad y a simple vista seguía pareciendo un botón activo. */
.form-enviar.btn-deshabilitado {
  background: #adb5bd;
  color: #ffffff;
  cursor: not-allowed;
  transform: none;
}

.form-enviar.btn-deshabilitado:hover {
  background: #adb5bd;
  transform: none;
}