/* Hero del listado de vacantes (/empleos) con logo ONNIX grande — markup
   copiado de onnixOportunidades.html, pero esas dos reglas quedaron sin su
   CSS (el logo se renderizaba a ~1130px de ancho, casi todo el contenedor,
   en vez de los 540px máx. que pide la referencia). El override de
   .page-hero__title va scopeado a .page-hero__heading — la página de
   detalle de cada vacante también usa .page-hero__title pero SIN
   mayúsculas, así que no puede ser una regla genérica. */
.page-hero__heading {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(0.6rem, 0.4rem + 0.6vw, 1.25rem);
    margin-bottom: 1.25rem;
    text-align: left;
}

.page-hero__heading .page-hero__title {
    font-size: clamp(2.2rem, 1.6rem + 2.5vw, 4rem);
    text-transform: uppercase;
    margin: 0;
}

.page-hero__logo {
    display: block;
    align-self: flex-start;
    width: clamp(280px, 200px + 16vw, 540px);
    height: auto;
    max-width: 100%;
    margin-left: 0;
    margin-right: auto;
}

/* Onnix — único agregado propio sobre la copia exacta de onnixsa.net.
   Las cards del CMS usan iconos dinámicos (Bootstrap Icons, vía clase
   guardada en el campo "icono" de cada sección) en vez de los SVG inline
   fijos del sitio original — .card__icon/.contact-channel__icon están
   pensados para <svg>, esto solo ajusta el tamaño de fuente del ícono. */
.card__icon i.bi,
.card__icon i.bx,
.contact-channel__icon i.bi,
.lr-assist-card__icon i.bi {
    font-size: 22px;
    line-height: 1;
}

/* Bug footer "no llega al fondo": el layout público (layouts.blade.php) trae
   un modal Bootstrap legacy (#customModal, usado por formularios embebidos)
   pero el sitio público NO carga bootstrap.css — solo el JS bundle. Sin su
   CSS, el modal no tiene "display:none" por defecto y queda visible (vacío)
   después del footer, sumando esos pocos px extra al alto de la página.
   La página oficial (onnix.com.py) no tiene ese modal, por eso ahí no pasa.
   bootstrap.bundle.js hace show/hide vía style.display, así que ocultarlo
   acá no rompe su funcionamiento. */
.modal {
    display: none;
}

/* ============================================================
   Popup de postulación + card de CTA en /empleos/{slug}, mismo
   componente (mismos tokens/clases) que onnixFormularioPopUp.html
   y las landings de onnix_oportunidades — así se ve igual en
   todos lados. Reutiliza las variables ya definidas en variables.css.
   ============================================================ */
.cta-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-lg);
    padding: clamp(2rem, 1.6rem + 2vw, 3.5rem);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
}

.cta-card__title {
    font-size: var(--fs-h2);
    color: var(--color-text);
}

.cta-card__lead {
    font-size: var(--fs-lead);
    color: var(--color-text-muted);
    max-width: 500px;
}

/* El .btn base del sitio es más chico (48px/0.85rem) que el de
   onnix_oportunidades (52px/0.95rem 2.2rem) — se agranda solo acá. */
.cta-card .btn {
    min-height: 52px;
    padding: 0.95rem 2.2rem;
}

.cta-card .btn:hover {
    transform: translateY(-2px);
}

.cta-card .btn svg {
    width: 18px;
    height: 18px;
    stroke-width: 2;
}

.popup-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    background: rgba(10, 10, 10, 0.72);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-base), visibility var(--transition-base);
}

.popup-overlay.is-active {
    opacity: 1;
    visibility: visible;
}

.popup-box {
    position: relative;
    width: 100%;
    max-width: 520px;
    max-height: 88vh;
    overflow-x: hidden;
    overflow-y: auto;
    box-sizing: border-box;
    background: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-lg);
    padding: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
    transform: translateY(12px) scale(0.98);
    transition: transform var(--transition-base);
}

.popup-overlay.is-active .popup-box {
    transform: translateY(0) scale(1);
}

/* Scrollbar del popup — el default del navegador (gris claro sobre fondo
   negro) desentonaba con el resto del diseño monocromo. */
.popup-box {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
}

.popup-box::-webkit-scrollbar {
    width: 6px;
}

.popup-box::-webkit-scrollbar-track {
    background: transparent;
    margin-block: 8px;
}

.popup-box::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-pill);
    transition: background-color var(--transition-fast);
}

.popup-box::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, 0.38);
}

.popup-box::-webkit-scrollbar-thumb:active {
    background-color: rgba(255, 255, 255, 0.5);
}

.popup-close {
    position: absolute;
    top: clamp(1rem, 0.85rem + 0.5vw, 1.5rem);
    right: clamp(1rem, 0.85rem + 0.5vw, 1.5rem);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--color-border);
    color: var(--color-text-muted);
    cursor: pointer;
    transition: border-color var(--transition-fast), color var(--transition-fast);
}

.popup-close:hover {
    border-color: var(--color-border-strong);
    color: #ffffff;
}

.popup-close svg {
    width: 16px;
    height: 16px;
    stroke-width: 2;
}

.popup-title {
    font-weight: 700;
    font-size: var(--fs-h2);
    color: var(--color-text);
    letter-spacing: -0.02em;
    margin-bottom: 1.5rem;
    padding-right: 2rem;
}

/* Pills con ícono (modalidad/ubicación), mismas clases que oportunidades.html
   en onnix.com.py — para que una vacante se vea igual ahí y acá. */
/* Mismo fix que assets/css/components.css del sitio real: .card__text trae
   flex-grow:1, así que en cards con menos contenido se estira más alto que
   sus 3 líneas clampeadas y el "..." deja de aparecer. Se pisa a 0 acá y se
   empuja todo lo de abajo con margin-top:auto en las pills en su lugar. */
/* Acá SÍ se muestra la descripción completa (a diferencia de la landing,
   que la recorta a 140 caracteres) — solo se pisa flex-grow para que no
   estire el texto más de lo que ocupa su contenido real. */
.job-card .card__text {
    flex-grow: 0;
}

.job-card__pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: auto;
    padding-top: 0.5rem;
}

.job-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.75rem;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--color-text-muted);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
}

.job-pill svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* Botón blanco de card, mismo patrón que onnixOportunidades.html
   (.btn--card): fondo sutil, hover a blanco sólido con texto negro. */
.btn--card {
    background: rgba(255, 255, 255, 0.04);
    color: var(--color-text);
    border: 1px solid var(--color-border-strong);
    font-size: var(--fs-small);
    font-weight: 600;
}

.btn--card:hover {
    background: #ffffff;
    color: #0a0a0a;
    border-color: #ffffff;
}

/* El <svg> de la flecha no traia ancho/alto propio y no hay ningun ".btn
   svg" generico en el sitio — sin esto el navegador lo dibuja a su tamano
   por defecto (~300px) y revienta el boton entero, sobre todo en mobile. */
.job-card__cta svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* ============================================================
   Detalle de vacante (/empleos/{slug}) — mismo formato que las
   landings de onnix_oportunidades (hero + panel + cta-card).
   .page-hero/.breadcrumb ya existen en components.css (mismo
   sistema portado de onnixsa.net); acá solo lo que faltaba.
   ============================================================ */
.hero__grid-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
    background-size: 54px 54px;
    mask-image: radial-gradient(circle at 50% 22%, #000 0%, transparent 68%);
    -webkit-mask-image: radial-gradient(circle at 50% 22%, #000 0%, transparent 68%);
}

.pills-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    align-items: center;
    margin-top: 1.1rem;
}

.pill {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 0.9rem;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--color-border);
    color: var(--color-text-muted);
    font-size: var(--fs-small);
    font-weight: 500;
}

.pill svg {
    width: 15px;
    height: 15px;
    stroke-width: 1.6;
    flex-shrink: 0;
}

.panel {
    background: rgba(255, 255, 255, 0.015);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: clamp(1.5rem, 1.2rem + 1.5vw, 2.75rem);
}

.panel__intro {
    font-size: var(--fs-lead);
    color: var(--color-text-muted);
    line-height: var(--lh-body);
    margin-bottom: 2rem;
    white-space: pre-line;
}

.panel__section-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: var(--fs-h3);
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 1.25rem;
}

.panel__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--color-border);
    color: #ffffff;
    flex-shrink: 0;
}

.panel__icon svg {
    width: 20px;
    height: 20px;
    stroke-width: 1.6;
}

.req-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.req-item {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    font-size: var(--fs-body);
    color: var(--color-text-muted);
    line-height: var(--lh-body);
}

/* Contenido del panel de la vacante pública: texto corrido, no checklist —
   la página pasó de ser un listado de requisitos puntuales a una página de
   información general del puesto. */
.req-text-block {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.req-text {
    font-size: var(--fs-body);
    color: var(--color-text-muted);
    line-height: var(--lh-body);
}

.req-text strong {
    color: var(--color-text);
    font-weight: 600;
}

.req-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--color-border-strong);
    color: #ffffff;
    flex-shrink: 0;
    margin-top: 2px;
}

.req-check svg {
    width: 13px;
    height: 13px;
    stroke-width: 2.2;
}

/* Ícono insertado a mano dentro del texto desde el editor enriquecido de
   /vacantes (botón "Ícono" → <req-icon><svg>...). Mismo contorno cuadrado
   redondeado que .panel__icon (el ícono del encabezado "Buscamos talento
   con:"), pero en línea con el texto normal. */
req-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: -0.06em;
    width: 2.1em;
    height: 2.1em;
    margin: 0 .15em;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--color-border);
    color: #ffffff;
    flex-shrink: 0;
}

/* Quill envuelve el contenido del embed en un <span contenteditable="false">
   propio al guardar el HTML — sin display:block en el svg queda con el
   hueco fantasma de alineación baseline típico de SVG inline, corrido
   hacia abajo y recortado por el borde del contorno. */
req-icon > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

req-icon svg {
    display: block;
    width: 55%;
    height: 55%;
}

.panel__divider {
    height: 1px;
    background: var(--color-border);
    margin-block: 2.25rem;
}

.content-stack {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* Input de archivo con look de botón Onnix (blanco, pill) — mismo patrón que
   onnixFormularioPopUp.html: <input type=file> nativo queda oculto, un
   <label> hace de botón y un <span> muestra el nombre elegido (ver JS en
   publica.blade.php). Sin esto el navegador dibuja su botón gris nativo. */
.file-field {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.6rem;
    min-width: 0;
}

.file-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    font-size: var(--fs-label);
    font-weight: 600;
    color: #0a0c10;
    background: #ffffff;
    border-radius: var(--radius-pill);
    padding: 0.65rem 1rem;
    cursor: pointer;
    transition: background-color var(--transition-fast);
}

.file-btn:hover {
    background: #e8ebf0;
}

.file-name {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 0.65rem 0.9rem;
    font-size: var(--fs-small);
    color: var(--color-text-dim);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.popup-box input[type="file"] {
    display: none;
}

/* Bug real del desborde: .form y .form__row--2 son CSS Grid sin minmax(0, ...),
   así que un hijo con texto largo sin espacios (el nombre de un archivo, acá)
   fuerza el ancho de la columna del grid más allá del contenedor — el
   overflow-x:hidden del popup-box solo tapaba el síntoma, no la causa.
   Se scopea al popup para no tocar el resto del sitio, que no tiene este caso. */
.popup-box .form {
    grid-template-columns: minmax(0, 1fr);
}

.popup-box .form__row--2 {
    /* Pedido: todos los campos apilados uno debajo del otro, no en pares. */
    grid-template-columns: minmax(0, 1fr);
}

.popup-box .field {
    min-width: 0;
}

/* Mismos colores que el popup de onnix_oportunidades (fondo/borde/foco de los
   inputs): .field__control trae el fondo y el radio del resto del sitio
   (--color-background, --radius-md, foco cyan --color-accent) — acá se pisa
   solo dentro del popup para que coincida con el diseño monocromo. */
.popup-box .field__control {
    background: var(--color-background-soft);
    border-radius: var(--radius-sm);
    font-size: var(--fs-small);
}

.popup-box .field__control:focus {
    border-color: var(--color-border-strong);
    background: var(--color-surface-hover);
    box-shadow: none;
}

/* Agrupa el CTA + el hamburguesa para que no queden separados por el
   justify-content:space-between de .header__inner (antes el CTA quedaba
   flotando solo en el medio del header, lejos del hamburguesa). */
.header__mobile-actions {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

/* CTA "Postularme ahora" en el header — solo se renderiza (server-side) en
   /empleos/{slug}, y solo se MUESTRA en mobile: en desktop el nav ya tiene
   "Trabajá con nosotros" visible, así que ahí sobra. Mismo patrón que
   header.js de onnix_oportunidades (.header__cta-postular, mobile-only). */
.header__cta-postular {
    display: none;
}

@media (max-width: 991.98px) {
    .header__cta-postular {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 35px;
        padding: 0.45rem 0.8rem;
        font-size: clamp(0.72rem, 0.66rem + 0.25vw, 0.8rem);
        font-weight: 600;
        line-height: 1;
        letter-spacing: -0.01em;
        color: #0a0a0a;
        background: #ffffff;
        border: 1px solid transparent;
        border-radius: var(--radius-pill);
        text-decoration: none;
        white-space: nowrap;
        cursor: pointer;
        flex-shrink: 0;
        transition: background-color var(--transition-fast), transform var(--transition-fast);
    }

    .header__cta-postular:hover {
        background: #e8ebf0;
    }

    .header__cta-postular:active {
        transform: translateY(1px);
    }
}

@media (max-width: 575.98px) {
    .header__cta-postular {
        min-height: 32px;
        padding: 0.4rem 0.65rem;
    }
}

/* La página de vacante (hero + panel + popup) sigue la firma monocroma de
   onnix_oportunidades — nada de --color-accent (cyan) acá, solo blanco/gris. */
.page-hero .req,
.panel .req,
.popup-box .req {
    color: var(--color-text-muted);
}