/* =============================================================================
css/busqueda-layout.css — layout y filtros del buscador de empleos.
=============================================================================
Estaba inline en fgm-layout-busqueda-empleos.php: 11.287 bytes sin una sola
isla PHP que viajaban en CADA pagina del buscador Y en cada una de las
~28.600 fichas de oferta, porque las dos incluyen ese parcial.
Acá es UNA descarga para las dos superficies.
⚠️ Se carga con BLOQUEANTE en el de las dos
paginas que incluyen el parcial (busqueda-ofertas-empleo.php y oferta.php),
no desde el parcial: el parcial se incluye dentro del , y este archivo
define .bqe-layout, el grid que posiciona TODO el contenido de la pagina.
Cargarlo desde el body dejaria pintar el navbar y el contenido antes de
saber en que columna va cada cosa, con reflow visible.
⚠️ NO necesita el patron detCssLink() de css/oferta-detalle.css. Ese existe
porque el DETALLE se inyecta por AJAX en un documento que no pasa por ningun
. Este parcial no: se incluye server-side en dos paginas completas y
nunca viaja en un fragmento. Y el detalle inyectado en el buscador encuentra
estas reglas ya cargadas, porque la pagina del buscador es una de las dos que
enlazan este archivo.
Sin solapamiento con css/oferta-detalle.css: los selectores de acá llevan
prefijo .bqe- y los de allá .det-; se verifico que no comparten ni uno.
Al tocar este archivo hay que subir SAPLIC_BQE_ASSETS_V en
modulos/assets-busqueda.php.
============================================================================= */
.bqe-layout {
max-width: 1100px; margin: 0 auto;
padding: 28px 20px;
display: grid;
grid-template-columns: 270px minmax(0, 1fr);
gap: 24px;
align-items: start;
}
/* ── EL PANEL DE FILTROS ACOMPAÑA EL SCROLL ───────────────────────────────
Medido a 1440px en /us/job-search: el aside mide 471px y el main 1402px.
Eran 931px de columna izquierda vacia, y ademas los filtros desaparecian
de la vista en cuanto se bajaba una pantalla — justo cuando se ve el
resultado de haberlos puesto y da ganas de corregirlos.
top:78px = los 62px de la nav.sap-navbar sticky mas 16 de aire.
max-height + overflow-y: si algun dia la lista de filtros crece mas que la
ventana, se scrollea sola en vez de dejar el boton "Aplicar" fuera de
alcance para siempre.
⚠️ align-items:start ya estaba y es CONDICION del sticky: con el stretch
por defecto el aside mide lo mismo que la fila y nunca hay nada que
"pegar". En movil el @media de 768px convierte este aside en bottom sheet
con position:fixed, que gana sobre sticky, asi que no hay que deshacerlo. */
.bqe-sidebar {
position: sticky;
top: 78px;
max-height: calc(100vh - 94px);
overflow-y: auto;
}
/* Ficha de oferta: sin aside de filtros, la columna de 270px no tiene quien
la ocupe y el detalle quedaria corrido a la derecha con un hueco al lado. */
.bqe-layout-solo-detalle { grid-template-columns: 1fr; }
/* ── F4/F5: EL H1 DEL LISTADO ─────────────────────────────────────────────
.sap-page-title mide 24px, que es el tamaño de un titulo de panel interno.
Como h1 de una pagina publica de listado se queda corto: los titulos de
oferta van a 15px y no habia ningun escalon entre medio. 34px lo pone en el
segundo escalon de la escala del sitio (48/32/20/16) sin pasarse.
clamp para que a 380px no se coma media pantalla. */
.bqe-h1 { font-size: clamp(26px, 4.2vw, 34px); line-height: 1.15; letter-spacing: -.5px; }
.bqe-h1 .sap-accent { height: 1em; width: 6px; }
/* La zona tactil de "Ver en mapa": 133x34 medidos a 380px. */
.btn-ver-mapa { min-height: 44px; box-sizing: border-box; }
.bqe-acordeon { border-bottom: 1px solid var(--borde); }
.bqe-boton-acordeon {
display: flex; justify-content: space-between; align-items: center;
width: 100%; padding: 13px 0;
background: transparent; border: none;
font-family: var(--fb); font-size: 14px; font-weight: 600;
color: var(--negro); cursor: pointer; text-decoration: none;
transition: color 0.2s;
}
.bqe-boton-acordeon:hover { color: var(--v); }
.bqe-boton-acordeon.bqe-boton-acordeon-activo { color: var(--v); }
.bqe-boton-acordeon-etiqueta { pointer-events: none; }
.bqe-chevron { font-size: 10px; color: var(--gris-med); transition: transform 0.2s; pointer-events: none; }
.bqe-boton-acordeon-activo .bqe-chevron { transform: rotate(180deg); color: var(--v); }
.bqe-cont-acordeon { padding-bottom: 14px; }
/* Cards de ofertas generadas por el módulo PHP */
.bqe-panel-oferta-empleo {
background: var(--blanco); border-radius: var(--radio-m);
padding: 16px 18px; box-shadow: var(--sombra-s);
display: grid; grid-template-columns: 52px 1fr auto;
gap: 14px; align-items: center;
border: 1.5px solid transparent; transition: var(--trans);
margin-bottom: 0 !important;
}
.bqe-panel-oferta-empleo:hover { border-color: var(--v-clr); box-shadow: var(--sombra-m); transform: translateY(-1px); }
.bqe-logo-empresa { width: 52px; height: 52px; border-radius: 10px; overflow: hidden; border: 1px solid var(--borde); background: var(--gris-cla); }
.bqe-logo-empresa img { width: 100%; height: 100%; object-fit: contain; }
.bqe-titulo-oferta { font-size: 15px !important; font-weight: 700 !important; color: var(--negro) !important; margin-bottom: 4px !important; }
.bqe-tabla-datos { font-size: 12px; }
.bqe-etiqueta-clave { color: var(--gris-med); font-weight: 600; margin: 0; }
.bqe-etiqueta-valor { color: var(--negro); margin: 0 0 0 4px; }
.bqe-etiqueta-pc { font-size: 12px; color: var(--gris-med); margin: 4px 0 0 !important; }
.bqe-etiqueta-ayuda { display: none !important; }
.dsb-ov-hd { display: flex; flex-wrap: wrap; gap: 8px; }
/* ⚠️ min-height 36px y align-items:center: "View Job" medía 33px y
"Save favorite" 34, uno al lado del otro, porque el segundo lleva un emoji
que sube la altura de linea. Un pixel de diferencia entre dos botones
pegados se ve. */
.boton-violeta-seccion { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; font-family: var(--fb); font-size: 13px; font-weight: 600; padding: 8px 16px; border-radius: var(--radio-s); background: var(--v); color: var(--blanco); text-decoration: none; transition: var(--trans); }
.boton-violeta-seccion:hover { background: var(--v-osc); }
/* ── LA ACCION PRINCIPAL SE TIENE QUE DISTINGUIR ──────────────────────────
"View Job" y "Save favorite" salian con el MISMO color, cuerpo, peso,
radio y padding: dos botones violetas llenos, uno al lado del otro, sin
nada que dijera cual es el que hace avanzar. Guardar es una accion
secundaria —y reversible—; ver la oferta es a lo que vino el visitante.
Se resuelve degradando el secundario a boton fantasma, no realzando mas el
primario: la tarjeta ya tiene bastante violeta. El borde mantiene el area
clickeable identica, asi que no se pierde ninguna zona tactil. */
.bqe-fav-btn.boton-violeta-seccion {
background: transparent;
color: var(--v);
border: 1.5px solid var(--v-clr);
padding: 6.5px 14.5px; /* 1.5px menos, para compensar el borde */
}
.bqe-fav-btn.boton-violeta-seccion:hover { background: var(--v-clr); border-color: var(--v); }
.bqe-botones-alineacion-izquierda, .bqe-botones-alineacion-derecha { display: inline-block; }
.mensaje-notificacion { background: var(--blanco); border-radius: var(--radio-m); padding: 32px; text-align: center; color: var(--gris-med); box-shadow: var(--sombra-s); }
@media (max-width: 768px) {
.bqe-layout { grid-template-columns: 1fr; padding: 16px 14px; }
.bqe-sidebar { order: 1; }
.bqe-main { order: 0; }
/* Tarjeta en mobile: logo + info apilados, sin botones laterales */
.bqe-panel-oferta-empleo {
grid-template-columns: 44px 1fr;
grid-template-rows: auto auto;
cursor: pointer;
position: relative; /* ancla del corazon flotante */
}
/* Corazon de favorito flotante arriba-derecha (a la altura del logo).
Antes se renderizaba como fila propia debajo de la card → hueco vacio.
position:absolute lo saca del grid: row 2 colapsa y la card queda
compacta. z-index:1 lo deja sobre el contenido sin tapar el flujo. */
.bqe-panel-oferta-empleo .dsb-ov-hd {
position: absolute;
top: 10px; right: 10px;
display: block;
width: auto;
margin: 0;
padding: 0;
z-index: 1;
}
.bqe-panel-oferta-empleo .bqe-botones-alineacion-izquierda { display: none; }
.bqe-panel-oferta-empleo .bqe-botones-alineacion-derecha { display: block; }
/* El corazon flotante de la tarjeta: 34x34 medidos, por debajo del
minimo tactil. A 44 sigue entrando en la esquina de la tarjeta —el
titulo ya reserva 40px de padding-right, que se sube abajo. */
.bqe-panel-oferta-empleo .bqe-fav-btn {
width: 44px; height: 44px; padding: 0 !important; min-width: 44px;
display: inline-flex !important; align-items: center; justify-content: center;
border-radius: 50%; background: var(--v-clr); color: var(--v);
}
.bqe-panel-oferta-empleo .bqe-fav-btn:hover { background: var(--v); color: #fff; }
.bqe-panel-oferta-empleo .bqe-fav-btn .bqe-fav-text { display: none; }
.bqe-panel-oferta-empleo .bqe-fav-btn .bqe-fav-icon { font-size: 16px; line-height: 1; }
/* Título no se corte y deje aire al corazon flotante (10+34+4=~48px) */
.bqe-panel-oferta-empleo .bqe-titulo-oferta {
white-space: normal !important;
font-size: 14px !important;
/* 10 (top/right del corazon) + 44 (corazon) + 4 de aire = 58. Era
40 cuando el corazon medía 34. */
padding-right: 58px;
}
/* Botones dentro del detalle de oferta — apilados y 100% ancho */
#bqe-panel-detalle-oferta-empleo .boton-violeta-seccion,
#bqe-panel-detalle-oferta-empleo .dsb-ov-hd a {
display: block;
width: 100%;
text-align: center;
margin-bottom: 8px;
box-sizing: border-box;
}
#bqe-panel-detalle-oferta-empleo .dsb-ov-hd {
flex-direction: column;
width: 100%;
}
.bqe-botones-alineacion-izquierda,
.bqe-botones-alineacion-derecha {
display: block;
width: 100%;
}
/* Acá iba un `display:none` sobre .dsb-ov-hd / .bqe-botones-alineacion-derecha
/ .bqe-fav-btn para body.sap-anonimo: el corazón se apagaba en móvil
porque "el favorito requiere cuenta" y tocarlo terminaba en un 401 con
el mensaje "Tu sesión expiró" — sin sentido para quien nunca tuvo una.
Ahora abre el modal de registro (ver guardarFavorito en
modulos/buscar-ofertas-empleo-public.php), o sea que dejó de ser un
callejón sin salida y pasó a ser la puerta de entrada más visible del
listado. Esconderlo justo en móvil —de lejos el grueso del tráfico— era
esconder el único CTA de cuenta que hay en esta pantalla.
⚠️ Los tres selectores tenían que irse juntos: .dsb-ov-hd NO es un
header aparte, es el CONTENEDOR del corazón (el mismo que 20 líneas más
arriba se posiciona absolute arriba-derecha). Dejándolo en display:none
el botón queda con height 0 por más que .bqe-fav-btn esté visible —
comprobado en un viewport real. */
/* Acá se escondía .bqe-nav-home, el botón "Inicio" del navbar.
Ya no existe en ningún ancho, así que no queda nada que esconder.
Por qué se escondía: el navbar pasó a llevar cuatro cosas —logo,
"Inicio", "Ingresar" y "Crear cuenta"— y a 360px eso medía ~500px, se
desbordaba y "Crear cuenta" quedaba fuera de pantalla, justo el botón
que se había agregado. Medido en un render real. "Inicio" era el que
sobraba: el logo de la izquierda ya lleva a la home.
Por qué terminó yéndose también de escritorio: el logo ahora apunta a
la home del PAÍS. "Inicio" seguía yendo a la portada global, así que
dejaba de ser un duplicado y pasaba a ser algo peor — dos controles
pegados, uno rotulado "Inicio", yendo a dos lugares distintos. */
}
/* === Bottom sheet de filtros (solo mobile) ============================= */
/* En desktop estos elementos no existen visualmente — todo el panel
.bqe-sidebar queda como columna lateral igual que siempre. */
.bqe-filtros-fab { display: none; }
.bqe-overlay-sheet { display: none; }
.bqe-sheet-header { display: none; }
.bqe-sheet-footer { display: none; }
@media (max-width: 768px) {
/* ⚠️ 44x44 ES EL MINIMO. Medido a 380px, el boton "Filters" salia de
91x29: es el que abre el unico panel de filtros que hay en movil y el
que mas se falla. min-height y no solo padding, porque el line-height:1
de abajo aplasta la caja. */
.bqe-filtros-fab {
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
min-height: 44px; padding: 8px 18px; background: var(--v); color: #fff;
border: none; border-radius: 99px;
font-family: var(--fb); font-size: 13px; font-weight: 700;
cursor: pointer; line-height: 1;
}
.bqe-filtros-fab:active { transform: scale(0.97); }
.bqe-overlay-sheet {
position: fixed; inset: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 9998;
opacity: 0;
transition: opacity 0.25s ease-out;
pointer-events: none;
}
.bqe-overlay-sheet.bqe-overlay-visible {
opacity: 1;
pointer-events: auto;
}
/* El aside.bqe-sidebar se convierte en bottom sheet. Override del
grid layout y de las reglas mobile previas (order, etc): position
fixed lo saca del flow, asi que el grid 1fr no le reserva espacio. */
.bqe-sidebar {
position: fixed !important;
left: 0; right: 0; bottom: 0;
max-height: 85vh;
background: var(--blanco);
border-radius: 18px 18px 0 0;
z-index: 9999;
transform: translateY(100%);
transition: transform 0.3s ease-out;
box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.2);
display: flex !important;
flex-direction: column;
margin: 0 !important;
padding: 0 !important;
}
.bqe-sidebar.bqe-sheet-abierto { transform: translateY(0); }
.bqe-sidebar .sap-card {
padding: 14px 18px 20px !important;
border-radius: 0 !important;
box-shadow: none !important;
background: transparent !important;
flex: 1 1 auto;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
/* Titulo de la card y el link "Limpiar filtros" de adentro se ocultan
en mobile — los reemplaza el header del sheet y el boton del footer. */
.bqe-sidebar .sap-card-title { display: none !important; }
.bqe-sidebar .sap-card a[onclick*="limpiarFiltros"] { display: none !important; }
.bqe-sheet-header {
display: flex; align-items: center; justify-content: space-between;
padding: 14px 18px;
border-bottom: 1px solid var(--borde);
background: var(--blanco);
border-radius: 18px 18px 0 0;
flex-shrink: 0;
}
.bqe-sheet-header .bqe-sheet-titulo {
font-family: var(--fb); font-size: 16px; font-weight: 700; color: var(--negro);
}
.bqe-sheet-header .bqe-sheet-cerrar {
background: transparent; border: none;
font-size: 22px; color: var(--gris-med);
cursor: pointer; line-height: 1;
/* Cerrar el panel de filtros: 34x34 quedaba por debajo del minimo. */
width: 44px; height: 44px; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
}
.bqe-sheet-header .bqe-sheet-cerrar:hover { background: var(--gris-cla); color: var(--negro); }
.bqe-sheet-footer {
display: flex; gap: 10px;
padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
border-top: 1px solid var(--borde);
background: var(--blanco);
flex-shrink: 0;
}
.bqe-sheet-footer .bqe-btn-limpiar {
flex: 1; padding: 12px; border-radius: 9px;
background: transparent; border: 1.5px solid var(--borde);
font-family: var(--fb); font-size: 14px; font-weight: 600;
color: var(--negro); cursor: pointer;
text-align: center; text-decoration: none;
display: inline-flex; align-items: center; justify-content: center;
}
.bqe-sheet-footer .bqe-btn-aplicar {
flex: 2; padding: 12px; border-radius: 9px;
background: var(--v); border: none;
font-family: var(--fb); font-size: 14px; font-weight: 700;
color: #fff; cursor: pointer;
}
.bqe-sheet-footer .bqe-btn-aplicar:active { background: var(--v-osc); }
body.bqe-no-scroll { overflow: hidden; }
}
/* ══════════════════════════════════════════════════════════════════════════
FILTROS: DE A