/* Portal publico de empleos — FiscoClic
 *
 * Paleta y tipografia del Mobile Brandbook. No se inventa ningun color: si hace
 * falta uno nuevo, se elige el oficial mas cercano.
 *
 * Este archivo se sirve con caducidad de un ano y el nombre lleva hash, asi que
 * cambiarlo NO invalida nada: se sube con otro nombre y las paginas nuevas lo
 * apuntan. Las viejas siguen viendo el suyo y no se rompen a media visita.
 */

:root {
  --azul: #1A68FD;
  --purpura: #2D1582;
  --naranja: #F96229;
  --teal: #00C9A7;
  --tinta: #111418;
  --carbon: #212730;
  --gris: #7B8BA3;
  --divisor: #DBDFE6;
  --blanco: #FFFFFF;
  --fondo: #F7F9FC;
  --radio: 12px;
  --sombra: 0 1px 2px rgba(17, 20, 24, .06), 0 8px 24px rgba(17, 20, 24, .06);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: Poppins, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--carbon);
  background: var(--fondo);
  line-height: 1.6;
  font-size: 16px;
}

/* 16px en los campos no es estetica: por debajo de eso, Safari en iOS hace zoom
 * al enfocar un input y descoloca la pagina entera. */
input, select, textarea, button { font: inherit; font-size: 16px; }

a { color: var(--azul); }

.marco { max-width: 780px; margin: 0 auto; padding: 0 20px; }

header.barra {
  background: var(--blanco);
  border-bottom: 1px solid var(--divisor);
  padding: 18px 0;
}
header.barra .marco { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
header.barra .empresa { font-weight: 600; color: var(--tinta); font-size: 18px; margin: 0; }

h1 { color: var(--tinta); font-size: 28px; line-height: 1.25; margin: 0 0 8px; font-weight: 600; }
h2 { color: var(--tinta); font-size: 19px; margin: 28px 0 10px; font-weight: 600; }

.datos { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 4px; }
.dato {
  background: var(--blanco);
  border: 1px solid var(--divisor);
  border-radius: 999px;
  padding: 5px 13px;
  font-size: 14px;
  color: var(--carbon);
}
.dato.sueldo { border-color: #BFE9DF; background: #F0FBF8; color: #06705F; }

.tarjeta {
  background: var(--blanco);
  border: 1px solid var(--divisor);
  border-radius: var(--radio);
  padding: 22px;
  margin: 18px 0;
  box-shadow: var(--sombra);
}

a.vacante {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: border-color .15s, transform .15s;
}
a.vacante:hover { border-color: var(--azul); transform: translateY(-1px); }
a.vacante h2 { margin: 0 0 6px; color: var(--azul); font-size: 18px; }

.descripcion { white-space: pre-wrap; }

label { display: block; font-weight: 500; color: var(--tinta); margin: 16px 0 5px; font-size: 15px; }
.campo {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--divisor);
  border-radius: 9px;
  background: var(--blanco);
  color: var(--tinta);
}
.campo:focus { outline: 2px solid var(--azul); outline-offset: 1px; border-color: var(--azul); }
.ayuda { color: var(--gris); font-size: 13.5px; margin: 5px 0 0; }

/* El honeypot. Se esconde de la vista SIN usar `type=hidden`, que un bot ignora,
 * y con `aria-hidden` + `tabindex=-1` para que un lector de pantalla o el
 * tabulador tampoco lleguen: una trampa que atrapa a un humano con lector de
 * pantalla no es una trampa, es una barrera. */
.trampa {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

.consiento { display: flex; gap: 10px; align-items: flex-start; margin: 20px 0 6px; }
.consiento input { margin-top: 4px; width: 18px; height: 18px; flex: none; accent-color: var(--azul); }
.consiento label { margin: 0; font-weight: 400; font-size: 14.5px; color: var(--carbon); }

button.enviar {
  width: 100%;
  margin-top: 20px;
  padding: 14px 20px;
  border: 0;
  border-radius: 10px;
  color: var(--blanco);
  font-weight: 600;
  cursor: pointer;
  background: linear-gradient(135deg, #1A68FD 0%, #2D1582 100%);
}
button.enviar:disabled { opacity: .55; cursor: progress; }

.aviso { border-radius: 10px; padding: 14px 16px; margin: 16px 0; font-size: 14.5px; }
/* El rojo puro no es color de marca: los avisos van en naranja. Se reserva el
 * rojo para la alarma legal maxima, que aqui no existe. */
.aviso.mal { background: #FEF3EE; border: 1px solid #F9C7B0; color: #8A3510; }
.aviso.bien { background: #F0FBF8; border: 1px solid #BFE9DF; color: #06705F; }

.folio {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 21px;
  letter-spacing: 1px;
  color: var(--tinta);
}

footer { color: var(--gris); font-size: 13px; padding: 34px 0 44px; text-align: center; }
footer a { color: var(--gris); }

.progreso { height: 6px; background: var(--divisor); border-radius: 99px; overflow: hidden; margin-top: 10px; }
.progreso i { display: block; height: 100%; width: 0; background: var(--teal); transition: width .2s; }

@media (max-width: 480px) {
  h1 { font-size: 23px; }
  .tarjeta { padding: 17px; }
  .marco { padding: 0 15px; }
}