/* =============================================================================
   css/oferta-detalle.css — estilos de la ficha de oferta.
   =============================================================================
   Estaba inline en modulos/render-detalle-oferta.php, repartido en tres <style>
   que viajaban en CADA una de las ~28.600 fichas: 15.284 bytes identicos byte a
   byte, imposibles de cachear. Por eso el solapamiento del HTML crudo entre dos
   fichas seguia en 94% aunque el texto visible bajara un tercio.

   Acá es UNA descarga para todo el sitio. La ficha numero dos ya lo tiene en
   cache.

   ⚠️ Se carga con <link rel="stylesheet"> BLOQUEANTE en el <head> de oferta.php,
   no con el preload+onload asincrono que usa saplic-theme.css. Es deliberado:
   esto estiliza el contenido principal (el LCP de la pagina), y cargarlo async
   haria que la ficha se pintara sin estilo por un frame. El theme puede ir
   async porque el CSS critico above-the-fold sigue inline en oferta.php.

   ⚠️ El detalle tambien se inyecta por AJAX en el buscador
   (fgm-consultar-detalle-oferta-empleo.php). Ese camino emite su propio <link>
   dentro del fragmento — ver detCssLink() en render-detalle-oferta.php.

   Al tocar este archivo hay que subir ?v= en los dos lugares que lo enlazan.
   ============================================================================= */

/* ── Layout ── */
#det-oferta-root { padding:4px 0 20px; }
.det-volver { display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--gris-med);cursor:pointer;margin-bottom:18px;border:none;background:none;padding:0; }
.det-volver:hover { color:var(--v); }
.det-breadcrumb { font-size:12px;color:var(--gris-med);margin-bottom:12px;display:flex;align-items:center;gap:5px;flex-wrap:wrap;line-height:1.4; }
.det-breadcrumb a { color:var(--v);text-decoration:none;font-weight:700; }
.det-breadcrumb a:hover { text-decoration:underline; }
.det-breadcrumb .sep { color:#c9c9c9;font-weight:600; }
.det-breadcrumb .current { color:var(--negro);font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%; }
@media(max-width:600px){ .det-breadcrumb{font-size:11px;} }

/* ── Hero card ── */
.det-hero { background:#fff;border:1px solid var(--borde);border-radius:var(--radio-m);padding:22px 24px;margin-bottom:14px;box-shadow:var(--sombra-s); }
.det-empresa-row { display:flex;align-items:center;gap:12px;margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid var(--borde); }
.det-logo-wrap { width:56px;height:56px;border-radius:12px;overflow:hidden;border:1px solid var(--borde);background:var(--gris-cla);flex-shrink:0;display:flex;align-items:center;justify-content:center; }
.det-logo-wrap img { width:100%;height:100%;object-fit:contain; }
.det-empresa-nombre { font-weight:800;font-size:15px;color:var(--negro);margin-bottom:2px; }
.det-empresa-sub { font-size:12px;color:var(--gris-med); }
.det-titulo { font-size:22px;font-weight:900;color:var(--negro);line-height:1.2;margin-bottom:8px; }
.det-badges { display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px; }
.det-badge { display:inline-flex;align-items:center;gap:5px;background:var(--gris-cla);color:var(--gris-osc);border-radius:99px;padding:5px 12px;font-size:12px;font-weight:600; }
.det-badge.verde { background:#f0fdf4;color:#16a34a; }
.det-badge.violeta { background:var(--v-clr);color:var(--v); }
.det-badge.amarillo { background:#fff8e1;color:#b45309; }
.det-salario { font-size:20px;font-weight:900;color:var(--verde);margin-bottom:4px; }
.det-salario-lbl { font-size:11px;color:var(--gris-med);font-weight:600;text-transform:uppercase;letter-spacing:.5px; }

/* ── Info grid ── */
.det-info-grid { display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px; }
.det-info-item { background:var(--gris-cla);border-radius:var(--radio-s);padding:12px 14px; }
.det-info-lbl { font-size:10px;font-weight:700;color:var(--gris-med);text-transform:uppercase;letter-spacing:.6px;margin-bottom:4px; }
.det-info-val { font-size:14px;font-weight:700;color:var(--negro); }

/* ── Secciones ── */
.det-section { background:#fff;border:1px solid var(--borde);border-radius:var(--radio-m);padding:20px 22px;margin-bottom:12px;box-shadow:var(--sombra-s); }
.det-section-title { font-size:13px;font-weight:800;color:var(--gris-med);text-transform:uppercase;letter-spacing:.6px;margin-bottom:12px;display:flex;align-items:center;gap:8px; }
.det-section-title::before { content:'';width:3px;height:14px;background:var(--v);border-radius:2px;display:inline-block; }
.det-desc { font-size:14px;line-height:1.75;color:var(--negro); }
/* El anuncio de la ficha, con su separador. Reemplaza al viejo umbral de
   120 palabras: con una oferta corta el anuncio quedaba pegado al CTA, y
   eso se arregla separandolo, no escondiendolo. */
.det-ad { margin-top:20px;padding-top:18px;border-top:1px solid var(--borde); }
.det-ad .sap-ad { margin:0; }
.det-tags { display:flex;flex-wrap:wrap;gap:8px; }
.det-tag { background:var(--v-clr);color:var(--v);border-radius:6px;padding:5px 12px;font-size:12px;font-weight:700;border:1px solid #ddd6fe; }

/* ── Aviso oferta vencida ── */
.det-vencida-aviso {
    background:#fef2f2;
    border:1.5px solid #fecaca;
    border-left:5px solid #dc2626;
    border-radius:var(--radio-m);
    padding:16px 20px;
    margin-bottom:14px;
    display:flex;align-items:flex-start;gap:14px;
    box-shadow:var(--sombra-s);
}
.det-vencida-aviso .det-vencida-icon { font-size:24px;line-height:1;flex-shrink:0; }
.det-vencida-aviso .det-vencida-title { font-size:15px;font-weight:800;color:#991b1b;margin-bottom:4px;letter-spacing:-.2px; }
.det-vencida-aviso .det-vencida-sub   { font-size:13px;color:#7f1d1d;line-height:1.5; }
.det-vencida-aviso .det-vencida-sub a { color:#7f1d1d;text-decoration:underline;font-weight:700; }

/* ── CTA ── */
.det-cta { background:linear-gradient(135deg,var(--v),#7c3aed);border-radius:var(--radio-m);padding:22px 24px;margin-bottom:12px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px; }
.det-cta-text { color:#fff;font-size:16px;font-weight:700; }
.det-cta-sub { color:rgba(255,255,255,.75);font-size:13px;margin-top:2px; }
.det-btn-postular { background:#fff;color:var(--v);border:none;border-radius:var(--radio-s);padding:12px 28px;font-size:15px;font-weight:800;cursor:pointer;transition:var(--trans); }
.det-btn-postular:hover { background:var(--v-clr);transform:translateY(-1px); }
.det-cta-actions { display:flex;flex-direction:column;align-items:stretch;gap:10px; }
/* Bloqueo por pais: mismo bloque que el CTA pero en ambar, no en violeta. El
   violeta es "hace esto"; aca no hay accion posible sobre esta vacante, asi
   que el color no puede prometer lo mismo. El boton blanco se mantiene porque
   SI hay una accion util: ver los empleos de su pais. */
.det-cta-pais { background:linear-gradient(135deg,#b45309,#d97706); }
.det-cta a.det-btn-postular { text-decoration:none;display:inline-block;text-align:center; }
/* Boton secundario "ghost": mismo alto/padding que el primario para que sea
   legible y facil de tocar, pero con fondo transparente + borde translucido
   para que la jerarquia siga siendo clara (blanco solido = accion principal). */
.det-cta-alerta-link { background:rgba(255,255,255,.12);border:1.5px solid rgba(255,255,255,.55);border-radius:var(--radio-s);padding:11px 22px;color:#fff;font-size:14px;font-weight:700;text-decoration:none;cursor:pointer;font-family:inherit;line-height:1.3;text-align:center;transition:var(--trans);white-space:nowrap; }
.det-cta-alerta-link:hover { background:rgba(255,255,255,.22);border-color:#fff;transform:translateY(-1px); }
/* ── Barra fija de postulacion (solo movil) ──────────────────────────
   El CTA de arriba queda a ~970px del tope del documento en un viewport de
   372px de ancho: mas de una pantalla de scroll. Medido, no estimado. En un
   iPhone con las barras de Safari (~650-700px utiles) son casi dos. O sea que
   el boton que crea las cuentas —el unico camino de registro que tiene el
   sitio— no se ve nunca si el visitante no baja a buscarlo.

   Esta barra lo deja siempre a mano mientras se lee la oferta. Solo en movil:
   en desktop el CTA entra en pantalla sin scroll y una barra fija ahi seria
   ruido. Aparece cuando el CTA original sale de vista y se esconde cuando
   vuelve, para no mostrar el mismo boton dos veces. */
.det-cta-fija { display:none; }
@media (max-width:900px) {
    .det-cta-fija {
        display:block; position:fixed; left:0; right:0; bottom:0; z-index:400;
        background:rgba(255,255,255,.97);
        border-top:1px solid var(--borde);
        box-shadow:0 -4px 20px rgba(15,15,26,.10);
        padding:10px 14px calc(10px + env(safe-area-inset-bottom));
        transform:translateY(110%);
        transition:transform .22s ease;
        backdrop-filter:blur(6px);
    }
    .det-cta-fija.visible { transform:translateY(0); }
    .det-cta-fija .det-btn-postular {
        display:block; width:100%; padding:14px 18px; font-size:15px;
        background:var(--v); color:#fff;
        box-shadow:0 4px 14px rgba(81,40,242,.30);
    }
    .det-cta-fija .det-btn-postular:hover { background:var(--v-osc);transform:none; }
    .det-cta-fija .det-btn-postular:disabled { background:var(--gris-med);box-shadow:none;cursor:default; }
    /* Que la barra no tape el final del contenido al scrollear hasta abajo. */
    #det-oferta-root { padding-bottom:88px; }
}
/* Variante "empresa": aviso discreto, sin CTA (aplicar es solo para candidatos). */
.det-cta.det-cta-empresa { background:#fff7ed;border:1px solid #fed7aa; }
.det-cta.det-cta-empresa .det-cta-text { color:#9a3412; }
.det-cta.det-cta-empresa .det-cta-sub { color:#9a3412;opacity:.85; }

/* ── Compartir oferta ── */
.det-share { background:#fff;border:1px solid var(--borde);border-radius:var(--radio-m);padding:16px 22px;margin-bottom:12px;box-shadow:var(--sombra-s); }
.det-share-title { font-size:12px;font-weight:800;color:var(--gris-med);text-transform:uppercase;letter-spacing:.6px;margin-bottom:10px;display:flex;align-items:center;gap:8px; }
.det-share-title::before { content:'';width:3px;height:14px;background:var(--v);border-radius:2px;display:inline-block; }
.det-share-chips { display:flex;flex-wrap:wrap;gap:8px; }
.det-share-chip { display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:99px;font-size:13px;font-weight:700;text-decoration:none;border:1.5px solid var(--borde);background:#fff;color:var(--gris-osc);cursor:pointer;transition:var(--trans);font-family:var(--fb);line-height:1; }
.det-share-chip:hover { transform:translateY(-1px);box-shadow:var(--sombra-s);text-decoration:none; }
.det-share-chip svg { display:block; }
.det-share-chip.wa    { background:#25D366;border-color:#25D366;color:#fff; }
.det-share-chip.fb    { background:#1877F2;border-color:#1877F2;color:#fff; }
.det-share-chip.x     { background:#0f0f0f;border-color:#0f0f0f;color:#fff; }
.det-share-chip.li    { background:#0A66C2;border-color:#0A66C2;color:#fff; }
.det-share-chip.copy  { background:#fff;color:var(--negro);border-color:var(--borde); }
.det-share-chip.native{ background:var(--v);border-color:var(--v);color:#fff; }
.det-share-toast { position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--negro);color:#fff;padding:10px 18px;border-radius:99px;font-size:13px;font-weight:700;opacity:0;pointer-events:none;transition:opacity .2s;z-index:9999;box-shadow:0 6px 24px rgba(0,0,0,.2); }
.det-share-toast.show { opacity:.95; }

.leaflet-div-icon.saplic-pin{background:transparent;border:none;}

@media(max-width:600px){
    .det-info-grid{grid-template-columns:1fr;}
    .det-titulo{font-size:18px;}
    .det-cta{flex-direction:column;}
    .det-btn-postular{width:100%;}
    .det-cta-actions{width:100%;align-items:stretch;}
    .det-cta-alerta-link{white-space:normal;}
    .det-share{padding:14px 16px;}
    .det-share-chip{font-size:12px;padding:7px 11px;}
}

/* ── Ofertas similares (bloque al final del detalle) ─────────────── */
.det-similares { margin-top:6px; }
.det-sim-grid {
    display:grid;
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:10px;
}
.det-sim-card {
    display:flex; flex-direction:column; gap:6px;
    padding:14px 16px;
    background:#fff;
    border:1px solid var(--borde);
    border-radius:12px;
    text-decoration:none;
    color:var(--negro);
    transition:var(--trans);
    min-width:0;
}
.det-sim-card:hover {
    border-color:var(--v);
    box-shadow:var(--sombra-s);
    transform:translateY(-1px);
    text-decoration:none;
}
.det-sim-titulo {
    font-size:14px; font-weight:800; line-height:1.3;
    color:var(--negro);
    overflow:hidden; text-overflow:ellipsis;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
.det-sim-emp {
    font-size:12px; font-weight:700; color:var(--v);
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.det-sim-meta {
    display:flex; flex-wrap:wrap; gap:8px 12px;
    font-size:11.5px; color:var(--gris-med);
    margin-top:2px;
}
.det-sim-sal {
    font-weight:800; color:var(--verde);
}
.det-sim-loc {
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%;
}
/* ── "Mas postulaciones 1-click" (post-postulacion, oferentes logueados) ── */
.det-mp { margin-top:8px; background:#f0fdf4; border:1px solid #86efac; border-radius:14px; padding:16px 18px; }
.det-mp-titulo { font-size:15px; font-weight:800; color:#065f46; margin-bottom:4px; }
.det-mp-bajada { font-size:12.5px; color:#166534; margin-bottom:12px; }
.det-mp-lista { display:flex; flex-direction:column; gap:8px; }
.det-mp-card { display:flex; align-items:center; gap:10px; background:#fff; border:1px solid var(--borde); border-radius:10px; padding:10px 12px; }
.det-mp-info { flex:1; min-width:0; text-decoration:none; color:var(--negro); }
.det-mp-info:hover .det-mp-t { color:var(--v); }
.det-mp-t { font-size:13.5px; font-weight:800; color:var(--negro); line-height:1.3; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; }
.det-mp-e { font-size:11.5px; font-weight:700; color:var(--v); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-top:1px; }
.det-mp-m { display:flex; flex-wrap:wrap; gap:6px 10px; font-size:11px; color:var(--gris-med); margin-top:3px; }
.det-mp-m .s { font-weight:800; color:var(--verde); }
.det-mp-btn { flex-shrink:0; padding:8px 14px; background:var(--v); color:#fff; border:none; border-radius:8px; font-size:12px; font-weight:800; cursor:pointer; white-space:nowrap; transition:var(--trans); font-family:var(--fb); }
.det-mp-btn:hover:not(:disabled) { background:var(--v-osc); }
.det-mp-btn:disabled { cursor:not-allowed; opacity:.9; }
.det-mp-btn.ya { background:#f0fdf4; color:#15803d; border:1.5px solid #86efac; }
.det-mp-toast { display:none; margin-top:10px; padding:8px 12px; border-radius:8px; font-size:12.5px; font-weight:700; text-align:center; }
@media (max-width:520px) {
    .det-mp-card { flex-wrap:wrap; }
    .det-mp-btn { width:100%; padding:10px; }
}
@media (max-width:640px) {
    .det-sim-grid { grid-template-columns:1fr; }
}

/* ── Recurso relacionado (bloque opcional del detalle) ────────────── */
/* Prefijo det- como el resto del detalle. El icono va como SVG en linea y
       no como <i data-lucide>: este parcial se inyecta por AJAX desde el
       buscador y ahi lucide.createIcons() ya corrio, asi que un icono nuevo
       quedaria vacio. */
    .det-recurso{padding:0;border:none;background:none;margin:14px 0;}
    .det-recurso-link{display:flex;align-items:center;gap:11px;padding:13px 15px;
        background:#f7f5ff;border:1px solid #e2dff7;border-radius:12px;
        text-decoration:none;color:inherit;transition:.18s;}
    .det-recurso-link:hover{border-color:#6d28d9;background:#f2eeff;}
    .det-recurso-ico{display:inline-flex;align-items:center;justify-content:center;
        width:34px;height:34px;border-radius:9px;background:#e0daff;color:#6d28d9;flex:0 0 auto;}
    .det-recurso-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;}
    .det-recurso-txt strong{font-size:11.5px;font-weight:800;color:#6d28d9;
        text-transform:uppercase;letter-spacing:.4px;}
    .det-recurso-txt span{font-size:14px;font-weight:600;line-height:1.35;}
    .det-recurso-flecha{color:#6d28d9;font-weight:800;flex:0 0 auto;}

/* ── Modal de captura de postulacion (anonimo) ────────────────────── */
@media(max-width:500px){
        #modal-captura-postulacion > div { max-height: 90vh; overflow-y: auto; }
    }
