/* ============================================================
   DESCRIPCION DE PUESTO — /{pais}/descripcion-de-puesto[/{slug}]
   Se carga SOLO en descripcion-puesto.php y descripcion-puesto-indice.php
   (dpHtmlCabecera), despues de saplic-theme.css y de landings.css.

   ⚠️ ESTA HOJA NO DISEÑA LA PAGINA. La pagina se arma con los componentes
   del sitio y aca NO se redefinen:

     contenedor, miga, h1, h2, bajada   .lp-wrap .lp-miga .lp-bajada .lp-metodo
     cifras de arriba                   .lp-cifras .lp-cifra
     chips (habilidades, relacionados)  .lp-chips .lp-chip
     tarjetas (ATS, indice)             .lp-grid .lp-card
     consejos numerados                 .lp-guia
     acordeones (entrevista, FAQ)       .lp-faqs .lp-faq
     resumen y referencia de mercado    .lp-cita
     notas y vacio                      .lp-nota .lp-vacio
     banda final                        .lp-cta.cand .lp-btn
     botones y tarjetas blancas         .sap-btn .sap-card   (tema)
     vacantes                           modulos/tarjeta-oferta.php

   Aca vive SOLO lo que el sitio no tiene:
     1. el indice "En esta pagina" (fijo en escritorio, plegable en movil)
     2. las viñetas con check de funciones y requisitos
     3. la barra del rango salarial
     4. la hoja de la plantilla de vacante
     5. la barra fija del celular
   y cuatro ajustes de encaje entre componentes, marcados como tales.

   Todo con las variables del tema. Mobile first.

   La version (?v=) es el filemtime del archivo: ver dpHtmlCabecera().
   ============================================================ */

/* ── Encaje entre componentes del sitio ───────────────────── */
/* Los dos botones de arriba: en el celular, apilados y a todo el ancho. */
.dp-acciones { display: flex; flex-direction: column; gap: 10px; margin: 18px 0 0; }
.dp-acciones .sap-btn { justify-content: center; white-space: normal; text-align: center; }
/* Una cifra que es TEXTO ("Publicar es gratis") no puede ir a 34px como un numero. */
.lp-cifra .n.dp-cifra-txt { font-size: 19px; line-height: 1.2; letter-spacing: 0; white-space: normal; }
.lp-cifra:first-child .n.dp-cifra-txt { font-size: 21px; }
/* Dentro de una tarjeta blanca el h2 no lleva el margen de seccion de .lp-wrap h2. */
.dp .sap-card > h2 { margin: 0 0 16px; }
/* Las tres tarjetas del ATS no son enlaces: el titulo va como el de .lp-card a,
   el texto un punto mas grande que .m (son frases, no un dato) y sin el salto del hover. */
.dp-ats-grid .lp-card strong { display: block; font-size: 15.5px; font-weight: 800; color: var(--negro); }
.dp-ats-grid .lp-card .m { font-size: 14px; line-height: 1.6; }
.dp-ats-grid .lp-card:hover { transform: none; border-color: var(--borde); box-shadow: none; }
/* .sap-btn no parte linea; "Ver todos los empleos de cajero/a en El Salvador" no entra en 360px. */
.dp .lp-mas-vac .sap-btn { white-space: normal; text-align: center; justify-content: center; }
.dp-enlace { color: var(--v); font-weight: 700; text-decoration: none; }
.dp-enlace:hover { text-decoration: underline; }
/* En el celular la tercera cifra ocupa la fila entera en vez de quedar sola a media anchura. */
@media (max-width: 559px) { .dp .lp-cifras > .lp-cifra:last-child:nth-child(odd) { grid-column: 1 / -1; } }
/* En el indice las tarjetas conservan su ancho aunque el grupo tenga una sola
   (auto-fill en vez del auto-fit de .lp-grid, que la estiraria a todo el ancho). */
.dp-idx.lp-grid { grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); }
/* En el indice la mediana va en verde de texto, como dato y no como nota. */
.dp-idx .lp-card .m { color: var(--verde-txt); font-weight: 700; font-size: 13.5px; }
/* La referencia de mercado usa .lp-cita; solo se le saca el aire de abajo. */
.dp-ref { margin: 0 0 14px; }
/* El titulo de cada consejo, sobre el gris de .lp-guia p. */
.dp .lp-guia strong { color: var(--negro); }
.dp .lp-faq p strong { color: var(--negro); }
/* .lp-nota y .lp-metodo llevan opacity .72 en landings.css: sobre el gris de
   pagina quedan en 3,8:1, por debajo del 4,5:1 de AA. Aca van a opacidad
   plena (mismo color, --gris-med): 8:1. */
.dp .lp-nota, .dp .lp-metodo, .dp .lp-miga { opacity: 1; }
.dp-main > section, .dp-duo { scroll-margin-top: 78px; }
.dp :focus-visible, .dp-sticky :focus-visible { outline: 3px solid var(--v); outline-offset: 2px; }

/* ── 1 · Indice "En esta pagina" ──────────────────────────── */
.dp-cuerpo { margin: var(--rit-out, 32px) 0 0; }
.dp-main { min-width: 0; }
.dp-toc details { background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio-m); }
.dp-toc summary {
    list-style: none; cursor: pointer; padding: 14px 16px;
    font-size: 14px; font-weight: 800; color: var(--negro);
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.dp-toc summary::-webkit-details-marker { display: none; }
.dp-toc summary::after {
    content: ""; flex: 0 0 auto; width: 8px; height: 8px; margin-right: 5px;
    border-right: 2px solid var(--v); border-bottom: 2px solid var(--v);
    transform: rotate(45deg) translate(-2px,-2px); transition: transform .18s;
}
.dp-toc details[open] summary::after { transform: rotate(225deg) translate(-2px,-2px); }
.dp-toc ol { list-style: none; margin: 0; padding: 0 8px 10px; }
.dp-toc a {
    display: block; padding: 9px 12px; border-radius: var(--radio-s); border-left: 3px solid transparent;
    font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--gris-med); text-decoration: none;
}
.dp-toc a:hover { background: var(--v-50); color: var(--v); }
.dp-toc a.dp-activo { background: var(--v-50); color: var(--v); border-left-color: var(--v); font-weight: 800; }

/* ── 2 · Funciones y requisitos: viñetas con check ────────── */
.dp-duo { display: grid; gap: 14px; margin: var(--rit-sec, 52px) 0 0; }
.dp-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.dp-checks li { position: relative; padding-left: 30px; font-size: 15px; line-height: 1.6; color: var(--gris-osc); }
.dp-checks li::before {
    content: ""; position: absolute; left: 0; top: 2px; width: 20px; height: 20px; border-radius: 50%;
    background: var(--v-clr) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.3l3 3 6-6.3' fill='none' stroke='%235128f2' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px 20px no-repeat;
}

/* ── 3 · Salario: la mediana y la barra del rango ─────────── */
.dp-sal { display: grid; gap: 20px; }
.dp-sal-l { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gris-med); }
.dp-sal-med strong { display: block; margin: 6px 0 2px; font-size: 38px; font-weight: 900; line-height: 1; color: var(--v); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.dp-sal-per { font-size: 13px; color: var(--gris-med); }
.dp-sal-grafico { min-width: 0; }
.dp-barra { margin: 14px 0 0; }
.dp-barra-pista { position: relative; height: 12px; border-radius: 999px; background: var(--gris-cla); border: 1px solid var(--borde); }
.dp-barra-rango { position: absolute; top: -1px; bottom: -1px; left: 15%; right: 15%; border-radius: 999px; background: var(--v); }
.dp-barra-med {
    position: absolute; top: 50%; left: var(--dp-med, 50%); width: 22px; height: 22px;
    transform: translate(-50%, -50%); border-radius: 50%;
    background: var(--blanco); border: 5px solid var(--v-osc); box-shadow: var(--sombra-s);
}
.dp-barra-ejes { display: flex; justify-content: space-between; margin: 12px 0 0; padding: 0 15%; font-size: 12.5px; color: var(--gris-med); }
.dp-barra-ejes span { display: flex; flex-direction: column; gap: 1px; transform: translateX(-50%); text-align: center; white-space: nowrap; }
.dp-barra-ejes span:last-child { transform: translateX(50%); }
.dp-barra-ejes b { font-size: 14.5px; color: var(--negro); font-variant-numeric: tabular-nums; }

/* ── 4 · Plantilla: una hoja ──────────────────────────────── */
.dp-hoja { background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio-m); box-shadow: var(--sombra-s); overflow: hidden; }
.dp-hoja-barra {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 8px 10px 8px 14px; background: var(--gris-cla); border-bottom: 1px solid var(--borde);
}
.dp-hoja-puntos { display: inline-flex; gap: 6px; }
.dp-hoja-puntos i { width: 10px; height: 10px; border-radius: 50%; background: var(--borde); }
.dp-doc { padding: 22px 20px; font-size: 15px; line-height: 1.7; color: var(--gris-osc); overflow-wrap: anywhere; }
.dp-doc p { margin: 0 0 12px; }
.dp-doc p:last-child { margin-bottom: 0; }
.dp-doc .dp-doc-t { font-size: 17px; font-weight: 800; color: var(--negro); border-bottom: 1px solid var(--borde); padding-bottom: 12px; margin-bottom: 14px; }
.dp-doc .dp-doc-h { font-weight: 800; color: var(--negro); margin: 18px 0 6px; }
.dp-doc ul { margin: 0 0 12px; padding-left: 20px; }
.dp-doc li { margin: 0 0 5px; }
.dp-copia-msg { min-height: 20px; margin: 10px 0 0; font-size: 13.5px; font-weight: 700; color: var(--verde-txt); }
.sap-btn.dp-ok { background: var(--verde-txt); color: var(--blanco); border-color: var(--verde-txt); }
/* Fuera de la vista pero seleccionable: display:none impediria el copiado de respaldo. */
.dp-oculto { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; opacity: 0; }

/* ── 5 · Barra fija (solo celular) ────────────────────────── */
.dp-sticky {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
    background: var(--blanco); border-top: 1px solid var(--borde); box-shadow: 0 -4px 20px rgba(26,26,46,.08);
}
.dp-sticky[hidden] { display: none; }
.dp-sticky .sap-btn { padding-top: 13px; padding-bottom: 13px; font-size: 15px; white-space: normal; text-align: center; }
/* Aire al pie para que la barra no tape el final del footer. */
body.dp-con-barra { padding-bottom: 72px; }

/* ── 560px+ ───────────────────────────────────────────────── */
@media (min-width: 560px) {
    .dp-acciones { flex-direction: row; flex-wrap: wrap; }
    .dp-sal { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 30px; }
    .dp-doc { padding: 28px 30px; }
}

/* ── 900px+: indice lateral fijo, dos columnas, sin barra inferior ── */
@media (min-width: 900px) {
    .dp-cuerpo { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 36px; align-items: start; }
    .dp-toc { position: sticky; top: 82px; }
    .dp-toc details { background: none; border: none; border-radius: 0; }
    .dp-toc summary { cursor: default; pointer-events: none; padding: 0 12px 10px; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--gris-med); }
    .dp-toc summary::after { display: none; }
    .dp-toc ol { padding: 0; border-left: 1px solid var(--borde); }
    .dp-toc a { margin-left: -1px; padding: 7px 12px; border-radius: 0 var(--radio-s) var(--radio-s) 0; }
    /* La primera seccion arranca a la altura del indice. */
    .dp-main > section:first-child > h2 { margin-top: 0; }
    .dp-duo { grid-template-columns: 1fr 1fr; }
    .dp-sticky { display: none; }
    body.dp-con-barra { padding-bottom: 0; }
}