/* LA BOLSA DE EMPLEO (#60) · calatx.org/vacantes
   Hoja propia, cargada sólo por las dos páginas de la bolsa (`cabeza_extra`),
   para no engordar sitio.css. Usa SUS tokens (--azul, --linea, --radio…): si
   el sitio cambia de color, esto lo sigue sin tocarse.
   DOS CASAS, como todo lo estático: ~/servidor/web/css (versionada) y
   /var/www/calatx.org/html/css (la que sirve nginx). */

/* ── La lista ── */
.vacantes{display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:1.2rem; margin-top:1.5rem}
.vacante{display:flex; flex-direction:column; gap:.35rem; padding:1.1rem 1.2rem;
  background:var(--blanco); border:1px solid var(--linea); border-radius:var(--radio);
  text-decoration:none; color:inherit; transition:border-color .15s, transform .15s}
.vacante:hover, .vacante:focus-visible{border-color:var(--azul); transform:translateY(-2px)}
.vacante__puesto{font-family:"Fraunces", Georgia, serif; font-size:1.12rem; font-weight:700;
  color:var(--azul-hondo); line-height:1.25}
.vacante__empresa{font-size:.9rem; color:var(--tinta)}
/* El sueldo es lo que se compara primero: va grande y en verde. */
.vacante__sueldo{font-weight:700; color:var(--verde-hondo); font-size:1rem}
.vacante__datos{font-size:.83rem; color:var(--tinta-suave)}
.vacante__chips{display:flex; flex-wrap:wrap; gap:.3rem; margin-top:.2rem}

.chip{display:inline-block; font-size:.78rem; padding:.18rem .55rem; border-radius:999px;
  background:var(--hueso); border:1px solid var(--linea); color:var(--tinta-suave)}
.chips{list-style:none; padding:0; margin:.6rem 0 0; display:flex; flex-wrap:wrap; gap:.4rem}
.chips--bien .chip{background:#eaf5ec; border-color:#cfe6d4; color:var(--verde-hondo)}

/* ── Una vacante ── */
.vacante-ficha h1{margin-bottom:.4rem}
.vacante-ficha h2{font-size:1.15rem; margin-top:1.8rem}
.vacante-ficha__empresa{display:flex; flex-wrap:wrap; align-items:center; gap:.6rem; margin:0 0 1.2rem}
.vacante-ficha__logo{height:40px; width:auto; max-width:160px; object-fit:contain}
.sello-verificado{font-size:.78rem; font-weight:600; color:var(--verde-hondo);
  background:#eaf5ec; border:1px solid #cfe6d4; border-radius:999px; padding:.18rem .6rem}
.vacante-ficha__datos{display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  gap:.8rem 1.4rem; margin:0; padding:1rem 1.2rem; background:var(--hueso);
  border:1px solid var(--linea); border-radius:var(--radio)}
.vacante-ficha__datos div{min-width:0}
.vacante-ficha__datos dt{font-size:.75rem; text-transform:uppercase; letter-spacing:.06em;
  color:var(--tinta-tenue); margin:0}
.vacante-ficha__datos dd{margin:.15rem 0 0; color:var(--tinta)}
.vacante-ficha__sueldo{font-weight:700; color:var(--verde-hondo); font-size:1.1rem}
/* El texto del socio conserva sus saltos de línea sin que la plantilla
   tenga que convertirlos (y sin HTML del socio). */
.vacante-ficha__texto{white-space:pre-line}

/* ── Postular ── */
.postular{margin-top:2rem; padding:1.3rem 1.4rem; border:1px solid var(--linea);
  border-left:4px solid var(--verde); border-radius:var(--radio); background:var(--blanco)}
.postular h2{margin-top:0}
.postular__botones{display:flex; flex-wrap:wrap; gap:.6rem; margin:.8rem 0}
/* Botones de 44 px o más: en el celular se tocan con el dedo. */
.postular__botones .boton{min-height:44px; display:inline-flex; align-items:center}
.boton--claro{background:var(--blanco); color:var(--azul-hondo); border-color:var(--linea)}
.boton--claro:hover{background:var(--hueso); color:var(--azul-hondo)}
.postular__seguro{font-size:.9rem; color:var(--tinta-suave); margin:.4rem 0 0}

/* ── Reportar ── */
.reportar{margin-top:2rem}
.reportar textarea, .reportar input[type=email]{width:100%; box-sizing:border-box}

@media (prefers-reduced-motion: reduce){
  .vacante{transition:none}
  .vacante:hover, .vacante:focus-visible{transform:none}
}

/* ── El anuncio de la bolsa en el directorio (2026-10-01) ──
   Foto de Austin al atardecer con un velo azul noche desde la izquierda,
   para que el texto blanco se lea sobre cualquier parte de la foto. El texto
   es HTML encima de la imagen, no parte de ella. */
.anuncio-vacantes{position:relative; display:block; overflow:hidden; margin:2rem 0 1.6rem;
  border-radius:var(--radio); min-height:240px; text-decoration:none; color:var(--blanco);
  box-shadow:var(--sombra); background:var(--noche)}
.anuncio-vacantes__foto{position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:70% 55%; transition:transform .5s ease}
.anuncio-vacantes__velo{position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(6,44,68,.94) 0%, rgba(6,44,68,.82) 42%, rgba(6,44,68,.25) 100%)}
.anuncio-vacantes__texto{position:relative; display:flex; flex-direction:column; gap:.55rem;
  max-width:34rem; padding:2rem 2.2rem}
.anuncio-vacantes__rotulo{font-size:.75rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--dorado-claro)}
.anuncio-vacantes__titulo{font-family:"Fraunces", Georgia, serif; font-size:1.7rem;
  font-weight:700; line-height:1.15; text-wrap:balance}
.anuncio-vacantes__sub{font-size:.98rem; color:rgba(255,255,255,.88)}
.anuncio-vacantes__boton{align-self:flex-start; margin-top:.4rem; background:var(--verde);
  color:var(--blanco); font-weight:600; padding:.7rem 1.4rem; border-radius:var(--radio);
  transition:background .16s ease}
.anuncio-vacantes:hover .anuncio-vacantes__foto{transform:scale(1.03)}
.anuncio-vacantes:hover .anuncio-vacantes__boton{background:var(--verde-hondo)}
.anuncio-vacantes:focus-visible{outline:3px solid var(--dorado); outline-offset:3px}
@media (max-width:640px){
  .anuncio-vacantes__velo{background:linear-gradient(180deg, rgba(6,44,68,.70) 0%, rgba(6,44,68,.94) 70%)}
  .anuncio-vacantes__texto{padding:1.5rem 1.3rem}
  .anuncio-vacantes__titulo{font-size:1.35rem}
}
@media (prefers-reduced-motion: reduce){
  .anuncio-vacantes__foto{transition:none}
  .anuncio-vacantes:hover .anuncio-vacantes__foto{transform:none}
}

/* ── «Contratando» en el directorio (2026-10-02) ──
   Isaac: «que las personas busquen en el directorio qué empresas tienen
   vacantes… algo bonito». Una marca verde con un punto que late despacio
   (el «en vivo» de siempre), en la tarjeta de la lista y en la casilla del
   filtro; y en la ficha, un recuadro con los puestos. Verde hondo sobre
   verde muy claro: 6:1 de contraste (medido; el mínimo es 4.5). */
.contratando-punto{display:inline-block; width:.55rem; height:.55rem; border-radius:50%;
  background:var(--verde); box-shadow:0 0 0 0 rgba(54,148,64,.55);
  animation:latido 2.4s ease-out infinite; vertical-align:middle; flex:none}
@keyframes latido{
  0%{box-shadow:0 0 0 0 rgba(54,148,64,.55)}
  70%{box-shadow:0 0 0 .45rem rgba(54,148,64,0)}
  100%{box-shadow:0 0 0 0 rgba(54,148,64,0)}
}
.contratando-marca{align-self:flex-start; display:inline-flex; align-items:center; gap:.45rem;
  margin-top:.35rem; padding:.22rem .7rem .22rem .6rem; border-radius:999px;
  background:#eaf5ec; border:1px solid #cfe6d4; color:var(--verde-hondo);
  font-size:.78rem; font-weight:700; letter-spacing:.02em}
.negocio:hover .contratando-marca, .negocio:focus-visible .contratando-marca{border-color:var(--verde)}

/* La casilla del filtro: en renglón, con su punto, y 44 px de toque. */
.filtros__casilla{flex-direction:row; align-items:center; gap:.5rem; min-height:44px; align-self:flex-end}
.filtros__casilla input{width:1.15rem; height:1.15rem; margin:0; accent-color:var(--verde)}
.filtros__casilla label{display:inline-flex; align-items:center; gap:.45rem; cursor:pointer;
  font-size:.88rem; font-weight:600; color:var(--verde-hondo)}

/* El recuadro de la ficha. */
.contratando{margin:1.6rem 0 0; padding:1.1rem 1.3rem; background:#f3faf4;
  border:1px solid #cfe6d4; border-left:4px solid var(--verde); border-radius:var(--radio)}
.contratando__titulo{display:flex; align-items:center; gap:.55rem; margin:0 0 .6rem;
  font-size:1.05rem; color:var(--verde-hondo)}
.contratando__lista{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.55rem}
.contratando__lista li{display:flex; flex-direction:column; gap:.1rem}
.contratando__puesto{font-family:"Fraunces", Georgia, serif; font-weight:700; font-size:1.02rem;
  color:var(--azul-hondo); text-decoration:none; min-height:24px}
.contratando__puesto:hover, .contratando__puesto:focus-visible{text-decoration:underline}
.contratando__datos{font-size:.85rem; color:var(--tinta-suave)}
.contratando__pie{margin:.8rem 0 0; font-size:.9rem; color:var(--tinta-suave)}

@media (prefers-reduced-motion: reduce){
  .contratando-punto{animation:none}
}