/*------------------------------------------------------------------ [vacante-detalle — pantalla de vacante + acceso] Estilos de sistema/bolsa_empleo_detalle.php y del panel de vacante que login.php muestra cuando llega con ?id_bolsa_empleo=N. Se carga DESPUÉS de applicant-v2.css y depende de que el tenga la clase .appv2-root (fondo #0a0a0a, fuente Geist, reset). No redefine nada de applicant-v2.css — solo agrega lo propio de esta pantalla. Prefijo: .vacd-* (vacante-detalle) Ojo: applicant-v2.css se compila desde SCSS vía Gulp. Este archivo NO — es CSS a mano y se edita directo. -------------------------------------------------------------------*/ /* ============================================ LAYOUT ============================================ */ .vacd-main { position: relative; z-index: 1; padding: 46px 0 80px; } .vacd-grid { /* Se aprovecha el ancho de pantalla: con el resumen al 70% cada fila de detalle cabe en menos líneas y baja el scroll. */ width: min(1500px, calc(100% - 48px)); margin: 0 auto; display: grid; /* 70/30: el resumen de la vacante es el que crece hacia abajo (funciones, conocimientos, idiomas), así que se lleva el ancho para reducir el scroll. El formulario solo se llena, no se lee, y le basta con ~30% — pero no baja de 320px para que los campos no queden estrechos. */ grid-template-columns: minmax(0, 7fr) minmax(320px, 3fr); gap: 28px; align-items: start; } /* ============================================ PANEL IZQUIERDO — RESUMEN DE LA VACANTE ============================================ */ .vacd-summary { border: 1px solid #313139; background: #16161a; border-radius: 20px; padding: 28px; box-shadow: 0 24px 70px rgba(0, 0, 0, 0.38); } .vacd-logo { display: block; max-width: 150px; max-height: 46px; width: auto; height: auto; object-fit: contain; margin-bottom: 18px; } .vacd-eyebrow { display: block; color: var(--vacd-acento, #ee3432); font-size: 13px; text-transform: uppercase; letter-spacing: 0.13em; font-weight: 900; } .vacd-title { font-size: 40px; line-height: 1.05; letter-spacing: -0.04em; margin: 9px 0 5px; color: #fff; } .vacd-company { color: #bdbdc4; margin: 0; font-size: 15px; } /* Pills: modalidad, ciudad, viajes */ .vacd-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 0; } .vacd-pill { border: 1px solid #3a3a42; background: #222229; border-radius: 999px; padding: 8px 11px; font-size: 12px; color: #e4e4e9; } /* Bloque de salario */ .vacd-salary { margin-top: 22px; padding: 16px 18px; border: 1px solid #3a3a42; border-radius: 14px; background: #1c1c22; } .vacd-salary-label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 800; color: #9f9fa8; margin-bottom: 6px; } .vacd-salary-value { display: block; font-size: 24px; font-weight: 800; letter-spacing: -0.02em; color: #fff; } /* Lista de detalle */ .vacd-list { display: grid; gap: 13px; margin-top: 24px; } .vacd-row { display: grid; grid-template-columns: 31px minmax(0, 1fr); gap: 11px; border-top: 1px solid #2e2e34; padding-top: 13px; } .vacd-row:first-child { border-top: 0; padding-top: 0; } .vacd-row-icon { color: var(--vacd-acento, #ee3432); font-size: 18px; line-height: 1.3; text-align: center; } .vacd-row-body b { display: block; font-size: 14px; margin-bottom: 4px; color: #fff; } .vacd-row-body span, .vacd-row-body li { display: block; color: #9f9fa8; font-size: 13px; line-height: 1.45; } .vacd-row-body ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 5px; } .vacd-row-body li { padding-left: 14px; position: relative; } .vacd-row-body li::before { content: ""; position: absolute; left: 0; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: var(--vacd-acento, #ee3432); } /* Aviso de vacante cerrada */ .vacd-cerrada { margin-top: 20px; padding: 13px 15px; border: 1px solid #6d4c00; background: rgba(230, 168, 23, 0.12); border-radius: 12px; color: #f0c96b; font-size: 13px; line-height: 1.45; } /* ============================================ PANEL DERECHO ============================================ */ .vacd-panel { /* El sticky va en el formulario, no en el resumen: la columna alta es la izquierda, así que el CTA acompaña al candidato mientras lee la vacante. */ position: sticky; top: 24px; border: 1px solid #303038; background: #17171b; border-radius: 22px; padding: 30px; box-shadow: 0 24px 70px rgba(0, 0, 0, 0.38); } .vacd-panel-title { font-size: 32px; letter-spacing: -0.04em; margin: 0 0 7px; color: #fff; } .vacd-panel-subtitle { color: #adadb5; margin: 0 0 26px; font-size: 16px; line-height: 1.5; } /* Sin sesión el marco lo dibuja .appv2-login-card, así que el panel no pone el suyo: si no, quedan dos tarjetas anidadas con doble borde. */ .vacd-panel--auth { border: 0; background: none; box-shadow: none; padding: 0; border-radius: 0; } /* El card de login/registro reusa .appv2-* de applicant-v2.css; acá solo se neutraliza el ancho máximo para que llene la columna. */ .vacd-panel .appv2-login-card { max-width: none; width: 100%; margin: 0; } .vacd-panel .appv2-login-wrap { max-width: none; width: 100%; } /* ============================================ login.php CON VACANTE Su grilla es .appv2-split-grid (1fr / 460px y centrado vertical), que deja el formulario más abajo que el resumen y un reparto ~50/50. Con vacante se iguala al criterio de la pantalla de detalle. ============================================ */ .vacd-split-wrap { align-items: flex-start; } .appv2-split-grid.vacd-split { max-width: 1500px; padding: 32px 24px; gap: 28px; align-items: start; } @media (min-width: 992px) { .appv2-split-grid.vacd-split { grid-template-columns: minmax(0, 7fr) minmax(320px, 3fr); gap: 28px; padding: 32px 24px; } } .vacd-split .appv2-login-wrap { align-self: start; max-width: none; width: 100%; } .vacd-split .appv2-login-card { max-width: none; width: 100%; margin: 0; } /* CTA de usuario ya logueado */ .vacd-cta { display: grid; gap: 18px; justify-items: start; } .vacd-cta .appv2-btn-primary { width: 100%; } .vacd-cta-nota { color: #8f8f98; font-size: 13px; line-height: 1.5; margin: 0; } /* Estado: vacante no encontrada */ .vacd-vacia { width: min(640px, calc(100% - 40px)); margin: 80px auto; text-align: center; border: 1px solid #303038; background: #17171b; border-radius: 22px; padding: 48px 32px; } .vacd-vacia h1 { font-size: 28px; letter-spacing: -0.03em; margin: 0 0 12px; color: #fff; } .vacd-vacia p { color: #9f9fa8; margin: 0 0 26px; line-height: 1.5; } /* ============================================ RESPONSIVE ============================================ */ @media (max-width: 1100px) { .vacd-grid { grid-template-columns: minmax(0, 1fr); } /* En una sola columna el sticky estorba: el formulario taparía la vacante. */ .vacd-panel { position: relative; top: auto; } } @media (max-width: 760px) { .vacd-main { padding: 26px 0 60px; } .vacd-grid { width: calc(100% - 28px); gap: 20px; } .vacd-summary, .vacd-panel { padding: 22px; border-radius: 16px; } .vacd-title { font-size: 30px; } .vacd-panel-title { font-size: 25px; } }