/* =======================================================================
   CIFP As Mercedes — BOLSA DE EMPREGO
   Tarxeta de oferta do listing (JetEngine Listing Item id=9788) + toolbar.
   Portado de `.oferta-item` da maqueta interior.css. Usa os tokens globais
   do Kit (`--e-global-color-cm*`) con fallback hex. Ver css/REXISTRO.md.
   ======================================================================= */

/* ---- Tarxeta (contedor raíz do listing item, clase .cifp-oferta-card) ---- */
.cifp-oferta-card {
  display: grid !important;
  grid-template-columns: 60px 1fr auto;
  gap: 1.2rem;
  align-items: center;
  background: #fff;
  border: 1px solid var(--e-global-color-cmborde, #e2e8ee);
  border-radius: 14px;
  padding: 1.4rem 1.6rem;
  box-shadow: 0 1px 2px rgba(0, 43, 74, .06);
  transition: box-shadow .2s, border-color .2s;
}
.cifp-oferta-card:hover {
  box-shadow: 0 6px 20px rgba(0, 43, 74, .10);
  border-color: var(--e-global-color-cmazul25, #a9d3ec);
}

/* ---- "Logo" = iniciais da empresa ---- */
.cifp-oferta-card__logo {
  width: 60px; height: 60px; border-radius: 12px;
  background: var(--e-global-color-cmazul10, #eaf4fb);
  color: var(--e-global-color-cmazul, #007BC4);
  display: grid; place-items: center;
  font-weight: 700; font-size: 1.4rem; line-height: 1;
}
.cifp-oferta-card__logo .jet-listing-dynamic-field__content { display: block; }

/* ---- Corpo (título, empresa, metadatos, tags) ---- */
.cifp-oferta-card__body { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.cifp-oferta-card__title,
.cifp-oferta-card__title a {
  font-size: 1.2rem; font-weight: 700; line-height: 1.25;
  color: var(--e-global-color-cmazulescuro, #002B4A);
  text-decoration: none;
}
.cifp-oferta-card__title a:hover { color: var(--e-global-color-cmazul, #007BC4); }
.cifp-oferta-card__empresa {
  font-weight: 700; font-size: .95rem;
  color: var(--e-global-color-cmazul, #007BC4);
}

/* Fila de metadatos (localización · xornada · familia) */
.cifp-oferta-card__meta {
  display: flex !important; flex-direction: row !important; flex-wrap: wrap;
  gap: .4rem 1.1rem; margin-top: .5rem;
  font-size: .88rem; color: var(--e-global-color-cmtextosuave, #5A6B78);
}
.cifp-oferta-card__meta > * { display: inline-flex; align-items: center; gap: .35rem; }
.cifp-oferta-card__meta .jet-listing-dynamic-field__icon svg,
.cifp-oferta-card__meta .jet-listing-dynamic-field__icon img { width: 16px; height: 16px; }

/* Fila de etiquetas (titulación · contrato) — pílulas */
.cifp-oferta-card__tags {
  display: flex !important; flex-direction: row !important; flex-wrap: wrap;
  gap: .45rem; margin-top: .55rem;
}
.cifp-oferta-card__tags .jet-listing-dynamic-field__content,
.cifp-oferta-card__tags .jet-listing-dynamic-terms__link,
.cifp-oferta-card__tags .jet-listing-dynamic-terms {
  display: inline-block;
  background: var(--e-global-color-cmazul10, #eaf4fb);
  color: var(--e-global-color-cmazul, #007BC4);
  padding: .28rem .75rem; border-radius: 999px;
  font-size: .78rem; font-weight: 700; line-height: 1.35; text-decoration: none;
}

/* ---- Lateral (data + botón) ---- */
.cifp-oferta-card__aside {
  display: flex !important; flex-direction: column !important;
  gap: .6rem; align-items: flex-end; text-align: right;
}
.cifp-oferta-card__date { font-size: .8rem; color: #7c8b98; white-space: nowrap; }
.cifp-oferta-card__btn .jet-listing-dynamic-link__link {
  display: inline-flex; align-items: center; gap: .4rem;
  background: var(--e-global-color-cmazul, #007BC4); color: #fff;
  padding: .55rem 1.15rem; border-radius: 999px;
  font-weight: 700; font-size: .9rem; line-height: 1; text-decoration: none;
}
.cifp-oferta-card__btn .jet-listing-dynamic-link__link:hover {
  background: #0069A8;                                   /* azul hover do Kit */
  color: #fff !important;                                /* letra branca tamén en hover */
}

/* ---- Aliñar a icona co texto (dynamic-field OU dynamic-terms) ----
   Ponse a clase `cifp-icona` DIRECTAMENTE NO WIDGET (Avanzado → Clases CSS).
   CAUSA: no widget de TERMOS a icona e o texto son `inline-block` sobre a liña
   base (o wrapper NON é flex en Elementor) → a icona queda alta. Nun elemento
   inline a posición vertical mándaa `vertical-align`, NON a marxe. Por iso
   `margin-top`/`align-items` non facían nada. `vertical-align:middle` céntraa.
   AXUSTE FINO (opcional): cambia `middle` por p.ex. `-0.12em` (sobe) / `0.1em` (baixa). */
.cifp-icona .jet-listing-dynamic-terms__icon,
.cifp-icona .jet-listing-dynamic-field__icon {
  vertical-align: middle !important;
}

/* ---- Responsive: apilar en móbil ---- */
@media (max-width: 600px) {
  .cifp-oferta-card { grid-template-columns: 1fr; }
  .cifp-oferta-card__aside { align-items: flex-start; text-align: left; }
}

/* =======================================================================
   BARRA DE FILTROS (JetSmartFilters) — bolsa
   Ponse a clase `cifp-filtros` NO CONTAINER que agrupa os widgets de filtro
   (o que ten dentro o grupo de selects + a busca). Estila os elementos nativos
   de JSF para que teñan a pinta da maqueta (label + caixa/pílula + lupa).
   ======================================================================= */
.cifp-filtros .jet-filters-group { display: flex; flex-wrap: wrap; gap: .8rem; align-items: flex-end; }
.cifp-filtros .jet-filter { display: flex; flex-direction: column; gap: .35rem; margin: 0; }
.cifp-filtros .jet-filter-label {
  font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: var(--e-global-color-cmtextosuave, #7c8b98); margin: 0;
}

/* Controis: select + input coa mesma caixa */
.cifp-filtros .jet-select__control,
.cifp-filtros .jet-search-filter__input {
  font-family: inherit; font-size: .95rem; line-height: 1.2; width: 100%; min-width: 190px;
  color: var(--e-global-color-cmtexto, #212529);
  padding: .62rem .9rem;
  border: 1.5px solid var(--e-global-color-cmborde, #e2e8ee); border-radius: 10px;
  background-color: #fff; transition: border-color .18s, box-shadow .18s;
}
.cifp-filtros .jet-select__control {
  -webkit-appearance: none; appearance: none; padding-right: 2.4rem; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23007bc4' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .7rem center;
}
.cifp-filtros .jet-select__control:focus,
.cifp-filtros .jet-search-filter__input:focus {
  outline: none; border-color: var(--e-global-color-cmazul, #007BC4);
  box-shadow: 0 0 0 3px rgba(0, 123, 196, .18);
}

/* Busca coa lupa á esquerda */
.cifp-filtros .jet-search-filter__input-wrapper { position: relative; }
.cifp-filtros .jet-search-filter__input { padding-left: 2.4rem; }
.cifp-filtros .jet-search-filter__input-wrapper::before {
  content: ""; position: absolute; left: .8rem; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; opacity: .55; pointer-events: none;
  background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%237c8b98' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
}

/* =======================================================================
   FILTROS ACTIVOS (JSF Active Tags + Remove Filters) — clase propia
   Ponse a clase `cifp-activos` NO CONTAINER dos filtros activos (o que ten o
   widget Active Tags + o Remove Filters). Para que os chips + "Limpar filtros"
   queden nunha liña, pon ese container en flex horizontal (align-items:center).
   ======================================================================= */
.cifp-activos .jet-active-tags__list { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; }
.cifp-activos .jet-active-tags__title {
  font-size: .82rem; font-weight: 700; margin-right: .15rem;
  color: var(--e-global-color-cmtextosuave, #7c8b98);
}
.cifp-activos .jet-active-tag {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .8rem; font-weight: 700; color: var(--e-global-color-cmazul, #007BC4);
  background: var(--e-global-color-cmazul10, #eaf4fb);
  border: 1.5px solid var(--e-global-color-cmazul25, #a9d3ec); border-radius: 999px;
  padding: .25rem .5rem .1rem .7rem !important; line-height: 1;
}
/* JSF pona en position:absolute (top-right) → queda alta. Vólvese item flex
   normal e o pill (align-items:center) céntraa soa. `!important` porque a CSS de
   JSF cárgase despois coa mesma especificidade. */
.cifp-activos .jet-active-tag__remove {
  position: static !important; top: auto !important; right: auto !important;
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 50%; cursor: pointer;
  font-size: .8rem; line-height: 1; color: var(--e-global-color-cmazul, #007BC4);
  transform: translateY(1px);
}

/* Botón "Limpar filtros" con pinta de ligazón (reseteando o estilo botón de JSF
   tamén en :hover/:focus — só cambia a cor do texto). */
.cifp-activos .jet-remove-all-filters__button,
.cifp-activos .jet-remove-all-filters__button:hover,
.cifp-activos .jet-remove-all-filters__button:focus {
  background: none !important; border: 0 !important; box-shadow: none !important;
  padding: 0 !important; cursor: pointer; font-family: inherit;
  font-size: .85rem; font-weight: 700;
  text-decoration: underline; text-underline-offset: 3px;
}
.cifp-activos .jet-remove-all-filters__button { color: var(--e-global-color-cmtextosuave, #7c8b98); }
.cifp-activos .jet-remove-all-filters__button:hover,
.cifp-activos .jet-remove-all-filters__button:focus { color: var(--e-global-color-cmazul, #007BC4); }

/* =======================================================================
   RESPONSIVE dos filtros (baixar tamaños para que todo adapte)
   Breakpoints do Kit: laptop ≤1366 · tablet ≤1024 · mobile ≤767.
   ======================================================================= */
@media (max-width: 1024px) {
  .cifp-filtros .jet-select__control,
  .cifp-filtros .jet-search-filter__input {
    font-size: .88rem; padding-top: .52rem; padding-bottom: .52rem; min-width: 150px;
  }
  .cifp-filtros .jet-filter-label { font-size: .66rem; }
  .cifp-filtros .jet-filters-group { gap: .6rem; }
  .cifp-activos .jet-active-tag { font-size: .76rem; }
  .cifp-activos .jet-active-tags__title,
  .cifp-activos .jet-remove-all-filters__button { font-size: .8rem; }
}
@media (max-width: 767px) {
  .cifp-filtros .jet-filter { flex: 1 1 140px; }        /* 2 por fila cando non caben */
  .cifp-filtros .jet-select__control,
  .cifp-filtros .jet-search-filter__input { min-width: 0; width: 100%; font-size: .85rem; }
  .cifp-filtros .jet-filter-label { font-size: .64rem; }
}

/* =========================================================================
   SINGLE / FICHA DE OFERTA (Theme Builder, condición singular/oferta)
   Clases para poñer NO WIDGET/CONTAINER (Avanzado → Clases CSS) do editor.
   Segue maquetas/oferta.html. Reutiliza `.cifp-oferta-card__logo` do listing
   para o cadro de iniciais tamén na cabeceira.
   ========================================================================= */

/* --- (1) Bloque de empresa na cabeceira: iniciais á esquerda + nome/lugar á
   dereita. Clase no CONTAINER que agrupa o logo e o bloque de texto.
   Distínguese nome (sen icona) de lugar (con icona) por `:has()` para que só
   haxa que engadir ESTA clase ao container. --- */
.cifp-of-empresa {
  /* SÓ disposición. ⚠ os containers de Elementor xa son flex con
     --flex-direction:column; hai que forzar row (senón o logo apílase sobre
     o texto). NON se toca nin tamaño nin cor dos campos internos: iso faise
     en Elementor. O cadro de iniciais mantén o estilo do listing
     (`.cifp-oferta-card__logo`), idéntico en tamaño e cor. */
  display: flex !important; flex-direction: row !important; flex-wrap: nowrap;
  align-items: center; gap: .9rem;
}
/* que o cadro de iniciais non encolla nin estire */
.cifp-of-empresa > .cifp-oferta-card__logo { flex: 0 0 auto; }
/* o bloque de texto (nome+lugar) ocupa o resto e apílase en columna */
.cifp-of-empresa > .e-con { flex: 1 1 auto; min-width: 0; }

/* --- (2) Tarxeta destacada "Interésache?" (fondo azul escuro + brillo radial).
   Clase no CONTAINER da tarxeta. --- */
.cifp-of-card--accent {
  position: relative; overflow: hidden;
  background: var(--e-global-color-cmazulescuro, #002B4A);
  border: 1px solid transparent; border-radius: 16px;
}
.cifp-of-card--accent::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(400px 240px at 110% -20%, rgba(0,123,196,.5), transparent 60%);
}
.cifp-of-card--accent > * { position: relative; z-index: 1; }
/* títulos e parágrafos internos sobre o fondo escuro */
.cifp-of-card--accent .elementor-heading-title { color: #fff; }
.cifp-of-card--accent p,
.cifp-of-card--accent .jet-listing-dynamic-field__content { color: #cfe0ee; }

/* --- (3) Corpo da oferta (widget "Contido da entrada"): viñetas azuis coa
   marxe da maqueta. Poñer a clase `cifp-of-prose` NO WIDGET de contido. --- */
.cifp-of-prose ul,
.cifp-of-prose ol {
  display: grid; gap: .55rem; padding-left: 0; margin: 1.1rem 0; list-style: none;
}
.cifp-of-prose ul li { position: relative; padding-left: 1.7rem; margin: 0; }
.cifp-of-prose ul li::before {
  content: ""; position: absolute; left: .1rem; top: .55em;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--e-global-color-cmazul, #007BC4);
}
/* listas numeradas: círculo azul claro co número (por coherencia coa maqueta) */
.cifp-of-prose ol { counter-reset: li; }
.cifp-of-prose ol li { position: relative; padding-left: 2.2rem; margin: 0; counter-increment: li; }
.cifp-of-prose ol li::before {
  content: counter(li); position: absolute; left: 0; top: -.1em;
  width: 1.6rem; height: 1.6rem; border-radius: 50%;
  background: var(--e-global-color-cmazul10, #eaf4fb); color: var(--e-global-color-cmazul, #007BC4);
  font-size: .85rem; font-weight: 700; display: grid; place-items: center;
}

/* --- Botóns feitos con Dynamic Link (JetEngine) — Elementor NON aplica as
   clases de botón (.elementor-button) nin o control de fondo do widget apunta
   ao <a>, así que estilamos `.jet-listing-dynamic-link__link` por clase.
   `.cifp-of-btn--white` (fondos escuros) · `.cifp-of-btn--ghost` (outline branco). --- */
.cifp-of-btn .jet-listing-dynamic-link__link {
  display: inline-flex; align-items: center; gap: .45rem;
  font-weight: 700; font-size: .9375rem; line-height: 1;
  padding: .7rem 1.4rem; border-radius: 999px; text-decoration: none;
  transition: background-color .18s, color .18s, border-color .18s;
}
.cifp-of-btn .jet-listing-dynamic-link__link svg,
.cifp-of-btn .jet-listing-dynamic-link__link i { width: 1em; height: 1em; }
.cifp-of-btn--white .jet-listing-dynamic-link__link { background: #fff; color: var(--e-global-color-cmazulescuro, #002B4A); }
.cifp-of-btn--white .jet-listing-dynamic-link__link:hover { background: #e6f0f8; }
.cifp-of-btn--ghost .jet-listing-dynamic-link__link { background: transparent; color: #fff; border: 2px solid rgba(255, 255, 255, .55); }
.cifp-of-btn--ghost .jet-listing-dynamic-link__link:hover { background: #fff; color: var(--e-global-color-cmazulescuro, #002B4A); border-color: #fff; }

/* --- (4) Enlace "Ver perfil da empresa" (item de empresa 9872, dentro dun
   Listing Grid coa query de relación #19 "Empresa da oferta"). Estilo ligazón
   con frecha, coma `.link-arrow` da maqueta. --- */
.cifp-of-verempresa .jet-listing-dynamic-link__link {
  display: inline-flex; align-items: center; gap: .4rem;
  font-weight: 700; font-size: .93rem; text-decoration: none;
  color: var(--e-global-color-cmazul, #007BC4);
  transition: gap .18s, color .18s;
}
.cifp-of-verempresa .jet-listing-dynamic-link__link:hover {
  color: var(--e-global-color-cmazulescuro, #002B4A); gap: .6rem;
}
.cifp-of-verempresa .jet-listing-dynamic-link__link svg,
.cifp-of-verempresa .jet-listing-dynamic-link__link i { width: 1em; height: 1em; }