/** ==========================================================================
 * Paginas de empleo: «Bolsa de trabajo y practicas» (/bolsa-de-trabajo/) y
 * «Garantia laboral» (/garantia-laboral/)
 *
 * El contenido de las dos es HTML guardado en la base de datos, no una
 * plantilla: lo actualizan sql/2026-09-08-bolsa-de-trabajo.sql y
 * sql/2026-09-08-garantia-laboral.sql. Esta hoja es lo que les da forma, y la
 * encola functions.php solo en esas dos paginas, junto con la del bloque de
 * empleo que llevan dentro.
 *
 *   <div id="Content" class="PaginaEmpleo">
 *     h1.Global-h1
 *     .PaginaEmpleo-intro      la entradilla
 *     .Empleo                  el bloque del sistema (inc/cei-bloques.php)
 *     .PaginaEmpleo-rejilla    tres celdas con boton
 *     .PaginaEmpleo-acciones   la fila de botones que cierra las celdas
 *     .PaginaEmpleo-cita       solo en garantia laboral: la cita de prensa
 *     .PaginaEmpleo-logos      solo en garantia laboral: las empresas
 *   <div id="Content">         lo que se conserva del contenido viejo: el
 *                              acordeon de preguntas frecuentes en la bolsa y
 *                              el carrusel de empresas en las dos
 * ========================================================================== */

/*
 * El aire de arriba se lo da a si misma. Antes lo sostenia el `overflow:
 * hidden` de «.area_curso», que hacia contexto de formato y encerraba los
 * margenes de sus hijos; al quitarlo —rompia las animaciones de scroll de toda
 * la web, ver style.css— los 60px de «.PaginaEmpleo-seccion» se escapaban y la
 * pagina perdia 112px (Eduardo, 10/09/2026). `flow-root` da ese contexto sin
 * crear contenedor de desplazamiento, que es justo lo que hacia falta.
 */
.PaginaEmpleo {
  display: flow-root;
}

.PaginaEmpleo .PaginaEmpleo-intro {
  display: flex;
  flex-direction: column;
  gap: var(--Global-Espacio-TituloContenido);
  max-width: 70ch;
  margin: var(--Global-Espacio-TituloContenido) 0 var(--Global-Espacio-Grupo);
}

/* El bloque de empleo, con el mismo aire que separa dos grupos. */
.PaginaEmpleo .Empleo {
  margin-bottom: var(--Global-Espacio-Grupo);
}

/*
 * En las dos paginas el bloque de empleo acabo DENTRO de la rejilla, y alli lo
 * trataba como una celda mas: una lamina de dos columnas metida en un tercio de
 * ancho, con el titulo partido palabra a palabra y el texto cortado (Eduardo,
 * 09/09/2026). No es una celda, es un grupo: ocupa el ancho entero y se coloca
 * detras de todas —en /bolsa-de-trabajo/ venia el segundo, entre la primera y
 * la segunda—.
 *
 * El margen de arriba es la resta: la rejilla ya pone 24 de hueco entre filas y
 * aqui hace falta la separacion de grupo, 60.
 */
.PaginaEmpleo-rejilla > .Empleo {
  order: 1;
  grid-column: 1 / -1;
  margin-top: calc(var(--Global-Espacio-Grupo) - var(--Global-Espacio-TituloContenido));
  margin-bottom: 0;
}

/*
 * Las tres celdas: la misma rejilla de la ficha de curso —tres columnas y un
 * circulo delante de cada titulo—, con el boton al pie para que las tres lo
 * tengan a la misma altura.
 */
.PaginaEmpleo-rejilla {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--Global-Espacio-TituloContenido) var(--Global-Espacio-Grupo);
  margin-bottom: var(--Global-Espacio-Grupo);
}

.PaginaEmpleo-celda {
  --Celda-circulo: calc(var(--Font-Size-29) / 2);
  --Celda-hueco: calc(var(--Global-Espacio-TituloContenido) / 2);

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--Global-Espacio-TituloContenido) / 2);
  padding-left: calc(var(--Celda-circulo) + var(--Celda-hueco));
}

.PaginaEmpleo-celdaTitulo {
  position: relative;
  margin: 0;
}

.PaginaEmpleo-celdaTitulo::before {
  content: '';
  position: absolute;
  left: calc(-1 * (var(--Celda-circulo) + var(--Celda-hueco)));
  top: 0.3em; /* por si el navegador no entiende lh */
  top: calc((1lh - var(--Celda-circulo)) / 2);
  width: var(--Celda-circulo);
  height: var(--Celda-circulo);
  border: 1px solid var(--Global-Color-Black);
  border-radius: 50%;
}

/* Las listas de dentro de una celda (las condiciones del acuerdo), con la misma
   flecha del sistema que el resto de enumeraciones. La vineta va en un ::before
   porque el tema trae un `li { list-style-type: none }` que gana al <ul>. */
.PaginaEmpleo-celda ul {
  display: block;
  margin: 0;
  padding-left: 0;
  list-style: none;
  color: var(--Global-Color-Black) !important;
}

.PaginaEmpleo-celda li {
  position: relative;
  margin: 0 0 calc(var(--Global-Espacio-TituloContenido) / 2);
  padding-left: 26px;
  list-style: none;
  color: inherit;
}

.PaginaEmpleo-celda li::before {
  content: "\2193\FE0E";
  position: absolute;
  left: 0;
  top: 0;
  display: inline-block;
  rotate: -90deg;
  font-family: var(--Font-Family-Primary);
  font-weight: var(--Font-Weight-400);
  line-height: inherit;
  color: inherit;
}

.PaginaEmpleo-celda li:last-child {
  margin-bottom: 0;
}

/* El boton, al pie de la celda: asi las tres lo alinean. */
.PaginaEmpleo-celda .Global-boton {
  display: inline-flex;
  margin-top: auto;
}

.PaginaEmpleo-celda a:not(.Global-boton) {
  color: inherit;
  text-decoration: underline;
}

@media (max-width: 900px) {
  .PaginaEmpleo-rejilla {
    grid-template-columns: minmax(0, 1fr);
  }
}

/**
 * Las empresas y la cita, en la misma fila (Eduardo, 08/09/2026): los
 * logotipos se llevan dos tercios y la cita el tercio de la derecha. Por
 * debajo de 1000 se apilan, primero los logotipos.
 */
.PaginaEmpleo-par {
  display: grid;
  gap: var(--Global-Espacio-Grupo);
  margin: 0 0 var(--Global-Espacio-Grupo);
}

/* El hueco lo pone el `gap` del par: los hijos sueltan su margen. Con el
   envoltorio delante para ganarle a .PaginaEmpleo-seccion, que se declara mas
   abajo con el mismo peso. */
.PaginaEmpleo .PaginaEmpleo-par > * {
  margin-bottom: 0;
}

@media (min-width: 1000px) {
  .PaginaEmpleo-par {
    grid-template-columns: 2fr 1fr;
    align-items: start;
  }
}

/**
 * La cita de prensa (solo en /garantia-laboral/): el titular del articulo, el
 * logotipo del medio y el enlace. Iba como un h3 con el enlace dentro y el
 * logotipo suelto en un div con estilos en linea.
 */
.PaginaEmpleo-cita {
  margin: 0 0 var(--Global-Espacio-Grupo);
  padding-top: var(--Global-Espacio-TituloContenido);
  border-top: 1px solid var(--Global-Filete);
}

.PaginaEmpleo-citaTexto {
  margin: 0 0 var(--Global-Espacio-TituloContenido);
}

.PaginaEmpleo-citaPie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--Global-Espacio-TituloContenido);
}

/* El logotipo, a la altura del boton que lleva al lado. La clase va dos veces
   por lo mismo que en pagina-texto.css: el «.content_wrapper img» del tema le
   gana a una sola clase y lo estira a todo el ancho. */
.PaginaEmpleo-cita .PaginaEmpleo-citaLogo {
  width: auto;
  max-width: 190px;
  height: 28px;
}

/* La fila de botones que cierra las condiciones. */
.PaginaEmpleo-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--Global-Espacio-TituloContenido);
  margin: 0 0 var(--Global-Espacio-Grupo);
}

/*
 * En /bolsa-de-trabajo/ la fila cierra la entradilla: los dos accesos,
 * JobTeaser y el portal del alumno (Eduardo, 25/09/2026). Dentro de ella, sin
 * el margen de grupo —el hueco de debajo ya lo pone la entradilla— y con los
 * botones a la distancia de siempre entre dos del sistema.
 */
.PaginaEmpleo-intro > .PaginaEmpleo-acciones {
  gap: 12px;
  margin: 0;
}

/*
 * El de JobTeaser lleva su logotipo detras de «Acceder a» (Eduardo,
 * 25/09/2026). El fichero es el suyo (images/jobteaser.svg, copiado de
 * jobteasercdn.com para no depender de su servidor), a la altura de la letra.
 * La clase va dos veces por el «.content_wrapper img» del tema, que lo
 * estiraria a todo el ancho.
 *
 * Al pasar el raton no se llena de negro como los demas: el texto del logotipo
 * es casi negro y desapareceria. Se llena del gris de los campos.
 */
.PaginaEmpleo-botonLogo.PaginaEmpleo-botonLogo img {
  display: block;
  width: auto;
  max-width: none;
  height: 24px;
}

.Global-boton.PaginaEmpleo-botonLogo:hover {
  background-color: var(--Global-Color-Grey);
  color: var(--Global-Color-Black);
}

/**
 * Las empresas colaboradoras: una rejilla de logotipos donde antes habia un
 * carrusel de Swiper. Se ven todos a la vez, no hace falta JS de fuera y la
 * altura del logotipo la fija la caja, no el fichero (que vienen a tamaños
 * distintos).
 */
.PaginaEmpleo-logos {
  margin: 0 0 var(--Global-Espacio-Grupo);
}

.PaginaEmpleo-logos .Global-p {
  margin: var(--Global-Espacio-TituloContenido) 0 0;
}

.PaginaEmpleo-logosRejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  align-items: center;
  gap: var(--Global-Espacio-Grupo) var(--Global-Espacio-TituloContenido);
  margin: var(--Global-Espacio-TituloContenido) 0 0;
  padding: 0;
  list-style: none;
}

.PaginaEmpleo-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}

.PaginaEmpleo-logo img {
  width: auto;
  max-width: 100%;
  height: 34px;
  object-fit: contain;
}

/* El grid de trabajos, con el mismo aire que el resto de bloques. */
.PaginaEmpleo .Galeria {
  margin: 0 0 var(--Global-Espacio-Grupo);
}

/* --------------------------------------------------------------------------
 * Secciones sueltas de la pagina (las preguntas frecuentes, las empresas)
 * -------------------------------------------------------------------------- */
.PaginaEmpleo-seccion {
  display: flex;
  flex-direction: column;
  gap: var(--Global-Espacio-TituloContenido);
  margin: var(--Global-Espacio-Grupo) 0;
}

.PaginaEmpleo-seccion > * {
  margin: 0;
}

/* La lista con la flecha del sistema, dentro o fuera de una celda. */
.PaginaEmpleo-lista,
.PaginaEmpleo .Rejilla-celda ul {
  display: block;
  margin: 0;
  padding-left: 0;
  list-style: none;
}

.PaginaEmpleo-lista > li,
.PaginaEmpleo .Rejilla-celda li {
  position: relative;
  margin: 0 0 calc(var(--Global-Espacio-TituloContenido) / 2);
  padding-left: 26px;
  list-style: none;
}

.PaginaEmpleo-lista > li::before,
.PaginaEmpleo .Rejilla-celda li::before {
  content: "\2193\FE0E";
  position: absolute;
  left: 0;
  top: 0;
  display: inline-block;
  rotate: -90deg;
  font-family: var(--Font-Family-Primary);
  font-weight: var(--Font-Weight-400);
  line-height: inherit;
  color: inherit;
}

.PaginaEmpleo-lista > li:last-child,
.PaginaEmpleo .Rejilla-celda li:last-child {
  margin-bottom: 0;
}

/* El pie de la cita: es cuerpo de texto, no lo que el tema da a un figcaption. */
.PaginaEmpleo-citaPie {
  font-size: var(--Font-Size-19);
  font-weight: var(--Font-Weight-400);
  line-height: normal;
  letter-spacing: var(--Font-Letter-spacing-0);
}