/* ==========================================================================
   PS Grupo Hunting · formularios públicos

   Las páginas que ve alguien de fuera —postular a un cargo, entregar los datos
   del contrato, dar las referencias, rendir una prueba— son documentos sueltos:
   cada una trae su propio `<style>` porque cada una se abre desde un enlace con
   token y no cuelga de la aplicación. Eso está bien para el diseño de cada
   página, y estaba mal para los campos: el formulario de contratación y el de
   referencias tenían la misma regla escrita dos veces con valores parecidos, el
   de postulación una tercera con otros nombres de clase, y ninguna de las tres
   apagaba la flecha del sistema en los desplegables.

   Esta hoja es la parte que sí es la misma en todas: cómo se ve un campo. Cada
   página sigue mandando en su color y su tipografía a través de los tokens
   `--campo-*`; lo que no se decide por página es el alto del control, el
   objetivo táctil, el foco, la casilla dibujada o lo que hace el navegador
   cuando autocompleta.

   Los valores por omisión son los de la marca, así que una página que solo la
   enlace ya se ve bien sin declarar nada.
   ========================================================================== */

:root {
  --campo-fondo: #ffffff;
  --campo-tinta: #0e1b2e;
  --campo-borde: #d6dee9;
  --campo-borde-fuerte: #b3c0d1;
  --campo-marca: #004d94;
  --campo-anillo: rgba(0, 77, 148, 0.16);
  --campo-apagado: #64748b;
  --campo-error: #b3261e;
  --campo-error-tenue: rgba(179, 38, 30, 0.07);
  --campo-radio: 11px;
  /* 46 px: el objetivo táctil que las guías piden para el dedo. Estas páginas
     se abren casi siempre desde el móvil —llegan por un enlace en un correo o
     por WhatsApp— así que aquí el tamaño del dedo no es el caso excepcional. */
  --campo-alto: 46px;
  --campo-pad-y: 11px;
  --campo-pad-x: 13px;
  --campo-flecha: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23647a96' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --campo-visto: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7'/%3E%3C/svg%3E");
}

/* --- El campo y su rótulo ------------------------------------------------
   Sin margen: la separación entre campos la pone cada página, que es la que
   sabe si van en rejilla —y entonces el hueco lo da el `gap`— o apilados. */
.field { min-width: 0; }
.field > label {
  display: block; margin-bottom: 6px;
  font-size: .84rem; font-weight: 700; color: var(--campo-tinta);
  line-height: 1.4;
}
/* La marca de obligatorio es dibujo, no información: quien no ve la pantalla se
   entera por el `required` del control, que el navegador sí anuncia. Por eso en
   el marcado va con `aria-hidden`. */
.field .req { color: var(--campo-error); margin-left: .15rem; }
/* Y la contraria, para los formularios donde saltarse un campo es la excepción:
   ahí lo que hace falta saber es cuál se puede dejar en blanco. */
.field .opt {
  margin-left: .35rem; font-size: .72rem; font-weight: 600;
  color: var(--campo-apagado); text-transform: lowercase; letter-spacing: .01em;
}
.field .hint,
.field .help {
  display: block; margin-top: 6px;
  font-size: .8rem; font-weight: 400; line-height: 1.5; color: var(--campo-apagado);
}
/* La ayuda que va **bajo el rótulo** y no bajo el campo: la escriben algunas
   páginas dentro del propio `<label>`, y ahí no lleva margen superior. */
.field > label .hint, .field > label .help { margin-top: 3px; }

/* --- El control ----------------------------------------------------------- */
.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: var(--campo-alto);
  padding: var(--campo-pad-y) var(--campo-pad-x);
  border: 1px solid var(--campo-borde);
  border-radius: var(--campo-radio);
  font-family: inherit;
  /* 16 px o más, siempre. Safari de iOS **amplía la página** al entrar en un
     campo cuya letra mide menos y al salir no la devuelve: el formulario se
     recorre entero en zoom, con media pantalla fuera. En estas páginas, que se
     rellenan desde el teléfono, eso es la mitad de los abandonos. */
  font-size: 1rem;
  line-height: 1.5;
  color: var(--campo-tinta);
  background-color: var(--campo-fondo);
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.field input::placeholder,
.field textarea::placeholder { color: var(--campo-apagado); opacity: .75; }
.field input:hover:not(:focus),
.field select:hover:not(:focus),
.field textarea:hover:not(:focus) { border-color: var(--campo-borde-fuerte); }
/* Un anillo y no el contorno del sistema: el contorno se dibuja fuera de la
   caja y en una rejilla apretada pisa al campo de al lado. */
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--campo-marca);
  box-shadow: 0 0 0 3px var(--campo-anillo);
}
.field textarea { min-height: 108px; resize: vertical; }
.field input:disabled,
.field select:disabled,
.field textarea:disabled {
  background-color: #f2f5f9; color: var(--campo-apagado); cursor: not-allowed;
}

/* --- Desplegable ---------------------------------------------------------
   Con la flecha del sistema, el mismo desplegable se ve de una manera en
   Windows, de otra en macOS y de una tercera en Android, y ninguna se parece al
   resto de la página. Se apaga y se dibuja la punta de fondo. El hueco de la
   derecha es sitio reservado: sin él, la opción más larga pasa por debajo. */
.field select {
  appearance: none;
  cursor: pointer;
  padding-right: 38px;
  background-image: var(--campo-flecha);
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-size: 17px 17px;
  text-overflow: ellipsis;
}

/* --- Números, fechas ------------------------------------------------------
   Las flechitas de incremento no sirven para lo que aquí se escribe —una renta
   no se sube de uno en uno— y se llevan doce píxeles del campo. Las cifras van
   con numeración tabular para que los millares no bailen. */
.field input[type="number"] {
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
  appearance: textfield;
}
.field input[type="number"]::-webkit-outer-spin-button,
.field input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none; appearance: none; margin: 0;
}
.field input[type="date"],
.field input[type="month"],
.field input[type="time"] {
  appearance: none;
  font-variant-numeric: tabular-nums;
}
.field input[type="date"]::-webkit-calendar-picker-indicator,
.field input[type="month"]::-webkit-calendar-picker-indicator,
.field input[type="time"]::-webkit-calendar-picker-indicator {
  cursor: pointer; opacity: .55;
}
.field input[type="date"]:hover::-webkit-calendar-picker-indicator,
.field input[type="month"]:hover::-webkit-calendar-picker-indicator,
.field input[type="time"]:hover::-webkit-calendar-picker-indicator { opacity: 1; }

/* --- Autocompletado del navegador ----------------------------------------
   Chrome pinta el campo autocompletado con su propio fondo por encima de
   cualquier `background`: en un formulario de dieciocho campos son cinco cajas
   de otro color en mitad de la tarjeta. El único relleno que respeta es una
   sombra interior enorme; la transición absurda es el truco conocido para que
   ese fondo no vuelva a aparecer con una animación al recuperar el foco. */
.field input:-webkit-autofill,
.field input:-webkit-autofill:hover,
.field input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--campo-tinta);
  -webkit-box-shadow: 0 0 0 40px var(--campo-fondo) inset;
  box-shadow: 0 0 0 40px var(--campo-fondo) inset;
  caret-color: var(--campo-tinta);
  transition: background-color 6000s ease-in-out 0s;
}

/* --- Archivo --------------------------------------------------------------
   La caja de subir el CV es la que más se mira de todo el formulario de
   postulación: se dibuja como una zona y no como un campo de texto. */
.field input[type="file"] {
  padding: 9px 11px;
  border-style: dashed;
  background-color: #f6f9fd;
  font-size: .93rem;
  cursor: pointer;
}
.field input[type="file"]::file-selector-button {
  margin-right: 11px; padding: 7px 14px;
  border: 1px solid var(--campo-borde); border-radius: 8px;
  background: #fff; color: var(--campo-tinta);
  font: inherit; font-size: .88rem; font-weight: 650; cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
.field input[type="file"]::file-selector-button:hover {
  border-color: var(--campo-marca); color: var(--campo-marca);
}

/* --- Casilla y botón de opción -------------------------------------------
   Dibujados aquí y no por el sistema. `accent-color` tiñe el relleno pero no
   controla el tamaño, ni el radio, ni el borde, ni el foco: la casilla quedaba
   más pequeña que el resto de los controles y con la esquina viva mientras todo
   lo demás va redondeado. Y en una página que pide un consentimiento de datos,
   la casilla **es** el control importante: tiene que verse marcada desde el
   otro lado de la pantalla. */
.field input[type="checkbox"],
.field input[type="radio"],
.field-check input[type="checkbox"],
.opt input[type="radio"] {
  flex: none;
  appearance: none;
  width: 20px; height: 20px; min-height: 0;
  margin: 0; padding: 0;
  border: 1px solid var(--campo-borde-fuerte);
  background-color: var(--campo-fondo);
  background-repeat: no-repeat; background-position: center;
  background-size: 15px 15px;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.field input[type="checkbox"],
.field-check input[type="checkbox"] { border-radius: 6px; }
.field input[type="radio"],
.opt input[type="radio"] { border-radius: 50%; }
.field input[type="checkbox"]:hover:not(:disabled),
.field input[type="radio"]:hover:not(:disabled),
.field-check input[type="checkbox"]:hover:not(:disabled),
.opt input[type="radio"]:hover:not(:disabled) { border-color: var(--campo-marca); }
.field input[type="checkbox"]:checked,
.field-check input[type="checkbox"]:checked {
  border-color: transparent;
  background-color: var(--campo-marca);
  background-image: var(--campo-visto);
}
.field input[type="radio"]:checked,
.opt input[type="radio"]:checked {
  border-color: var(--campo-marca);
  background: radial-gradient(circle at center, var(--campo-marca) 0 5px, transparent 5.5px);
}
/* El anillo del foco va sobre el control, salvo dentro de `.opt` —la caja de
   una alternativa de la prueba técnica—, donde lo dibuja la caja entera con su
   `:focus-within`: dos anillos concéntricos sobre el mismo gesto son ruido. */
.field input[type="checkbox"]:focus-visible,
.field input[type="radio"]:focus-visible,
.field-check input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--campo-marca);
  outline-offset: 2px;
}

/* --- Lo que falló ---------------------------------------------------------
   El borde rojo por sí solo se pierde entre dieciocho campos con borde; el
   tinte lo encuentra de un vistazo sin tapar el texto que hay que corregir. */
.field.has-error input,
.field.has-error select,
.field.has-error textarea,
.field.is-invalid input,
.field.is-invalid select,
.field.is-invalid textarea {
  border-color: var(--campo-error);
  background-color: var(--campo-error-tenue);
}
.field.has-error input:focus,
.field.has-error textarea:focus,
.field.is-invalid input:focus,
.field.is-invalid textarea:focus {
  border-color: var(--campo-error);
  box-shadow: 0 0 0 3px rgba(179, 38, 30, .14);
}
.field.has-error > label,
.field.is-invalid > label { color: var(--campo-error); }
/* La casilla que falta por marcar —el consentimiento de datos, casi siempre— no
   tiene borde que enrojecer más que el suyo, y es de 20 px: se le añade el halo
   para que se encuentre desde el resumen de arriba. */
.field-check.is-invalid input[type="checkbox"] {
  border-color: var(--campo-error);
  box-shadow: 0 0 0 3px rgba(179, 38, 30, .13);
}
.field-check.is-invalid label { color: var(--campo-error); }
.err {
  display: block; margin-top: 6px;
  color: var(--campo-error); font-size: .82rem; font-weight: 650; line-height: 1.45;
}

/* --- El campo en el que se está escribiendo ------------------------------- */
.field:focus-within > label { color: var(--campo-marca); }
.field.has-error:focus-within > label,
.field.is-invalid:focus-within > label { color: var(--campo-error); }