/* ── SISTEMA DE FORMULARIOS ──────────────────────────────────────────────────
   Un solo lenguaje visual para los formularios de toda la plataforma.

   POR QUE ESTE ARCHIVO EXISTE
   Habia tres sistemas que habian ido divergiendo:
     .zone-index .form-group    padding 8px 11px · texto .82rem · label .73rem
     .zone-visitas .form-group  padding 8px 10px · texto .82rem · label .75rem
                                borde de 1px y radio de 6px, distintos del resto
     .cita-campo                padding 10px 12px · texto .9rem · label .83rem
   Mas los ~36 campos con estilos escritos a mano en el JS.

   Se unifican aqui, en un archivo aparte que se carga DESPUES de los demas,
   en vez de editar los tres bloques originales. Dos razones: no hay que tocar
   ningun archivo JS (que es donde se rompen las cosas), y si algo se ve mal
   basta quitar una linea del <head> para volver atras.

   EL TAMANO ES UN PUNTO INTERMEDIO, A PROPOSITO
   No se adopto el tamano del formulario de citas tal cual. Ese tiene 8 campos;
   el de agentes tiene mas de 30, y a .9rem con 10px de padding se volveria
   larguisimo de recorrer. .87rem conserva la mejora de legibilidad sin
   convertir los formularios largos en un scroll interminable. */

/* ── CAMPOS ─────────────────────────────────────────────────────────────── */
.form-group,
.zone-index .form-group,
.zone-visitas .form-group,
.cita-campo{
  display:flex;flex-direction:column;gap:6px;margin-bottom:14px;
}
.zone-index .form-grid .form-group,
.zone-visitas .form-grid .form-group{margin-bottom:0;}

.form-group label,
.zone-index .form-group label,
.zone-visitas .form-group label,
.cita-campo label{
  display:block;
  font-size:.78rem;
  font-weight:600;
  /* Antes eran color muted: el rotulo de un campo no es texto secundario, es
     lo que dice que se espera ahi. */
  color:var(--text);
  margin-bottom:0;
  letter-spacing:.01em;
}

.form-group input,
.form-group select,
.form-group textarea,
.zone-index .form-group input,
.zone-index .form-group select,
.zone-index .form-group textarea,
.zone-visitas .form-group input,
.zone-visitas .form-group select,
.zone-visitas .form-group textarea,
.cita-campo input,
.cita-campo select,
.cita-campo textarea{
  width:100%;
  padding:10px 12px;
  border:1.5px solid var(--border);
  border-radius:var(--radius-sm);
  font-family:inherit;
  font-size:.87rem;
  line-height:1.4;
  background:#fff;
  color:var(--text);
  outline:none;
  transition:border-color .14s,box-shadow .14s;
}

/* El foco se ve: antes solo cambiaba el borde y con 1.5px casi no se notaba
   en pantallas con brillo alto -- que es como se usa esto en la calle. */
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus,
.zone-index .form-group input:focus,
.zone-index .form-group select:focus,
.zone-index .form-group textarea:focus,
.zone-visitas .form-group input:focus,
.zone-visitas .form-group select:focus,
.zone-visitas .form-group textarea:focus,
.cita-campo input:focus,
.cita-campo select:focus,
.cita-campo textarea:focus,
.filter-sel:focus{
  border-color:var(--brand);
  /* Respaldo primero: color-mix necesita Chrome 111 o Safari 16.2. En un
     navegador mas viejo se queda con el morado fijo en vez de perder el halo. */
  box-shadow:0 0 0 3px rgba(148,27,128,.16);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 16%,transparent);
}

.form-group textarea,
.zone-index .form-group textarea,
.zone-visitas .form-group textarea,
.cita-campo textarea{min-height:76px;resize:vertical;}

/* Campo deshabilitado: se distingue de uno vacio. */
.form-group input:disabled,
.form-group select:disabled,
.zone-index .form-group input:disabled,
.zone-visitas .form-group input:disabled,
.cita-campo input:disabled,
.zone-index .form-group select:disabled,
.cita-campo select:disabled{
  background:var(--bg);color:var(--text-muted);cursor:not-allowed;
}

/* El texto de ayuda bajo un campo. */
.cita-ayuda,
.form-group .ayuda{
  font-size:.75rem;color:var(--text-muted);margin:0;line-height:1.5;
}

/* Obligatorio */
.cita-campo .req,
.form-group .req{color:var(--red);font-weight:700;}

/* ── SELECTORES SUELTOS (filtros, barras superiores) ─────────────────────── */
.zone-index .filter-sel,
.zone-visitas .filter-sel,
.filter-sel{
  padding:9px 12px;
  border:1.5px solid var(--border);
  border-radius:var(--radius-sm);
  font-family:inherit;
  font-size:.84rem;
  background:#fff;color:var(--text);
  outline:none;cursor:pointer;
  transition:border-color .14s,box-shadow .14s;
}

/* ── REJILLA ─────────────────────────────────────────────────────────────── */
.form-grid,
.zone-index .form-grid,
.zone-visitas .form-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:14px;
}
.form-group.full,
.zone-index .form-group.full,
.zone-visitas .form-group.full{grid-column:1/-1;}
@media(max-width:600px){
  .form-grid,
  .zone-index .form-grid,
  .zone-visitas .form-grid{grid-template-columns:1fr;}
  .form-group.full,
  .zone-index .form-group.full,
  .zone-visitas .form-group.full{grid-column:1;}
}

/* ── MODALES ─────────────────────────────────────────────────────────────── */
/* La zona de visitas tenia cabecera blanca y el resto la oscura de la marca.
   Se unifica en la oscura, que es la que ya se aprobo en el formulario de
   citas. El ancho de cada modal NO se toca: hay formularios que necesitan ser
   anchos (agentes, empleados) y otros angostos, y forzar un ancho unico los
   estropearia. */
.zone-visitas .modal-header{
  background:linear-gradient(135deg,var(--dark),#2d4a52);
  border-bottom:0;
  border-radius:var(--radius) var(--radius) 0 0;
  padding:16px 22px;
}
.zone-visitas .modal-header h2,
.zone-visitas .modal-header h3{color:#fff;}
.zone-visitas .modal-close{color:rgba(255,255,255,.85);}
.zone-visitas .modal-close:hover{color:#fff;}

.zone-index .modal-header h2,
.modal-header h2{font-size:1.08rem;font-weight:700;}

.zone-index .modal-body,
.zone-visitas .modal-body,
.modal-body{padding:20px 22px;}

.zone-index .modal-footer,
.zone-visitas .modal-footer,
.modal-footer{padding:14px 22px;gap:9px;}

@media(max-width:600px){
  .modal-body,
  .zone-index .modal-body,
  .zone-visitas .modal-body{padding:16px 16px;}
}

/* ── EL MODAL NO SE MUEVE ────────────────────────────────────────────────────
   El overlay centraba verticalmente (align-items:center). Con eso, cualquier
   formulario que cambie de alto -- el de empleados al pasar de "Datos" a
   "Domicilio", que tienen distinto numero de campos -- se recolocaba solo y
   daba un salto justo cuando la persona iba a hacer clic.

   Anclado arriba, el modal crece hacia abajo y su cabecera se queda donde
   estaba. El de agentes nunca dio ese salto por casualidad: es tan largo que
   siempre topaba con el maximo de 92vh y no cambiaba de alto.

   El padding de 4vh evita que quede pegado al borde superior, que era la razon
   por la que se habia centrado en primer lugar. */
.overlay{
  align-items:flex-start;
  padding:4vh 20px 20px;
  overflow-y:auto;
}
@media(max-width:600px){
  .overlay{padding:2vh 12px 12px;}
}

/* Los emoji de los titulos y pestañas no deben heredar la tipografia de
   marca: en Montserrat algunos se ven desalineados respecto al texto. */
.modal-header h2,
.form-tab{font-family:inherit;}