/* ============================================================================
   opec.css — Buscador de empleos OPEC (CNSC)
   ----------------------------------------------------------------------------
   La herramienta va INCRUSTADA en la web pública: conserva el navbar del sitio
   y solo prescinde de la cabecera de sección, que competía con los filtros por
   la atención. Tres columnas: filtros · resultados · ficha.

   Los tokens viven aquí y no en una hoja aparte para que la herramienta sea
   autónoma: si se carga sola, se ve bien igual.
   ============================================================================ */

:root{
  --hm-ink:#1A0B4E;      --hm-ink2:#2A2440;
  --hm-paper:#FAFAF7;    --hm-paper2:#F2F0EA;   --hm-card:#FFFFFF;
  --hm-text:#1F1B2E;     --hm-mute:#5A5668;     --hm-rule:#E4E0D8;
  --hm-marca:#FF8A00;    --hm-violet:#6A1FD0;   --hm-magenta:#C42A7E;
  --hm-ok:#1F7A4D;       --hm-warn:#9A5B12;     --hm-stop:#8A2018;
  --hm-sombra:0 4px 16px -10px rgba(26,11,78,.28);
  --hm-sombra-md:0 20px 44px -26px rgba(26,11,78,.34);
  --hm-barra-alto:46px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --hm-ink:#0E0A1E;    --hm-ink2:#171232;
    --hm-paper:#12101C;  --hm-paper2:#1B1830;   --hm-card:#191627;
    --hm-text:#EDEAF5;   --hm-mute:#9C97AE;     --hm-rule:#2B2740;
    --hm-ok:#5FBE8C;     --hm-warn:#DFAA63;     --hm-stop:#E8867A;
  }
}
:root[data-theme="dark"]{
  --hm-ink:#0E0A1E;    --hm-ink2:#171232;
  --hm-paper:#12101C;  --hm-paper2:#1B1830;   --hm-card:#191627;
  --hm-text:#EDEAF5;   --hm-mute:#9C97AE;     --hm-rule:#2B2740;
  --hm-ok:#5FBE8C;     --hm-warn:#DFAA63;     --hm-stop:#E8867A;
}

/* El navbar de la web pública es fijo, de 72 px, abajo: la herramienta le cede
   ese alto para no quedar tapada. */
:root{ --nav-alto:72px }

.op{ display:grid;grid-template-columns:300px 340px minmax(0,1fr);
     min-height:calc(100vh - var(--nav-alto));align-items:start }

/* ── Columna 1 · filtros, sobre la franja oscura de marca ────────────────── */
.op-filtros{
  position:sticky;top:0;height:calc(100vh - var(--nav-alto));
  overflow-y:auto;background:var(--hm-ink);color:#EFEDF6;padding:22px 20px 24px;display:flex;flex-direction:column;gap:15px;
}
.op-filtros h2{
  margin:0;font-size:13.2px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:rgba(255,255,255,.5);display:flex;align-items:center;gap:8px;
}
.op-filtros h2::after{ content:"";flex:1;height:1px;background:rgba(255,255,255,.12) }
.op-campo{ display:flex;flex-direction:column;gap:5px }
.op-campo > span{
  font-size:12.6px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.52);
}
.op-campo input,.op-campo select{
  width:100%;padding:9px 11px;border-radius:9px;border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.07);color:#fff;font-family:inherit;font-size:16.2px;
}
.op-campo select option{ background:#1A0B4E;color:#fff }
.op-campo input::placeholder{ color:rgba(255,255,255,.4) }
.op-campo input:focus,.op-campo select:focus{
  outline:2px solid var(--hm-marca);outline-offset:1px;border-color:transparent;
}
.op-pareja{ display:grid;grid-template-columns:1fr 1fr;gap:10px }
.op-aplicar{
  width:100%;padding:12px;border:0;border-radius:10px;cursor:pointer;color:#fff;
  background:linear-gradient(120deg,var(--hm-violet),var(--hm-magenta) 60%,var(--hm-marca));
  font-family:inherit;font-weight:800;font-size:16.8px;letter-spacing:.01em;
}
.op-aplicar:hover{ filter:brightness(1.08) }
.op-limpiar{ text-align:center;font-size:15px;color:rgba(255,255,255,.5);text-decoration:none }
.op-limpiar:hover{ color:var(--hm-marca) }
.op-sync{
  margin-top:auto;padding-top:16px;border-top:1px solid rgba(255,255,255,.1);
  font-size:13.2px;color:rgba(255,255,255,.42);line-height:1.6;
}
.op-sync b{ color:rgba(255,255,255,.72);font-variant-numeric:tabular-nums }

/* ── Columna 2 · resultados ──────────────────────────────────────────────── */
.op-res{
  position:sticky;top:0;height:calc(100vh - var(--nav-alto));
  overflow-y:auto;background:var(--hm-paper2);
  border-right:1px solid var(--hm-rule);padding:18px 16px;display:flex;flex-direction:column;gap:10px;
}
.op-res-cab{ display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap }
.op-res-cab strong{ font-size:18px;font-variant-numeric:tabular-nums }
.op-res-cab span{ font-size:13.8px;color:var(--hm-mute) }
.op-lista{ list-style:none;margin:0;padding:0;display:grid;gap:8px }
.op-item{
  display:grid;gap:6px;padding:13px 14px;border-radius:12px;background:var(--hm-card);
  border:1px solid var(--hm-rule);text-decoration:none;color:inherit;transition:.15s;
}
.op-item:hover{ border-color:var(--hm-marca);transform:translateY(-1px);box-shadow:var(--hm-sombra) }
.op-item.activo{ border-color:var(--hm-marca);box-shadow:0 0 0 2px rgba(255,138,0,.18) }
.op-item-top{ display:flex;justify-content:space-between;align-items:baseline;gap:10px }
.op-num{ font-size:12.6px;font-weight:800;letter-spacing:.06em;color:var(--hm-mute) }
.op-salario{ font-size:16.8px;font-weight:800;color:var(--hm-ok);font-variant-numeric:tabular-nums }
.op-item h3{ margin:0;font-size:16.2px;font-weight:800;line-height:1.35;color:var(--hm-text) }
.op-item .entidad{ font-size:13.8px;color:var(--hm-mute);line-height:1.4 }
.op-chips{ display:flex;flex-wrap:wrap;gap:5px }
.op-chip{
  font-size:12px;font-weight:800;letter-spacing:.04em;padding:2px 7px;border-radius:5px;
  border:1px solid var(--hm-rule);color:var(--hm-mute);background:var(--hm-paper);
}
.op-chip.nivel{ color:var(--hm-marca);border-color:color-mix(in srgb,var(--hm-marca) 45%,transparent) }
.op-chip.modalidad{ color:var(--hm-magenta);border-color:color-mix(in srgb,var(--hm-magenta) 40%,transparent) }
.op-estado{ font-size:12px;font-weight:800;padding:2px 8px;border-radius:5px;border:1px solid }
.op-estado.abierta{ color:var(--hm-ok);border-color:var(--hm-ok);background:color-mix(in srgb,var(--hm-ok) 10%,transparent) }
.op-estado.espera{ color:var(--hm-warn);border-color:var(--hm-warn);background:color-mix(in srgb,var(--hm-warn) 10%,transparent) }
.op-estado.cerrada{ color:#fff;border-color:var(--hm-stop);background:var(--hm-stop) }
.op-estado.neutra{ color:var(--hm-mute);border-color:var(--hm-rule) }
.op-pag{ display:flex;gap:8px;justify-content:center;align-items:center;padding:6px 0 2px }
.op-pag a,.op-pag span{
  padding:6px 12px;border-radius:9px;border:1px solid var(--hm-rule);background:var(--hm-card);
  color:var(--hm-text);text-decoration:none;font-size:15px;font-variant-numeric:tabular-nums;
}
.op-pag a:hover{ border-color:var(--hm-marca);color:var(--hm-marca) }
.op-pag .actual{ border:0;background:none;color:var(--hm-mute) }

/* ── Columna 3 · la ficha ────────────────────────────────────────────────── */
/* El logo del sitio (#sliderLogo) flota arriba a la derecha con un ancho de
   hasta 242 px: la ficha le deja aire para que no se pisen. */
.op-detalle{ min-width:0;padding:18px 26px calc(var(--nav-alto) + 24px) }
.op-ficha-cab{ padding-right:clamp(26px, 20vw, 270px) }
@media (max-width:1000px){ .op-ficha-cab{ padding-right:26px } }
.op-ficha{ background:var(--hm-card);border:1px solid var(--hm-rule);border-radius:16px;overflow:hidden;box-shadow:var(--hm-sombra) }
.op-ficha-cab{ padding:22px 26px 18px;border-bottom:1px solid var(--hm-rule) }
.op-badges{ display:flex;flex-wrap:wrap;gap:6px;margin-bottom:11px;align-items:center }
.op-ficha-cab h2{ margin:0 0 5px;font-family:'Montserrat',sans-serif;font-size:25.2px;font-weight:800;line-height:1.22;letter-spacing:-.01em }
.op-entidad{ margin:0;font-size:15.6px;color:var(--hm-mute);line-height:1.5 }
.op-cab-fila{ display:flex;justify-content:space-between;gap:20px;align-items:flex-start;flex-wrap:wrap }
.op-asignacion{
  flex:none;text-align:right;border:1px solid var(--hm-rule);border-radius:12px;padding:10px 16px;background:var(--hm-paper);
}
.op-asignacion span{ display:block;font-size:11.4px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--hm-mute) }
.op-asignacion b{ font-size:24px;color:var(--hm-ok);font-variant-numeric:tabular-nums }
.op-pdf{
  display:inline-block;margin-top:10px;padding:9px 16px;border-radius:10px;text-decoration:none;
  background:linear-gradient(120deg,var(--hm-violet),var(--hm-magenta));color:#fff;font-weight:800;font-size:15.6px;
}
.op-pdf:hover{ filter:brightness(1.08) }

.op-tabs{ display:flex;gap:2px;overflow-x:auto;border-bottom:1px solid var(--hm-rule);padding:0 14px }
.op-tab{
  /* Las cinco pestañas deben caber sin recortar la última: el nombre completo
     es parte de la orientación, no un adorno. */
  padding:12px 11px;font-size:15px;font-weight:800;color:var(--hm-mute);text-decoration:none;
  white-space:nowrap;border-bottom:2px solid transparent;transition:.15s;
}
@media (min-width:1400px){ .op-tab{ padding:13px 15px;font-size:15.6px } }
.op-tab:hover{ color:var(--hm-marca) }
.op-tab[aria-selected="true"]{ color:var(--hm-marca);border-bottom-color:var(--hm-marca) }

.op-paneles{ padding:22px 26px 26px }
.op-h3{ font-size:13.2px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--hm-mute);margin:22px 0 10px;display:flex;align-items:center;gap:10px }
.op-h3:first-child{ margin-top:0 }
.op-h3::after{ content:"";flex:1;height:1px;background:var(--hm-rule) }
.op-cifras{ display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px }
.op-cifra{ border:1px solid var(--hm-rule);border-radius:12px;padding:13px 15px;background:var(--hm-paper) }
.op-cifra span{ display:block;font-size:11.4px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--hm-mute);margin-bottom:4px }
.op-cifra b{ font-size:19.2px;font-weight:800;color:var(--hm-text) }
.op-cifra b.peq{ font-size:16.2px }
.op-texto{ font-size:17.4px;line-height:1.65;color:var(--hm-text);margin:0 0 8px }
.op-intro{ font-size:16.2px;line-height:1.6;color:var(--hm-mute);margin:0 0 10px }
.op-nada{ font-size:16.8px;color:var(--hm-mute);font-style:italic;margin:0 }
.op-funciones,.op-lista-p,.op-etapas{ margin:0;padding-left:19px }
.op-funciones li,.op-etapas li,.op-lista-p li{ margin-bottom:8px;font-size:17.4px;line-height:1.55 }

.op-depto{ border:1px solid var(--hm-rule);border-radius:11px;margin-bottom:8px;overflow:hidden }
.op-depto-cab{ display:flex;justify-content:space-between;gap:10px;padding:9px 13px;background:var(--hm-paper);font-size:15.6px }
.op-depto-cab b{ color:var(--hm-marca) }
.op-depto-cab span{ color:var(--hm-mute);font-variant-numeric:tabular-nums }
.op-mun{ list-style:none;margin:0;padding:0 }
.op-mun li{ display:flex;align-items:baseline;gap:10px;padding:8px 13px;border-top:1px solid var(--hm-rule);font-size:16.2px }
.op-mun li em{ flex:1;color:var(--hm-mute);font-style:normal;font-size:15px }
.op-mun li b{ font-variant-numeric:tabular-nums }

.op-prueba{ padding:12px 0;border-bottom:1px solid var(--hm-rule) }
.op-prueba:last-child{ border-bottom:0 }
.op-prueba-cab{ display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:7px }
.op-prueba-cab b{ font-size:17.4px;flex:1 1 190px }
.op-caracter{ font-size:13.2px;padding:2px 8px;border-radius:5px;background:var(--hm-paper);color:var(--hm-mute);border:1px solid var(--hm-rule) }
.op-peso{ font-size:20.4px;font-weight:800;color:var(--hm-marca);font-variant-numeric:tabular-nums }
.op-barra{ height:6px;border-radius:3px;background:var(--hm-paper2);overflow:hidden }
.op-barra i{ display:block;height:100%;background:linear-gradient(90deg,var(--hm-violet),var(--hm-magenta)) }
.op-minimo{ display:inline-block;margin-top:6px;font-size:14.4px;color:var(--hm-mute) }
.op-topes{ display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:9px }
.op-topes > div{ border:1px solid var(--hm-rule);border-radius:10px;padding:11px 13px;background:var(--hm-paper) }
.op-topes span{ display:block;font-size:11.4px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--hm-mute);margin-bottom:4px }
.op-topes b{ font-size:21.6px;font-variant-numeric:tabular-nums }

.op-tabla-caja{ overflow-x:auto;border:1px solid var(--hm-rule);border-radius:11px;margin-bottom:8px }
.op-tabla{ width:100%;border-collapse:collapse;font-size:15.6px }
.op-tabla th{
  text-align:left;padding:9px 12px;background:var(--hm-paper);border-bottom:1px solid var(--hm-rule);
  font-size:11.4px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--hm-mute);white-space:nowrap;
}
.op-tabla td{ padding:9px 12px;border-bottom:1px solid var(--hm-rule);vertical-align:top;line-height:1.45 }
.op-tabla tr:last-child td{ border-bottom:0 }
.op-tabla td.num{ font-variant-numeric:tabular-nums;white-space:nowrap }
.op-vacio{ text-align:center;padding:70px 24px;border:1px dashed var(--hm-rule);border-radius:16px;color:var(--hm-mute);background:var(--hm-card) }
.op-vacio h3{ margin:0 0 8px;color:var(--hm-text) }

@media (max-width:1200px){ .op{ grid-template-columns:270px 300px minmax(0,1fr) } }
@media (max-width:1000px){
  .op{ grid-template-columns:1fr }
  .op-filtros,.op-res{ position:static;height:auto;padding-top:20px }
  .op-filtros{ padding-top:20px }
  .op-res{ max-height:460px }
  .op-detalle{ padding:16px }
}