/* ============================================================================= 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 1fr; gap: 24px; align-items: start; } /* 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; } .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; } .boton-violeta-seccion { display: inline-flex; align-items: center; 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); } .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; } .bqe-panel-oferta-empleo .bqe-fav-btn { width: 34px; height: 34px; padding: 0 !important; min-width: 34px; 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; padding-right: 40px; } /* 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. */ /* El navbar pasó a llevar cuatro cosas —logo, "Inicio", "Ingresar" y "Crear cuenta"— y a 360px eso mide ~500px: se desborda y "Crear cuenta" queda fuera de pantalla, justo el botón que se agregó. Medido en un render real, no estimado. "Inicio" es el que sobra: el logo de la izquierda ya lleva a la home y es la convención que el usuario espera. En desktop se queda. */ .bqe-nav-home { display: none; } } /* === 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) { .bqe-filtros-fab { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; 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; width: 34px; height: 34px; 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; } }