/* ============================================================
   BIM Forum Chile v14.7 — Bolsa de trabajo (portal de empleo)
   Rediseño con identidad propia, distinta de la Biblioteca.
   · Elimina el artefacto de la barra ::before al pasar el cursor
   · Command-center de búsqueda + chips de herramientas populares
   · Tarjetas tipo job-board: guardar vacante, badge "Nuevo",
     chips de modalidad, salario destacado, hover limpio y elegante
   Carga al FINAL = máxima prioridad.
   ============================================================ */

/* ── 0. Matar el artefacto de hover heredado ───────────────── */
.emp-job::before{ content:none !important; }        /* fuera la barra que asomaba */
.emp-job{ overflow:visible !important; }
.emp-job:hover{ transform:translateY(-3px) !important; }   /* ya no translateX */

/* ── 1. Command center de búsqueda ─────────────────────────── */
.emp-cmd{
  display:flex; gap:.75rem; align-items:stretch; flex-wrap:wrap;
  background:#fff; border:1px solid var(--ink-100);
  border-radius:18px; padding:.6rem; margin-bottom:1rem;
  box-shadow:0 18px 40px -28px rgba(11,27,44,.35);
}
.emp-cmd__search{
  flex:1; min-width:260px; display:flex; align-items:center; gap:.75rem;
  background:var(--ink-25); border:1.5px solid transparent; border-radius:12px; padding:.85rem 1.15rem;
  transition:border-color .2s, background .2s;
}
.emp-cmd__search:focus-within{ border-color:var(--cta); background:#fff; }
.emp-cmd__search svg{ stroke:var(--ink-400); flex-shrink:0; }
.emp-cmd__search input{ border:0; outline:0; background:transparent; font:inherit; width:100%; font-size:.95rem; color:var(--ink-900); }
.emp-cmd__clear{ border:0; background:var(--ink-100); color:var(--ink-500); width:24px; height:24px; border-radius:50%; display:grid; place-items:center; cursor:pointer; flex-shrink:0; transition:background .2s; }
.emp-cmd__clear:hover{ background:var(--ink-200); }
.emp-cmd__sort{
  border:1.5px solid var(--ink-100); border-radius:12px; padding:0 2.4rem 0 1.1rem; font:inherit; font-size:.9rem; font-weight:600;
  color:var(--ink-700); background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2344423d' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 1rem center;
  cursor:pointer; height:auto; -webkit-appearance:none; appearance:none;
}
.emp-cmd__sort:hover{ border-color:var(--cta); }

/* ── 2. Chips de herramientas populares ────────────────────── */
.emp-quick{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; margin-bottom:2.25rem; }
.emp-quick__lbl{ font-family:var(--f-d); font-weight:700; font-size:.75rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-400); margin-right:.15rem; }
.emp-quick__chip{
  font-family:var(--f-d); font-weight:600; font-size:.8rem; color:var(--ink-600,#55524b);
  background:#fff; border:1px solid var(--ink-200); border-radius:100px; padding:.42rem .95rem; cursor:pointer;
  transition:all .18s;
}
.emp-quick__chip:hover{ border-color:var(--cta); color:var(--cta); transform:translateY(-1px); }
.emp-quick__chip.is-on{ background:var(--cta); border-color:var(--cta); color:#fff; box-shadow:0 6px 16px -6px rgba(1,117,201,.6); }

/* ── 3. Rail de filtros (identidad propia, no biblioteca) ──── */
.emp-filters{ border-radius:18px; border-color:var(--ink-100); }
.emp-fgroup label{ transition:color .15s; }
.emp-fgroup label:hover{ color:var(--cta); }
.emp-badge{ background:var(--cta); color:#fff; }

/* ── 4. Tarjeta de vacante — job board (rediseño 2 filas) ──── */
.emp-job{
  position:relative; display:flex; flex-direction:column; gap:1rem;
  background:#fff; border:1px solid var(--ink-100); border-radius:18px; padding:1.5rem 1.6rem; cursor:pointer;
  transition:transform .25s var(--ease-out,ease), box-shadow .25s, border-color .25s;
}
.emp-job:hover{ transform:translateY(-3px); box-shadow:0 22px 48px -24px rgba(11,27,44,.3); border-color:var(--p2); }

/* Cabecera: logo + cargo/empresa + (guardar / salario) */
.emp-job-head{ display:grid; grid-template-columns:52px 1fr auto; gap:1.1rem; align-items:start; }
.emp-job-logo{
  width:52px; height:52px; border-radius:13px;
  background:linear-gradient(150deg, rgba(85,187,235,.16), rgba(1,117,201,.14));
  border:1px solid rgba(1,117,201,.14);
  display:grid; place-items:center; font-family:var(--f-d); font-weight:800; font-size:1.02rem; color:var(--cta);
  transition:transform .35s cubic-bezier(.34,1.56,.64,1);
}
.emp-job:hover .emp-job-logo{ transform:scale(1.06) rotate(-3deg); }
.emp-job-id{ min-width:0; padding-top:.1rem; }
.emp-job-titlerow{ display:flex; align-items:center; gap:.55rem; flex-wrap:wrap; }
.emp-job-id h4{ font-family:var(--f-d); font-weight:700; font-size:1.06rem; color:var(--ink-900); margin:0 0 .12rem; line-height:1.25; }
.emp-job-new{ font-family:var(--f-d); font-weight:800; font-size:.58rem; letter-spacing:.06em; text-transform:uppercase; color:#0a7d4f; background:rgba(16,163,90,.12); padding:.15rem .5rem; border-radius:5px; }
.emp-job-co{ font-size:.85rem; color:var(--cta); font-weight:600; }

/* Bloque superior derecho: salario en pill + botón guardar */
.emp-job-topright{ display:flex; align-items:center; gap:.6rem; flex-shrink:0; }
.emp-job-sal{
  font-family:var(--f-d); font-weight:800; font-size:.82rem; color:var(--navy-900); white-space:nowrap;
  background:var(--ink-50); border:1px solid var(--ink-100); padding:.4rem .75rem; border-radius:100px;
}
.emp-job-save{
  width:36px; height:36px; border-radius:10px; border:1px solid var(--ink-100);
  background:#fff; color:var(--ink-300); display:grid; place-items:center; cursor:pointer; flex-shrink:0;
  transition:all .2s;
}
.emp-job-save:hover{ color:var(--cta); border-color:var(--cta); background:rgba(1,117,201,.06); }
.emp-job-save.is-on{ color:var(--cta); border-color:var(--cta); background:rgba(1,117,201,.1); }

/* Meta: pin + chips */
.emp-job-meta{ display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; font-size:.8rem; color:var(--ink-400); }
.emp-job-meta > span:first-child{ display:inline-flex; align-items:center; gap:.3rem; }
.emp-job-meta svg{ stroke:var(--ink-300); }
.emp-job-chip{ font-family:var(--f-d); font-weight:600; font-size:.7rem; color:var(--ink-600,#55524b); background:var(--ink-50); border:1px solid var(--ink-100); padding:.22rem .6rem; border-radius:100px; white-space:nowrap; }
.emp-job-chip--mode{ color:var(--cta); background:rgba(1,117,201,.07); border-color:rgba(1,117,201,.16); }

/* Footer: tags + CTA, separados por línea */
.emp-job-foot{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; border-top:1px solid var(--ink-100); padding-top:1rem; }
.emp-job-tags{ display:flex; gap:.4rem; flex-wrap:wrap; }
.emp-job-tags span{ font-family:var(--f-d); font-size:.68rem; font-weight:600; background:var(--ink-25); color:var(--ink-500); padding:.24rem .6rem; border-radius:6px; border:1px solid var(--ink-100); }
.emp-job-apply{ font-family:var(--f-d); font-size:.8rem; font-weight:700; color:var(--cta); display:inline-flex; align-items:center; gap:.35rem; white-space:nowrap; transition:gap .25s; }
.emp-job:hover .emp-job-apply{ gap:.6rem; }

/* Destacada: fondo teñido + acento superior */
.emp-job.featured{ border:1px solid rgba(243,146,0,.35); background:linear-gradient(180deg, rgba(243,146,0,.05), #fff 55%); }
.emp-job.featured::after{ content:''; position:absolute; left:0; right:0; top:0; height:3px; border-radius:18px 18px 0 0; background:linear-gradient(90deg, var(--c1), var(--cta)); }
.emp-job-flag{
  position:absolute; top:-11px; left:18px; z-index:2;
  background:var(--c1); color:var(--navy-900); font-family:var(--f-d); font-size:.62rem; font-weight:800;
  letter-spacing:.06em; text-transform:uppercase; padding:.28rem .7rem; border-radius:6px;
  box-shadow:0 6px 16px -6px rgba(243,146,0,.7);
}

/* Espacio para que el badge no se corte */
.emp-list{ padding-top:.75rem; display:flex; flex-direction:column; gap:1rem; }
.emp-count{ font-family:var(--f-d); font-weight:700; font-size:.82rem; color:var(--ink-400); margin-bottom:1.1rem; }

/* ── 5. Responsivo ─────────────────────────────────────────── */
@media (max-width:760px){
  .emp-cmd__sort{ flex:1; }
  .emp-job{ padding:1.35rem 1.2rem; }
  .emp-job-head{ grid-template-columns:44px 1fr; gap:.9rem; }
  .emp-job-topright{ grid-column:1 / -1; justify-content:space-between; width:100%; margin-top:.2rem; }
  .emp-job-logo{ width:44px; height:44px; }
  .emp-job-foot{ flex-direction:column; align-items:flex-start; gap:.75rem; }
}