/* ============================================================================
 * estilos.css — Estilos de los componentes de integración (contrata o planta)
 * ----------------------------------------------------------------------------
 * Usa tus tokens de marca (design-tokens.css): --azul, --acento, --texto, etc.
 * Cada variable trae un fallback con el valor real, así el componente también
 * se ve bien si lo abrís suelto. Hereda automáticamente el modo oscuro.
 * Prefijo de clases: .cop-  (contrata o planta)
 * ========================================================================== */

/* ---------- Chips de profesión ---------- */
.cop-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.cop-chip {
  font-family: var(--font-sans, 'Inter', system-ui, sans-serif);
  font-size: 12.5px; font-weight: 600; cursor: pointer;
  color: var(--texto2, #4B5167);
  background: var(--bg, #FDFCF8);
  border: 1.5px solid var(--borde, #E5E1D2);
  border-radius: 999px; padding: 7px 13px;
  display: inline-flex; align-items: center; gap: 7px; transition: .12s;
}
.cop-chip:hover { border-color: var(--azul-m, #254BA0); }
.cop-chip.is-on { background: var(--azul, #142E6B); border-color: var(--azul, #142E6B); color: #fff; }
.cop-chip-n {
  font-size: 11px; font-weight: 700; color: var(--texto3, #747B91);
  background: var(--blanco, #fff); border-radius: 999px; padding: 1px 7px; min-width: 16px; text-align: center;
}
.cop-chip.is-on .cop-chip-n { background: rgba(255,255,255,.22); color: #fff; }

/* ---------- Resaltado de coincidencias ---------- */
mark.cop-hl {
  background: #FDE047; color: #422006;   /* amarillo resaltador, texto oscuro legible */
  border-radius: 3px; padding: 0 2px; font-weight: 600;
}
:root[data-theme="dark"] mark.cop-hl {
  background: #E0B83A; color: #1B1305;   /* amarillo algo más apagado para fondo oscuro */
}

/* ---------- Ficha (modal) ---------- */
.cop-modal-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(8,16,32,.5);
  display: none; align-items: flex-start; justify-content: center;
  padding: 28px 20px; overflow-y: auto;
}
.cop-modal-overlay.is-open { display: flex; }
.cop-modal {
  background: var(--bg, #FDFCF8); width: 100%; max-width: 720px;
  border-radius: 18px; overflow: hidden;
  box-shadow: 0 40px 80px -20px rgba(8,16,32,.55);
  animation: copIn .22s ease;
}
@keyframes copIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.cop-head { position: relative; padding: 22px 26px 20px; color: #fff;
  background: linear-gradient(165deg, #15316f, #0f2452); }
.cop-close { position: absolute; top: 16px; right: 16px; width: 34px; height: 34px;
  border-radius: 9px; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.08);
  color: #fff; font-size: 15px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.cop-close:hover { background: rgba(255,255,255,.16); }
/* Chip con el ID de la oferta, arriba a la izquierda del encabezado oscuro.
   Va en el flujo (empuja el kicker hacia abajo) para no tapar el botón cerrar.
   Copia el número al portapapeles (mismo gesto que el chip de la tarjeta). */
.cop-id-chip { display: inline-flex; align-items: center; margin: 0 0 12px;
  font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  font-size: 11px; font-weight: 700; line-height: 1; letter-spacing: .3px;
  padding: 6px 9px; border-radius: 7px; min-width: 44px; justify-content: center;
  background: rgba(255,255,255,.10); color: rgba(255,255,255,.92);
  border: 1px solid rgba(255,255,255,.22); cursor: pointer; white-space: nowrap;
  transition: background .15s; }
.cop-id-chip[hidden] { display: none; }
.cop-id-chip:hover { background: rgba(255,255,255,.2); }
.cop-id-chip:focus-visible { outline: 2px solid var(--gold-brilliant, #F2C26A); outline-offset: 2px; }
.cop-kicker { font-size: 10.5px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--gold-brilliant, #F2C26A); margin-bottom: 9px; }
.cop-inst { font-size: 13px; font-weight: 600; color: rgba(255,255,255,.85);
  display: flex; align-items: center; gap: 7px; margin-bottom: 5px; }
.cop-vf { color: #86C28E; display: inline-flex; }
.cop-cargo { font-family: var(--font-serif, 'Fraunces', Georgia, serif);
  font-size: 23px; font-weight: 600; line-height: 1.15; letter-spacing: -.3px; margin: 0 0 11px; max-width: 36ch; }
.cop-tags { display: flex; gap: 7px; flex-wrap: wrap; }
.cop-tag { font-size: 11.5px; font-weight: 600; padding: 4px 11px; border-radius: 999px;
  background: rgba(255,255,255,.12); color: #fff; }

.cop-why { display: flex; align-items: flex-start; gap: 9px; line-height: 1.5;
  background: var(--acento-l, #FBE4C0); border-bottom: 1px solid #EAD9B6;
  padding: 12px 26px; font-size: 12.5px; color: var(--gold-ink, #5C3A10); }
/* El atributo `hidden` debe ocultar la franja: sin esto, `display:flex` de
   arriba lo anula y la franja amarilla se muestra VACÍA (solo fondo+padding)
   cuando la oferta no tiene motivo de coincidencia. */
.cop-why[hidden] { display: none; }
.cop-why svg { flex: none; margin-top: 1px; color: var(--gold-dim, #A66E1B); }
.cop-qk { display: inline-block; background: #fff; border: 1px solid #EAD9B6; border-radius: 6px; padding: 1px 7px; font-weight: 700; }

.cop-plazo { display: flex; align-items: center; gap: 11px; padding: 13px 26px;
  background: var(--blanco, #fff); border-bottom: 1px solid var(--borde, #E5E1D2); }
.cop-plazo-ic { width: 34px; height: 34px; border-radius: 10px; flex: none; color: #fff;
  display: flex; align-items: center; justify-content: center; background: var(--texto3, #747B91); }
.cop-plazo.is-urg .cop-plazo-ic { background: var(--rojo, #B23B24); }
.cop-plazo.is-mid .cop-plazo-ic { background: var(--naran, #C87A0C); }
.cop-plazo.is-ok  .cop-plazo-ic { background: var(--verde, #2F6E4E); }
.cop-plazo-l { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--texto3, #747B91); }
.cop-plazo-v { font-family: var(--font-serif, 'Fraunces', serif); font-size: 15px; font-weight: 600; color: var(--texto, #18202F); }
.cop-plazo.is-urg .cop-plazo-v { color: var(--rojo, #B23B24); }

.cop-body { padding: 18px 26px 6px; }
.cop-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1px; margin-bottom: 18px;
  background: var(--borde, #E5E1D2); border: 1px solid var(--borde, #E5E1D2); border-radius: 12px; overflow: hidden; }
.cop-kv { background: var(--blanco, #fff); padding: 11px 14px; }
.cop-grid > .cop-kv:last-child:nth-child(3n+1) { grid-column: 1 / -1; }
.cop-grid > .cop-kv:last-child:nth-child(3n+2) { grid-column: span 2; }
.cop-kv-k { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--texto3, #747B91); margin-bottom: 4px; }
.cop-kv-v { font-size: 14px; font-weight: 600; color: var(--texto, #18202F); }
.cop-kv-v.is-renta { font-family: var(--font-serif, 'Fraunces', serif); font-size: 16px; }

.cop-sec { margin-bottom: 18px; }
/* Título de sección = botón de contraer/expandir. Chevron a la derecha que
   rota; al colapsar (.is-collapsed) se oculta todo el cuerpo de la sección. */
.cop-sec-t { display: flex; align-items: center; gap: 10px;
  font-family: var(--font-serif, 'Fraunces', serif); font-size: 15.5px; font-weight: 600;
  color: var(--azul, #142E6B); margin: 0 0 11px; padding-bottom: 8px;
  border-bottom: 1.5px solid var(--borde, #E5E1D2);
  cursor: pointer; user-select: none; -webkit-user-select: none; }
.cop-sec-t::after { content: ''; flex: 0 0 auto; margin-left: auto;
  width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg); transition: transform .18s ease; opacity: .65; }
.cop-sec-t:hover::after { opacity: 1; }
.cop-sec-t:focus-visible { outline: 2px solid var(--azul-m, #254BA0); outline-offset: 3px; border-radius: 4px; }
.cop-sec.is-collapsed .cop-sec-t { margin-bottom: 0; }
.cop-sec.is-collapsed .cop-sec-t::after { transform: translateY(2px) rotate(-135deg); }
.cop-sec.is-collapsed > :not(.cop-sec-t) { display: none; }

/* Subgrupos de requisitos en 2 columnas fluidas (reduce mucho la altura).
   `break-inside: avoid` evita que un subgrupo se parta entre columnas. */
.cop-subgrid { columns: 2; column-gap: 26px; }
.cop-subgrid .cop-sub { margin: 0 0 13px; break-inside: avoid; -webkit-column-break-inside: avoid; }
.cop-sub:last-child { margin-bottom: 0; }
.cop-sub h6 { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--texto3, #747B91); margin: 0 0 7px; }
.cop-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 7px; }
.cop-list li { position: relative; padding-left: 22px; font-size: 13.5px; line-height: 1.5; color: var(--texto2, #4B5167); }
.cop-list li::before { content: ''; position: absolute; left: 5px; top: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--azul-m, #254BA0); }
.cop-list.is-check li::before { content: ''; left: 4px; top: 5px; width: 7px; height: 4px; border-radius: 0; background: none;
  border-left: 2px solid var(--verde, #2F6E4E); border-bottom: 2px solid var(--verde, #2F6E4E); transform: rotate(-45deg); }
.cop-objetivo { font-size: 14px; line-height: 1.6; color: var(--texto2, #4B5167); margin: 0;
  background: var(--blanco, #fff); border-left: 3px solid var(--acento, #C88724); border-radius: 0 8px 8px 0; padding: 12px 15px; }
/* Recorte a una altura estándar (6 líneas) con "Ver más" para expandir. */
.cop-objetivo.cop-clamp { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; overflow: hidden; }
.cop-objetivo.cop-clamp.cop-expandida { -webkit-line-clamp: unset; overflow: visible; }
/* Cuerpo de sección (listas/tablas): abierto por defecto. Si excede la altura
   estándar se recorta con un degradado inferior y aparece "Ver más"; el JS
   quita .cop-clamp cuando NO excede, para no dejar degradado en secciones
   cortas. `.cop-expandida` (toggle "Ver más") libera el recorte. */
.cop-sec-body.cop-clamp { max-height: 340px; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 78%, transparent 100%); }
.cop-sec-body.cop-clamp.cop-expandida { max-height: none; overflow: visible;
  -webkit-mask-image: none; mask-image: none; }
.cop-desc-toggle { margin-top: 6px; padding: 0; border: none; background: none; cursor: pointer;
  color: var(--cielo, #1A6BCC); font: 600 12.5px/1 'Inter', system-ui, sans-serif; }
.cop-desc-toggle:hover { text-decoration: underline; }

.cop-actions { position: sticky; bottom: 0; background: var(--bg, #FDFCF8);
  border-top: 1px solid var(--borde, #E5E1D2); padding: 14px 26px; display: flex; flex-direction: column; gap: 9px; }
.cop-apply { background: var(--azul, #142E6B); color: #fff; border: none; border-radius: 11px;
  font-family: var(--font-sans, 'Inter', sans-serif); font-size: 14.5px; font-weight: 700; padding: 13px; cursor: pointer; }
.cop-apply:hover { background: var(--azul-m, #254BA0); }
/* En dark, var(--azul) es casi negro (#0A1426) y el botón "Ir al portal"
   desaparecía sobre el fondo oscuro del modal. Le damos un azul visible. */
:root[data-theme="dark"] .cop-apply { background: var(--cielo, #3057AA); color: #fff; }
:root[data-theme="dark"] .cop-apply:hover { background: #3A63C0; }
.cop-actions-sec { display: flex; gap: 10px; }
.cop-btn2 { flex: 1; background: var(--blanco, #fff); border: 1.5px solid var(--borde, #E5E1D2); color: var(--texto, #18202F);
  border-radius: 10px; font-family: var(--font-sans, 'Inter', sans-serif); font-size: 13px; font-weight: 600; padding: 10px; cursor: pointer; }
.cop-btn2:hover { border-color: var(--azul-m, #254BA0); color: var(--azul-m, #254BA0); }
.cop-btn2.is-activo { border-color: var(--verde, #2F6E4E); color: var(--verde, #2F6E4E); }
.cop-portal { font-size: 11.5px; color: var(--texto3, #747B91); text-align: center; margin: 1px 0 0; }

/* ---------- Mapa de Chile ---------- */
.cop-map-svg { width: 100%; height: auto; display: block; overflow: visible; }
.cop-map-svg path { transition: fill .14s; }
.cop-map-svg path:hover { fill: var(--navy-bright, #2E58B5) !important; }
.cop-map-legend { display: flex; align-items: center; gap: 5px; margin-top: 14px;
  font-size: 9.5px; color: var(--texto3, #747B91); font-weight: 700; text-transform: uppercase; letter-spacing: .4px; }
.cop-map-legend i { width: 18px; height: 10px; border-radius: 2px; display: block; }
.cop-map-empty { padding: 24px; text-align: center; color: var(--texto3, #747B91); font-size: 13px;
  border: 1px dashed var(--borde, #E5E1D2); border-radius: 13px; }

/* ---------- Móvil ---------- */
@media (max-width: 640px) {
  .cop-grid { grid-template-columns: 1fr 1fr; }
  .cop-cargo { font-size: 20px; }
  .cop-modal-overlay { padding: 0; }
  .cop-modal { max-width: 100%; min-height: 100%; border-radius: 0; }
}
@media (max-width: 480px) {
  .cop-subgrid { columns: 1; }
  .cop-grid { grid-template-columns: 1fr; }
}

/* ---------- Mapa en 2 columnas: MAPA | OFERTAS ---------- */
.cop-mapx { display: grid; grid-template-columns: 210px 1fr; gap: 22px; align-items: start; }
.cop-mapx-map { position: sticky; top: 12px; }
.cop-mapx-panel { min-width: 0; min-height: 200px; }
.cop-mapx-detalle { min-width: 0; }
.cop-mapx-volver { display: none; } /* solo aparece en el maestro-detalle móvil */
.cop-mapx-hint { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  text-align: center; color: var(--texto3, #747B91); font-size: 13px; line-height: 1.5;
  border: 1px dashed var(--borde, #E5E1D2); border-radius: 14px; padding: 40px 26px; min-height: 200px; }
.cop-mapx-hint p { margin: 0; max-width: 30ch; }
.cop-mapx-hint svg { color: var(--azul-m, #254BA0); }
.cop-spin { width: 26px; height: 26px; border-radius: 50%;
  border: 3px solid var(--borde, #E5E1D2); border-top-color: var(--azul-m, #254BA0); animation: copSpin .8s linear infinite; }
@keyframes copSpin { to { transform: rotate(360deg); } }
.cop-mapx-title { font-family: var(--font-serif, 'Fraunces', serif); font-size: 16px; font-weight: 600;
  color: var(--azul, #142E6B); margin: 0 0 12px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.cop-mapx-title .n { font-family: var(--font-sans, 'Inter', sans-serif); font-size: 12px; font-weight: 600; color: var(--texto3, #747B91); }

/* ── Filas de oferta DENTRO del panel del mapa ───────────────────────────
   La fila compacta del listado usa columnas fijas (~368px) pensadas para el
   ancho completo. En el panel del mapa (~560px) eso ahoga el cargo y trunca
   la institución ("MINISTERIO DE VIVIENDA Y...", "Analista de Difusión,
   Rrpp y..."). Acá la apilamos: cargo + institución a TODO el ancho arriba,
   y una línea de meta (modalidad · plazo · renta · acciones) abajo. Aprovecha
   el espacio horizontal y elimina el recorte. */
.cop-mapx-panel .ofertas-lista.compacta { border: none; background: transparent; }
.cop-mapx-panel .oferta-row {
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  padding: 12px 13px;
  min-height: 0;
  border: 1px solid var(--borde, #E5E1D2);
  border-radius: 12px;
  margin-bottom: 8px;
}
.cop-mapx-panel .oferta-row:last-child { margin-bottom: 0; border-radius: 12px; }
.cop-mapx-panel .oferta-row.favorita { box-shadow: inset 3px 0 0 var(--acento, #C88724); }
/* Cargo + institución: primera línea completa, sin recorte agresivo. */
.cop-mapx-panel .row-main { flex: 1 1 100%; width: auto; min-width: 0; padding: 0; }
.cop-mapx-panel .row-inst { -webkit-line-clamp: 2; }
.cop-mapx-panel .row-cargo { font-size: 14px; -webkit-line-clamp: 2; }
.cop-mapx-panel .row-region { display: none; } /* la región ya está en el título del panel */
/* Línea de meta: chips/plazo a la izquierda, renta + acciones a la derecha. */
.cop-mapx-panel .row-meta  { flex: 0 0 auto; width: auto; }
.cop-mapx-panel .row-plazo { flex: 0 0 auto; width: auto; }
.cop-mapx-panel .row-renta {
  flex: 1 1 auto; width: auto; min-width: 0;
  flex-direction: row; align-items: center; justify-content: flex-end;
  gap: 6px; text-align: right; padding: 0;
}
.cop-mapx-panel .row-renta .renta-rango { display: inline; margin-left: 4px; }
.cop-mapx-panel .row-acciones { flex: 0 0 auto; }

@media (max-width: 720px) {
  .cop-mapx { grid-template-columns: 1fr; gap: 16px; }
  .cop-mapx-map { position: static; display: flex; flex-direction: column; align-items: center; }
  .cop-map-svg { max-width: 180px; }

  /* Maestro-detalle (Parte 5.1): por defecto se ve el MAPA; al tocar una región
     entra el PANEL a pantalla completa con "← Volver al mapa", sin obligar a
     scrollear todo el mapa para ver las ofertas. */
  .cop-mapx-detalle { display: none; }
  .cop-mapx.is-detalle .cop-mapx-map { display: none; }
  .cop-mapx.is-detalle .cop-mapx-detalle { display: block; }
  .cop-mapx-volver {
    display: inline-flex; align-items: center; gap: 6px;
    margin-bottom: 14px; padding: 9px 15px; min-height: 40px;
    background: var(--bg2, #F3F0E6); color: var(--azul, #142E6B);
    border: 1px solid var(--borde, #E5E1D2); border-radius: 999px;
    font-size: 13px; font-weight: 600; cursor: pointer;
  }
  .cop-mapx-volver:hover { background: var(--cielo-l, #E1E8F6); }
}

/* ---------- Comparador (overlay) ---------- */
.cop-cmp-overlay { position: fixed; inset: 0; z-index: 1001; background: rgba(8,16,32,.5);
  display: none; align-items: flex-start; justify-content: center; padding: 32px 20px; overflow-y: auto; }
.cop-cmp-overlay.is-open { display: flex; }
.cop-cmp { background: var(--bg, #FDFCF8); width: 100%; max-width: 960px; border-radius: 18px; overflow: hidden;
  box-shadow: 0 40px 80px -20px rgba(8,16,32,.55); animation: copIn .22s ease; }
.cop-cmp-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 24px;
  background: linear-gradient(165deg, #15316f, #0f2452); color: #fff; }
.cop-cmp-head h3 { margin: 0; font-family: var(--font-serif, 'Fraunces', serif); font-size: 19px; font-weight: 600; }
.cop-cmp-x { width: 32px; height: 32px; border-radius: 9px; border: 1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.08); color: #fff; font-size: 14px; cursor: pointer; }
.cop-cmp-x:hover { background: rgba(255,255,255,.16); }
.cop-cmp-body { padding: 18px 24px 22px; overflow-x: auto; }
.cop-cmp-loading { display: flex; justify-content: center; padding: 50px; }
.cop-cmp-empty { text-align: center; color: var(--texto3, #747B91); font-size: 13.5px; line-height: 1.6; padding: 44px 20px; }
.cop-cmp-empty code { font-family: ui-monospace, Menlo, monospace; color: var(--azul-m, #254BA0); }

.cop-cmp-grid { display: grid; gap: 1px; background: var(--borde, #E5E1D2);
  border: 1px solid var(--borde, #E5E1D2); border-radius: 12px; overflow: hidden; min-width: 480px; }
.cop-cmp-cellhead { background: var(--bg2, #F3F0E6); padding: 11px 14px; min-height: 60px; position: relative;
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.cop-cmp-logo { width: 32px; height: 32px; border-radius: 8px; overflow: hidden; flex: none;
  display: flex; align-items: center; justify-content: center; background: var(--blanco, #fff);
  border: 1px solid var(--borde, #E5E1D2); }
.cop-cmp-logo img, .cop-cmp-logo svg { width: 100%; height: 100%; object-fit: contain; }
.cop-cmp-cellhead--corner { min-height: 60px; }
.cop-cmp-cargo { font-family: var(--font-serif, 'Fraunces', serif); font-size: 13.5px; font-weight: 600;
  color: var(--azul, #142E6B); line-height: 1.25; padding-right: 22px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cop-cmp-rm { position: absolute; top: 9px; right: 9px; width: 22px; height: 22px; border-radius: 6px;
  border: none; background: rgba(0,0,0,.06); color: var(--texto3, #747B91); font-size: 11px; cursor: pointer; }
.cop-cmp-rm:hover { background: var(--rojo, #B23B24); color: #fff; }
.cop-cmp-cell { background: var(--blanco, #fff); padding: 9px 14px; font-size: 12.5px; color: var(--texto2, #4B5167);
  display: flex; align-items: center; min-height: 36px; }
.cop-cmp-cell--label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
  color: var(--texto3, #747B91); background: var(--bg2, #F3F0E6); }
.cop-cmp-badge { font-size: 10.5px; font-weight: 600; padding: 3px 8px; border-radius: 5px;
  background: var(--cielo-l, #E1E8F6); color: var(--azul-m, #254BA0); }
.cop-cmp-renta { font-family: var(--font-serif, 'Fraunces', serif); font-size: 14px; font-weight: 600; color: var(--texto, #18202F); }
.cop-cmp-renta.is-best { color: var(--acento, #C88724); }
.cop-cmp-renta.is-best::after { content: ' ▲'; font-size: 9px; vertical-align: middle; }
.cop-cmp-plazo { font-weight: 600; }
.cop-cmp-plazo.is-urg { color: var(--rojo, #B23B24); }
.cop-cmp-plazo.is-mid { color: var(--naran, #C87A0C); }
.cop-cmp-plazo.is-ok { color: var(--verde, #2F6E4E); }
.cop-cmp-cell--act { padding: 8px 11px; }
.cop-cmp-igual { font-size: 10px; font-weight: 700; color: var(--texto3, #747B91); text-transform: uppercase; letter-spacing: .4px; }
.cop-cmp-ver { width: 100%; background: var(--azul, #142E6B); color: #fff; border: none; border-radius: 8px;
  font: 600 12px/1 'Inter', system-ui, sans-serif; padding: 8px; cursor: pointer; }
.cop-cmp-ver:hover { background: var(--azul-m, #254BA0); }
.cop-cmp-foot { display: flex; justify-content: flex-end; margin-top: 10px; }
.cop-cmp-clear { background: none; border: none; color: var(--texto3, #747B91); font-size: 12px; cursor: pointer; text-decoration: underline; }
.cop-cmp-resumen { font-size: 11.5px; color: var(--texto2, #4B5167); line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- Botón "Comparar" en tarjetas/filas + bandeja flotante ---------- */
.cop-cmp-btn { display: inline-flex; align-items: center; gap: 5px; flex: none;
  background: var(--blanco, #fff); border: 1.5px solid var(--borde, #E5E1D2); color: var(--texto2, #4B5167);
  border-radius: 8px; font: 600 11.5px/1 'Inter', system-ui, sans-serif; padding: 7px 10px; cursor: pointer; transition: .12s; }
.cop-cmp-btn:hover { border-color: var(--azul-m, #254BA0); color: var(--azul-m, #254BA0); }
.cop-cmp-btn.is-on { border-color: var(--azul, #142E6B); background: var(--cielo-l, #E1E8F6); color: var(--azul, #142E6B); }
/* Bandeja flotante: fondo claro con halo dorado y CTA azul → resalta sobre
   el fondo navy del sitio (antes era navy sobre navy y se perdía). */
.cop-cmp-tray { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%) translateY(160%);
  z-index: 999; display: flex; align-items: center; gap: 16px; background: #fff; color: var(--texto, #18202F);
  border: 1.5px solid var(--gold-brilliant, #F2C26A); border-radius: 14px; padding: 13px 20px;
  box-shadow: 0 22px 48px -12px rgba(14,32,70,.6), 0 0 0 4px rgba(242,194,106,.28);
  transition: transform .25s ease; }
.cop-cmp-tray.is-on { transform: translateX(-50%) translateY(0); }
.cop-cmp-tray-txt { font-size: 13.5px; color: var(--texto2, #4B5167); }
.cop-cmp-tray-txt b { font-family: var(--font-serif, 'Fraunces', serif); color: var(--azul, #142E6B); font-size: 15px; }
.cop-cmp-tray-go { background: var(--azul, #142E6B); color: #fff; border: none;
  border-radius: 10px; font: 700 13.5px/1 'Inter', system-ui, sans-serif; padding: 11px 18px; cursor: pointer; transition: background .15s; }
.cop-cmp-tray-go:hover { background: var(--azul-m, #254BA0); }
.cop-cmp-tray-clear { background: none; border: none; color: var(--texto3, #747B91); font-size: 12px; cursor: pointer; text-decoration: underline; }

/* ---------- Toggle + contenedor del mapa de vacantes (integración app) ---- */
.mapa-vacantes-toggle { margin: 8px 0 4px; }
.btn-mapa-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--blanco, #fff); color: var(--azul, #142E6B);
  border: 1.5px solid var(--borde, #E2E0D6); border-radius: var(--r, 10px);
  padding: 9px 14px; font: 600 13px/1 'Inter', system-ui, sans-serif;
  cursor: pointer; transition: border-color .15s, background .15s;
}
.btn-mapa-toggle:hover { border-color: var(--cielo, #1A6BCC); background: var(--bg2, #F4F2EA); }
.btn-mapa-toggle[aria-expanded="true"] { background: var(--azul, #142E6B); color: #fff; border-color: var(--azul, #142E6B); }
/* Dark: el color base `var(--azul)` (#0A1426) quedaba casi negro sobre el
   fondo oscuro y el texto era ilegible. Lo alineamos con el resto de los
   controles del listado en oscuro: texto claro sobre superficie navy. */
:root[data-theme="dark"] .btn-mapa-toggle {
  background: #0F213E;
  color: var(--text-secondary, #C9D4E5);
  border-color: var(--border-subtle, #27436D);
}
:root[data-theme="dark"] .btn-mapa-toggle:hover {
  background: #16294A;
  border-color: var(--acento, #EAB858);
}
.mapa-chile-wrap {
  padding: 16px 0 8px;
}
#mapa-chile { width: 100%; }

/* ============================================================================
 * Ajustes finos del toolbar de resultados (app real — clases del sitio)
 * Cargado después de index.css y redesign-overrides.css, así que gana en empate.
 * ========================================================================== */

/* (1) Borde superior del recuadro de resultados: el hero lo solapaba y "borraba"
 *     el borde de arriba. Lo subimos en el stacking y reforzamos con un hairline
 *     interno que no se puede tapar desde afuera. */
.resultados-shell {
  z-index: 4;
  box-shadow: var(--sombra, 0 12px 30px rgba(10, 46, 110, .10)), inset 0 1px 0 rgba(214, 211, 204, .95);
}

/* (2) Desplegable "Ordenar por": que el menú nativo salga del ancho de la caja.
 *     El <select> pasa a ocupar el 100% del wrapper; el rótulo y el chevron se
 *     superponen (sin recibir clicks) para no comerle ancho. */
.sort-wrap .sort-wrap-label {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  z-index: 1; pointer-events: none;
}
.sort-wrap .sort-wrap-chevron {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  z-index: 1; pointer-events: none;
}
.sort-wrap .ctrl-select--sort {
  width: 100% !important;
  min-width: 0 !important;
  padding: 0 30px 0 92px !important; /* deja lugar al rótulo (izq) y al chevron (der) */
}
@media (min-width: 601px) {
  .resultados-preferencias .sort-wrap { position: relative; min-width: 230px; }
}
@media (max-width: 600px) {
  .sort-wrap { position: relative; }
}

/* ============================================================================
 * Mockup v2 (opcional) — disposición del toolbar para igualar el diseño.
 * Restylea clases globales del sitio; cargado al final, gana por orden.
 * Si algo se ve mal, basta con borrar este bloque.
 * ========================================================================== */

/* 6a — Profesión y Atajos como un solo grupo (sin doble línea) */
.filtros-rapidos { border: 0; padding-top: 0; margin-top: 6px; }
.filtros-rapidos + .filtros-rapidos { margin-top: 10px; padding-top: 0; border-top: 0; }
.filtros-titulo { font-size: 10.5px; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; color: var(--texto3, #747B91); }

/* 6b — Tabs Vigentes/Cerradas como segmented control */
.estado-listado-tabs { display: inline-flex; gap: 4px; background: var(--bg2, #F3F0E6);
  border: 1px solid var(--borde, #E5E1D2); border-radius: 10px; padding: 4px; }
.estado-tab { border: 0; background: none; border-radius: 7px; padding: 7px 16px;
  font-weight: 600; font-size: 13px; color: var(--texto2, #4B5167); cursor: pointer; }
.estado-tab.activo { background: var(--azul, #142E6B); color: #fff; }

/* 6c — Copy "Mostrando concursos vigentes…" */
.estado-listado-copy { font-size: 12.5px; color: var(--texto3, #747B91); margin: 8px 0 14px; }

/* 6d — Conteo de resultados */
.resultados-count { font-size: 13px; color: var(--texto2, #4B5167); }
.resultados-count #count-num { font-family: var(--font-serif, 'Fraunces', Georgia, serif);
  font-size: 19px; color: var(--azul, #142E6B); }
.resultados-count .count-sub { font-size: 11.5px; color: var(--texto3, #747B91); }

/* 6e — Controles a la derecha, compactos */
.resultados-preferencias { display: flex; align-items: center; justify-content: flex-end;
  gap: 10px; flex-wrap: wrap; }
.resultados-preferencias .ctrl-select { height: 38px; border-radius: 9px;
  border: 1px solid var(--borde, #E5E1D2); }
.vista-btns { display: inline-flex; gap: 4px; background: var(--bg2, #F3F0E6);
  border: 1px solid var(--borde, #E5E1D2); border-radius: 10px; padding: 4px; }
.vista-btns .vista-btn { border: 0; background: none; border-radius: 7px; }
.vista-btns .vista-btn.activo { background: var(--azul, #142E6B); color: #fff; }
.ctrl-sep { width: 1px; height: 24px; background: var(--borde, #E5E1D2); }

/* 6f — Botón "Ver mapa" coherente con los controles */
.btn-mapa-toggle { height: 38px; border-width: 1px; border-radius: 9px; }

/* "Ordenar por": label inline + select al ancho del contenido, sin el hueco
   grande a la izquierda que dejaba el padding del label superpuesto. */
.resultados-preferencias .sort-wrap { position: relative; display: inline-flex; align-items: center;
  gap: 7px; min-width: 0 !important; }
.sort-wrap .sort-wrap-label { position: static; transform: none; pointer-events: auto;
  white-space: nowrap; font-size: 13px; color: var(--texto2, #4B5167); }
.sort-wrap .ctrl-select--sort { width: auto !important; min-width: 132px !important;
  padding: 0 30px 0 12px !important; }

/* Texto redundante oculto: la línea "Mostrando concursos vigentes…" repite
   los tabs Vigentes/Cerradas, y "Última actualización de datos…" repite la
   cinta superior. Se ocultan por CSS (el JS sigue actualizándolos sin error). */
.estado-listado-copy { display: none; }
.data-update-global { display: none; }

/* Cabecera de resultados en una sola fila: tabs Vigentes/Cerradas + contador
   a la izquierda, controles a la derecha. */
.resultados-head-left { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; min-width: 0; }
.resultados-head-left .estado-listado-tabs { margin-bottom: 0; }
/* Estilo segmented (6b): el activo se marca con fondo azul, así que el
   "slider" ::before del CSS antiguo sobra y se desalineaba — lo desactivamos. */
.estado-listado-tabs::before { display: none; }
.estado-listado-tabs { max-width: none; }

/* ============================================================================
 * Recomendaciones de diseño #4, #5, #6, #8
 * ========================================================================== */

/* #4 — Acento de urgencia a la izquierda de la tarjeta. Solo aparece cuando
   aporta información: naranja si la oferta está por cerrar, gris si ya cerró.
   Las ofertas con plazo holgado NO llevan barra, para que el listado no se vea
   "todo marcado" (antes parecía un estado de error con todas las tarjetas
   coloreadas e incluso con colores distintos para el mismo plazo). */
.oferta-card { position: relative; overflow: hidden; }
.oferta-card::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; z-index: 2;
  background: transparent;
}
.oferta-card.urg-status-closing-today::before { background: var(--naran, #C87A0C); }
.oferta-card.urg-status-closed::before        { background: var(--texto3, #9CA3AF); }
/* active / upcoming: sin barra (plazo holgado o convocatoria futura). */

/* #6 — "Comparar" en la tarjeta como ícono secundario (no compite con "Ver
   detalle", que es el único botón primario). */
.cop-cmp-btn--icon {
  width: 36px; min-width: 36px; height: 36px; padding: 0; justify-content: center;
  font-size: 15px; color: var(--texto3, #747B91); border-color: var(--borde, #E5E1D2);
  flex: none;
  gap: 0;
}
/* El SVG inline arrastra el espacio de línea base de texto y queda descentrado
   (se ve corrido hacia abajo/derecha, el "pico" de la flecha asomando fuera).
   display:block lo saca del flujo de texto y el justify/align-center del botón
   lo centran de verdad. */
.cop-cmp-btn--icon svg { display: block; }
.cop-cmp-btn--icon:hover { color: var(--azul-m, #254BA0); border-color: var(--azul-m, #254BA0); }
.cop-cmp-btn--icon.is-on { color: var(--azul, #142E6B); border-color: var(--azul, #142E6B); background: var(--cielo-l, #E1E8F6); }

/* #5 — Sidebar enfocado: ocultamos los widgets que ya viven en /estadísticas
   (Por sector, Histórico mensual, Fuentes más activas). Quedan Alertas + "En
   este momento". */
.widget--solo-estadisticas { display: none; }

/* #8 — Un poco más de aire entre tarjetas. */
.ofertas-lista:not(.compacta) { gap: 14px; }

/* Correo de contacto reconocido en la ficha. */
.cop-contacto-p { font-size: 13.5px; color: var(--texto2, #4B5167); margin: 0; }
.cop-mail { color: var(--azul-m, #254BA0); font-weight: 600; text-decoration: none; }
.cop-mail:hover { text-decoration: underline; }

/* 4 acciones secundarias (Ver bases · Comparar · Compartir · Guardar): que
   envuelvan en pantallas chicas en vez de apretarse. */
.cop-actions-sec { flex-wrap: wrap; }
.cop-actions-sec .cop-btn2 { min-width: 120px; }

/* ── Cabecera de resultados ──────────────────────────────────────────
   El conteo de ofertas ya vive en la cinta superior ("N cargos vigentes").
   Lo quitamos de aquí para no duplicar el dato, y dejamos pestañas +
   controles + mapa en UNA sola fila. */
.resultados-count { display: none !important; }

@media (min-width: 760px) {
  /* Header puede envolver: si al filtrar aparecen "Limpiar/Compartir" y no
     cabe todo en una línea, los controles bajan limpios en vez de montarse
     sobre las pestañas (bug reportado). */
  .resultados-header { flex-wrap: wrap; }
  /* La columna de "acciones" suele ir oculta y reservaba ~210px en blanco;
     con flex no ocupa espacio cuando está vacía. */
  .resultados-controles { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
  /* Que ordenar / por página / vista / mapa no salten entre sí. */
  .resultados-preferencias { flex-wrap: nowrap; }
  /* Acciones (Limpiar/Compartir) en su propia línea cuando aparecen, sin pisar. */
  .resultados-acciones { flex-wrap: wrap; }
}

/* ── "Alertas de empleo": que el borde superior no quede tapado por el hero ──
   Los widgets del sidebar se suben con `margin-top:-30px` para solaparse con el
   hero. El panel de resultados lo hace con `position:relative; z-index:2`, pero
   el sidebar no tenía capa propia: el hero (positioned) pintaba por encima y
   ocultaba el borde superior del primer widget (la tarjeta de alertas). Le
   damos al sidebar la misma capa que al panel de resultados.
   El borde y el color del widget se dejan tal cual los demás del sidebar (sin
   el acento azul que antes lo hacía resaltar): hereda `.widget`. */
.sidebar { position: relative; z-index: 2; }

/* ── Vista compacta (lista densa): alineación cabecera ↔ filas ────────
   Cada fila tiene .row-acciones con 2 botones (comparar 36px + gap 6px +
   favorito 36px = 78px). Con la columna en 72px los botones se desbordaban
   hacia la izquierda y tapaban la renta. La subimos a 84px (caben los 78px +
   aire) e igualamos la 5ª columna del header para que todo calce. */
.oferta-row-header > :nth-child(5) { flex: 0 0 84px; width: 84px; }
.row-acciones { flex: 0 0 84px; width: 84px; }

/* Tipo: "Código del Trabajo" se cortaba en 82px ("Código del Tra…"). Ampliamos
   la columna y dejamos que el badge use dos líneas si hace falta. */
.oferta-row-header > :nth-child(2) { flex: 0 0 108px; width: 108px; }
.row-meta { flex: 0 0 108px; width: 108px; }
.row-meta .badge { font-size: 10px !important; line-height: 1.25; white-space: normal !important; }

/* Plazo: que no se parta en dos líneas. */
.oferta-row-header > :nth-child(3) { flex: 0 0 124px; width: 124px; }
.row-plazo { flex: 0 0 124px; width: 124px; font-size: 11.5px; white-space: nowrap; }
.row-plazo > span { overflow: hidden; text-overflow: ellipsis; min-width: 0; }

/* ── "Ordenar por" a la misma altura que el resto de controles (38px) ── */
.resultados-preferencias .ctrl-select,
.resultados-preferencias .ctrl-select--sort { height: 38px; }
.resultados-preferencias .sort-wrap { height: 38px; align-items: center; }

/* La cinta en modo oscuro (banda #16284A) se movió a redesign-overrides.css
   —hoja compartida por todas las páginas— para que index y las páginas
   secundarias se vean iguales. Ver la regla `:root[data-theme="dark"] .ribbon`
   allí. */

/* ── "Ordenar por": que la opción no se corte (ej. "⏰ Cierra antes") ──
   El select tenía min-width chico y el texto se cortaba con ellipsis. Le
   damos ancho suficiente y evitamos que el control se encoja en la fila.
   Solo desktop: en móvil mantiene el comportamiento full-width existente. */
@media (min-width: 601px) {
  .resultados-preferencias .sort-wrap { flex: 0 0 auto; min-width: 244px; }
  .sort-wrap .ctrl-select--sort { min-width: 150px !important; }
}