/* EmpleoVivo · estilos (sin CSS en línea para cumplir la política de contenido) */

/* Open Sans alojada en el propio sitio (SIL OFL 1.1, ver fuentes/OFL-OpenSans.txt): sin llamadas a terceros. */
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 300 800;
  src: url("../fuentes/open-sans-latin-ext-wght-normal.062c1f2aaf2d.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 300 800;
  src: url("../fuentes/open-sans-latin-wght-normal.dcf31ebe1074.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Urbanist (SIL OFL 1.1, ver fuentes/OFL-Urbanist.txt): geométrica y redondeada, solo para títulos. */
@font-face {
  font-family: "Urbanist";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../fuentes/urbanist-latin-ext-wght-normal.fc178a9cede8.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Urbanist";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../fuentes/urbanist-latin-wght-normal.225d39d1d444.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Paleta EmpleoVivo: todo parte del azul de marca. Sin tonos cálidos.
   Estados: verde (actividad, aprobado), rojo (urgencia, cerrado), gris (neutro). */
:root {
  --marino: #0d3878;
  --marino-profundo: #0b2f66;
  --azul: #005da9;
  --azul-oscuro: #004a87;
  --azul-vivo: #1f7fd6;
  --celeste: #8cc8ff;
  --celeste-claro: #e6f0fa;
  --bruma: #f3f8fd;
  --texto-sobre-marino: #c9dcf3;

  --tinta: #2b3440;
  --tinta-2: #4b5664;
  --tenue: #5f6b7a;
  --linea: #dde5ee;
  --linea-suave: #eef2f6;
  --borde-control: #c9d4e1;
  --borde-campo: #8a96a5;
  --fondo: #f4f7fb;
  --superficie: #ffffff;
  --superficie-2: #f6f9fc;

  --verde: #0f7a5c;
  --verde-texto: #0f6b52;
  --verde-suave: #e3f3ec;
  --verde-caja: #eef8f3;
  --verde-borde: #c5e4d6;
  --rojo: #b42318;
  --rojo-vivo: #d92d20;
  --rojo-suave: #fdecea;
  --rojo-caja: #fef6f5;
  --rojo-borde: #f6c9c4;
  --gris-estado: #8a96a5;
  --gris-suave: #eef1f4;

  /* Nombres anteriores, apuntando a la paleta nueva */
  --primario: var(--marino);
  --primario-oscuro: var(--marino-profundo);
  --primario-suave: var(--celeste-claro);
  --primario-claro: var(--bruma);
  --primario-borde: #cfe0f3;
  --bien: var(--verde);
  --bien-suave: var(--verde-suave);
  --bien-borde: var(--verde-borde);
  --peligro: var(--rojo);
  --peligro-suave: var(--rojo-suave);
  --peligro-borde: var(--rojo-borde);

  --radio: 14px;
  --radio-chico: 10px;
  --sombra-elevada: 0 12px 32px rgba(5, 20, 50, 0.18);
  --fuente: "Open Sans", Arial, Helvetica, sans-serif;
  --fuente-titulos: "Urbanist", "Open Sans", Arial, sans-serif;
  --suave: 0.2s ease;
  --curva: 56px;
}

/* Portal de empresas: la misma estructura, con otra paleta (carbón y azul vivo) para que se sienta una
   herramienta aparte de la bolsa de empleo. El lado de los postulantes sigue con el azul de marca. */
body.portal-empresas {
  --marino: #1e1f21;
  --marino-profundo: #0f1011;
  --azul: #1868db;
  --azul-oscuro: #1558bd;
  --azul-vivo: #1868db;
  --celeste: #7fb0f5;
  --celeste-claro: #cfe1fd;
  --bruma: #eaf2fd;
  --texto-sobre-marino: #c9cbd0;
  --tinta: #101214;
  --tinta-2: #2c2e33;
  --tenue: #505258;
  --linea: #dddee1;
  --linea-suave: #ececee;
  --borde-control: #c5c7cc;
  --borde-campo: #8b8e95;
  --fondo: #f8f8f8;
  --superficie-2: #f3f3f4;
  --primario-borde: #b9d3f8;
}
body.portal-empresas { -webkit-tap-highlight-color: rgba(24, 104, 219, 0.1); }
body.portal-empresas .boton-primario { background: var(--azul); border-color: var(--azul); }
@media (hover: hover) { body.portal-empresas .boton-primario:hover { background: var(--azul-oscuro); border-color: var(--azul-oscuro); } }
body.portal-empresas .encabezado { background: #1e1f21; border-bottom-color: #2c2e33; }
body.portal-empresas .marca { color: #fff; }
body.portal-empresas .marca-empresas { color: #c9cbd0; border-color: #3a3c40; }
body.portal-empresas .nav a { color: #a4a7ad; }
body.portal-empresas .nav a[aria-current="page"] { color: #fff; border-bottom-color: #1868db; }
@media (hover: hover) { body.portal-empresas .nav a:hover { color: #fff; } }
body.portal-empresas .acciones-encabezado .chico, body.portal-empresas .enlace-cuenta .negrita { color: #e6e7ea; }
body.portal-empresas .enlace-mi-cuenta { color: #c9cbd0; }
body.portal-empresas .enlace-mi-cuenta[aria-current="page"] { color: #fff; }
body.portal-empresas .encabezado .boton-contorno { background: transparent; border-color: #4a4d53; color: #fff; }
@media (hover: hover) { body.portal-empresas .encabezado .boton-contorno:hover { border-color: #fff; color: #fff; } }
body.portal-empresas .encabezado :focus-visible { outline-color: #fff; }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
/* iPhone: al tocar, un tinte azul suave en vez del recuadro gris. */
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: rgba(13, 56, 120, 0.08); }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--fuente);
  font-size: 15px;
  line-height: 1.5;
  min-height: 100vh;
  min-height: 100svh;  /* iPhone: 100vh incluye la barra de Safari y deja un scroll de sobra */
  display: flex;
  flex-direction: column;
}
body > main { flex: 1 0 auto; }
a { color: var(--azul); }
@media (hover: hover) { a:hover { color: var(--marino); } }
img { max-width: 100%; }
h1, h2, h3 { line-height: 1.2; margin: 0; color: var(--marino); font-family: var(--fuente-titulos); letter-spacing: -0.01em; }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--azul-vivo); outline-offset: 2px; }
/* Sobre el marino el anillo azul no se ve (2.7:1): blanco (11:1). Dentro del buscador blanco vuelve al azul. */
.banda :focus-visible, .pie :focus-visible { outline-color: #fff; }
.banda .buscador :focus-visible { outline-color: var(--azul-vivo); }
.solo-lectores { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* «Saltar al contenido» aparece al llegar con el teclado. */
.saltar:focus { position: fixed; top: 8px; left: 8px; z-index: 100; width: auto; height: auto; clip: auto; overflow: visible; padding: 10px 16px; border-radius: 10px; background: var(--superficie); color: var(--marino); font-weight: 700; box-shadow: var(--sombra-elevada); }
main:focus { outline: none; }
.ico { flex: none; vertical-align: middle; }
.sello { flex: none; vertical-align: middle; }

.contenedor { max-width: 1240px; margin: 0 auto; padding: 0 24px; }
.contenedor-angosto { max-width: 820px; margin: 0 auto; padding: 0 24px; }
.contenedor-medio { max-width: 1040px; margin: 0 auto; padding: 0 24px; }
.pila { display: flex; flex-direction: column; gap: 16px; }
.pila-grande { display: flex; flex-direction: column; gap: 28px; }
.pila-chica { display: flex; flex-direction: column; gap: 8px; }
.fila { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.fila-entre { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.tenue { color: var(--tenue); }
.chico { font-size: 13px; }
.negrita { font-weight: 700; }
.numeros { font-variant-numeric: tabular-nums; }
.margen-arriba { margin-top: 28px; }
.titulo-seccion { font-family: var(--fuente-titulos); font-size: 32px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.15; color: var(--marino); }
.subtitulo { font-family: var(--fuente-titulos); font-size: 19px; font-weight: 700; color: var(--marino); }
.etiqueta { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tenue); }
.volver { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; text-decoration: none; }

/* Encabezado */
.encabezado { background: var(--superficie); border-bottom: 1px solid var(--linea); }
@media (min-width: 760px) { .encabezado { position: sticky; top: 0; z-index: 20; } }
.encabezado .contenedor { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; min-height: 68px; padding-top: 10px; padding-bottom: 10px; }
.marca { display: inline-flex; align-items: center; gap: 10px; color: var(--tinta); text-decoration: none; }
.marca-logo { display: block; line-height: 0; }
.marca-logo img { display: block; height: 34px; width: auto; }
.marca-empresas { font-size: 12px; font-weight: 700; color: var(--tenue); border: 1px solid var(--linea); border-radius: 6px; padding: 2px 8px; }
.nav { display: flex; flex-wrap: wrap; gap: 4px 18px; flex: 1 1 auto; }
.nav a { color: var(--tenue); text-decoration: none; font-size: 15px; font-weight: 600; padding: 8px 0; border-bottom: 2px solid transparent; }
@media (hover: hover) { .nav a:hover { color: var(--marino); } }
.nav a[aria-current="page"] { color: var(--marino); border-bottom-color: var(--marino); }
.acciones-encabezado { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.formulario-en-linea { display: inline; margin: 0; }

/* Botones */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 22px; border-radius: 999px;
  font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; white-space: nowrap;
  border: 1px solid transparent; background: none; color: var(--tinta);
}
.boton-primario { background: var(--marino); color: #fff; }
@media (hover: hover) { .boton-primario:hover { background: var(--marino-profundo); color: #fff; } }
.boton-cobre, .boton-accion { background: var(--azul); color: #fff; font-weight: 700; }
@media (hover: hover) { .boton-cobre:hover, .boton-accion:hover { background: var(--azul-oscuro); color: #fff; } }
.boton-contorno { border-color: var(--borde-control); background: var(--superficie); color: var(--marino); }
@media (hover: hover) { .boton-contorno:hover { border-color: var(--marino); color: var(--marino); } }
.boton-contorno-primario { border-color: var(--azul); color: var(--azul); background: var(--superficie); font-weight: 700; }
.boton-claro { background: #fff; color: var(--marino); font-weight: 700; }
@media (hover: hover) { .boton-claro:hover { background: var(--celeste-claro); color: var(--marino); } }
.boton-fantasma { border-color: rgba(255, 255, 255, 0.35); color: #fff; }
@media (hover: hover) { .boton-fantasma:hover { background: rgba(255, 255, 255, 0.1); color: #fff; } }
.boton-texto { padding: 0 6px; color: var(--azul); }
.boton-peligro { border-color: var(--rojo); color: var(--rojo); background: var(--superficie); }
.boton-grande { min-height: 52px; padding: 0 30px; font-size: 16px; }
.boton-chico { min-height: 36px; padding: 0 14px; font-size: 13px; }
.boton-ancho { width: 100%; }
.boton[disabled], .boton[aria-disabled="true"] { background: var(--gris-suave); border-color: var(--linea); color: var(--tenue); cursor: not-allowed; }

/* Mensajes */
.mensajes { list-style: none; margin: 16px auto 0; padding: 0 24px; max-width: 1240px; width: 100%; display: flex; flex-direction: column; gap: 8px; }
.mensaje { padding: 12px 16px; border-radius: var(--radio-chico); border: 1px solid var(--linea); background: var(--superficie); overflow-wrap: anywhere; }
.mensaje-success { border-color: var(--verde-borde); background: var(--verde-caja); color: var(--verde-texto); }
.mensaje-error { border-color: var(--rojo-borde); background: var(--rojo-suave); color: var(--rojo); }
.mensaje-info, .mensaje-warning { border-color: var(--primario-borde); background: var(--bruma); }

/* Banda azul con buscador (resultados y sueldos) */
.banda { background: var(--marino); color: #fff; position: relative; overflow: hidden; padding-bottom: calc(var(--curva) * 0.6 + 12px); --tras-banda: var(--fondo); --capa: 22px; }
.banda-portada, .banda:has(+ .novedades) { --tras-banda: var(--superficie); }
/* Borde inferior: el contenido de abajo empieza con esquinas redondeadas (::after) sobre una capa azul
   más clara (::before). Ambos quedan fijos; al hacer scroll lo que se mueve es el contenido de la franja,
   que se hunde y se desvanece detrás de ese borde, así nunca queda un espacio vacío. */
.banda::before, .banda::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; pointer-events: none; border-radius: var(--curva) var(--curva) 0 0; z-index: 2; }
.banda::before { height: calc(var(--curva) + var(--capa)); background: var(--azul); }
.banda::after { height: var(--curva); background: var(--tras-banda); }
.banda > * { position: relative; z-index: 1; }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .banda { view-timeline-name: --banda; view-timeline-axis: block; }
    .banda > * { animation: franja-se-hunde linear both; animation-timeline: --banda; animation-range: exit 0% exit 100%; }
  }
}
@keyframes franja-se-hunde { to { transform: translateY(38%); opacity: 0.1; } }

/* Portada y Para empresas: cada tarjeta llega con un fundido y un leve ascenso la primera vez que entra en pantalla,
   y después se queda (app.js agrega .llego al verla; sin JavaScript no se oculta nada). */
@media (prefers-reduced-motion: no-preference) {
  html.js :is(.portada, .landing-empresas) .js-llega { opacity: 0; transform: translateY(22px); transition: opacity 0.55s ease-out, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1); }
  html.js :is(.portada, .landing-empresas) .js-llega:nth-child(4n+2), html.js .portada .mini-oferta.js-llega:nth-child(3n+2) { transition-delay: 0.08s; }
  html.js :is(.portada, .landing-empresas) .js-llega:nth-child(4n+3), html.js .portada .mini-oferta.js-llega:nth-child(3n+3) { transition-delay: 0.16s; }
  html.js :is(.portada, .landing-empresas) .js-llega:nth-child(4n+4) { transition-delay: 0.24s; }
  html.js :is(.portada, .landing-empresas) .js-llega.llego { opacity: 1; transform: none; }
}
.banda .contenedor { padding-top: 48px; padding-bottom: 52px; display: flex; flex-direction: column; gap: 22px; }
.banda h1 { font-size: 44px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; color: #fff; }
.banda p { color: var(--texto-sobre-marino); font-size: 17px; line-height: 1.55; max-width: 64ch; }
.buscador { display: flex; flex-wrap: wrap; background: var(--superficie); padding: 8px; border-radius: 16px; box-shadow: var(--sombra-elevada); max-width: 980px; }
.banda .buscador { color: var(--tinta); }
.buscador-campo { flex: 2 1 300px; display: flex; align-items: center; gap: 12px; padding: 0 16px; min-height: 56px; min-width: 0; color: var(--tenue); }
.buscador-campo + .buscador-campo { flex: 1 1 220px; border-left: 1px solid #e3e9f0; }
.buscador-campo input, .buscador-campo input[type="text"], .buscador-campo input[type="search"] { border: 0; outline: none; font: inherit; font-size: 17px; padding: 0; min-height: 40px; color: var(--tinta); background: transparent; min-width: 0; width: 100%; border-radius: 0; }
.buscador-campo:focus-within { box-shadow: inset 0 -2px 0 var(--azul); }
.buscador .boton { min-height: 56px; padding: 0 32px; font-size: 17px; border-radius: 12px; }
.buscador-casilla { order: 1; flex: 1 1 100%; align-items: center; padding: 10px 16px 4px; color: var(--tinta); }
.buscador-casilla input { width: 18px; height: 18px; margin: 0; flex: none; accent-color: var(--azul); }
/* Guardar ofertas */
.tarjeta-acciones { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.guardar { margin: 0; margin-left: auto; }
.boton-guardar { display: inline-flex; align-items: center; gap: 4px; font: inherit; font-size: 14px; font-weight: 600; color: var(--tenue); background: none; border: 1px solid var(--linea); border-radius: 999px; padding: 5px 12px 5px 9px; cursor: pointer; }
@media (hover: hover) { .boton-guardar:hover { color: var(--azul); border-color: var(--azul); } }
.boton-guardar.guardado { color: var(--azul); border-color: var(--azul); background: #eef4fc; }
.boton-guardar:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
.enlace-guardados.vacio { display: none; }
.enlace-guardados { display: inline-flex; align-items: center; gap: 4px; }
.enlace-guardados .contador { display: inline-block; min-width: 20px; padding: 0 6px; margin-left: 2px; border-radius: 999px; background: var(--azul); color: #fff; font-size: 12px; font-weight: 700; line-height: 20px; text-align: center; }
.tarjeta-guardada.cerrada .tf-titulo a, .tarjeta-guardada.cerrada .tf-org { color: var(--tenue); }
.enlace-claro { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
/* Pestañas de categorías dentro de «Buscar empleos» (todas las secciones de ofertas) */
.categorias-empleo { display: flex; gap: 22px; overflow-x: auto; scrollbar-width: none; margin-top: -20px; border-bottom: 1px solid rgba(255, 255, 255, 0.18); }
.categorias-empleo::-webkit-scrollbar { display: none; }
.categorias-empleo a { flex: none; color: #c9daf0; text-decoration: none; font-size: 15px; font-weight: 600; padding: 4px 0 12px; border-bottom: 3px solid transparent; margin-bottom: -1px; white-space: nowrap; }
@media (hover: hover) { .categorias-empleo a:hover { color: #fff; } }
.categorias-empleo a[aria-current="page"] { color: #fff; border-bottom-color: #fff; }
.categorias-empleo a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* Escritorio: si las pestañas no caben, se desvanecen a la derecha (como .fila-fichas). El relleno deja la última
   entera al final del scroll y scroll-padding saca del degradado la pestaña que recibe el foco (app.js la desliza).
   El scroll recorta lo que sobresale: el anillo de foco va por dentro del enlace, con 4px de aire a los lados
   (gap y márgenes compensan, así el texto queda donde estaba). */
@media (min-width: 760px) {
  .categorias-empleo { gap: 14px; margin: -22px 0 0 -4px; padding-right: 40px; scroll-padding-right: 40px; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); }
  .categorias-empleo a { padding: 6px 4px 12px; }
  .categorias-empleo a:focus-visible { outline-offset: -2px; }
}
/* Con una búsqueda, cada pestaña dice cuántas ofertas tiene para esa palabra. */
.pestana-n { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: rgba(255, 255, 255, 0.16); color: #fff; font-size: 12px; font-weight: 700; line-height: 1.5; }
.pestana-n.cero { background: none; color: #9fb7d6; font-weight: 600; }
/* Categoría sin resultados: las otras que sí tienen para la misma búsqueda. */
.otras-bolsas { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; }
.otras-bolsas > span { color: var(--tenue); font-size: 14px; }
.otras-bolsas .pestana-total { margin-left: 4px; }
.frecuentes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 14px; }
.frecuentes span { color: #a9c4e6; font-weight: 600; }
.frecuentes a { color: #fff; text-decoration: none; padding: 7px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.22); }
/* «Deja tu CV y que las empresas te busquen» (buscador de CVs): junto al título de /empleos/ y bajo el de minería y prácticas. */
.deja-cv { align-self: flex-start; color: #fff; font-size: 15px; font-weight: 700; text-decoration: none; padding: 7px 16px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.45); }
@media (hover: hover) { .deja-cv:hover { background: rgba(255, 255, 255, 0.12); } }
@media (max-width: 400px) { .deja-cv { font-size: 14px; padding: 7px 14px; text-align: center; } }  /* en una línea en el celular */
@media (hover: hover) { .frecuentes a:hover { background: rgba(255, 255, 255, 0.18); color: #fff; } }
.recientes-lista { display: contents; }
.recientes-borrar { padding: 0; border: 0; background: none; color: #a9c4e6; font: inherit; font-size: 13px; text-decoration: underline; cursor: pointer; }
@media (hover: hover) { .recientes-borrar:hover { color: #fff; } }

/* Portada */
.portada { background: var(--superficie); }
.portada .contenedor-medio { padding-top: 8px; padding-bottom: 56px; display: flex; flex-direction: column; gap: 40px; align-items: center; }
.banda-portada .contenedor-medio { padding-top: 64px; padding-bottom: 60px; display: flex; flex-direction: column; align-items: center; gap: 26px; text-align: center; }
.banda-portada h1 { font-size: 42px; text-wrap: balance; }
.banda-portada p { margin: 0 auto; }
.banda-portada .buscador { width: 100%; text-align: left; }
.banda-portada .frecuentes { justify-content: center; }
.areas { width: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.area { padding: 18px; border: 1px solid var(--linea); border-radius: var(--radio); text-decoration: none; color: var(--tinta); display: flex; flex-direction: column; gap: 4px; background: var(--superficie); }
@media (hover: hover) { .area:hover { border-color: var(--azul); } }
.ciudades { width: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 16px; }
.ciudades a { padding: 6px 0; color: var(--marino); font-size: 14px; text-decoration: none; transition: color var(--suave); }
.ciudades a:focus-visible { color: var(--azul); }
@media (hover: hover) { .ciudades a:hover { color: var(--azul); } }
.area strong { font-family: var(--fuente-titulos); font-size: 16.5px; color: var(--marino); }
.seccion-portada { width: 100%; display: flex; flex-direction: column; gap: 14px; }
.seccion-portada h2 { font-size: 18px; }
.recientes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.franja-cv { width: 100%; display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: space-between; padding: 24px 28px; border-radius: 16px; background: var(--marino); color: #fff; }
.franja-cv strong { font-family: var(--fuente-titulos); font-size: 22px; letter-spacing: -0.01em; display: block; }
.franja-cv span { font-size: 15px; color: var(--texto-sobre-marino); }

/* Listado */
.listado { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; padding-top: 28px; padding-bottom: 48px; }
.filtros { flex: 1 1 240px; max-width: 270px; display: flex; flex-direction: column; gap: 16px; }
.resultados { flex: 999 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.panel-detalle { flex: 1 1 440px; max-width: 520px; min-width: 0; position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; }
.caja { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); padding: 20px; }
.caja-grande { padding: 32px 36px; border-radius: 18px; }
.grupo-filtro { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.grupo-filtro legend { padding: 0; margin-bottom: 10px; }
.grupo-filtro ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.grupo-filtro label, .opcion { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.grupo-filtro input, .opcion input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--azul); flex: none; }
.filtros-plegable > summary { display: none; cursor: pointer; list-style: none; }
.filtros-plegable > summary::-webkit-details-marker { display: none; }
.solo-movil { display: none; }
fieldset.campo { border: 0; padding: 0; margin: 0; min-width: 0; }
.encabezado-resultados { display: flex; flex-wrap: wrap; gap: 12px; align-items: baseline; justify-content: space-between; padding: 0 2px; }
.encabezado-resultados h2 { font-size: 20px; }
.encabezado-resultados select { min-height: 40px; width: auto; }

.tarjeta-oferta { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; }
@media (hover: hover) { .tarjeta-oferta:hover { border-color: #b9cde3; } }
.tarjeta-oferta.seleccionada { border-color: var(--azul); box-shadow: 0 0 0 3px rgba(0, 93, 169, 0.12); }
.tarjeta-oferta h3 { font-size: 18px; font-weight: 700; line-height: 1.25; }
.tarjeta-oferta h3 a { color: var(--marino); text-decoration: none; }
@media (hover: hover) { .tarjeta-oferta h3 a:hover { text-decoration: underline; text-underline-offset: 3px; } }
/* El título usa todo el ancho: la fecha va al final de .meta (ofertas propias) o en su propia línea (otros portales). */
.tarjeta-oferta h3 { overflow-wrap: anywhere; }  /* una palabra larga («Aussendienstmitarbeiter») se corta en vez de desbordar */
.tarjeta-oferta .cuando { flex: none; font-size: 13px; color: var(--tenue); }
.meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 14px; color: var(--tenue); align-items: center; }
.meta > span { display: inline-flex; align-items: center; gap: 4px; }
.renta { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--tinta); }
/* Sin renta: un dato más de .meta, chico y tenue. Solo la renta publicada se destaca. */
.sin-renta { font-size: 13px; }

/* Listas de tarjetas de las bolsas (empleos públicos, minería, grandes empresas, BNE, prácticas, guardados). */
.externas-lista { display: flex; flex-direction: column; gap: 12px; }
/* Secciones por categoría: en pantallas anchas, las ofertas van en dos columnas del mismo alto por fila. */
.listado-dos .externas-lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; }
.listado-dos .externas-lista > :not(.tarjeta-oferta) { grid-column: 1 / -1; }
.listado-dos .externas-lista > .externas-mas { justify-self: center; }
.listado-dos .tarjeta-acciones { margin-top: auto; }
@media (max-width: 899px) { .listado-dos .externas-lista { grid-template-columns: minmax(0, 1fr); } }
.externa-postular { align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 700; color: var(--azul); text-decoration: none; }
@media (hover: hover) { .externa-postular:hover { text-decoration: underline; text-underline-offset: 3px; } }
/* Otros portales: «Postular en …» como botón que dice adónde lleva. «Guardadas» mezcla ambas y queda como está. */
.tarjeta-fuente:not(.tarjeta-guardada) .externa-postular { padding: 6px 12px 6px 14px; border: 1px solid var(--azul); border-radius: 999px; line-height: 1.2; transition: background var(--suave); }
@media (hover: hover) { .tarjeta-fuente:not(.tarjeta-guardada) .externa-postular:hover { background: var(--celeste-claro); text-decoration: none; } }
/* Guardar queda solo con el ícono (el texto sigue para lectores de pantalla) para que «Postular en …» sea lo principal.
   Borde con contraste de 3:1 sobre blanco (WCAG 1.4.11) y 40 px para el dedo. :where() deja la especificidad de
   .boton-guardar, así que el azul de «Guardada» y del hover siguen mandando. También en los programas de práctica. */
:where(.tarjeta-fuente:not(.tarjeta-guardada), .programa-acciones) .boton-guardar { font-size: 0; gap: 0; padding: 0; width: 40px; height: 40px; justify-content: center; border-color: #7d8998; }
.otras-fuentes-aviso { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; padding: 12px 16px; border-radius: 12px; background: var(--gris-suave); color: var(--tinta-2); font-size: 14px; line-height: 1.45; }
.otras-fuentes-aviso .ico { flex: none; color: var(--tenue); }
/* «Ver las 534 ofertas de grandes empresas» no cabe en 320 px: ahí se parte en dos líneas en vez de desbordar. */
.externas-mas { align-self: center; max-width: 100%; white-space: normal; text-align: center; text-wrap: balance; line-height: 1.3; padding-block: 8px; }

/* /empleos/: arriba las ofertas propias a todo el ancho; abajo, las otras bolsas. */
/* Tarjetas de las otras bolsas: misma estructura en todas. Son .tarjeta-oferta, así que
   tienen el mismo borde, sombra y animación al pasar el cursor que las de empresas verificadas. */
.tarjeta-fuente-caja { display: flex; flex-direction: column; gap: 10px; min-width: 0; flex: 1 1 auto; }
.tf-meta { flex-wrap: nowrap; min-width: 0; }
.tf-lugar { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tf-meta .insignia { flex: none; }
.tf-detalle { display: flex; flex-direction: column; gap: 2px; }
.bne-condiciones { display: flex; flex-wrap: wrap; gap: 2px 14px; margin: 0; font-size: 14px; color: var(--tinta-2); }
.tf-sueldo, .sueldo-cargo-enlace { align-self: flex-start; font-size: 13px; color: var(--azul); text-decoration: none; }
.tf-sueldo strong, .sueldo-cargo-enlace strong { font-weight: 700; }
@media (hover: hover) { .tf-sueldo:hover, .sueldo-cargo-enlace:hover { text-decoration: underline; } }
.sueldo-cargo-enlace { font-size: 14px; }
.tf-nivel { font-size: 14px; }
.tarjeta-fuente .externa-postular { margin-top: auto; }
/* «Todos» en pantallas anchas: todas las tarjetas (propias y de otros portales) del mismo tamaño, con las
   acciones abajo. Título en dos líneas como máximo e institución en una. En el celular, alto natural. */
@media (min-width: 721px) {
  .grilla-propias .tarjeta-oferta, .otras-fuentes-grid .tarjeta-fuente { min-height: 250px; }
  .grilla-propias .tarjeta-oferta .tarjeta-acciones, .otras-fuentes-grid .tarjeta-fuente .tarjeta-acciones { margin-top: auto; }
  .grilla-propias .tarjeta-oferta h3, .otras-fuentes-grid .tf-titulo, .otras-fuentes-grid .tf-resumen { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .otras-fuentes-grid .tf-org, .otras-fuentes-grid .tf-nivel { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
/* min(…, 100%): en celulares de 320 px la columna no pasa del ancho disponible ni desborda la página. */
.otras-fuentes-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 20px; align-items: start; }
.columna-fuente { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.columna-fuente[hidden] { display: none; }
.columna-fuente-cabeza { display: flex; flex-direction: column; gap: 4px; padding-bottom: 10px; border-bottom: 2px solid var(--linea); }
.columna-fuente-cabeza h2 { display: flex; align-items: center; gap: 8px; }
.pestana-total { font-size: 12px; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: var(--celeste-claro); color: var(--azul); }
.vacio-compacto { padding: 16px 20px; line-height: 1.5; }
.grupo-propias { display: flex; flex-direction: column; gap: 12px; }
.otras-fuentes { margin-top: 14px; }
/* Mientras llegan los resultados nuevos (filtros, búsqueda o página) se atenúan los actuales. */
#resultados, #otras-fuentes { transition: opacity 0.15s; }
.cargando-resultados #resultados, .cargando-resultados #otras-fuentes { opacity: 0.5; }
.grilla-propias { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); gap: 12px; }
.columna-fuente-cabeza h2 .ico { color: var(--azul); }
/* «Todos»: un grupo por bolsa con resultados (públicos, minería, grandes empresas, BNE), uno bajo otro. */
.columna-bolsas { display: flex; flex-direction: column; gap: 28px; min-width: 0; }
/* Las bolsas usan todo el ancho, en tantas columnas como quepan. */
.otras-fuentes-grid .lista-bolsa { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); gap: 12px; }
@media (max-width: 640px) {
  /* En el celular las columnas quedan una debajo de otra: 3 tarjetas por bolsa y el enlace a todas. */
  .lista-bolsa > .tarjeta-fuente:nth-child(n+4) { display: none; }
}


/* Empleos públicos: índice de concursos del Estado, enlazados al aviso original. */
.tarjeta-publica { background: var(--superficie); }
.tarjeta-publica .cierre-pronto { color: var(--rojo); font-weight: 700; }
.nota-fuente { line-height: 1.5; }
.frecuentes a[aria-current="page"] { background: #fff; color: var(--marino); border-color: #fff; font-weight: 700; }
@media (max-width: 640px) {
  /* En el celular las regiones van en una fila deslizable para no empujar los resultados hacia abajo. */
  .regiones-publicas, .categorias-publicas { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
  .regiones-publicas > *, .categorias-publicas > * { flex: none; }
}
.categorias-publicas + .regiones-publicas { margin-top: -6px; }
/* Filas deslizables sin barra también en Safari (scrollbar-width llegó recién en Safari 18.2). */
.nav::-webkit-scrollbar, .regiones-publicas::-webkit-scrollbar, .categorias-publicas::-webkit-scrollbar { display: none; }
.ir-portal-mineria { display: flex; }
.actividad { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--tenue); }
.actividad .ico { color: var(--verde); }
.actividad-alerta { color: var(--tinta); font-weight: 600; }
.actividad-alerta .ico { color: var(--tenue); }
.actividad-neutro { color: var(--azul); font-weight: 700; }
.actividad-neutro .ico { color: var(--azul); }

.insignia { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.insignia-verificada { background: var(--celeste-claro); color: var(--azul); }
.insignia-linkedin { background: var(--gris-suave); color: var(--tinta-2); }
.insignia-bien { background: var(--verde-suave); color: var(--verde-texto); }
.insignia-alerta { background: var(--rojo-suave); color: var(--rojo); }
.insignia-neutra { background: var(--gris-suave); color: var(--tinta-2); }
.insignia-info { background: var(--celeste-claro); color: var(--marino); }
.pastilla { display: inline-flex; align-items: center; gap: 6px; background: var(--gris-suave); font-size: 14px; font-weight: 600; padding: 6px 12px; border-radius: 999px; }
.pastilla-alerta { background: var(--rojo-suave); color: var(--rojo); border: 1px solid var(--rojo-borde); font-weight: 700; }

.paginacion { display: flex; justify-content: center; align-items: center; gap: 6px; padding: 12px 0; flex-wrap: wrap; }
.paginacion a, .paginacion span { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; text-decoration: none; font-weight: 600; padding: 0 12px; }
.paginacion [aria-current="page"] { background: var(--marino); color: #fff; }

/* Detalle de oferta */
.detalle { display: flex; flex-direction: column; gap: 20px; }
.acciones-oferta { flex-wrap: wrap; gap: 10px 12px; }
.compartir { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.boton-compartir { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border: 1px solid var(--linea); border-radius: 999px; background: none; color: var(--tinta-2); font: inherit; font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer; transition: border-color var(--suave), color var(--suave); }
@media (hover: hover) { .boton-compartir:hover { border-color: var(--azul); color: var(--azul); } }
.empresa-fila { display: flex; gap: 14px; align-items: center; }
.empresa-fila a { color: var(--tinta); text-decoration: none; }
@media (hover: hover) { .empresa-fila a:hover { text-decoration: underline; } }
.avatar { width: 52px; height: 52px; border-radius: 12px; background: var(--celeste-claro); color: var(--marino); font-weight: 800; font-size: 18px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.avatar-redondo { width: 44px; height: 44px; border-radius: 999px; font-size: 15px; }
.avatar-grande { width: 76px; height: 76px; border-radius: 16px; font-size: 26px; }
.detalle h1, .detalle h2.titulo-oferta { font-size: 28px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; color: var(--marino); }
.aviso { background: var(--bruma); border: 1px solid var(--primario-borde); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--tinta-2); }
.aviso-alerta { background: var(--rojo-caja); border-color: var(--rojo-borde); color: var(--rojo); }
.aviso-icono { flex-direction: row; gap: 14px; align-items: flex-start; }
.aviso-icono .ico { color: var(--marino); }
.fila-dato { display: flex; gap: 12px; align-items: flex-start; padding-top: 14px; border-top: 1px solid var(--linea); }
.fila-dato .ico { color: var(--verde); margin-top: 1px; }
.datos { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 20px; }
.datos dt { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tenue); }
.datos dd { margin: 4px 0 0; font-weight: 700; }
.texto-largo { color: var(--tinta-2); white-space: pre-line; line-height: 1.65; }
.lista { margin: 0; padding-left: 20px; color: var(--tinta-2); display: flex; flex-direction: column; gap: 6px; line-height: 1.5; }
.lista-checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.lista-checks li { display: flex; gap: 10px; align-items: center; }
.lista-checks .ico { color: var(--verde); }
.pie-detalle { border-top: 1px solid var(--linea-suave); padding-top: 14px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.enlace-reporte { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: 14px; font-weight: 600; color: var(--rojo); text-decoration: none; }
.detalle-pagina { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; padding-top: 24px; padding-bottom: 56px; }
.detalle-principal { flex: 999 1 560px; min-width: 0; }
.detalle-lateral { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.similares { display: flex; flex-direction: column; gap: 10px; }
.similar { display: flex; justify-content: space-between; gap: 12px; padding: 14px 16px; background: var(--superficie); border: 1px solid var(--linea); border-radius: 12px; text-decoration: none; color: inherit; }
@media (hover: hover) { .similar:hover { border-color: var(--azul); } }
.similar strong { color: var(--marino); font-size: 15px; }

/* Formularios */
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo > label, .campo legend { font-size: 14px; font-weight: 600; }
.campo legend { padding: 0; margin-bottom: 6px; }
.campo fieldset { border: 0; padding: 0; margin: 0; }
.ayuda { font-size: 13px; color: var(--tenue); }
input[type="text"], input[type="email"], input[type="password"], input[type="url"], input[type="number"], input[type="date"], input[type="search"], input[type="tel"], select, textarea {
  font: inherit; font-size: 16px; color: var(--tinta); background: var(--superficie);
  border: 1px solid var(--borde-campo); border-radius: var(--radio-chico); min-height: 46px; padding: 0 12px; width: 100%;
}
textarea { padding: 10px 12px; resize: vertical; line-height: 1.5; }
/* Safari: el buscador sin su cápsula nativa (así respeta borde y relleno) y las listas con la misma flecha
   en todos los navegadores (Safari las dibuja grises, con degradado y su propio alto). */
input[type="search"] { -webkit-appearance: textfield; appearance: textfield; }
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
select:where(:not([multiple]):not([size])) {
  -webkit-appearance: none; appearance: none; padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%235f6b7a' d='M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 20px 20px;
}
/* iPhone: la fecha alineada a la izquierda como los demás campos (Safari la centra). */
input[type="date"]::-webkit-date-and-time-value { text-align: left; }
input[type="file"] { font: inherit; }
.campo ul, .lista-opciones { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.campo ul label, .lista-opciones label { display: flex; gap: 10px; align-items: center; font-weight: 400; cursor: pointer; }
.campo input[type="radio"], .campo input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--azul); margin: 0; flex: none; }
.casilla { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; cursor: pointer; }
.casilla input { margin-top: 3px; }
.errores, .errorlist { list-style: none; margin: 0; padding: 0; color: var(--rojo); font-size: 13px; font-weight: 600; }
.campo-con-error input, .campo-con-error select, .campo-con-error textarea { border-color: var(--rojo); }
.grilla-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.grilla-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.separador { border: 0; border-top: 1px solid var(--linea-suave); margin: 4px 0; }
.codigo-input { font-size: 28px !important; letter-spacing: 0.3em; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.archivo { display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px; border: 1px solid var(--linea); border-radius: 10px; background: var(--superficie-2); font-size: 14px; font-weight: 600; }
.archivo .ico { color: var(--azul); }

/* Postular en dos pasos */
.postular { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; padding-top: 24px; padding-bottom: 56px; }
.postular-form { flex: 999 1 560px; min-width: 0; }
.postular-lateral { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.pasos { margin: 0; padding: 0; list-style: none; display: flex; gap: 10px; align-items: center; font-size: 14px; font-weight: 600; color: var(--tenue); }
.pasos li { display: flex; align-items: center; gap: 8px; }
.pasos .numero { width: 26px; height: 26px; border-radius: 50%; background: var(--gris-suave); color: var(--tenue); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; }
.pasos .actual { color: var(--marino); }
.pasos .actual .numero { background: var(--azul); color: #fff; }
.pasos .hecho { color: var(--verde); }
.pasos .hecho .numero { background: var(--verde-suave); color: var(--verde); }
.pasos .conector { width: 40px; height: 2px; background: var(--linea); }
.pasos .conector.hecho { background: var(--azul); }
.paso[hidden] { display: none; }
.resumen-postulacion { display: flex; flex-direction: column; border: 1px solid var(--linea); border-radius: var(--radio); }
.resumen-postulacion > div { display: flex; justify-content: space-between; gap: 16px; padding: 18px 20px; border-bottom: 1px solid var(--linea-suave); }
.resumen-postulacion > div:last-child { border-bottom: 0; }
.resumen-postulacion .contenido { display: flex; flex-direction: column; gap: 4px; }
.caja-verde { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; border-radius: var(--radio); background: var(--verde-caja); border: 1px solid var(--verde-borde); font-size: 14px; }
.caja-verde strong { color: var(--verde-texto); }
.caja-gris { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 12px; background: var(--superficie-2); border: 1px solid #e3e9f0; }
.caja-roja { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 12px; background: var(--rojo-caja); border: 1px solid var(--rojo-borde); }

/* Postulación enviada */
.confirmacion { align-items: center; text-align: center; gap: 24px; }
.confirmacion-icono { width: 72px; height: 72px; border-radius: 50%; background: var(--verde-suave); color: var(--verde); display: flex; align-items: center; justify-content: center; }
.confirmacion-icono.neutro { background: var(--gris-suave); color: var(--tenue); }
.etapas { margin: 0; padding: 0; list-style: none; width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; text-align: left; }
.etapas li { display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: 12px; border: 1px dashed #b7c6d7; font-size: 13px; color: var(--tenue); }
.etapas li strong { font-size: 15px; color: var(--marino); display: flex; align-items: center; gap: 8px; }
.etapas li.hecha { background: var(--verde-suave); border: 0; color: var(--tinta); }
.etapas li.hecha strong { color: var(--verde-texto); }
.franja-alerta { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; padding: 20px 24px; border-radius: 16px; background: var(--bruma); border: 1px solid var(--primario-borde); }
.franja-alerta form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0; }
.franja-alerta input[type="email"] { width: 240px; min-height: 44px; }
.grilla-ofertas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.mini-oferta { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); text-decoration: none; color: inherit; }
@media (hover: hover) { .mini-oferta:hover { border-color: var(--azul); } }
.mini-oferta strong { font-family: var(--fuente-titulos); font-size: 16.5px; color: var(--marino); line-height: 1.3; }

/* Mis postulaciones */
.pestanas { display: flex; gap: 6px; border-bottom: 1px solid var(--linea); }
.pestanas a { min-height: 44px; display: inline-flex; align-items: center; padding: 0 16px; font-weight: 600; color: var(--tenue); text-decoration: none; border-bottom: 3px solid transparent; }
.pestanas a[aria-current="page"], .pestanas a.activa { color: var(--marino); border-bottom-color: var(--azul); font-weight: 700; }
.columnas { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.columna-principal { flex: 999 1 620px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.columna-lateral { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.postulacion { background: var(--superficie); border: 1px solid var(--linea); border-radius: 16px; padding: 22px 24px; display: flex; flex-direction: column; gap: 14px; }
.postulacion-cabeza { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.postulacion-cabeza a.titulo, .postulacion-cabeza .titulo { font-size: 17px; font-weight: 700; color: var(--marino); text-decoration: none; }
.postulacion-cabeza .titulo-inactivo { color: var(--tenue); }
.estado { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; white-space: nowrap; }
.estado-revision { background: var(--celeste-claro); color: var(--marino); }
.estado-aprobada { background: var(--verde-suave); color: var(--verde-texto); }
.estado-rechazada { background: var(--gris-suave); color: var(--tinta-2); }
.estado-cerrada { background: var(--rojo-suave); color: var(--rojo); }
.progreso { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 6px; font-size: 12px; color: var(--tenue); }
.progreso .tramo { height: 6px; border-radius: 999px; background: #e3e9f0; }
.progreso .tramo.hecho { background: var(--azul); }
.progreso .tramo.actual { background: var(--celeste); }
.progreso .actual-texto { color: var(--marino); font-weight: 600; }

/* Barras y estrellas en SVG */
.barra { display: block; }
.barra-fondo { fill: var(--celeste-claro); }
.barra-relleno { fill: var(--azul); }
.barra-marino .barra-relleno { fill: var(--marino); }
.estrellas { display: inline-flex; gap: 2px; vertical-align: middle; }
.estrella { display: block; }
.estrella .llena { fill: var(--marino); }
.estrella .vacia { fill: #c9d4e1; }

/* Perfil público de empresa */
.perfil-cabecera { background: var(--superficie); border-bottom: 1px solid var(--linea); }
.perfil-cabecera .contenedor { padding-top: 32px; display: flex; flex-direction: column; gap: 24px; }
.perfil-identidad { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: space-between; }
.perfil-identidad h1 { font-size: 32px; font-weight: 700; }
.perfil-pestanas { display: flex; gap: 6px; font-size: 15px; font-weight: 600; flex-wrap: wrap; }
.perfil-pestanas a { padding: 12px 14px; color: var(--tenue); text-decoration: none; border-bottom: 3px solid transparent; }
.perfil-pestanas a:first-child { color: var(--marino); border-bottom-color: var(--azul); }
.datos-empresa { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.datos-empresa div { padding: 16px; background: var(--superficie); border: 1px solid var(--linea); border-radius: 12px; }
.datos-empresa dt { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tenue); }
.datos-empresa dd { margin: 6px 0 0; font-weight: 700; }
.panel { background: var(--superficie); border: 1px solid var(--linea); border-radius: 18px; padding: 32px 36px; display: flex; flex-direction: column; gap: 28px; }
.panel-cabeza { display: flex; flex-direction: column; gap: 6px; }
.panel-cabeza h2 { font-size: 22px; }
.panel-cabeza span { font-size: 15px; color: var(--tenue); line-height: 1.55; }
.responde { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.linea-tiempo { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.linea-tiempo::before { content: ""; position: absolute; left: 20px; right: 20px; top: 19px; height: 3px; border-radius: 999px; background: var(--azul); }
.hito { position: relative; display: flex; flex-direction: column; gap: 8px; }
.hito:nth-child(2) { align-items: center; text-align: center; }
.hito:nth-child(3) { align-items: flex-end; text-align: right; }
.hito .nodo { width: 40px; height: 40px; border-radius: 50%; background: #fff; border: 2px solid var(--azul); color: var(--azul); display: flex; align-items: center; justify-content: center; }
.hito strong { font-size: 15px; color: var(--tinta); }
.hito span { font-size: 14px; color: var(--tenue); }
.datos-responde { display: flex; flex-direction: column; gap: 18px; padding-left: 40px; border-left: 1px solid var(--linea); }
.dato-responde { display: flex; gap: 12px; align-items: flex-start; }
.dato-responde strong { display: block; font-size: 15px; color: var(--tinta); }
.dato-responde span { font-size: 14px; line-height: 1.5; color: var(--tenue); }
.dato-responde .ico { color: var(--verde); }
.dato-responde .ico.azul { color: var(--azul); }
.ofertas-empresa { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.oferta-chica { display: flex; flex-direction: column; gap: 8px; padding: 20px; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); text-decoration: none; color: inherit; }
@media (hover: hover) { .oferta-chica:hover { border-color: var(--azul); } }
.oferta-chica strong { font-size: 16px; color: var(--marino); line-height: 1.35; }

/* Evaluaciones */
.evaluaciones-cabeza { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px; padding-bottom: 20px; border-bottom: 1px solid var(--linea); }
.filtros-eval { display: flex; flex-wrap: wrap; gap: 8px; }
.filtro-eval { min-height: 38px; padding: 0 16px; display: inline-flex; align-items: center; border: 1px solid var(--borde-control); border-radius: 999px; background: #fff; font-size: 14px; color: var(--tinta); text-decoration: none; }
.filtro-eval[aria-current="true"] { border-color: var(--marino); background: var(--celeste-claro); color: var(--marino); font-weight: 700; }
.evaluaciones-cuerpo { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 48px; align-items: start; }
.resumen-eval { display: flex; flex-direction: column; gap: 24px; }
.nota-grande { display: flex; align-items: center; gap: 16px; }
.nota-grande strong { font-family: var(--fuente-titulos); font-size: 60px; line-height: 1; font-weight: 700; color: var(--marino); font-variant-numeric: tabular-nums; }
.distribucion { display: grid; grid-template-columns: 14px 1fr 24px; gap: 10px 12px; align-items: center; font-size: 14px; color: var(--tenue); font-variant-numeric: tabular-nums; }
.distribucion span:nth-child(3n) { text-align: right; }
.aspectos { display: flex; flex-direction: column; gap: 14px; padding-top: 20px; border-top: 1px solid var(--linea); }
.aspecto { display: flex; flex-direction: column; gap: 6px; }
.aspecto div { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.nota-sello { display: flex; gap: 10px; align-items: flex-start; padding: 14px 16px; border-radius: 12px; background: var(--bruma); font-size: 13px; line-height: 1.55; }
.lista-eval { display: flex; flex-direction: column; }
.evaluacion { display: flex; flex-direction: column; gap: 12px; padding: 24px 0; border-bottom: 1px solid var(--linea); }
.evaluacion:first-child { padding-top: 0; }
.evaluacion:last-child { border-bottom: 0; }
.evaluacion h3 { font-size: 18px; line-height: 1.35; color: var(--tinta); }
.evaluacion p { font-size: 15px; line-height: 1.65; max-width: 68ch; }
.resultado-eval { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; }
.resultado-eval.aprobado { color: var(--verde); }
.resultado-eval.no-seleccionado { color: var(--tenue); }
.resultado-eval.no-seleccionado .ico { color: var(--gris-estado); }
.respuesta-empresa { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-left: 3px solid var(--azul); border-radius: 0 10px 10px 0; background: var(--bruma); }
.respuesta-empresa strong { font-size: 13px; color: var(--marino); }
.respuesta-empresa span { font-size: 14px; line-height: 1.55; }
.utilidad { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 13px; color: var(--tenue); }
.utilidad form { margin: 0; }
.boton-voto { text-decoration: none; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border: 1px solid var(--borde-control); border-radius: 999px; background: #fff; font: inherit; font-size: 13px; color: var(--tinta); cursor: pointer; }
.boton-voto .ico { color: var(--tenue); }
.boton-voto[aria-pressed="true"] { border-color: var(--marino); background: var(--celeste-claro); color: var(--marino); }
.selector-nota { display: flex; gap: 6px; flex-wrap: wrap; border: 0; padding: 0; margin: 0; }
.selector-nota label { position: relative; }
.selector-nota input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.selector-nota span { min-width: 46px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--borde-control); border-radius: 10px; font-weight: 700; color: var(--marino); background: #fff; }
.selector-nota input:checked + span { background: var(--marino); border-color: var(--marino); color: #fff; }
.selector-nota input:focus-visible + span { outline: 3px solid var(--azul-vivo); outline-offset: 2px; }

/* Directorio de empresas */
.directorio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.ficha-empresa { display: flex; gap: 14px; align-items: flex-start; padding: 20px; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); text-decoration: none; color: inherit; }
@media (hover: hover) { .ficha-empresa:hover { border-color: var(--azul); } }
.ficha-empresa strong { color: var(--marino); font-size: 16px; }

/* Sueldos */
.sueldos { display: flex; flex-direction: column; gap: 28px; padding-top: 32px; padding-bottom: 56px; }
.sueldo-detalle { display: flex; flex-wrap: wrap; gap: 24px; align-items: stretch; }
.sueldo-principal { flex: 999 1 640px; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.sueldo-cifra { font-size: 40px; line-height: 1.1; font-weight: 800; color: var(--marino); font-variant-numeric: tabular-nums; }
.sueldo-cargo { font-size: 22px; color: var(--marino); }
.sueldo-explica { font-size: 15px; }
.lista-chica { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--tenue); }
.tabla-rangos a { color: inherit; text-decoration: none; }
@media (hover: hover) { .tabla-rangos a:hover { color: var(--azul); text-decoration: underline; } }
.tabla-rangos { display: grid; grid-template-columns: 180px minmax(0, 1fr) 210px; gap: 14px 18px; align-items: center; }
.tabla-rangos .valor { font-size: 14px; text-align: right; font-variant-numeric: tabular-nums; }
.escala { display: flex; justify-content: space-between; font-size: 12px; color: var(--tenue); font-variant-numeric: tabular-nums; }
.por-jornada { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.por-jornada div { padding: 16px; border-radius: 12px; background: var(--bruma); border: 1px solid #d5e4f4; display: flex; flex-direction: column; gap: 4px; }
.por-jornada span { font-size: 13px; font-weight: 700; color: var(--tenue); }
.cargos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.cargo { display: flex; flex-direction: column; gap: 8px; padding: 20px; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); text-decoration: none; color: inherit; }
.cargo[aria-current="true"] { border-color: var(--azul); }
@media (hover: hover) { .cargo:hover { border-color: var(--azul); } }
.cargo[aria-current="true"] { box-shadow: inset 0 0 0 1px var(--azul); }
.cargo strong { color: var(--marino); }
.cargo .monto { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.etiqueta-ejemplo { padding: 4px 12px; border-radius: 999px; background: var(--celeste-claro); color: var(--marino); font-size: 13px; font-weight: 700; }

/* Para empresas */
.seccion-landing { padding-top: 64px; padding-bottom: 24px; display: flex; flex-direction: column; gap: 32px; }
.seccion-landing h2 { font-size: 34px; font-weight: 700; letter-spacing: -0.01em; }
.pasos-landing { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.pasos-landing li { padding: 26px; border: 1px solid var(--linea); border-radius: 16px; background: #fff; display: flex; flex-direction: column; gap: 10px; }
.pasos-landing .numero { width: 36px; height: 36px; border-radius: 50%; background: var(--marino); color: #fff; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.pasos-landing strong { font-size: 18px; color: var(--marino); }
.pasos-landing span { font-size: 15px; line-height: 1.6; color: var(--tinta-2); }
.planes-cabeza { display: flex; flex-direction: column; gap: 8px; align-items: center; text-align: center; }
.planes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: stretch; max-width: 820px; width: 100%; margin: 0 auto; }
.plan { position: relative; padding: 28px; border: 1px solid var(--linea); border-radius: 18px; background: #fff; display: flex; flex-direction: column; gap: 16px; }
.plan-destacado { border: 2px solid var(--azul); }
.plan .cinta { position: absolute; top: -13px; left: 24px; padding: 3px 12px; border-radius: 999px; background: var(--azul); color: #fff; font-size: 12px; font-weight: 700; }
.plan strong { font-size: 18px; color: var(--marino); }
.plan .precio { font-size: 36px; font-weight: 800; color: var(--tinta); font-variant-numeric: tabular-nums; }
.plan .precio small { font-size: 16px; font-weight: 600; color: var(--tenue); }
.plan ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; font-size: 15px; line-height: 1.5; flex: 1; }
.preguntas-frecuentes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.preguntas-frecuentes div { display: flex; flex-direction: column; gap: 8px; }
.preguntas-frecuentes span { font-size: 15px; line-height: 1.6; color: var(--tinta-2); }



/* Tablas */
.tabla-caja { overflow-x: auto; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); }
.tabla { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabla th { text-align: left; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--tenue); padding: 12px 16px; border-bottom: 1px solid var(--linea); white-space: nowrap; }
.tabla td { padding: 16px; border-bottom: 1px solid var(--linea-suave); vertical-align: top; }
.tabla tr:last-child td { border-bottom: 0; }
.tabla .acciones { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tabla .acciones form { margin: 0; }
.form-pausa { display: inline-flex; gap: 6px; align-items: center; margin: 0; }
.form-pausa input[type="date"] { width: 150px; min-height: 36px; padding: 0 8px; font-size: 14px; }
.tabla .boton { min-height: 36px; padding: 0 14px; font-size: 14px; }
.aviso-urgente { display: flex; gap: 14px; align-items: flex-start; padding: 16px 20px; border-radius: var(--radio); background: var(--rojo-caja); border: 1px solid var(--rojo-borde); }
.aviso-urgente .ico { color: var(--rojo-vivo); }
.resumen-empresa { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.resumen-empresa div { padding: 18px 20px; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); display: flex; flex-direction: column; gap: 4px; }
.resumen-empresa strong { font-size: 26px; color: var(--marino); font-variant-numeric: tabular-nums; }
.resumen-empresa span { font-size: 13px; color: var(--tenue); }

/* Revisión de CVs */
.barra-oferta { display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: center; justify-content: space-between; }
.revision { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; padding-top: 20px; padding-bottom: 32px; }
.visor { flex: 999 1 560px; min-width: 0; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden; }
.visor-barra { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; padding: 12px 18px; border-bottom: 1px solid var(--linea); background: var(--superficie-2); }
.visor-hoja { position: relative; background: #e6ebf1; }
.visor-pdf { display: block; width: 100%; height: 78vh; min-height: 560px; border: 0; background: #e6ebf1; }
.marca-agua { position: absolute; inset: 0; pointer-events: none; display: flex; flex-direction: column; justify-content: space-around; align-items: center; overflow: hidden; }
.marca-agua span { transform: rotate(-24deg); font-size: 18px; font-weight: 700; color: rgba(13, 56, 120, 0.16); white-space: nowrap; }
body.portal-empresas .marca-agua span { color: rgba(30, 31, 33, 0.14); }
/* Panel de decisión: quién es, qué decides, qué le llega y dónde lo guardas; el botón queda siempre a la vista. */
.decision { flex: 1 1 360px; max-width: 440px; min-width: 0; display: flex; flex-direction: column; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); }
/* Ficha lateral de un CV ya decidido (ver_cv): la misma columna, con su relleno. */
.decision.caja { gap: 18px; padding: 20px; }
.decision-persona { display: flex; align-items: center; gap: 14px; padding: 20px 20px 0; }
.decision-avatar { display: inline-grid; place-items: center; width: 52px; height: 52px; flex: none; border-radius: 50%; background: var(--celeste-claro); color: var(--azul); font-family: var(--fuente-titulos); font-size: 19px; font-weight: 800; }
.decision-quien { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.decision-nombre { font-size: 23px; font-weight: 700; line-height: 1.15; overflow-wrap: anywhere; }
.decision-meta { font-size: 13px; line-height: 1.45; color: var(--tenue); }
/* Sugerencias del asistente del conector: Postulaciones de una oferta y pantalla de revision */
.sugerencias { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.sugerencia { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border-radius: var(--radio); background: var(--superficie); border: 1px solid var(--linea-suave); }
.sugerencia-cabeza { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sugerencia-motivo { margin: 0; font-size: 14px; line-height: 1.45; color: var(--tinta); overflow-wrap: anywhere; }
.decision-cola { align-self: flex-start; flex: none; padding: 3px 10px; border-radius: 999px; background: var(--gris-suave); color: var(--tinta-2); font-size: 12px; font-weight: 700; white-space: nowrap; }
.decision-nota { margin: 14px 20px 18px; padding: 9px 12px; border-radius: var(--radio-chico); background: var(--bruma); color: var(--tinta-2); font-size: 13px; line-height: 1.4; }
.decision-seccion { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 18px 20px; border-top: 1px solid var(--linea-suave); }
.decision-rotulo { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--tinta); }
.decision-obligatorio, .decision-opcional { padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.decision-obligatorio { background: var(--celeste-claro); color: var(--azul); }
.decision-opcional { background: var(--gris-suave); color: var(--tenue); }
.decision-ayuda { font-size: 13px; line-height: 1.45; color: var(--tenue); }
.decision-preguntas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.decision-preguntas li { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; font-size: 14px; line-height: 1.4; }
.decision-preguntas .respuesta { flex: none; padding: 1px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.decision-preguntas .respuesta-si { background: var(--verde-suave); color: var(--verde-texto); }
.decision-preguntas .respuesta-no { background: var(--rojo-suave); color: var(--rojo); }
.decision-preguntas .pregunta-escrita { flex-direction: column; gap: 6px; }
.respuesta-escrita { display: block; padding: 10px 12px; border-left: 3px solid var(--celeste); border-radius: 0 var(--radio-chico) var(--radio-chico) 0; background: var(--bruma); color: var(--tinta); font-size: 14px; line-height: 1.5; white-space: pre-line; overflow-wrap: anywhere; }
/* Aprobar / Rechazar: dos fichas grandes; la elegida se llena y la otra se apaga. */
.opciones-decision { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; border: 0; margin: 0; padding: 0; min-width: 0; }
.opcion-decision { position: relative; }
.opcion-decision input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.opcion-decision span { min-height: 56px; padding: 0 12px; border-radius: 14px; border: 1.5px solid var(--borde-control); display: flex; align-items: center; justify-content: center; gap: 8px; background: var(--superficie); color: var(--tinta); font-size: 16px; font-weight: 700; transition: background var(--suave), border-color var(--suave), color var(--suave); }
@media (hover: hover) { .opcion-decision:hover span { border-color: var(--marino); } }
.opcion-aprobar input:checked + span { background: var(--verde); border-color: var(--verde); color: #fff; }
.opcion-rechazar input:checked + span { background: var(--marino); border-color: var(--marino); color: #fff; }
.opciones-decision:has(input:checked) .opcion-decision input:not(:checked) + span { color: var(--tenue); }
.opcion-decision input:focus-visible + span { outline: 3px solid var(--azul-vivo); outline-offset: 2px; }
.solo-aprobar, .solo-rechazar { display: none; }
.decision:has(input[value="aprobar"]:checked) .solo-aprobar { display: flex; }
.decision:has(input[value="rechazar"]:checked) .solo-rechazar { display: flex; }
/* Motivos: una lista agrupada; el elegido queda marcado en azul. */
.motivos { list-style: none; margin: 0; padding: 0; border: 1px solid var(--linea); border-radius: 12px; overflow: hidden; }
.motivos li + li { border-top: 1px solid var(--linea-suave); }
.motivos label { display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 10px 14px; color: var(--tinta); font-size: 14px; line-height: 1.35; cursor: pointer; transition: background var(--suave); }
@media (hover: hover) { .motivos label:hover { background: var(--superficie-2); } }
.motivos label:has(input:checked) { background: var(--bruma); color: var(--marino); font-weight: 600; }
.motivos input { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; margin: 0; flex: none; border: 1.5px solid var(--borde-campo); border-radius: 50%; background: var(--superficie); cursor: pointer; }
.motivos input:checked { border-color: var(--azul); background: var(--azul); box-shadow: inset 0 0 0 3px var(--superficie); }
.motivos input:focus-visible { outline: 3px solid var(--azul-vivo); outline-offset: 2px; }
.motivos .motivo-texto { flex: 1 1 auto; }
.motivos kbd { flex: none; }
.decision .pastillas-opcion { display: flex; flex-wrap: wrap; gap: 8px; }
.decision .pastilla-opcion span { min-height: 38px; padding: 0 14px; font-size: 14px; }
.decision textarea { min-height: 92px; font-size: 15px; }
/* Así le llega: el correo que recibe la persona, armado mientras se decide. */
.decision-vista { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border: 1px solid var(--linea); border-radius: 12px; background: var(--superficie-2); color: var(--tinta-2); font-size: 13.5px; line-height: 1.55; }
.decision-vista-titulo { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--tenue); }
.decision-vista p { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
.decision-vista .js-vista-intro { color: var(--tinta); font-weight: 600; }
.decision-vista .vista-falta { color: var(--tenue); font-style: italic; }
.categoria-nueva { display: none; flex-direction: column; gap: 6px; }
.banco-decision:has(input[name="categoria"][value="nueva"]:checked) .categoria-nueva { display: flex; }
.categoria-nueva input { min-height: 42px; }
.decision-nota-suelta { margin: 0 20px 18px; }
.decision-pie { position: sticky; bottom: 0; z-index: 2; display: flex; flex-direction: column; gap: 8px; padding: 14px 20px 18px; border-top: 1px solid var(--linea); border-radius: 0 0 var(--radio) var(--radio); background: var(--superficie); box-shadow: 0 -10px 18px -16px rgba(13, 56, 120, 0.35); }
kbd { font-family: var(--fuente); font-size: 12px; font-weight: 700; border: 1px solid var(--borde-campo); border-bottom-width: 2px; border-radius: 5px; padding: 0 6px; background: var(--superficie); color: var(--tinta-2); }
.respuesta-no { color: var(--rojo); font-weight: 700; }
.vacio { text-align: center; padding: 48px 24px; display: flex; flex-direction: column; gap: 12px; align-items: center; }

/* Contenido legal */
.prosa { display: flex; flex-direction: column; gap: 14px; color: var(--tinta-2); line-height: 1.65; }
.prosa h2 { font-weight: 700; font-size: 20px; color: var(--marino); margin-top: 12px; }
.prosa ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.marcador { background: var(--celeste-claro); padding: 0 4px; border-radius: 4px; }

/* Pie */
.pie { background: var(--marino-profundo); color: var(--texto-sobre-marino); }
body > main { padding-bottom: 56px; }
body > main:has(> .portada) { padding-bottom: 0; }
.pie .contenedor { display: flex; flex-direction: column; gap: 28px; padding-top: 40px; padding-bottom: 32px; }
/* Tres columnas con título chico; en el celular quedan una bajo otra (200px no caben dos en 390px). */
.pie-columnas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 28px 32px; font-size: 14px; }
.pie-titulo { margin-bottom: 12px; font-size: 13px; font-weight: 700; letter-spacing: 0.02em; color: #fff; }
.pie-grupo ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.pie-base { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, 0.14); }
.pie a { color: var(--texto-sobre-marino); text-decoration: none; }
@media (hover: hover) { .pie a:hover { color: #fff; text-decoration: underline; } }
.pie img { height: 28px; width: auto; display: block; }
.pie-legal { font-size: 13px; color: #9fb7d6; overflow-wrap: anywhere; }
.pie-legal a { color: inherit; }

/* Pantallas medianas: el detalle abre en página propia */
@media (max-width: 1099px) {
  .panel-detalle { display: none; }
  .tarjeta-oferta.seleccionada { border-color: var(--linea); box-shadow: none; }
  .areas, .ciudades { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .recientes, .grilla-ofertas, .ofertas-empresa, .directorio, .cargos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .evaluaciones-cuerpo, .responde { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .datos-responde { padding-left: 0; border-left: 0; padding-top: 24px; border-top: 1px solid var(--linea); }
  .resumen-empresa { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 759px) {
  .contenedor, .contenedor-angosto, .contenedor-medio { padding-left: 16px; padding-right: 16px; }
  .banda .contenedor { padding-top: 24px; padding-bottom: 28px; gap: 16px; }
  .banda h1 { font-size: 27px; }
  .portada .contenedor-medio { padding-top: 4px; padding-bottom: 32px; gap: 28px; }
  .banda-portada .contenedor-medio { padding-top: 28px; padding-bottom: 32px; gap: 18px; }
  .banda { --curva: 32px; --capa: 14px; }
  .banda-portada h1 { font-size: 27px; }
  .area { padding: 14px; }
  .buscador-campo + .buscador-campo { border-left: 0; border-top: 1px solid var(--linea); }
  .buscador .boton { width: 100%; }
  .buscador-casilla { order: 0; padding-bottom: 10px; }
  .encabezado .contenedor { gap: 4px 12px; min-height: 0; }
  .acciones-encabezado { order: 1; margin-left: auto; gap: 8px; }
  .acciones-encabezado .boton { min-height: 38px; padding: 0 14px; font-size: 14px; }
  .nav { order: 2; flex: 1 1 100%; flex-wrap: nowrap; overflow-x: auto; gap: 20px; scrollbar-width: none; }
  .nav a { white-space: nowrap; padding: 8px 0; }
  .categorias-empleo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; overflow: visible; margin-top: -4px; border-bottom: 0; }
  .categorias-empleo a { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2px 6px; min-height: 42px; padding: 8px; margin: 0; font-size: 14px; text-align: center; white-space: normal; border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 10px; background: rgba(255, 255, 255, 0.08); }
  .categorias-empleo .pestana-n { margin-left: 0; }  /* el gap separa el contador, también cuando baja a otra línea */
  .categorias-empleo a[aria-current="page"] { background: #fff; border-color: #fff; color: var(--marino); }
  .categorias-empleo a[aria-current="page"] .pestana-n { background: var(--celeste-claro); color: var(--azul); }
  .categorias-empleo a[aria-current="page"] .pestana-n.cero { background: none; color: var(--tenue); }
  .categorias-empleo a:last-child:nth-child(odd) { grid-column: 1 / -1; }  /* con un número impar, la última a lo ancho */
  .ocultar-movil { display: none; }
  .marca-logo img { height: 28px; }
  .tabla-caja { overflow: visible; }
  .tabla, .tabla tbody, .tabla tr, .tabla td { display: block; width: 100%; }
  .tabla thead { display: none; }
  .tabla tr { padding: 12px 0; border-bottom: 1px solid var(--linea); }
  .tabla tr:last-child { border-bottom: 0; }
  .tabla td { border: 0; padding: 4px 16px; }
  .tabla td:empty { display: none; }
  .tabla td[data-etiqueta]::before { content: attr(data-etiqueta); display: block; font-size: 12px; font-weight: 600; color: var(--tenue); margin-bottom: 2px; }
  .tabla td:first-child[data-etiqueta]::before { display: none; }
  .listado { flex-direction: column; align-items: stretch; gap: 16px; }
  .filtros { display: contents; }
  .filtros-plegable { order: 0; }
  .resultados { order: 1; flex-basis: auto; }
  .alerta-caja { order: 2; }
  .filtros-plegable > summary { display: flex; }
  .filtros-plegable[open] > summary { margin-bottom: 16px; }
  .solo-escritorio { display: none; }
  .solo-movil { display: inline; }
  .grilla-2, .grilla-3, .datos, .recientes, .grilla-ofertas, .ofertas-empresa, .directorio, .cargos, .pasos-landing, .preguntas-frecuentes, .planes, .etapas { grid-template-columns: minmax(0, 1fr); }
  .resumen-empresa { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .caja-grande, .panel { padding: 22px 18px; }
  .decision { max-width: none; }
  .visor-pdf { height: 70vh; min-height: 420px; }
  .tabla-rangos { grid-template-columns: minmax(0, 1fr) auto; grid-auto-flow: row dense; gap: 6px 12px; }
  .tabla-rangos .barra { grid-column: 1 / -1; margin-bottom: 10px; }
  .tabla-rangos .escala { grid-column: 1 / -1; }
  .tabla-rangos > span:empty { display: none; }
  .franja-alerta input[type="email"] { width: 100%; }
}

/* Pasos: el número se cambia por un check al completar */
.pasos .js-check { display: none; }
.pasos .hecho .js-check { display: inline; }
.pasos .hecho .js-num { display: none; }
.lista-pasos .ico { color: var(--azul); }
.lista-pasos li { align-items: flex-start; }
.lista-checks li .sello { margin: 0; }
.buscador-campo select.selector-limpio { border: 0; outline: none; font: inherit; font-size: 17px; padding: 0 30px 0 0; min-height: 40px; color: var(--tinta); background-color: transparent; background-position: right 4px center; border-radius: 0; width: 100%; }
.crece { flex: 1 1 auto; min-width: 0; }

.ancho-lectura { max-width: 72ch; }
@media (max-width: 1499px) { .solo-ancho { display: none !important; } }
.resumen-postulacion a, .resumen-postulacion .boton-texto { text-decoration: none; font-weight: 600; font-size: 14px; color: var(--azul); }

/* Resultados según el diseño: cinta de novedades que corre, filtros como botones y dos columnas */
.banda-resultados .contenedor { padding-top: 56px; padding-bottom: 56px; gap: 28px; }
.banda-resultados h1 { font-size: 44px; max-width: 900px; text-wrap: balance; }
/* /empleos/: el título y «Deja tu CV» en una fila, y el buscador a lo ancho, alineado con las pestañas y las ofertas. */
.titulo-banda { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 32px; }
.titulo-banda > :first-child { flex: 1 1 400px; min-width: 0; }  /* un título largo se parte en dos líneas antes de bajar el botón */
.titulo-banda .deja-cv { align-self: center; }
.banda-empleos .buscador { max-width: none; }
/* «Busca también» en una sola fila: si no cabe, se desliza dentro de ella (ninguna ficha queda sola abajo) y el
   borde derecho se desvanece para que se note que hay más. El relleno deja ver el contorno de foco. */
.fila-fichas { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 5px 32px 5px 5px; margin: -5px; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); }
.fila-fichas > * { flex: none; }
.fila-fichas::-webkit-scrollbar { display: none; }
.novedades { display: flex; align-items: stretch; background: var(--superficie); border-bottom: 1px solid var(--linea); }
/* Bajo la banda azul, la cinta sube y ocupa el borde redondeado blanco: sin el hueco vacío de arriba,
   queda centrada en el blanco. La parte que sube es transparente para no tapar las esquinas, y los
   extremos se desvanecen para que el texto no pase sobre ellas. */
.banda + .novedades { --sube: 44px; position: relative; z-index: 3; margin-top: calc(-1 * var(--sube)); background: linear-gradient(to bottom, transparent var(--sube), var(--superficie) var(--sube)); }
.banda + .novedades .novedades-ventana { -webkit-mask-image: linear-gradient(to right, transparent 24px, #000 88px, #000 calc(100% - 88px), transparent calc(100% - 24px)); mask-image: linear-gradient(to right, transparent 24px, #000 88px, #000 calc(100% - 88px), transparent calc(100% - 24px)); }
.novedades-ventana { flex: 1 1 auto; min-width: 0; overflow: hidden; }
.novedades-pista { display: flex; width: max-content; margin: 0; padding: 0; list-style: none; animation: novedades-avanza 60s linear infinite; }
.novedades:focus-within .novedades-pista { animation-play-state: paused; }
@media (hover: hover) { .novedades:hover .novedades-pista { animation-play-state: paused; } }
@keyframes novedades-avanza { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.novedades-item { flex: none; display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 0 28px; border-right: 1px solid var(--linea-suave); white-space: nowrap; }
.novedades-marca { flex: none; width: 36px; height: 36px; border-radius: 10px; background: var(--celeste-claro); color: var(--marino); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; }
.novedades-texto { font-size: 15px; color: var(--tenue); }
.novedades-texto strong { color: var(--marino); margin-right: 2px; }
.novedades-estado { margin-left: 4px; font-weight: 700; color: var(--azul); }
.novedades-estado.bien { color: var(--verde-texto); }
.novedades-estado.alerta { color: var(--rojo); }
.novedades-enlace { display: inline-flex; align-items: center; gap: 2px; font-size: 14px; font-weight: 700; color: var(--azul); text-decoration: none; }
@media (hover: hover) { .novedades-enlace:hover { text-decoration: underline; } }
@media (prefers-reduced-motion: reduce) {
  .novedades-pista { animation: none; }
  .novedades-ventana { overflow-x: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}

/* Fluidez: el encabezado queda quieto y el resto se funde al cambiar de página.
   Solo navegación completa: las cargas parciales de HTMX (otros sitios, Guardar) no se funden,
   porque llegan mientras la persona hace scroll y la página entera parpadearía. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  @view-transition { navigation: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.22s; }
}
.encabezado { view-transition-name: encabezado; }
.boton, .nav a, .frecuentes a, .chip-alternar, .chip-filtro > summary, .pestanas a {
  transition: background-color var(--suave), border-color var(--suave), color var(--suave), box-shadow var(--suave);
}
.tarjeta-oferta, .mini-oferta, .area { transition: border-color var(--suave), box-shadow var(--suave); }
/* Durante el scroll (html.desplazando, lo pone app.js) no hay sombra ni transición al pasar el mouse. */
html.desplazando .tarjeta-oferta, html.desplazando .mini-oferta, html.desplazando .area { transition: none; }
@media (hover: hover) { html:not(.desplazando) .tarjeta-oferta:hover, html:not(.desplazando) .mini-oferta:hover, html:not(.desplazando) .area:hover { box-shadow: 0 8px 24px rgba(13, 56, 120, 0.08); } html:not(.desplazando) body.portal-empresas .tarjeta-oferta:hover { box-shadow: 0 8px 24px rgba(16, 18, 20, 0.08); } }
.listado-diseno { padding-top: 36px; padding-bottom: 24px; display: flex; flex-direction: column; gap: 18px; }
.banda + .listado-diseno { padding-top: 8px; }
.barra-resultados { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; }
.conteo-resultados { display: flex; flex-direction: column; gap: 4px; }
.conteo-resultados h2 { font-size: 22px; font-weight: 700; }
.conteo-resultados select { width: auto; min-height: 0; padding: 0 24px 0 4px; border: 0; background-color: transparent; background-position: right 2px center; background-size: 18px 18px; font-size: 14px; font-weight: 700; color: var(--tinta); cursor: pointer; }
.conteo-resultados select:focus-visible { outline: 3px solid var(--azul-vivo); }
/* «Ordenar por» a la altura de los chips (38px): la barra los alinea por abajo, así queda centrado con ellos. */
.conteo-resultados > p { display: flex; flex-wrap: wrap; align-items: center; gap: 0 4px; min-height: 38px; }
.chips-filtro { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.chip-filtro { position: relative; }
.chip-filtro > summary, .chip-alternar { list-style: none; display: inline-flex; align-items: center; gap: 4px; min-height: 38px; padding: 0 12px 0 14px; border: 1px solid var(--borde-control); border-radius: 999px; background: var(--superficie); font-size: 14px; color: var(--tinta); cursor: pointer; -webkit-user-select: none; user-select: none; }
.chip-alternar { padding: 0 14px; }
.chip-filtro > summary::-webkit-details-marker { display: none; }
.chip-filtro > summary .ico { color: var(--tenue); transition: transform 0.15s; }
.chip-filtro[open] > summary .ico { transform: rotate(180deg); }
@media (hover: hover) { .chip-filtro > summary:hover, .chip-alternar:hover { border-color: var(--marino); } }
.chip-filtro:has(input:checked:not([value=""])) > summary, .chip-alternar:has(input:checked) { border-color: var(--marino); background: var(--celeste-claro); color: var(--marino); font-weight: 600; }
.chip-alternar input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip-alternar:has(input:focus-visible) { outline: 3px solid var(--azul-vivo); outline-offset: 2px; }
.panel-filtro { position: absolute; z-index: 20; top: calc(100% + 8px); left: 0; min-width: 260px; padding: 18px; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); box-shadow: var(--sombra-elevada); display: flex; flex-direction: column; gap: 16px; }
.chips-filtro > .chip-filtro:nth-child(3) .panel-filtro { left: auto; right: 0; }
/* Modalidad, jornada y renta solo filtran las ofertas propias: el panel lo dice. */
.nota-filtro { max-width: 280px; padding-top: 12px; border-top: 1px solid var(--linea); }
.columnas-resultados { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.columna-resultados { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.columnas-resultados .panel-detalle { flex: 1 1 520px; max-width: none; }
.columna-resultados .franja-alerta { background: var(--superficie); border-color: var(--linea); }
@media (max-width: 759px) {
  .banda-resultados .contenedor { padding-top: 24px; padding-bottom: 32px; }
  .banda-resultados h1 { font-size: 27px; }
  .novedades-item { min-height: 56px; padding: 0 20px; }
  .banda + .novedades { --sube: 20px; }
  .banda + .novedades .novedades-ventana { -webkit-mask-image: linear-gradient(to right, transparent 8px, #000 40px, #000 calc(100% - 40px), transparent calc(100% - 8px)); mask-image: linear-gradient(to right, transparent 8px, #000 40px, #000 calc(100% - 40px), transparent calc(100% - 8px)); }
  .novedades-texto { font-size: 14px; }
  .columna-resultados .franja-alerta { order: 2; }
  .panel-filtro { position: fixed; left: 0; right: 0; top: auto; bottom: 0; min-width: 0; border-radius: 16px 16px 0 0; padding: 22px 20px 28px; }
  .chips-filtro > .chip-filtro:nth-child(3) .panel-filtro { left: 0; right: 0; }
  .nota-filtro { max-width: none; }
  .barra-resultados { align-items: flex-start; }
}

/* Ingreso: «Ingresar» con contraseña y «Enviarme un código», lado a lado (uno sobre otro en el celular). */
.enlace-olvide { padding: 0; border: 0; background: none; color: var(--azul); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
@media (hover: hover) { .enlace-olvide:hover { text-decoration: underline; } }
.campo > .fila-entre { align-items: baseline; }
.campo > .fila-entre label { font-size: 14px; font-weight: 600; }
.acciones-ingreso { display: flex; flex-wrap: wrap; gap: 10px; }
.acciones-ingreso > .boton { flex: 1 1 200px; }
/* Ingresar, crear cuenta y el código: una tarjeta centrada con las pestañas arriba, igual en su página y en la
   ventana sobre la página (ver cuentas/ventana.py). */
.ingreso { display: flex; justify-content: center; padding: 48px 16px 64px; }
.ingreso-tarjeta { width: 100%; max-width: 420px; box-sizing: border-box; display: flex; flex-direction: column; gap: 20px; padding: 28px; background: var(--superficie); border: 1px solid var(--linea); border-radius: 20px; box-shadow: 0 12px 32px rgba(13, 56, 120, 0.08); }
.ingreso-pestanas { display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 12px; background: var(--fondo); }
.ingreso-pestanas a { display: flex; align-items: center; justify-content: center; min-height: 40px; border-radius: 9px; color: var(--tenue); font-size: 15px; font-weight: 700; text-decoration: none; transition: background var(--suave), color var(--suave), box-shadow var(--suave); }
.ingreso-pestanas a[aria-current="page"] { background: var(--superficie); color: var(--marino); box-shadow: 0 1px 3px rgba(13, 56, 120, 0.14); }
@media (hover: hover) { .ingreso-pestanas a:not([aria-current]):hover { color: var(--marino); } }
.ingreso-pestanas a:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
.ingreso-titulo { font-family: var(--fuente-titulos); font-size: 26px; font-weight: 700; line-height: 1.2; color: var(--marino); }
.ingreso-correo { color: var(--tinta-2); overflow-wrap: anywhere; }
.ingreso-o { display: flex; align-items: center; gap: 12px; color: var(--tenue); font-size: 13px; }
.ingreso-o::before, .ingreso-o::after { content: ""; flex: 1; height: 1px; background: var(--linea); }
.ingreso-legal { color: var(--tenue); font-size: 13px; }
.ingreso-pie { color: var(--tenue); font-size: 14px; text-align: center; }
.ingreso-tarjeta .ingreso-legal a, .ingreso-pie a { font-weight: 700; text-decoration: none; }
.ingreso-tarjeta .mensajes { margin: 0; padding: 0; max-width: none; }

/* La ventana: centrada en el escritorio y desde abajo en el celular, con el fondo atenuado. */
html.con-ventana { overflow: hidden; }
.ventana-ingreso { width: min(440px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px); padding: 0; border: 0; background: transparent; color: var(--tinta); overflow: visible; }
.ventana-ingreso::backdrop { background: rgba(8, 26, 54, 0.5); }
.ventana-ingreso .ingreso { padding: 0; }
.ventana-ingreso .ingreso-tarjeta { max-width: none; max-height: calc(100dvh - 32px); overflow-y: auto; padding-top: 56px; border: 0; box-shadow: 0 24px 60px rgba(4, 22, 48, 0.32); }
.ventana-cuerpo { min-height: 120px; transition: opacity 0.2s ease; }
.ventana-ingreso.cargando .ventana-cuerpo { opacity: 0.55; pointer-events: none; }
.ventana-cerrar { position: absolute; top: 14px; right: 14px; z-index: 1; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--fondo); color: var(--tinta-2); cursor: pointer; }
@media (hover: hover) { .ventana-cerrar:hover { background: var(--celeste-claro); color: var(--marino); } }
.ventana-cerrar:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) {
  .ventana-ingreso[open] { animation: ventana-entra 0.28s cubic-bezier(0.22, 1, 0.36, 1); }
  .ventana-ingreso[open]::backdrop { animation: ventana-fondo 0.28s ease; }
}
@keyframes ventana-entra { from { opacity: 0; transform: translateY(14px) scale(0.98); } }
@keyframes ventana-fondo { from { opacity: 0; } }
@media (max-width: 560px) {
  .ingreso { padding: 24px 12px 40px; }
  .ingreso-tarjeta { padding: 22px 18px; }
  .ventana-ingreso { width: 100%; max-height: calc(100dvh - 24px); margin: auto 0 0; }
  .ventana-ingreso .ingreso-tarjeta { max-height: calc(100dvh - 24px); padding-top: 56px; border-radius: 20px 20px 0 0; }
  @media (prefers-reduced-motion: no-preference) {
    .ventana-ingreso[open] { animation: ventana-sube 0.32s cubic-bezier(0.22, 1, 0.36, 1); }
  }
}
@keyframes ventana-sube { from { transform: translateY(40%); opacity: 0.4; } }
.enlace-cuenta { color: inherit; text-decoration: none; }
@media (hover: hover) { .enlace-cuenta:hover .negrita { text-decoration: underline; } }

/* Panel de aprobación (/moderacion/pendientes/): una tarjeta por pendiente, con la decisión a la derecha. */
.mod-resumen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.mod-contador { display: flex; align-items: baseline; gap: 10px; padding: 16px 20px; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); color: var(--tenue); text-decoration: none; }
.mod-contador strong { font-family: var(--fuente-titulos); font-size: 30px; line-height: 1; color: var(--tenue); }
.mod-contador.hay { border-color: var(--azul); color: var(--marino); }
.mod-contador.hay strong { color: var(--azul); }
@media (hover: hover) { .mod-contador:hover { border-color: var(--marino); } }
.mod-tarjeta { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; padding: 22px 24px; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); scroll-margin-top: 90px; }
.mod-tarjeta:target { border-color: var(--azul); box-shadow: 0 0 0 3px var(--celeste-claro); }
.mod-contenido { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.mod-titulo { font-family: var(--fuente-titulos); font-size: 22px; font-weight: 700; color: var(--marino); line-height: 1.2; }
.mod-motivo { display: flex; gap: 8px; align-items: flex-start; margin: 0; padding: 10px 12px; border-radius: 8px; background: var(--celeste-claro); color: var(--marino); font-size: 14px; }
.mod-motivo .ico { flex: none; margin-top: 1px; }
.mod-motivo-alerta { background: var(--rojo-suave); color: var(--rojo); }
.mod-datos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px; margin: 0; padding: 14px 0; border-top: 1px solid var(--linea-suave); border-bottom: 1px solid var(--linea-suave); }
.mod-datos div { min-width: 0; }
.mod-datos dt { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--tenue); }
.mod-datos dd { margin: 2px 0 0; font-size: 15px; overflow-wrap: anywhere; }
.mod-texto { font-size: 15px; line-height: 1.6; max-height: 340px; overflow: auto; padding-right: 6px; }
.mod-texto h4 { font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--tenue); margin: 12px 0 4px; }
.mod-texto h4:first-child { margin-top: 0; }
.mod-texto p { margin: 0 0 8px; }
.mod-texto ul, .mod-reportes { margin: 0; padding-left: 20px; }
.mod-reportes li { margin-bottom: 6px; }
.mod-decision { display: flex; flex-direction: column; gap: 12px; align-self: start; position: sticky; top: 90px; padding-left: 24px; border-left: 1px solid var(--linea-suave); }
.mod-decision form { margin: 0; }
.boton-aprobar { background: var(--verde); color: #fff; font-weight: 700; }
@media (hover: hover) { .boton-aprobar:hover { background: var(--verde-texto); color: #fff; } }
.boton-rechazar { background: var(--rojo); color: #fff; font-weight: 700; }
@media (hover: hover) { .boton-rechazar:hover { background: var(--rojo-vivo); color: #fff; } }
.mod-rechazo > summary { list-style: none; cursor: pointer; }
.mod-rechazo > summary::-webkit-details-marker { display: none; }
.mod-rechazo[open] > summary { margin-bottom: 12px; }
.mod-rechazo fieldset { border: 0; padding: 0; margin: 0; }
.mod-opcion { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; line-height: 1.4; cursor: pointer; }
.mod-opcion input { margin-top: 3px; accent-color: var(--rojo); flex: none; }
.mod-rechazo textarea { width: 100%; box-sizing: border-box; }
.mod-enlace { color: var(--tenue); }
@media (hover: hover) { .mod-enlace:hover { color: var(--azul); } }
@media (max-width: 860px) {
  .mod-resumen { grid-template-columns: minmax(0, 1fr); }
  .mod-tarjeta { grid-template-columns: minmax(0, 1fr); padding: 18px; }
  .mod-decision { position: static; padding-left: 0; border-left: 0; padding-top: 16px; border-top: 1px solid var(--linea-suave); }
  .mod-datos { grid-template-columns: minmax(0, 1fr); }
}

/* Formulario de oferta: cuatro bloques numerados, opciones como pastillas y sueldo con «$». */
.form-oferta { gap: 18px; }
.paso { display: flex; flex-direction: column; gap: 20px; padding: 26px 28px; }
.paso-titulo { display: flex; align-items: center; gap: 12px; font-family: var(--fuente-titulos); font-size: 20px; font-weight: 700; color: var(--marino); }
.paso-num { display: inline-grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 50%; background: var(--marino); color: #fff; font-size: 15px; }
.opcional { font-family: var(--fuente); font-size: 12px; font-weight: 600; color: var(--tenue); background: var(--gris-suave); padding: 2px 8px; border-radius: 999px; letter-spacing: 0; }
.form-oferta .campo input[type="text"], .form-oferta .campo input[type="date"], .form-oferta .campo select, .form-oferta .campo textarea { font-size: 16px; }
.form-oferta textarea { line-height: 1.5; }
/* Los ejemplos de los campos también se leen: --tenue da 5.4:1 sobre blanco (el gris anterior daba 2.5:1 y
   Firefox además baja la opacidad del texto de ejemplo). */
::placeholder { color: var(--tenue); opacity: 1; }
.campo-opciones { border: 0; padding: 0; margin: 0; min-width: 0; }
.opciones-pastilla { display: flex; flex-wrap: wrap; gap: 8px; }
.pastilla-opcion { position: relative; display: inline-flex; }
.pastilla-opcion input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.pastilla-opcion span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border: 1px solid var(--borde-control); border-radius: 999px; background: var(--superficie); color: var(--tinta-2); font-size: 15px; font-weight: 600; cursor: pointer; transition: background var(--suave), border-color var(--suave), color var(--suave); }
@media (hover: hover) { .pastilla-opcion span:hover { border-color: var(--marino); } }
.pastilla-opcion input:checked + span { background: var(--celeste-claro); border-color: var(--azul); color: var(--azul); box-shadow: inset 0 0 0 1px var(--azul); }
.pastilla-opcion input:focus-visible + span { outline: 3px solid var(--azul-vivo); outline-offset: 2px; }
.campo-con-error .pastilla-opcion span { border-color: var(--rojo-borde); }
/* El turno solo aparece cuando la jornada es por turnos. */
.campo-turno { display: none; max-width: 240px; }
.form-oferta:has(input[name="jornada"][value="turnos"]:checked) .campo-turno, .campo-turno.con-error { display: block; }
.con-prefijo { display: flex; align-items: center; border: 1px solid var(--borde-control); border-radius: 12px; background: var(--superficie); padding-left: 14px; }
.con-prefijo:focus-within { border-color: var(--azul); box-shadow: 0 0 0 3px var(--celeste-claro); }
.con-prefijo > span { color: var(--tenue); font-weight: 600; font-size: 16px; }
.form-oferta .con-prefijo input[type="text"] { border: 0; box-shadow: none; background: transparent; padding-left: 8px; font-variant-numeric: tabular-nums; }
.campo-con-error .con-prefijo { border-color: var(--rojo); }
.fecha-rapida { gap: 8px; }
.fecha-rapida input[type="date"] { width: auto; min-width: 190px; flex: 0 1 220px; }
.fila-pregunta { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: end; }
.fila-pregunta[hidden] { display: none; }
.opciones-cortas .pastilla-opcion span { min-height: 46px; padding: 0 16px; }
.agregar-pregunta { align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; font-weight: 700; }
.barra-publicar { position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 12px; padding: 14px 0 18px; background: var(--fondo); box-shadow: 0 -10px 16px -14px rgba(16, 42, 67, 0.25); }
.barra-publicar .boton .ico { margin-left: -4px; }
.estado-guardado { margin-right: auto; font-size: 13px; color: var(--tenue); }

/* Por pasos (con JavaScript): un bloque a la vez, con la barra de pasos arriba. */
.pasos-oferta { margin: 0; padding: 0; list-style: none; display: flex; gap: 6px; }
.pasos-oferta li { flex: 1 1 0; min-width: 0; }
.pasos-oferta button { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 0 0 4px; border: 0; background: none; color: var(--tenue); font: inherit; font-size: 13px; font-weight: 600; text-align: left; cursor: pointer; }
.pasos-oferta button::before { content: ""; display: block; width: 100%; height: 4px; border-radius: 999px; background: var(--linea); transition: background var(--suave); }
.pasos-oferta .paso-nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.pasos-oferta .hecho button { color: var(--tinta-2); }
.pasos-oferta .hecho button::before { background: var(--azul); }
.pasos-oferta .actual button { color: var(--marino); }
.pasos-oferta .actual button::before { background: var(--marino); }
@media (hover: hover) { .pasos-oferta button:hover .paso-nombre { text-decoration: underline; } }
.por-pasos .paso-num { display: none; }

/* Revisar: la tarjeta y el aviso como los verá el postulante, sin enlaces activos. */
.vista-previa { display: flex; flex-direction: column; gap: 8px; }
.vista-previa-etiqueta { margin: 0; font-size: 13px; font-weight: 700; color: var(--tenue); text-transform: uppercase; letter-spacing: 0.04em; }
.vista-previa-tarjeta { max-width: 420px; }
.vista-previa-detalle { padding: 22px 24px; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--superficie); }
.vista-previa-detalle .detalle { gap: 16px; }
.boton-enlace { padding: 0; border: 0; background: none; color: inherit; font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; }
.aviso-recuperado { align-items: center; }
.aviso-recuperado form { margin: 0; }
@media (max-width: 640px) {
  .paso { padding: 20px 18px; }
  .fila-pregunta { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .barra-publicar > .boton { flex: 1 1 0; min-width: 0; padding: 0 12px; }
  .estado-guardado { flex: 1 0 100%; margin: 0; text-align: center; }
  .pasos-oferta .paso-nombre { display: none; }
  .pasos-oferta .actual .paso-nombre { display: block; overflow: visible; }
  .pasos-oferta li.actual { flex-grow: 3; }
  .vista-previa-detalle { padding: 16px; }
}

/* Portal de empresas ------------------------------------------------------------------------------ */
.aviso-cv { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 12px 16px; border: 1px solid #f3d38a; border-radius: var(--radio); background: #fff8e6; color: #5c4400; font-size: 15px; }
.aviso-cv .ico { color: #b7791f; flex: none; }
.aviso-cv span { flex: 1 1 260px; }
.enlace-mi-cuenta { display: inline-flex; align-items: center; gap: 6px; color: var(--tinta-2); font-weight: 600; font-size: 15px; text-decoration: none; padding: 6px 4px; }
.enlace-mi-cuenta[aria-current="page"] { color: var(--azul); }
@media (hover: hover) { .enlace-mi-cuenta:hover { color: var(--azul); } }
.portal .kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.kpi { display: flex; align-items: baseline; gap: 10px; padding: 16px 20px; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); }
.kpi strong { font-family: var(--fuente-titulos); font-size: 30px; line-height: 1; color: var(--marino); }
.kpi span { color: var(--tinta-2); font-size: 15px; }
.kpi-destacado { border-color: var(--azul); background: var(--celeste-claro); }
.kpi-destacado strong { color: var(--azul); }
.oferta-panel { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 18px 28px; align-items: center; padding: 20px 24px; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); transition: border-color var(--suave); }
@media (hover: hover) { .oferta-panel:hover, .perfil-cv:hover { border-color: var(--borde-control); } }
.oferta-panel-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.oferta-panel-cabeza { gap: 10px; }
.oferta-panel-titulo { font-family: var(--fuente-titulos); font-size: 19px; font-weight: 700; color: var(--marino); line-height: 1.25; }
.oferta-panel-reloj { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; color: var(--tinta-2); }
.oferta-panel-reloj .ico { color: var(--tenue); flex: none; }
.oferta-panel-numeros { display: flex; gap: 22px; }
.oferta-panel-numeros div { display: flex; flex-direction: column; align-items: center; min-width: 64px; }
.oferta-panel-numeros strong { font-family: var(--fuente-titulos); font-size: 26px; line-height: 1.1; color: var(--tinta-2); }
.oferta-panel-numeros .hay strong { color: var(--azul); }
.oferta-panel-numeros span { font-size: 12px; color: var(--tenue); white-space: nowrap; }
.oferta-panel-acciones { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; align-items: center; }
.oferta-panel-acciones form { margin: 0; }
.menu-mas { position: relative; }
.menu-mas > summary { list-style: none; cursor: pointer; gap: 2px; }
.menu-mas > summary::-webkit-details-marker { display: none; }
.menu-mas[open] > summary { border-color: var(--marino); }
.menu-mas-panel { position: absolute; right: 0; top: calc(100% + 6px); z-index: 10; width: 290px; display: flex; flex-direction: column; gap: 14px; padding: 16px; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); box-shadow: var(--sombra-elevada); }
.menu-mas-panel input[type="date"] { flex: 1 1 140px; min-width: 0; }
.cerradas > summary { display: inline-flex; align-items: center; gap: 8px; list-style: none; cursor: pointer; }
.cerradas > summary::-webkit-details-marker { display: none; }
.cerradas[open] > summary .ico { transform: rotate(180deg); }
.lista-cerradas { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); }
.lista-cerradas li { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 14px 20px; border-top: 1px solid var(--linea-suave); }
.lista-cerradas li:first-child { border-top: 0; }
.vacio > .ico { color: var(--azul); }
/* Hasta 1099 px los botones bajan a su propia fila: en tres columnas el título quedaba con una palabra por línea. */
@media (max-width: 1099px) {
  .oferta-panel { grid-template-columns: minmax(0, 1fr) auto; }
  .oferta-panel-acciones { grid-column: 1 / -1; justify-content: flex-start; padding-top: 14px; border-top: 1px solid var(--linea-suave); }
}
/* Portal de empresas: el mismo movimiento que la portada. Al cargar, cada bloque de la página se funde en cascada y
   las tarjetas (resúmenes, ofertas, evaluaciones, perfiles, cargos, reclutadores) suben un poco al llegar; los
   números de los resúmenes cuentan hasta su valor (app.js). Es una animación que siempre termina: sin JavaScript
   tampoco queda nada oculto. Las tarjetas del buscador de CVs llegan con el escaneo (escaneo_cvs.js). */
@media (prefers-reduced-motion: no-preference) {
  .portal > * { animation: portal-funde 0.4s ease-out backwards; }
  .portal :is(.kpi, .oferta-panel, .evaluacion, .cargo, .lista-equipo > li), .portal .perfiles-cv > .perfil-cv:not(.entra) { animation: portal-llega 0.55s cubic-bezier(0.22, 1, 0.36, 1) backwards; }
  .portal > :nth-child(2), .portal :is(.kpi, .oferta-panel, .evaluacion, .cargo, .lista-equipo > li, .perfil-cv):nth-child(2) { animation-delay: 0.06s; }
  .portal > :nth-child(3), .portal :is(.kpi, .oferta-panel, .evaluacion, .cargo, .lista-equipo > li, .perfil-cv):nth-child(3) { animation-delay: 0.12s; }
  .portal > :nth-child(4), .portal :is(.kpi, .oferta-panel, .evaluacion, .cargo, .lista-equipo > li, .perfil-cv):nth-child(4) { animation-delay: 0.18s; }
  .portal > :nth-child(n+5), .portal :is(.kpi, .oferta-panel, .evaluacion, .cargo, .lista-equipo > li, .perfil-cv):nth-child(n+5) { animation-delay: 0.24s; }
}
@keyframes portal-funde { from { opacity: 0; } }
@keyframes portal-llega { from { opacity: 0; transform: translateY(14px); } }
@media (max-width: 560px) {
  .oferta-panel { grid-template-columns: minmax(0, 1fr); padding: 18px; }
  .oferta-panel-numeros { justify-content: flex-start; }
  .oferta-panel-numeros div { align-items: flex-start; }
  .menu-mas-panel { right: auto; left: 0; width: min(290px, calc(100vw - 48px)); }
}
.filtro-categorias { display: flex; flex-wrap: wrap; gap: 8px; }
.filtro-categorias a { display: inline-flex; align-items: center; min-height: 38px; padding: 0 16px; border: 1px solid var(--borde-control); border-radius: 999px; background: var(--superficie); color: var(--tinta-2); font-weight: 600; font-size: 14px; text-decoration: none; }
@media (hover: hover) { .filtro-categorias a:hover { border-color: var(--marino); } }
.filtro-categorias a[aria-current="page"] { background: var(--marino); border-color: var(--marino); color: #fff; }
.invitar-banco select { min-height: 36px; max-width: 220px; padding-top: 4px; padding-bottom: 4px; font-size: 14px; }
/* Buscador de CVs (portal de empresas): cada perfil es un resumen sin datos de contacto. */
.perfiles-cv { display: flex; flex-direction: column; gap: 10px; }
.perfil-cv { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 16px; padding: 16px 20px; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); }
.perfil-cv > .pila-chica { min-width: 0; flex: 1 1 240px; }
.perfil-cv-cargos { color: var(--marino); font-size: 16px; }
.perfil-cv form { margin: 0; }
/* Escaneo de «Buscar CVs» (escaneo_cvs.js): Chile de pie con un haz que baja, y los pasos a la derecha. */
.escaneo { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 20px; height: 300px; padding: 16px; box-sizing: border-box; overflow: hidden; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); transition: height 0.35s ease, padding 0.35s ease, opacity 0.3s ease, border-width 0.35s ease; }
.escaneo.plegado { height: 0; padding-top: 0; padding-bottom: 0; border-width: 0; opacity: 0; }
.escaneo-mapa { min-height: 0; background: var(--bruma); border-radius: 10px; }
.escaneo-mapa svg { display: block; width: 100%; height: 100%; }
.escaneo-region { fill: #dceaf8; stroke: #fff; stroke-width: 0.8; vector-effect: non-scaling-stroke; transition: fill 0.4s ease; }
.escaneo-region.elegida { fill: #bcd8f5; stroke: var(--azul); }
.escaneo-region.fuera { fill: var(--linea-suave); }
.escaneo-punto { fill: var(--azul-vivo); opacity: 0; transform-box: fill-box; transform-origin: center; transition: fill 0.4s ease, opacity 0.4s ease; }
.escaneo-punto.visto { opacity: 1; animation: escaneo-punto 0.45s ease-out; }
.escaneo-punto.fuera { fill: var(--gris-estado); opacity: 0.4; }
.escaneo-punto.primero { fill: var(--marino); }
.escaneo-pulso { fill: none; stroke: var(--azul-vivo); stroke-width: 1.5; vector-effect: non-scaling-stroke; opacity: 0; transform-box: fill-box; transform-origin: center; }
.escaneo-pulso.late { animation: escaneo-pulso 0.9s ease-out 2; }
.escaneo-banda { fill: var(--azul-vivo); opacity: 0.1; transition: opacity 0.3s ease; }
.escaneo-linea { fill: var(--azul-vivo); transition: opacity 0.3s ease; }
.escaneo-banda.apagado, .escaneo-linea.apagado { opacity: 0; }
.escaneo-pasos { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.escaneo-cabeza { display: flex; justify-content: space-between; align-items: center; gap: 12px; color: var(--tenue); font-size: 14px; }
.escaneo-saltar { min-height: 36px; padding: 0 4px; border: 0; background: none; color: var(--azul); font: inherit; font-weight: 700; cursor: pointer; }
.escaneo-saltar:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
.escaneo-paso { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 12px; align-items: center; opacity: 0.4; transition: opacity 0.3s ease; }
.escaneo-paso.activo, .escaneo-paso.listo { opacity: 1; }
.escaneo-paso strong { color: var(--marino); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.escaneo-marca { display: flex; align-items: center; justify-content: center; width: 18px; height: 18px; box-sizing: border-box; border: 2px solid var(--borde-control); border-radius: 50%; }
.escaneo-paso.activo .escaneo-marca { border-color: var(--azul-vivo); border-top-color: transparent; animation: escaneo-gira 0.7s linear infinite; }
.escaneo-paso.listo .escaneo-marca { border-color: var(--azul); background: var(--azul); }
.escaneo-paso.listo .escaneo-marca::after { content: ""; width: 4px; height: 8px; margin-top: -2px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.escaneo-n { color: var(--marino); font-family: var(--fuente-titulos); font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.escaneo-lectura { margin-top: auto; min-height: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.escaneo-barra { display: block; height: 3px; overflow: hidden; border-radius: 2px; background: var(--linea-suave); }
.escaneo-barra span { display: block; height: 100%; background: var(--azul-vivo); transform: scaleX(0); transform-origin: left; }
.escaneo-resultados.en-espera { display: none; }
.escaneo-resultados:focus { outline: none; }
.perfil-cv.entra { opacity: 0; transform: translateY(8px); transition: opacity 0.35s ease, transform 0.35s ease; }
.perfil-cv.entra.visible { opacity: 1; transform: none; }
@keyframes escaneo-punto { from { opacity: 0; transform: scale(2.2); } to { opacity: 1; transform: scale(1); } }
@keyframes escaneo-pulso { from { opacity: 0.9; transform: scale(1); } to { opacity: 0; transform: scale(6); } }
@keyframes escaneo-gira { to { transform: rotate(360deg); } }
@media (max-width: 640px) {
  .escaneo { grid-template-columns: 84px minmax(0, 1fr); gap: 12px; padding: 12px; height: 280px; }
}
/* Enlaces cortos en negrita («Ver todos en el buscador», «Ver o retirar»): sin subrayado, como pide el diseño. */
a.chico.negrita, .chico a.negrita { text-decoration: none; }
.celda-accion { text-align: right; }
.avatar { display: inline-grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 50%; background: var(--celeste-claro); color: var(--azul); font-weight: 700; font-size: 16px; }
.avatar-grande { width: 52px; height: 52px; font-size: 20px; }
/* Logo subido por la empresa: entero dentro del cuadro, sobre blanco. */
.avatar-logo { box-sizing: border-box; padding: 4px; border: 1px solid var(--linea); border-radius: 12px; background: #fff; object-fit: contain; }
.logo-mini { box-sizing: border-box; width: 24px; height: 24px; flex: none; padding: 2px; border: 1px solid var(--linea); border-radius: 6px; background: #fff; object-fit: contain; }
.logo-fila { display: flex; align-items: center; gap: 16px; }
.campo-logo input[type="file"] { font-size: 14px; color: var(--tinta-2); }
.campo-logo input[type="file"]::file-selector-button { margin-right: 12px; padding: 8px 16px; border: 1px solid var(--azul); border-radius: 999px; background: var(--superficie); color: var(--azul); font: inherit; font-weight: 700; cursor: pointer; }
@media (hover: hover) { .campo-logo input[type="file"]::file-selector-button:hover { background: var(--celeste-claro); } }
.lista-equipo { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.lista-equipo li { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--linea-suave); }
.lista-equipo li:first-child { border-top: 0; padding-top: 0; }
/* Conectores de IA (Mi cuenta → Conectores): el token recién creado, en letra de código para copiarlo entero. */
.enlace-conectores { align-items: center; color: var(--marino); text-decoration: none; transition: border-color var(--suave); }
@media (hover: hover) { .enlace-conectores:hover { border-color: var(--azul); } }
.conector-nuevo { border-color: var(--azul); }
.conector-destino { overflow-wrap: anywhere; }  /* la dirección de vuelta se lee entera: el final es lo que dice de quién es */
.campo .conector-dato { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 14px; }
/* Asistente IA: la dirección del conector y los pedidos de ejemplo, listos para copiar. */
.copiar-fila { display: flex; gap: 8px; align-items: center; min-width: 0; }
.copiar-fila .conector-dato { flex: 1 1 auto; min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 14px; }
.lista-ejemplos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.lista-ejemplos li { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--linea-suave); }
.lista-ejemplos li:first-child { border-top: 0; padding-top: 0; }
.lista-ejemplos .crece { min-width: 0; }
.plegable-token > summary { display: flex; align-items: center; gap: 8px; list-style: none; cursor: pointer; }
.plegable-token > summary::-webkit-details-marker { display: none; }
.plegable-token[open] > summary { margin-bottom: 16px; }
.plegable-token[open] > summary .ico { transform: rotate(180deg); }
/* Paso a paso de ChatGPT, con capturas: plegado para que la página siga corta. */
.guia-pasos > summary { display: inline-flex; align-items: center; gap: 4px; list-style: none; cursor: pointer; color: var(--azul); font-weight: 700; font-size: 14px; }
.guia-pasos > summary::-webkit-details-marker { display: none; }
.guia-pasos[open] > summary .ico { transform: rotate(180deg); }
.guia-pasos ol { margin: 16px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 20px; font-size: 14px; }
.guia-pasos li { min-width: 0; padding-left: 4px; }
.guia-pasos li::marker { font-weight: 700; color: var(--marino); }
.guia-pasos img { display: block; margin-top: 10px; max-width: 100%; height: auto; border: 1px solid var(--linea); border-radius: 10px; background: #000; }
.guia-pasos img.guia-angosta { max-width: min(100%, 360px); }
.invitar-equipo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 12px; align-items: end; padding-top: 16px; border-top: 1px solid var(--linea-suave); }
.chips-categorias { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips-categorias li { display: inline-flex; align-items: center; gap: 2px; padding: 4px 6px 4px 14px; border: 1px solid var(--borde-control); border-radius: 999px; background: var(--superficie); font-weight: 600; font-size: 14px; color: var(--tinta-2); }
.chips-categorias form { margin: 0; display: inline-flex; }
.chips-categorias button { display: inline-grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: 50%; background: none; color: var(--tenue); cursor: pointer; }
@media (hover: hover) { .chips-categorias button:hover { background: var(--rojo-suave); color: var(--rojo); } }
.agregar-categoria input[type="text"] { flex: 1 1 240px; min-width: 0; }
.cuenta-resumen { display: flex; align-items: center; gap: 14px; }
@media (max-width: 640px) {
  .invitar-equipo { grid-template-columns: minmax(0, 1fr); }
  .invitar-equipo .boton { justify-self: start; }
}
body > .contenedor { width: 100%; }
.acciones-ingreso > .boton:only-child { flex: 0 1 auto; }
/* Revisión de CVs en el celular: sin atajos de teclado y visor más bajo para llegar antes a la decisión. */
@media (hover: none), (max-width: 760px) {
  .revision kbd, .decision kbd { display: none; }
}

/* En el celular y el iPad ningún campo baja de 16 px: con menos, Safari hace zoom al tocarlo. */
@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]), select, textarea { font-size: 16px !important; }
}

/* ── Portal de empresa ───────────────────────────────────────────────────────── */

/* Registro: dos grupos (tú / tu empresa) y una sola contraseña con «Mostrar». */
.grupo-registro { border: 0; margin: 0; padding: 0; min-width: 0; }
.grupo-registro > legend { padding: 0; margin-bottom: 4px; }
.campo-clave { display: flex; align-items: center; gap: 8px; }
.campo-clave input { flex: 1 1 auto; min-width: 0; }
.campo-clave .boton-texto { flex: none; min-height: 44px; }

/* Tarjetas con texto y botones: los botones bajan de línea antes que el texto. */
/* Isla de avisos (Mis ofertas): una cápsula oscura con el resumen; al tocarla se abre y los avisos entran uno a uno. */
.isla { --isla-tx: #fff; --isla-tenue: rgba(255, 255, 255, 0.62); --isla-linea: rgba(255, 255, 255, 0.1); --isla-curva: cubic-bezier(0.32, 0.72, 0, 1); width: 100%; border-radius: 26px; background: var(--marino); color: var(--isla-tx); box-shadow: 0 10px 30px rgba(16, 18, 20, 0.22); transition: border-radius 0.5s var(--isla-curva); }
.isla.abierta { border-radius: 20px; }
.isla-cabeza { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 0 18px 0 16px; border: 0; background: none; color: inherit; font: inherit; font-size: 14px; font-weight: 600; text-align: left; cursor: pointer; border-radius: inherit; }
.isla-cabeza:focus-visible { outline: 3px solid var(--azul-vivo); outline-offset: 3px; }
.isla-puntos { display: inline-flex; align-items: center; }
.isla-puntos i { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--marino); margin-left: -4px; }
.isla-puntos i:first-child { margin-left: 0; }
.isla-resumen { flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.isla-flecha { flex: none; width: 9px; height: 9px; border-right: 2px solid var(--isla-tenue); border-bottom: 2px solid var(--isla-tenue); transform: rotate(45deg) translateY(-2px); transition: transform 0.5s var(--isla-curva); }
.isla.abierta .isla-flecha { transform: rotate(-135deg) translateY(-2px); }
.isla-cuerpo { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.5s var(--isla-curva); }
.isla.abierta .isla-cuerpo { grid-template-rows: 1fr; }
.isla-lista { list-style: none; margin: 0; padding: 0; min-height: 0; overflow: hidden; }
.isla-aviso { display: flex; align-items: center; gap: 14px; padding: 12px 18px 12px 16px; border-top: 1px solid var(--isla-linea); opacity: 0; transform: translateY(-4px); transition: opacity 0.3s ease, transform 0.4s var(--isla-curva); }
.isla.abierta .isla-aviso { opacity: 1; transform: none; }
.isla.abierta .isla-aviso:nth-child(1) { transition-delay: 0.08s; }
.isla.abierta .isla-aviso:nth-child(2) { transition-delay: 0.14s; }
.isla.abierta .isla-aviso:nth-child(3) { transition-delay: 0.2s; }
.isla.abierta .isla-aviso:nth-child(4) { transition-delay: 0.26s; }
.isla.abierta .isla-aviso:nth-child(5) { transition-delay: 0.32s; }
.isla.abierta .isla-aviso:nth-child(n+6) { transition-delay: 0.38s; }
.isla-aviso:last-child { padding-bottom: 16px; }
.isla-aviso > i { flex: none; width: 10px; height: 10px; border-radius: 50%; }
.punto-alerta { background: #ff5a4e; }
.punto-aviso { background: #f2c14e; }
.punto-pendiente { background: #4f8df7; }
.punto-info { background: rgba(255, 255, 255, 0.45); }
.isla-aviso.isla-alerta > i { animation: isla-latido 1.6s ease-in-out infinite; }
@keyframes isla-latido { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 90, 78, 0.55); } 60% { box-shadow: 0 0 0 7px rgba(255, 90, 78, 0); } }
.isla-texto { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: 1px; font-size: 14px; line-height: 1.4; color: var(--isla-tenue); }
.isla-texto strong { color: var(--isla-tx); font-weight: 600; }
.isla-acciones { display: flex; align-items: center; gap: 6px; flex: none; margin-left: auto; }
.isla-acciones form { margin: 0; }
.isla-boton { display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.12); color: var(--isla-tx); font-size: 13px; font-weight: 700; text-decoration: none; transition: background var(--suave), transform 0.15s ease; }
.isla-boton-fuerte { background: var(--isla-tx); color: var(--marino); }
@media (hover: hover) { .isla-boton:hover { background: rgba(255, 255, 255, 0.22); transform: translateY(-1px); } .isla-boton-fuerte:hover { background: #fff; } }
.isla-boton:focus-visible, .isla-omitir:focus-visible { outline: 3px solid var(--azul-vivo); outline-offset: 2px; }
.isla-omitir { min-height: 34px; padding: 0 10px; border: 0; background: none; color: var(--isla-tenue); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
@media (hover: hover) { .isla-omitir:hover { color: var(--isla-tx); } }
@media (max-width: 640px) {
  .isla-aviso { flex-wrap: wrap; }
  .isla-acciones { margin-left: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .isla, .isla-cuerpo, .isla-aviso, .isla-flecha, .isla-boton { transition: none; }
  .isla-aviso.isla-alerta > i { animation: none; }
}

.aviso-con-acciones { flex-wrap: wrap; align-items: center; }
.aviso-con-acciones .crece { flex: 1 1 240px; }
.aviso-con-acciones form { margin: 0; }

/* Navegación de empresa en el celular: nombres cortos y dos filas, sin secciones escondidas. */
@media (max-width: 759px) {
  .nav-empresa { flex-wrap: wrap; overflow: visible; gap: 0 14px; }
  .nav-empresa a { padding: 10px 0; font-size: 14px; }
}

/* Formulario de oferta: cargo ancho y área al lado. */
.grilla-cargo { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 16px; align-items: start; }
@media (max-width: 640px) { .grilla-cargo { grid-template-columns: minmax(0, 1fr); gap: 0; } }

/* Listado filtrado por área: el área elegida se quita con un toque. */
.filtro-activo { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px 0 16px; border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 999px; color: #fff; font-size: 14px; font-weight: 600; text-decoration: none; }
@media (hover: hover) { .filtro-activo:hover { background: rgba(255, 255, 255, 0.12); color: #fff; } }

/* Contacto de la persona aprobada: WhatsApp, llamar y correo. */
.contacto-reciente { display: flex; flex-direction: column; gap: 14px; border-color: var(--verde-borde); background: var(--verde-caja); }
.contacto-reciente-cabeza { align-items: flex-start; gap: 10px; flex-wrap: nowrap; }
.contacto-reciente-cabeza .ico { color: var(--verde); flex: none; margin-top: 1px; }
.contacto-acciones { display: flex; flex-wrap: wrap; gap: 10px; }
.contacto-acciones .boton { min-width: 0; }
.contacto-correo { overflow: hidden; text-overflow: ellipsis; }
.boton-whatsapp { background: #15803d; color: #fff; font-weight: 700; }
@media (hover: hover) { .boton-whatsapp:hover { background: #116c33; color: #fff; } }

/* Decisión: frases listas para el comentario y «cerrar la oferta» con «Vacante ya cubierta». */
.plantillas { flex-wrap: wrap; gap: 6px; }
.chip-plantilla { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border: 0; border-radius: 999px; background: var(--bruma); color: var(--azul); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: background var(--suave); }
@media (hover: hover) { .chip-plantilla:hover { background: var(--celeste-claro); } }
.casilla.solo-cierre { display: none; padding: 12px 14px; border: 1px solid var(--rojo-borde); border-radius: var(--radio-chico); background: var(--rojo-caja); }
.decision:has(input[value="rechazar"]:checked):has(.motivo-cierra input:checked) .casilla.solo-cierre { display: flex; }
.casilla.solo-cierre input { accent-color: var(--rojo); width: 18px; height: 18px; flex: none; }

/* Postulaciones: contratada y acciones por fila. */
.pastilla-bien { background: var(--verde-suave); color: var(--verde-texto); }
.acciones-postulacion { justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.acciones-postulacion form { margin: 0; }
.aviso-cierre { border-color: var(--verde-borde); background: var(--verde-caja); flex-wrap: wrap; align-items: center; }
.aviso-cierre .ico { color: var(--verde); }
.aviso-cierre .crece { flex: 1 1 260px; }
.aviso-cierre form { margin: 0; }

/* Mis ofertas: cuatro números por oferta sin apretarse. */
.oferta-panel-numeros { gap: 18px; flex-wrap: wrap; }

/* CV en el celular: el PDF se abre en otra pestaña (dentro de la página iPhone muestra solo la primera
   hoja) y la decisión queda a la vista sin bajar dos pantallas. */
.solo-movil-flex { display: none !important; }
@media (max-width: 759px) {
  .solo-movil-flex { display: inline-flex !important; }
  .revision .visor-hoja { display: none; }
  .revision .visor-barra { border-bottom: 0; }
  .revision .visor-barra > .chico { flex: 1 1 100%; }
}
/* En el iPad el visor también muestra solo la primera hoja: «Abrir CV» a mano. */
@media (min-width: 760px) and (hover: none) and (pointer: coarse) {
  .solo-movil-flex { display: inline-flex !important; }
}

/* Mapa de ofertas (/sueldos/), como el visor del Coordinador Eléctrico: Chile de pie con el calor de las ofertas
   para elegir la región, la región en grande con sus comunas coloreadas por ofertas (app.js) y el panel de la
   región o la comuna elegida. Un solo tono: celeste donde hay pocas ofertas, marino donde hay más. */
.mapa-calor { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 22px 26px; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--superficie); }
.mapa-calor-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.mapa-calor-cabeza { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 24px; }
.mapa-calor h2 { font-size: 22px; }
.mapa-calor-resumen { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 20px; color: var(--tenue); font-size: 13px; }
.mapa-calor-resumen strong { color: var(--marino); }
.mapa-calor-barra { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; }
.mapa-calor-barra i { width: 88px; height: 6px; border-radius: 3px; background: linear-gradient(90deg, #dce9f6, #a9cdf2 20%, #6aaef0 40%, #2f80d8 60%, #1659b0 80%, #0b3d82); }
.mapa-calor-cuerpo { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 380px); gap: 24px; align-items: start; }
/* En pantallas anchas el recuadro sale del ancho de la página (hasta 1440 px): más mapa y más panel. */
@media (min-width: 1340px) {
  .sueldos > .mapa-calor { width: min(1440px, calc(100vw - 64px)); margin-left: calc((100% - min(1440px, 100vw - 64px)) / 2); }
  .sueldos > .mapa-calor .mapa-calor-cuerpo { grid-template-columns: auto minmax(0, 1fr) minmax(0, 420px); gap: 32px; }
}
/* Chile y la región ocupan todo el alto del recuadro (el del panel con su lista y sus cargos): regiones más
   grandes, fáciles de elegir. No acompañan el scroll. */
.mapa-calor-lienzo { position: relative; }
.mapa-calor-dibujo { display: block; width: auto; height: 760px; }
.mc-tierra { fill: #e3ebf4; }
.mc-zona { fill: transparent; stroke: transparent; stroke-width: 1.4; stroke-linejoin: round; vector-effect: non-scaling-stroke; transition: fill var(--suave), stroke var(--suave); }
.mc-region { cursor: pointer; }
.mc-region:focus { outline: none; }
.mc-region:focus-visible .mc-zona { fill: rgba(13, 56, 120, 0.08); stroke: var(--marino); }
@media (hover: hover) { .mc-region:hover .mc-zona { fill: rgba(13, 56, 120, 0.08); stroke: var(--marino); } }
.mc-region.activa .mc-zona { fill: rgba(13, 56, 120, 0.18); stroke: var(--marino); stroke-width: 2; }
/* La región en grande */
.mc-region-vista { position: relative; min-width: 0; height: 760px; overflow: hidden; }
/* Al elegir un cargo la página cambia sin recargarse: el contenido se atenúa mientras llega y el calor nuevo aparece suave. */
.mapa-calor { scroll-margin-top: 92px; }
.preguntas-sueldo { display: flex; flex-direction: column; gap: 18px; }
/* Pie de las páginas de empleo: preguntas frecuentes y búsquedas relacionadas (enlaces a otras páginas de empleo). */
.empleo-mas { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 20px; align-items: start; margin-block: 28px 8px; }
.empleo-mas > :only-child { grid-column: 1 / -1; }
.empleo-relacionados { display: flex; flex-direction: column; gap: 12px; }
.empleo-relacionados ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.empleo-relacionados a {
  display: inline-flex; padding: 7px 13px; border: 1px solid var(--linea); border-radius: 999px; background: var(--superficie);
  color: var(--marino); font-size: 13.5px; font-weight: 600; text-decoration: none; transition: border-color var(--suave), background var(--suave);
}
.empleo-relacionados a:focus-visible { border-color: var(--marino); background: var(--bruma); }
@media (hover: hover) { .empleo-relacionados a:hover { border-color: var(--marino); background: var(--bruma); } }
@media (max-width: 759px) { .empleo-mas { grid-template-columns: minmax(0, 1fr); } }
.preguntas-sueldo h3 { font-size: 16px; color: var(--marino); }
.preguntas-sueldo p { color: var(--tinta-2); line-height: 1.55; max-width: 72ch; }
.contenedor.sueldos.mc-cambiando { opacity: 0.55; transition: opacity 0.2s ease; pointer-events: none; }
/* Sueldos del mercado (portal de empresas): cada oferta de la empresa contra el sueldo medio del cargo. */
.comparar-sueldos { flex: 1 1 320px; min-width: 0; }
.comparadas { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.comparadas li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; padding: 14px 0; border-top: 1px solid var(--linea); }
.comparadas li:first-child { border-top: 0; padding-top: 0; }
.comparadas li > :first-child { min-width: 0; flex: 1 1 180px; }
.comparada-valor { align-items: flex-end; text-align: right; }
a.chip-alternar { text-decoration: none; min-height: 32px; }
.mercado-campo { position: relative; }
.sugerencias-cargo {
  position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 20; max-height: 336px; overflow-y: auto; margin: 0; padding: 6px;
  list-style: none; background: var(--superficie); border: 1px solid var(--linea); border-radius: 12px; box-shadow: var(--sombra-elevada);
}
.sugerencias-cargo a { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 12px; border-radius: 8px; color: var(--tinta); font-size: 15px; text-decoration: none; }
.sugerencias-cargo strong { color: var(--marino); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sugerencias-cargo [aria-selected="true"] a { background: var(--bruma); }
@media (hover: hover) { .sugerencias-cargo a:hover { background: var(--bruma); } }
/* Nueva oferta: ofertas anteriores de la empresa y cargos bajo el campo Cargo (oferta_form.js). */
.campo-sugerencias { position: relative; }
.sugerencias-grupo { padding: 8px 12px 4px; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--tenue); }
.sugerencias-oferta [role="option"] { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 8px; color: var(--tinta); font-size: 15px; cursor: pointer; }
.sugerencias-oferta [role="option"] small { color: var(--tenue); font-size: 13px; }
.sugerencias-oferta [role="option"][aria-selected="true"] { background: var(--bruma); }
@media (hover: hover) { .sugerencias-oferta [role="option"]:hover { background: var(--bruma); } }
.aviso-copiado { align-items: center; text-align: left; }
.mercado-oferta a { font-weight: 600; text-decoration: none; }
.mercado-oferta .insignia { margin-left: 4px; vertical-align: 1px; }
.mapa-calor.mc-nueva .mc-calor-capa, .mapa-calor.mc-nueva .mapa-calor-cabeza { animation: mc-funde 0.6s ease both; }
/* Al poner o quitar el filtro de minería: el calor, el título y el total cambian fundiéndose. */
.mapa-calor.mc-filtrando .mc-calor-capa, .mapa-calor.mc-filtrando #mapa-calor-titulo, .mapa-calor.mc-filtrando .mc-resumen-total { animation: mc-funde 0.5s ease both; }
@keyframes mc-funde { from { opacity: 0; } to { opacity: 1; } }
.mc-region-mapa { display: block; width: 100%; height: 100%; }
/* La región se ve solo en 3D (static/js/bloque3d.js). El mapa plano sigue en la página pero nunca se muestra: le pasa al
   3D sus colores y nombres. Mientras el 3D no está, se ve el indicador de carga o un aviso. */
.mc-region-mapa { visibility: hidden; pointer-events: none; }
/* Mientras se arma el 3D: un anillo que gira al centro (aparece a los 0,4 s, para no titilar si llega rápido). */
.mc-region-vista.con-3d:not(.en-3d)::after { content: ""; position: absolute; left: 50%; top: 50%; width: 28px; height: 28px; margin: -14px 0 0 -14px; box-sizing: border-box; border: 3px solid var(--celeste-claro); border-top-color: var(--azul); border-radius: 50%; opacity: 0; animation: escaneo-gira 0.8s linear infinite, mc-cargando 0.2s ease 0.4s forwards; }
@keyframes mc-cargando { to { opacity: 1; } }
/* Si el 3D de la región no llega (o no llegaron sus comunas): un aviso con un botón para reintentar. */
.mc-sin-mapa { position: absolute; inset: 0; z-index: 2; pointer-events: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 16px; text-align: center; color: var(--tinta-2); font-size: 14px; }
.mc-sin-mapa p { margin: 0; }
.mc-sin-mapa button { pointer-events: auto; }
.mc-diag { margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--superficie-2); color: var(--tinta-2); font-size: 12px; white-space: pre-wrap; overflow-wrap: anywhere; }
.mc-bloque { position: absolute; inset: 0; z-index: 1; opacity: 0; transition: opacity 0.35s ease; }
.mc-bloque.visible { opacity: 1; }
.mc-bloque canvas { display: block; width: 100%; height: 100%; cursor: grab; touch-action: pan-y; }
.mc-bloque.girando canvas { cursor: grabbing; }
.mc-bloque-rotulos { position: absolute; inset: 0; overflow: hidden; pointer-events: none; transition: opacity 0.3s ease; }
.mc-bloque-rotulos > span { position: absolute; left: 0; top: 0; }
.mc-bloque-ciudad i { position: absolute; left: -1px; bottom: 0; width: 2px; height: 30px; background: #0b2e5e; }
.mc-bloque-ciudad b {
  position: absolute; left: -1px; bottom: 26px; padding: 3px 9px; border: 1px solid var(--linea); border-radius: 6px; background: #fff;
  box-shadow: 0 4px 12px rgba(5, 20, 50, 0.16); color: var(--marino); font: 700 13px var(--fuente); white-space: nowrap;
}
/* Nombres de las comunas, como en el mapa plano (los que no chocan entre sí, ver bloque3d.js). */
.mc-bloque-nombre b {
  position: absolute; transform: translate(-50%, -50%); color: var(--tinta); font: 700 12px var(--fuente); white-space: nowrap;
  text-shadow: 0 0 2px #fff, 0 0 2px #fff, 0 0 3px #fff, 0 0 4px #fff;
}
.mc-bloque-faena svg { position: absolute; left: -9px; top: -9px; pointer-events: auto; cursor: pointer; transition: transform var(--suave); }
.mc-bloque-faena.elegida svg { transform: scale(1.3); }
.mc-bloque-faena circle { fill: #0b2e5e; stroke: #fff; stroke-width: 1.5; }
.mc-bloque-faena path { fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; }
.mc-bloque-faena.sin-ofertas circle { fill: #fff; stroke: #0b2e5e; }
.mc-bloque-faena.sin-ofertas path { stroke: #0b2e5e; }
.mc-bloque-ayuda { position: absolute; right: 12px; bottom: 10px; color: var(--tenue); font-size: 12px; pointer-events: none; }
.mc-ver-region { z-index: 2; }
/* El color de cada comuna según sus ofertas: el 3D lo toma de aquí (el svg de la región no se ve). */
.mc-comuna.nivel-0 { fill: #e6eef8; }
.mc-comuna.nivel-1 { fill: #d3e5f8; }
.mc-comuna.nivel-2 { fill: #a9cdf2; }
.mc-comuna.nivel-3 { fill: #6aaef0; }
.mc-comuna.nivel-4 { fill: #2f80d8; }
.mc-comuna.nivel-5 { fill: #0b3d82; }
/* La picota del botón «Faenas mineras». */
.mc-filtro-faenas path { fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* En el panel: el logo de la empresa o, si no tiene, sus iniciales. */
.mc-panel-cabeza { display: flex; align-items: center; gap: 14px; }
.mc-panel-marcas { display: flex; flex: none; gap: 6px; }
.mc-panel-marcas[hidden] { display: none; }
.mc-panel-marca {
  display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid var(--linea); border-radius: 50%; overflow: hidden;
  background: var(--bruma); color: var(--marino); font-family: var(--fuente-titulos); font-size: 16px; font-weight: 700; letter-spacing: 0.02em;
}
.mc-panel-marca.largo { font-size: 12px; }
.mc-panel-marca img { width: 40px; height: 40px; object-fit: contain; }
.mc-panel-marca:has(img) { background: #fff; }
/* Filtro de la cabecera: muestra u oculta las faenas. */
.mc-filtro-faenas {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 5px; border: 1px solid var(--linea); border-radius: 999px;
  background: var(--superficie); color: var(--tinta); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; transition: background var(--suave), color var(--suave), border-color var(--suave);
}
.mc-filtro-faenas circle { fill: #0b2e5e; transition: fill var(--suave); }
@media (hover: hover) { .mc-filtro-faenas:hover { border-color: var(--marino); } }
.mc-filtro-faenas[aria-pressed="true"] { border-color: #0b2e5e; background: #0b2e5e; color: #fff; }
.mc-filtro-faenas[aria-pressed="true"] circle { fill: #fff; }
.mc-filtro-faenas[aria-pressed="true"] path { stroke: #0b2e5e; }
.mc-faenas[hidden], .mc-faena-detalle[hidden], .mc-faena-detalle [hidden], .mc-kpis > .mc-kpi-n[hidden] { display: none; }
.mc-lista-faenas { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--linea-suave); }
.mc-lista-faenas button {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: baseline; width: 100%; padding: 8px 4px;
  border: 0; border-bottom: 1px solid var(--linea-suave); background: none; color: var(--tinta); font: inherit; font-size: 14px; text-align: left; cursor: pointer;
}
.mc-lista-faenas button:focus-visible { background: var(--bruma); }
@media (hover: hover) { .mc-lista-faenas button:hover { background: var(--bruma); } }
.mc-lista-faenas strong { color: var(--marino); }
.mc-lista-cargos-faena { display: flex; flex-direction: column; gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--linea-suave); }
.mc-lista-cargos-faena li { padding: 8px 4px; border-bottom: 1px solid var(--linea-suave); color: var(--tinta); font-size: 14px; }
.mc-ver-region { position: absolute; top: 12px; left: 12px; background: var(--superficie); }
.mc-ver-region[hidden] { display: none; }
/* Del panel de una región (o comuna) de minería al resumen de Chile. */
.mc-ver-chile {
  display: inline-flex; align-self: flex-start; align-items: center; gap: 4px; margin-bottom: -6px; padding: 5px 12px 5px 8px; border: 0;
  border-radius: 999px; background: var(--bruma); color: var(--marino); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  transition: background var(--suave);
}
.mc-ver-chile[hidden] { display: none; }
.mc-ver-chile:focus-visible { background: #e4effb; }
@media (hover: hover) { .mc-ver-chile:hover { background: #e4effb; } }
.mapa-calor-aviso {
  position: absolute; z-index: 2; display: flex; flex-direction: column; gap: 1px; padding: 6px 10px; border: 1px solid var(--linea);
  border-radius: var(--radio-chico); background: var(--superficie); box-shadow: 0 6px 18px rgba(5, 20, 50, 0.12);
  color: var(--tenue); font-size: 12.5px; white-space: nowrap; pointer-events: none;
}
.mapa-calor-aviso[hidden] { display: none; }
.mapa-calor-aviso strong { color: var(--marino); font-size: 14px; }
/* Panel */
.mapa-calor-panel { min-width: 0; }
.mc-panel-contenido { display: flex; flex-direction: column; gap: 18px; }
.mc-panel-contenido.mc-entra { animation: mc-entra 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@keyframes mc-entra { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.mc-panel-lugar { color: var(--marino); font-family: var(--fuente-titulos); font-size: 28px; line-height: 1.1; }
.mc-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.mc-kpis > div { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: var(--radio-chico); background: var(--bruma); }
.mc-kpis > div[hidden] { display: none; }
.mc-kpis strong { color: var(--marino); font-family: var(--fuente-titulos); font-size: 24px; line-height: 1.1; }
.mc-kpis span { color: var(--tenue); font-size: 13px; }
.mc-titulo { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 6px; color: var(--tenue); font-size: 12px; }
.mc-ciudades[hidden] { display: none; }
.mc-lista-ciudades { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--linea-suave); }
.mc-lista-ciudades > li { border-bottom: 1px solid var(--linea-suave); }
/* Cada ciudad: con pocas ofertas se despliega (flecha hacia abajo); con más, lleva a sus ofertas (flecha a la derecha). */
.mc-ciudad {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto 18px; gap: 10px; align-items: center; padding: 8px 4px;
  color: var(--tinta); font-size: 14px; text-decoration: none; cursor: pointer; transition: background var(--suave);
}
.mc-ciudad:focus-visible, .mc-lista-ciudades li.abierta > .mc-ciudad { background: var(--bruma); color: var(--tinta); }
@media (hover: hover) { .mc-ciudad:hover { background: var(--bruma); color: var(--tinta); } }
.mc-ciudad-nombre { font-weight: 600; }
.mc-ciudad-ofertas { color: var(--tenue); font-size: 13px; }
.mc-lista-ciudades strong { min-width: 84px; color: var(--marino); text-align: right; }
.mc-ciudad-flecha { color: var(--tenue); transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), color var(--suave); }
@media (hover: hover) { .mc-ciudad:hover .mc-ciudad-flecha { color: var(--marino); transform: translateX(2px); } }
.mc-ciudad.con-desglose .mc-ciudad-flecha { transform: rotate(90deg); }
@media (hover: hover) { .mc-ciudad.con-desglose:hover .mc-ciudad-flecha { transform: rotate(90deg) translateX(2px); } }
.mc-lista-ciudades li.abierta > .mc-ciudad.con-desglose .mc-ciudad-flecha { color: var(--marino); transform: rotate(-90deg); }
.mc-desglose { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.38s cubic-bezier(0.2, 0.8, 0.2, 1); }
.mc-lista-ciudades li.abierta .mc-desglose { grid-template-rows: 1fr; }
.mc-desglose-dentro { min-height: 0; overflow: hidden; }
.mc-desglose .mc-lista-ofertas { padding: 6px 4px 12px 12px; }
/* En el mapa de un cargo, cuando la lista trae solo las vigentes: cuántas siguen y el enlace a todas las de la ciudad. */
.mc-desglose-nota { margin: 8px 4px 0 12px; color: var(--tenue); font-size: 12.5px; }
.mc-desglose-nota + .mc-lista-ofertas { padding-top: 2px; }
.mc-desglose-enlace { display: inline-block; margin: 0 4px 12px 12px; font-size: 13px; font-weight: 600; }
.mc-lista-ofertas:has(+ .mc-desglose-enlace) { padding-bottom: 6px; }
/* Las ofertas de una ciudad o comuna, una por una. */
.mc-ofertas-comuna[hidden] { display: none; }
.mc-lista-ofertas { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.mc-lista-ofertas li { display: flex; flex-direction: column; gap: 2px; padding-left: 12px; border-left: 2px solid #cfe1f7; }
.mc-lista-ciudades li.abierta .mc-lista-ofertas li, .mc-ofertas-comuna .mc-lista-ofertas li, .mc-barras > li.abierta .mc-lista-ofertas li {
  animation: mc-oferta 0.42s cubic-bezier(0.2, 0.8, 0.2, 1) both; animation-delay: calc(var(--i, 0) * 45ms + 70ms);
}
@keyframes mc-oferta { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
/* Cargo y sueldo en una línea; abajo, empresa y cuándo. Todo en la letra del sitio, sin subrayados. */
.mc-oferta-cabeza { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: baseline; }
.mc-oferta-titulo {
  display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  color: var(--marino); font-size: 14px; font-weight: 600; line-height: 1.3; text-decoration: none; transition: color var(--suave);
}
a.mc-oferta-titulo:focus-visible { color: var(--azul); text-decoration: none; }
@media (hover: hover) { a.mc-oferta-titulo:hover { color: var(--azul); text-decoration: none; } }
span.mc-oferta-titulo { color: var(--tinta); font-weight: 500; }  /* cerrada: no es enlace */
.mc-oferta-sueldo { color: var(--marino); font-size: 13.5px; font-weight: 700; white-space: nowrap; }
.mc-oferta-meta { overflow: hidden; color: var(--tenue); font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.mc-barras { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.mc-barras > li, .mc-cargo-fila { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: baseline; color: var(--tinta); font-size: 14px; }
/* Un cargo se toca para ver sus ofertas vigentes: la fila es un botón, con una flecha que gira al abrirse. */
.mc-barras > li.mc-cargo { display: block; }
.mc-cargo-fila { width: calc(100% + 16px); margin: -6px -8px; padding: 6px 8px; border: 0; border-radius: 8px; background: none; font: inherit; text-align: left; cursor: pointer; }
.mc-cargo-fila:focus-visible, .mc-barras > li.abierta > .mc-cargo-fila { background: var(--bruma); }
@media (hover: hover) { .mc-cargo-fila:hover { background: var(--bruma); } }
.mc-cargo-fila > span::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; opacity: 0.45; transform: translateY(-3px) rotate(45deg); transition: transform 0.2s; }
.mc-barras > li.abierta > .mc-cargo-fila > span::after { transform: translateY(0) rotate(225deg); }
.mc-barras > li.abierta .mc-desglose { grid-template-rows: 1fr; }
.mc-barras .mc-desglose-dentro { visibility: hidden; transition: visibility 0s 0.38s; }
.mc-barras > li.abierta .mc-desglose-dentro { visibility: visible; transition-delay: 0s; }
.mc-barras .mc-desglose .mc-lista-ofertas { padding-top: 10px; }
.mc-barras strong { color: var(--marino); }
.mc-barras i { grid-column: 1 / -1; display: block; width: 0; height: 6px; border-radius: 3px; background: linear-gradient(90deg, #6aaef0, #1659b0); transition: width 0.7s cubic-bezier(0.2, 0.8, 0.2, 1); }
.mc-barras > li:nth-child(2) i { transition-delay: 0.05s; }
.mc-barras > li:nth-child(3) i { transition-delay: 0.1s; }
.mc-barras > li:nth-child(4) i { transition-delay: 0.15s; }
.mc-barras > li:nth-child(5) i { transition-delay: 0.2s; }
.mc-barras > li:nth-child(6) i { transition-delay: 0.25s; }
.mc-sin-cargos[hidden] { display: none; }
/* Al pie del panel: botones, no texto subrayado. El primero (las ofertas del lugar) va lleno. */
.mc-enlaces { display: flex; flex-direction: column; gap: 8px; }
.mc-enlaces a {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 14px; border-radius: var(--radio-chico);
  background: var(--bruma); color: var(--marino); font-size: 14px; font-weight: 600; line-height: 1.3; text-decoration: none;
  transition: background var(--suave), color var(--suave);
}
.mc-enlaces a:focus-visible { background: #e4effb; color: var(--marino); }
@media (hover: hover) { .mc-enlaces a:hover { background: #e4effb; color: var(--marino); } }
.mc-enlaces a.mc-enlace-ofertas { background: var(--marino); color: #fff; }
.mc-enlaces a.mc-enlace-ofertas:focus-visible { background: var(--marino-profundo); color: #fff; }
@media (hover: hover) { .mc-enlaces a.mc-enlace-ofertas:hover { background: var(--marino-profundo); color: #fff; } }
.mc-enlaces a .ico { flex: none; transition: transform var(--suave); }
@media (hover: hover) { .mc-enlaces a:hover .ico { transform: translateX(3px); } }
.mc-enlaces a[hidden] { display: none; }
#desglose { scroll-margin-top: 92px; }
@media (prefers-reduced-motion: reduce) {
  .mc-panel-contenido.mc-entra, .mapa-calor.mc-nueva .mc-calor-capa, .mapa-calor.mc-nueva .mapa-calor-cabeza { animation: none; }
  .mapa-calor.mc-filtrando .mc-calor-capa, .mapa-calor.mc-filtrando #mapa-calor-titulo, .mapa-calor.mc-filtrando .mc-resumen-total { animation: none; }
  .mc-barras i, .mc-desglose, .mc-ciudad-flecha { transition: none; }
  .mc-lista-ofertas li { animation: none !important; }
}
@media (max-width: 1099px) {
  .mapa-calor-cuerpo { grid-template-columns: auto minmax(0, 1fr); }
  .mapa-calor-panel { grid-column: 1 / -1; }
  .mapa-calor-dibujo, .mc-region-vista { height: 620px; }
}
@media (max-width: 759px) {
  .mapa-calor { padding: 16px 14px; }
  .mapa-calor h2 { font-size: 19px; }
  .mapa-calor-cuerpo { grid-template-columns: 84px minmax(0, 1fr); gap: 10px; }
  .mapa-calor-dibujo { width: 84px; height: 440px; }
  .mc-region-vista { height: 440px; }
  .mc-panel-lugar { font-size: 22px; }
  .mc-kpis { grid-template-columns: 1fr 1fr; gap: 8px; }
  .mc-kpis > div { padding: 10px 12px; }
  .mc-kpis strong { font-size: 19px; }
  .mc-ciudad, .mc-lista-faenas button, .mc-lista-cargos-faena li, .mc-barras > li, .mc-cargo-fila { font-size: 13px; }
  #desglose, .mapa-calor { scroll-margin-top: 12px; }
}

/* Video de la demostración del conector */
.video-demo { display: block; width: 100%; height: auto; border-radius: var(--radio); background: #000; margin: 8px 0 16px; }
.video-demo-vertical { max-width: 420px; margin-inline: auto; }

/* Prácticas: el calendario de los programas de práctica de las mineras (/practicas/mineria/) y su anuncio en /practicas/.
   Cada programa es una fila: la minera y el programa, el estado de la postulación, el período y el botón. */
.banda-dato { color: var(--texto-sobre-marino); font-size: 15px; font-weight: 600; }
.grupo-programas, .anuncio-practicas { display: flex; flex-direction: column; gap: 12px; }
.grupo-programas + .grupo-programas { margin-top: 12px; }
.programas { margin: 0; padding: 0 20px; list-style: none; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--superficie); }
.programa {
  display: grid; grid-template-columns: minmax(0, 1fr) 210px 190px auto; gap: 6px 18px; align-items: center;
  padding: 16px 0; border-bottom: 1px solid var(--linea-suave);
}
.programa:last-child { border-bottom: 0; }
.programa-quien { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.programa-linea { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.programa-sector { color: var(--tenue); font-size: 12px; font-weight: 600; }
.programa-empresa { display: inline-flex; align-items: center; gap: 8px; color: var(--marino); font-size: 13px; font-weight: 700; text-decoration: none; }
a.programa-empresa { align-self: flex-start; transition: color var(--suave); }
a.programa-empresa:focus-visible { color: var(--azul); }
@media (hover: hover) { a.programa-empresa:hover { color: var(--azul); } }
.programa-nombre { color: var(--tinta); font-size: 16px; font-weight: 700; line-height: 1.3; }
.programa-para { color: var(--tenue); font-size: 13px; }
.programa-cuando, .programa-periodo { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; font-size: 13.5px; color: var(--tinta); }
.programa-rotulo { color: var(--tenue); font-size: 12px; }
.programa-abierta .programa-detalle { color: var(--verde-texto); font-weight: 700; }
.programa-cerrada .programa-nombre, .programa-cerrada .programa-detalle { color: var(--tenue); }
/* En /guardados/, el estado de hoy de un programa de práctica guardado. */
.guardado-estado { color: var(--tenue); font-size: 14px; }
.guardado-estado.abierta { color: var(--verde-texto); font-weight: 700; }
.programa-acciones { display: flex; align-items: center; gap: 8px; justify-self: end; }
.programa-ir { gap: 6px; white-space: nowrap; }
.programa-acciones .guardar { margin-left: 0; }
@media (max-width: 1099px) {
  .programa { grid-template-columns: minmax(0, 1fr) auto; }
  .programa-cuando, .programa-periodo { grid-column: 1 / 2; }
  .programa-cuando { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
  .programa-periodo { flex-direction: row; gap: 6px; }
  .programa-periodo:empty { display: none; }
  .programa-acciones { grid-column: 2; grid-row: 1; }
}
@media (max-width: 759px) {
  .programas { padding: 0 14px; }
  .programa { grid-template-columns: minmax(0, 1fr); align-items: start; padding: 14px 0; }
  .programa-acciones { grid-column: 1 / -1; grid-row: auto; justify-self: stretch; }
  .programa-ir { flex: 1 1 auto; justify-content: center; }
}

.aviso-legal { margin: 0; padding: 8px 16px; background: var(--bruma); border-bottom: 1px solid var(--primario-borde); font-size: 14px; text-align: center; overflow-wrap: anywhere; }
.aviso-legal a { font-weight: 600; text-decoration: none; }
/* En celulares de 320 px, «Buscar empleos · Sueldos · Para empresas» cabe entero sin desplazar el menú. */
@media (max-width: 359px) {
  .nav { gap: 14px; }
  .nav a { font-size: 14px; }
}