/* ═══════════════════════════════════════════════════════════════════════════
   SuperEmpleos · La ficha pública de una vacante · vacante.css

   Prefijo `vx-` y hoja propia: esta página vive en el layout `landing`, que no
   trae el CSS del panel, y mezclarla con `landing.css` —que pesa lo que pesa
   una portada— la haría más lenta justo donde llega la gente de Google.

   Dos columnas en escritorio, una sola desde 1000px. La derecha se queda
   pegada: la decisión de postularse se toma a media lectura.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    --vx-navy:   #0D1F44;
    --vx-azul:   #2563EB;
    --vx-azul-d: #1D4ED8;
    --vx-gris:   #64748B;
    --vx-linea:  #E2E8F0;
    --vx-fondo:  #F6F8FB;
}

body { background: var(--vx-fondo); }

/* ── La barra de arriba ───────────────────────────────────────────────────── */
.vx-top {
    position: sticky; top: 0; z-index: 30;
    display: flex; align-items: center; gap: 1.25rem;
    padding: .7rem 1.5rem;
    background: #fff; border-bottom: 1px solid var(--vx-linea);
}
.vx-marca { flex: none; display: inline-flex; align-items: center; text-decoration: none; }
/* Estas dos reglas viven también en `public/css/main.css`, y aquí NO sobran:
   el layout `landing` no carga esa hoja. Sin ellas, el `img { max-width:100% }`
   de la hoja global no tiene con qué pelearse y el logotipo sale a su tamaño
   natural —unos 140px de alto—, que fue exactamente lo que pasó. */
.se-logo { height: var(--se-logo-alto, 30px); width: auto; max-width: none; flex: none; display: block; }
.se-logo-caja { display: flex; align-items: center; flex: none; }
.vx-buscar {
    flex: 1 1 auto; max-width: 720px; position: relative;
    display: flex; align-items: center;
}
.vx-buscar i {
    position: absolute; left: .95rem; color: #94A3B8; font-size: 1rem; pointer-events: none;
}
.vx-buscar input {
    width: 100%; font-family: inherit; font-size: .95rem; color: var(--vx-navy);
    background: var(--vx-fondo); border: 1px solid var(--vx-linea); border-radius: .7rem;
    padding: .7rem 1rem .7rem 2.6rem;
}
.vx-buscar input:focus { outline: 2px solid var(--vx-azul); outline-offset: -1px; background: #fff; }
.vx-top-acc { flex: none; display: flex; align-items: center; gap: .9rem; }
.vx-top-link { font-size: .92rem; font-weight: 600; color: var(--vx-azul); text-decoration: none; }
.vx-top-link:hover { text-decoration: underline; }
.vx-top-cta {
    display: inline-flex; align-items: center; gap: .45rem;
    background: var(--vx-azul); color: #fff; text-decoration: none;
    border-radius: .7rem; padding: .65rem 1.1rem; font-size: .92rem; font-weight: 700;
}
.vx-top-cta:hover { background: var(--vx-azul-d); color: #fff; }

/* ── El esqueleto ─────────────────────────────────────────────────────────── */
.vx-wrap { max-width: 1280px; margin: 0 auto; padding: 1rem 1.5rem 3.5rem; }
.vx-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 1.5rem; align-items: start; }
.vx-main { min-width: 0; display: flex; flex-direction: column; gap: 1.25rem; }

.vx-aviso {
    margin-bottom: 1rem; padding: .7rem 1rem; border-radius: .6rem; background: #FEF3C7;
    color: #92400E; font-size: .85rem; font-weight: 600; display: flex; align-items: center; gap: .5rem;
}

.vx-migas {
    display: flex; align-items: center; gap: .4rem; flex-wrap: wrap;
    margin: .3rem 0 1rem; font-size: .84rem; color: var(--vx-gris);
}
.vx-migas a { color: var(--vx-azul); text-decoration: none; font-weight: 600; }
.vx-migas a:hover { text-decoration: underline; }
.vx-migas em { font-style: normal; }
/* El último es dónde estás, no adónde puedes ir: ni es enlace ni se corta. */
.vx-migas strong { color: var(--vx-navy); font-weight: 600; }

/* ── La foto ──────────────────────────────────────────────────────────────── */
.vx-foto {
    position: relative; height: 200px; border-radius: 1rem; overflow: hidden;
    background: linear-gradient(135deg, var(--g1, #93C5FD), var(--g2, #2563EB));
    display: grid; place-items: center;
}
.vx-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vx-foto > i { font-size: 3.5rem; color: rgba(255, 255, 255, .55); }
/* El rótulo de «foto ilustrativa» va SOBRE la imagen, no debajo: debajo se lee
   como un pie de foto que nadie mira, y encima es imposible confundirla con
   una foto del lugar. */
.vx-foto-pie {
    position: absolute; left: .9rem; bottom: .9rem;
    background: rgba(13, 31, 68, .72); color: #fff;
    font-size: .72rem; font-weight: 600; border-radius: .4rem; padding: .25rem .6rem;
    backdrop-filter: blur(2px);
}
@media (max-width: 700px) { .vx-foto { height: 150px; } }

/* ── La tarjeta principal ─────────────────────────────────────────────────── */
.vx-card {
    background: #fff; border: 1px solid var(--vx-linea); border-radius: 1rem;
    padding: 1.4rem 1.6rem;
}
.vx-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.vx-emp { display: flex; align-items: center; gap: .8rem; min-width: 0; }
/* `contain` y no `cover`: recortar un logotipo apaisado le quita el nombre. */
.vx-logo {
    width: 52px; height: 52px; flex: none; border-radius: .7rem; object-fit: contain;
    background: #fff; border: 1px solid var(--vx-linea); padding: 4px;
}
.vx-logo--ph, .vx-logo--se { display: grid; place-items: center; color: #94A3B8; font-size: 1.4rem; }
.vx-logo--se { border-color: transparent; background: transparent; }
.vx-logo--conv { display: grid; place-items: center; border-color: var(--cv); overflow: hidden; }
.vx-logo--conv img { width: 100%; height: 100%; object-fit: contain; display: block; }
.vx-emp-txt { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.vx-emp-nombre {
    font-size: .95rem; font-weight: 800; color: var(--vx-navy);
    text-transform: uppercase; letter-spacing: .02em;
}

/* Los sellos. Cada tono dice una cosa distinta y por eso no comparten color:
   verde = RFC comprobado, azul = lo vimos nosotros, institucional = lo
   respalda un convenio, ámbar = nadie lo ha comprobado. */
.vx-chip {
    display: inline-flex; align-items: center; gap: .3rem; flex: none;
    font-size: .74rem; font-weight: 700; border-radius: 2rem; padding: .2rem .6rem;
}
.vx-chip--ok   { color: #047857; background: #D1FAE5; }
.vx-chip--se   { color: #1D4ED8; background: #DBEAFE; }
.vx-chip--conv { color: #065F46; background: #ECFDF5; }
.vx-chip--amb  { color: #92400E; background: #FEF3C7; }

.vx-cab-acc { display: flex; gap: .5rem; flex: none; }
.vx-icobtn {
    display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; font-family: inherit;
    background: #fff; border: 1px solid var(--vx-linea); border-radius: .6rem;
    padding: .5rem .85rem; font-size: .85rem; font-weight: 600; color: var(--vx-gris);
}
.vx-icobtn:hover { border-color: var(--vx-azul); color: var(--vx-azul); }
.vx-icobtn.on { border-color: var(--vx-azul); color: var(--vx-azul); background: #EFF6FF; }

.vx-titulo { font-size: 1.65rem; font-weight: 800; color: var(--vx-navy); line-height: 1.25; margin: 1rem 0 .7rem; }

.vx-meta { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.vx-meta-datos { display: flex; flex-wrap: wrap; gap: .35rem 1.1rem; font-size: .86rem; color: var(--vx-gris); }
.vx-meta-datos span { display: inline-flex; align-items: center; gap: .35rem; }
.vx-meta-datos i { color: #94A3B8; font-size: .85rem; }
.vx-sueldo {
    display: inline-flex; align-items: center; gap: .45rem; flex: none;
    background: #EEF2FF; color: #4338CA; border-radius: .6rem; padding: .5rem .9rem;
}
.vx-sueldo strong { font-size: 1.1rem; font-weight: 800; }
.vx-sueldo em { font-style: normal; font-size: .82rem; font-weight: 600; opacity: .8; }
/* Sin número: el mismo renglón en gris, para que se note que hay sueldo y que
   todavía no se dice, en vez de dejar un hueco que se lee como «no paga». */
.vx-sueldo--tratar { background: #F1F5F9; color: #475569; }
.vx-sueldo--tratar strong { font-size: .95rem; }

/* ── De qué institución viene. Con SU color, no el nuestro. ───────────────── */
.vx-conv {
    margin-top: 1.1rem; border: 1px solid var(--cv); border-left-width: 4px; border-radius: .7rem;
    padding: .8rem 1rem; background: color-mix(in srgb, var(--cv) 5%, #fff);
}
.vx-conv-cab { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; font-size: .9rem; color: var(--cv); }
.vx-conv-cab > i { flex: none; }
.vx-conv-datos { list-style: none; margin: .55rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem 1.4rem; }
.vx-conv-datos li { display: flex; align-items: center; gap: .35rem; font-size: .85rem; color: #475569; }
.vx-conv-datos i { color: var(--cv); font-size: .82rem; }
.vx-conv-datos a { color: var(--cv); font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; gap: .3rem; }
.vx-conv-datos a:hover { text-decoration: underline; }
/* La leyenda de gobierno. No es adorno: cambia cómo se lee la oferta. */
.vx-gob {
    display: inline-flex; align-items: center; gap: .3rem;
    font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
    color: #fff; background: var(--cv); border-radius: 2rem; padding: .18rem .6rem;
}

/* ── Lo más importante ────────────────────────────────────────────────────── */
/* Las cuatro en un renglón, repartidas por igual.
   `auto-fill` y no `auto-fit`: con `auto-fit` el navegador calculaba CINCO
   huecos en los 795px de la columna, colapsaba el vacío y repartía como si
   fueran cinco —tarjetas de 192px y todos los títulos partidos en dos—.
   Fijando cuatro columnas iguales el reparto es el que se ve.

   El hueco de texto queda en 126px, y ahí caben todos los títulos menos
   «Vacante de institución», que se parte en dos. Por eso las tarjetas llevan
   `align-items: stretch` y el contenido centrado: la que se parte crece y las
   otras tres crecen con ella, en vez de quedar una más alta que el resto. */
.vx-clave {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem;
    align-items: stretch;
    margin-top: 1.2rem; padding-top: 1.2rem; border-top: 1px solid var(--vx-linea);
}
.vx-clave-item {
    min-width: 0;
    display: flex; align-items: center; gap: .55rem;
    background: var(--vx-fondo); border: 1px solid var(--vx-linea); border-radius: .7rem; padding: .7rem .8rem;
}
.vx-clave-ico { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: .5rem; font-size: .95rem; }
.vx-clave-ico--dinero { background: #DCFCE7; color: #15803D; }
.vx-clave-ico--lugar  { background: #DBEAFE; color: #1D4ED8; }
.vx-clave-ico--tiempo { background: #E0E7FF; color: #4338CA; }
.vx-clave-ico--ok     { background: #D1FAE5; color: #047857; }
.vx-clave-ico--se     { background: #DBEAFE; color: #1D4ED8; }
.vx-clave-ico--conv   { background: #ECFDF5; color: #065F46; }
.vx-clave-ico--amb    { background: #FEF3C7; color: #92400E; }
/* `> div` y no `.vx-clave-item span` a secas. El recuadro del icono TAMBIÉN es
   un <span> dentro de la tarjeta, así que aquella regla lo alcanzaba: le ponía
   `display:block` encima del `display:grid` —gana por especificidad, un tipo
   más— y el icono se salía del cuadro de color por la izquierda. */
.vx-clave-item > div { min-width: 0; }
.vx-clave-item > div strong { display: block; font-size: .84rem; font-weight: 700; color: var(--vx-navy); line-height: 1.3; }
.vx-clave-item > div span   { display: block; font-size: .78rem; color: var(--vx-gris); line-height: 1.35; }

/* Tres cuando no hay sello que enseñar —sin RFC, sin agente y sin convenio no
   hay nada verdadero que poner en la cuarta— y dos en pantallas estrechas. */
.vx-clave:has(.vx-clave-item:nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* 1250 y no 900: por debajo de ahí la columna de la izquierda baja de 700px
   —la derecha se lleva 360 fijos— y las cuatro tarjetas caían a 147px, con
   todos los títulos partidos. Dos grandes se leen mejor que cuatro apretadas. */
@media (max-width: 1250px) {
    .vx-clave,
    .vx-clave:has(.vx-clave-item:nth-child(3):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 420px) {
    .vx-clave,
    .vx-clave:has(.vx-clave-item:nth-child(3):last-child) { grid-template-columns: minmax(0, 1fr); }
}

/* ── Los bloques de contenido ─────────────────────────────────────────────── */
.vx-dos { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 1.25rem; align-items: start; }
/* Sin descripción, lo de la derecha ocupa todo: media pantalla en blanco se
   lee como si faltara algo por cargar. */
.vx-dos--una { grid-template-columns: minmax(0, 1fr); }
.vx-lado { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; }
.vx-dos--una .vx-lado { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

.vx-bloque { background: #fff; border: 1px solid var(--vx-linea); border-radius: 1rem; padding: 1.2rem 1.35rem; }
.vx-bloque h2 {
    display: flex; align-items: center; gap: .5rem; margin: 0 0 .9rem;
    font-size: .95rem; font-weight: 800; color: var(--vx-navy);
}
.vx-bloque h2 i { color: var(--vx-azul); font-size: 1rem; }
.vx-desc { font-size: .93rem; color: #334155; line-height: 1.8; }

.vx-pide { display: flex; gap: .65rem; align-items: flex-start; padding: .45rem 0; }
.vx-pide + .vx-pide { border-top: 1px solid var(--vx-linea); }
.vx-pide i { color: var(--vx-azul); font-size: 1rem; margin-top: .15rem; flex: none; }
.vx-pide em { display: block; font-style: normal; font-size: .76rem; color: var(--vx-gris); }
.vx-pide strong { display: block; font-size: .9rem; font-weight: 700; color: var(--vx-navy); line-height: 1.35; }

.vx-ojo, .vx-bien {
    display: flex; gap: .45rem; align-items: flex-start; margin: .7rem 0 0;
    border-radius: .55rem; padding: .55rem .75rem; font-size: .84rem; line-height: 1.5;
}
.vx-ojo  { background: #FEF3C7; color: #92400E; }
.vx-bien { background: #ECFDF5; color: #047857; font-weight: 600; }

.vx-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.vx-chips span {
    display: inline-flex; align-items: center; gap: .3rem;
    font-size: .8rem; font-weight: 600; color: #065F46;
    background: #ECFDF5; border: 1px solid #A7F3D0; border-radius: 2rem; padding: .25rem .65rem;
}

/* Alto fijo: el mapa llega después que el resto de la página y sin él los
   bloques de abajo dan un salto en cuanto Google contesta. */
.vx-mapa { height: 220px; border: 1px solid var(--vx-linea); border-radius: .7rem; overflow: hidden; background: #F1F5F9; }
.vx-mapa-pie { display: flex; gap: .4rem; align-items: flex-start; margin: .6rem 0 0; font-size: .82rem; color: var(--vx-gris); line-height: 1.5; }

/* ── Otras parecidas ──────────────────────────────────────────────────────── */
.vx-otras-cab { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .8rem; }
.vx-otras-cab h2 { display: flex; align-items: center; gap: .5rem; margin: 0; font-size: 1rem; font-weight: 800; color: var(--vx-navy); }
.vx-otras-cab h2 i { color: var(--vx-azul); }
.vx-otras-cab a { font-size: .88rem; font-weight: 700; color: var(--vx-azul); text-decoration: none; }
.vx-otras-cab a:hover { text-decoration: underline; }
.vx-otras-lista { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: .7rem; }
.vx-otra {
    display: flex; align-items: center; gap: .75rem; text-decoration: none;
    background: #fff; border: 1px solid var(--vx-linea); border-radius: .8rem; padding: .85rem 1rem;
}
.vx-otra:hover { border-color: var(--vx-azul); }
.vx-otra-ico { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: .55rem; background: var(--vx-fondo); color: var(--vx-gris); }
.vx-otra-txt { flex: 1; min-width: 0; }
.vx-otra-txt strong { display: block; font-size: .9rem; font-weight: 700; color: var(--vx-navy); line-height: 1.35; }
.vx-otra-txt em { display: block; font-style: normal; font-size: .78rem; color: var(--vx-gris); margin-top: .1rem; }
.vx-otra-txt b { display: block; font-size: .82rem; font-weight: 700; color: #4338CA; margin-top: .2rem; }
.vx-otra > i { color: #CBD5E1; flex: none; }

/* ── La columna de la derecha ─────────────────────────────────────────────── */
.vx-rail { position: sticky; top: 5rem; }
.vx-rail-card { background: #fff; border: 1px solid var(--vx-linea); border-radius: 1rem; padding: 1.3rem 1.4rem; }
.vx-rail-card h2 { display: flex; align-items: center; gap: .5rem; margin: 0 0 .5rem; font-size: 1.1rem; font-weight: 800; color: var(--vx-navy); }
.vx-rail-card h2 i { color: var(--vx-azul); }
.vx-rail-card > p { margin: 0 0 1rem; font-size: .88rem; color: var(--vx-gris); line-height: 1.6; }

.vx-btn {
    display: flex; align-items: center; justify-content: center; gap: .5rem;
    width: 100%; text-decoration: none; border-radius: .7rem;
    padding: .85rem 1rem; font-size: .95rem; font-weight: 700;
}
.vx-btn + .vx-btn { margin-top: .6rem; }
.vx-btn--azul  { background: var(--vx-azul); color: #fff; }
.vx-btn--azul:hover { background: var(--vx-azul-d); color: #fff; }
.vx-btn--linea { background: #fff; color: var(--vx-azul); border: 1px solid var(--vx-azul); }
.vx-btn--linea:hover { background: #EFF6FF; color: var(--vx-azul); }

.vx-rail-sep { height: 1px; background: var(--vx-linea); margin: 1.1rem 0; }
.vx-rail-prot { display: flex; gap: .5rem; align-items: flex-start; margin: 0 0 1rem; font-size: .85rem; color: var(--vx-gris); line-height: 1.55; }
.vx-rail-prot i { color: #16A34A; font-size: 1.05rem; flex: none; }
.vx-rail-prot strong { color: var(--vx-navy); }

.vx-pasos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .8rem; }
.vx-pasos li { display: flex; gap: .7rem; align-items: flex-start; }
.vx-pasos li > span {
    display: grid; place-items: center; width: 28px; height: 28px; flex: none;
    border-radius: 50%; background: #EFF6FF; color: var(--vx-azul-d); font-weight: 800; font-size: .88rem;
}
.vx-pasos strong { display: block; font-size: .88rem; font-weight: 700; color: var(--vx-navy); line-height: 1.35; }
.vx-pasos em { display: block; font-style: normal; font-size: .8rem; color: var(--vx-gris); line-height: 1.45; margin-top: .1rem; }

.vx-rail-sello {
    display: flex; gap: .55rem; align-items: flex-start; margin: 1.1rem 0 0;
    border-radius: .7rem; padding: .75rem .9rem; font-size: .82rem; line-height: 1.5;
}
.vx-rail-sello strong { display: block; font-weight: 800; margin-bottom: .1rem; }
.vx-rail-sello i { font-size: 1.05rem; flex: none; }
.vx-rail-sello--ok   { background: #ECFDF5; color: #047857; }
.vx-rail-sello--se   { background: #EFF6FF; color: #1D4ED8; }
.vx-rail-sello--conv { background: #ECFDF5; color: #065F46; }
.vx-rail-sello--amb  { background: #FEF3C7; color: #92400E; }

.vx-rail-pie { display: flex; gap: .5rem; align-items: flex-start; margin: 1rem 0 0; font-size: .78rem; color: var(--vx-gris); line-height: 1.55; }
.vx-rail-pie i { flex: none; margin-top: .12rem; }
.vx-rail-pie a { color: var(--vx-azul); font-weight: 600; }

.vx-pie { text-align: center; font-size: .82rem; color: #94A3B8; margin: 2rem 0 0; }
.vx-pie a { color: var(--vx-azul); font-weight: 600; text-decoration: none; }
.vx-pie a:hover { text-decoration: underline; }

/* ── Estrecho ─────────────────────────────────────────────────────────────── */
@media (max-width: 1000px) {
    .vx-grid { grid-template-columns: minmax(0, 1fr); }
    /* Deja de estar pegada y pasa DEBAJO de la ficha: en una columna, una
       tarjeta pegada se come media pantalla al desplazarse. */
    .vx-rail { position: static; }
    .vx-dos  { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
    .vx-top { flex-wrap: wrap; gap: .7rem; padding: .7rem 1rem; }
    .vx-buscar { order: 3; flex: 1 1 100%; max-width: none; }
    .vx-top-acc { margin-left: auto; }
    .vx-top-link { display: none; }   /* la puerta de entrada vive en el CTA */
    .vx-wrap { padding: 1rem 1rem 3rem; }
    .vx-card { padding: 1.1rem 1.15rem; }
    .vx-titulo { font-size: 1.3rem; }
    .vx-cab { flex-direction: column; }
    .vx-cab-acc { width: 100%; }
    .vx-icobtn { flex: 1; justify-content: center; }
    .vx-meta { flex-direction: column; align-items: flex-start; }
}