/* formas.css — los dos formularios y el asistente por paneles.
 *
 * Sólo lo cargan las dos páginas que tienen formulario: la portada (pedir
 * personal) y la de empleo. Las piezas que también usa el panel de Mayra
 * —`.campo3`, `.campo__par`, `.aviso`— NO viven aquí sino en base.css,
 * porque el panel no carga esta hoja.
 *
 * Los dos formularios se parecen poco A PROPÓSITO. Quien llena el de negocios
 * es un gerente en su escritorio que quiere terminar rápido; el de empleo lo
 * llena alguien de pie, en su celular, en un descanso.
 */

/* ── El formulario de negocios, sobre el fondo marino del contacto ────────── */

.formulario { background: var(--blanco); color: var(--tinta); border-radius: var(--radio); padding: clamp(1.5rem, 3vw, 2.2rem); box-shadow: 0 26px 60px -30px rgba(0,0,0,.6); }
.formulario__aviso { margin: .9rem 0 0; font-size: .87rem; color: var(--tinta-suave); text-align: center; }

/* Aquí la lista de puestos es una cuadrícula compacta con estado marcado
   claro, sin crecer de tamaño: el gerente escanea doce puestos de un vistazo
   en vez de recorrer doce botones.

   Los `!important` son necesarios: estas etiquetas viven dentro de un
   `.campo3`, y `.campo3 label` (base.css) pesa más que `.casilla`. */
.casillas {
  display: grid; grid-template-columns: 1fr 1fr;
  border: 1px solid var(--linea); border-radius: 11px; overflow: hidden;
  gap: 0; background: var(--blanco);
}
.casilla {
  display: flex !important; align-items: center; gap: .5rem;
  font-weight: 400 !important; font-size: .94rem !important;
  margin: 0 !important; cursor: pointer;
  padding: .58rem .8rem; border-bottom: 1px solid var(--linea);
  transition: background-color .1s ease;
}
.casilla input { width: auto !important; margin: 0; accent-color: var(--marino); }
.casillas .casilla:nth-child(odd) { border-right: 1px solid var(--linea); }
.casillas .casilla:nth-last-child(-n+2) { border-bottom: 0; }
.casilla:hover { background: var(--hueso); }
.casilla:has(input:checked) { background: var(--laton-tenue); font-weight: 600 !important; }
.casilla input:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }

/* El campo dentro de la tarjeta blanca va más compacto que en la página de
   empleo: el gerente ve el formulario entero de un vistazo, no un campo
   gigante por renglón. */
.formulario .campo3 select {
  width: 100%; font: inherit; font-size: 1rem; color: var(--tinta);
  padding: .75rem .85rem; border: 1.5px solid var(--linea); border-radius: 9px; background: var(--blanco);
}
.formulario .campo3 input, .formulario .campo3 textarea { font-size: 1rem; padding: .75rem .85rem; border-radius: 9px; }
.formulario .campo__par .campo3 { margin-bottom: 0; }
.formulario .campo__par > .campo__mitad > label { display: block; font-weight: 600; font-size: .93rem; margin-bottom: .38rem; }
.formulario .campo__par > .campo__mitad > input { width: 100%; font: inherit; font-size: 1rem; color: var(--tinta); padding: .75rem .85rem; border: 1.5px solid var(--linea); border-radius: 9px; }
.formulario .campo__par > .campo__mitad > input:focus { outline: 3px solid rgba(34,71,112,.22); outline-offset: 1px; border-color: var(--azul); }

/* ── El formulario de empleo ─────────────────────────────────────────────────
   Quien lo llena es una recamarera o un lavaloza, de pie, en su celular, en un
   descanso. La regla aquí es TOCAR, NO ESCRIBIR: sólo el nombre y el teléfono
   se teclean; todo lo demás es una ficha que se toca con el pulgar.

   Y no se parece al formulario de negocios a propósito. Aquél es marino,
   corporativo, para un gerente en su escritorio. Éste es claro y cálido, con
   tipografía grande y pasos numerados, porque un formulario largo y frío hace
   que quien duda de su inglés lo abandone a la mitad. */
.aplicar { background: var(--hueso); border-top: 1px solid var(--linea); }
.aplicar__caja { max-width: 44rem; margin-inline: auto; }
.aplicar__cabeza h2 { font-size: clamp(1.7rem, 3.6vw, 2.3rem); color: var(--marino); }
.aplicar__cabeza > p { color: var(--tinta-suave); font-size: 1.06rem; }
.aplicar__tel { font-size: .98rem; }
.aplicar__tel a { font-weight: 700; color: var(--azul); font-size: 1.12rem; text-decoration: none; }

.aplicar__forma {
  background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio);
  padding: clamp(1.4rem, 3vw, 2.2rem); margin-top: 1.6rem; box-shadow: var(--sombra);
}
.aplicar__nota { margin: .9rem 0 0; font-size: .9rem; color: var(--tinta-suave); text-align: center; }

.paso2 { border: 0; padding: 0; margin: 0 0 2rem; }
.paso2:last-of-type { margin-bottom: 1.4rem; }
.paso2 legend {
  display: flex; align-items: center; gap: .7rem; padding: 0;
  font-size: 1.16rem; font-weight: 700; color: var(--marino); margin-bottom: .3rem;
}
.paso2__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%; flex: 0 0 auto;
  background: var(--marino); color: #fff; font-size: .95rem; font-weight: 700;
}
.paso2__ayuda { color: var(--tinta-suave); font-size: .94rem; margin: 0 0 1rem; }
.paso2__sub { font-weight: 600; color: var(--tinta); margin: 1.5rem 0 .7rem; }

/* Las fichas: el corazón del formulario. Objetivo de toque cómodo para un
   pulgar, estado marcado evidente sin depender del color solo (lleva palomita),
   y todo con CSS — la casilla real sigue ahí para el teclado y el lector de
   pantalla, sólo que no se ve. */
.opciones { display: flex; flex-wrap: wrap; gap: .6rem; }
.opcion { position: relative; margin: 0; cursor: pointer; }
.opcion input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; margin: 0; cursor: pointer;
}
.opcion span {
  display: inline-flex; align-items: center; gap: .45rem;
  min-height: 48px; padding: .6rem 1.1rem;
  border: 1.5px solid var(--linea); border-radius: 999px;
  background: var(--blanco); color: var(--tinta); font-size: .99rem; line-height: 1.25;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.opcion span::before {
  content: ""; width: 16px; height: 9px; flex: 0 0 auto;
  border-left: 2.5px solid transparent; border-bottom: 2.5px solid transparent;
  transform: rotate(-45deg) translateY(-2px); margin-right: -.2rem;
}
.opcion input:checked + span {
  background: var(--marino); border-color: var(--marino); color: #fff; font-weight: 600;
}
.opcion input:checked + span::before { border-left-color: #fff; border-bottom-color: #fff; }
.opcion input:focus-visible + span { outline: 3px solid rgba(34,71,112,.35); outline-offset: 2px; }
.opcion--si input:checked + span { background: #1d6b3f; border-color: #1d6b3f; }

/* ── El asistente por paneles ────────────────────────────────────────────────
   Un paso a la vez. La barra de arriba dice dónde va y cuánto falta, que es la
   pregunta que hace abandonar un formulario largo cuando no tiene respuesta.

   Sin JavaScript nada de esto se activa: la barra de navegación nace con
   `hidden`, los tres paneles quedan visibles de corrido y el formulario sigue
   funcionando. El adorno se cae; la herramienta no. */
.ruta {
  list-style: none; display: flex; gap: .4rem; padding: 0;
  margin: 0 0 1.8rem; counter-reset: r;
}
.ruta li {
  flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: .45rem;
  font-size: .82rem; color: var(--tinta-suave); line-height: 1.2;
  padding-top: .7rem; border-top: 3px solid var(--linea);
  transition: border-color .15s ease, color .15s ease;
}
.ruta li span {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--linea); color: var(--tinta-suave); font-size: .75rem; font-weight: 700;
}
.ruta li.es-actual { border-top-color: var(--laton); color: var(--marino); font-weight: 600; }
.ruta li.es-actual span { background: var(--laton); color: #fff; }
.ruta li.es-hecho { border-top-color: var(--acero); color: var(--azul); }
.ruta li.es-hecho span { background: var(--acero); color: #fff; }

/* La ruta del asistente, sobre la tarjeta blanca del formulario de negocios.
   Misma mecánica que la de empleo; el color cambia porque el marco cambia. */
.ruta--oscura li { border-top-color: #e3e8f0; }
.ruta--oscura li.es-actual { border-top-color: var(--laton); }

/* La sugerencia de dominio: se ofrece, no se impone. Corregir el correo de
   alguien sin avisar es la clase de ayuda que enfurece. */
.ojo { margin: .5rem 0 0; font-size: .92rem; color: var(--tinta-suave); }
.ojo button {
  font: inherit; font-weight: 700; color: var(--azul); background: var(--laton-tenue);
  border: 1px solid #f0d3ab; border-radius: 7px; padding: .18rem .55rem; cursor: pointer;
}
.ojo button:hover { background: #fbe8cd; }

.nav2 { display: flex; gap: .7rem; align-items: center; margin-top: .6rem; }
.nav2 .boton { flex: 1 1 0; text-align: center; }
.nav2 [data-atras] { flex: 0 0 auto; }

/* ── Pantallas chicas ───────────────────────────────────────────────────── */

@media (max-width: 620px) {
  .casillas { grid-template-columns: 1fr; }
  .casillas .casilla:nth-child(odd) { border-right: 0; }
  .casillas .casilla:nth-last-child(-n+2):not(:last-child) { border-bottom: 1px solid var(--linea); }
  .opcion span { width: 100%; }
  .opciones { flex-direction: column; }
}

@media (max-width: 520px) {
  .ruta li { font-size: 0; gap: 0; justify-content: center; }
  .ruta li span { font-size: .78rem; }
}