/* Tercera iteración: /oposiciones/ y /bolsas/ dejan de tener una cabecera
   compacta + stats en cajas sueltas y pasan a compartir LA MISMA anatomía de
   hero de dos columnas que la ficha de organismo (organism-detail-2026.css:
   .organism-hero/.organism-hero__card/.organism-hero__aside) y el hub de
   niveles (niveles-2026.css:.levels-hero) -- no un hero reinventado. El
   marcado vive en public_listing/header.html; aquí solo lo que ese lenguaje
   compartido aún no cubre: el detalle de staff-hint, y el pulido de
   filtros/toolbar/cards/bloques inferiores hacia ese mismo lenguaje "premium".
   No redefine tokens de color salvo donde se indica explícitamente (ver
   organism-detail-2026.css:.pill--estado--tramite, corregido a gris-azulado
   neutro en la segunda iteración de esta tarea). */

/* ---------- Hero: solo lo que organism-detail-hero__card no cubre ----------
   El grid de 2 columnas (320-335px de aside, colapso a 1 columna a 1120px) ya
   lo aporta .organism-detail-hero__card -- misma anatomía, mismo breakpoint
   que la ficha de organismo, sin duplicarlo aquí. */
.public-listing-hero__breadcrumbs {
  margin-bottom: 8px;
}

/* Utilidad de staff: nunca en la fila de CTAs públicas. Fila pequeña con un
   punto de estado (mismo espíritu que .organism-action-hint, sin heredar su
   tono "informativo" azul) debajo de las CTAs, clara pero secundaria. */
.public-listing-hero__staff-hint {
  margin-top: 10px;
}

.public-listing-hero__staff-hint button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface, #f8fafc);
  color: var(--text-secondary);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}

.public-listing-hero__staff-hint button:hover,
.public-listing-hero__staff-hint button:focus-visible {
  border-color: var(--text-secondary);
  color: var(--text);
}

.public-listing-hero__staff-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-secondary);
  flex: 0 0 auto;
}

/* ---------- Panel de filtros ----------
   Deliberately NOT named .filters/.public-filters -- those existing classes
   already impose a fixed-column grid meant for a flat list of <div> filter
   fields (the pre-redesign form). This form's shape is different (search
   field, mobile toggle, a filter-multi grid wrapper, "Más filtros" details,
   actions), so it gets its own container rule instead of fighting theirs. */
/* app-premium.css:.public-filters-card trae un radio de 8px heredado del
   panel de filtros pre-rediseño -- aquí se recupera el radio/sombra "premium"
   del resto del lenguaje visual (mismo look que .organism-section) y se le
   da más aire, para que se sienta una tarjeta de interfaz, no un formulario. */
.public-filters-card {
  margin-bottom: 24px;
  padding: 26px 28px;
  border-radius: var(--radius, 16px);
  border-color: rgba(30, 99, 255, 0.12);
}

.public-filters-card .public-section-heading h2 {
  font-size: 19px;
  font-weight: 800;
}

.public-filters-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.public-filters__search {
  margin-bottom: 0;
}

.public-filters__search input {
  width: 100%;
  min-height: 48px;
  padding: 0 16px;
  border-radius: 12px;
  font-size: 15px;
}

.public-filters__search input:focus-visible {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(30, 99, 255, .14);
}

/* Selects/triggers de esta página un poco más generosos que el valor base
   compartido con la ficha de organismo (37px) -- scoped a .public-filters__grid
   para no afectar a /organismos/<slug>/oposiciones/. */
.public-filters__grid .filter-multi__trigger,
.public-filters__grid .organism-process-filter select {
  min-height: 44px;
  border-radius: 10px;
}

/* auto-fit en vez de un número fijo de columnas: en desktop ancho caben las
   6 (Comunidad/Provincia/Organismo/Estado/Plazo/Nivel), en pantallas medias
   se reparten en 3+3 o 2+2, y ningún campo (p. ej. "Nivel") se queda solo
   ocupando una fila entera -- auto-fit reparte el espacio sobrante entre
   los campos que sí caben en la última fila. */
.public-filters__grid {
  display: grid;
  /* 158px (no 170px): con el padding "premium" más generoso de la tarjeta
     (26px 28px) los 6 campos primarios (Comunidad/Provincia/Organismo/
     Estado/Plazo/Nivel) deben seguir cabiendo en una fila en desktop -- a
     170px "Nivel" se quedaba huérfano en su propia fila por unos pocos
     píxeles, justo lo que esta grid quiere evitar siempre. */
  grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
  gap: 12px;
  align-items: end;
}

.public-filters__grid .filter-multi,
.public-filters__grid .organism-process-filter {
  min-width: 0;
}

.filter-multi__hint {
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-secondary);
  font-size: 11px;
}

/* "Más filtros": mismo panel visual que el grid principal (fondo/borde
   sutil), no un segundo formulario suelto. */
.public-filters__more {
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px dashed var(--border);
}

.public-filters__more summary {
  cursor: pointer;
  font-weight: 800;
  color: var(--primary);
  list-style: none;
}

.public-filters__more summary::-webkit-details-marker {
  display: none;
}

.public-filters__more summary::before {
  content: "+ ";
}

.public-filters__more[open] summary::before {
  content: "− ";
}

.public-filters__more > div {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
  gap: 14px;
  margin-top: 14px;
}

.public-filters__fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.public-filters__fieldset legend {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-secondary);
  margin-bottom: 6px;
  padding: 0;
}

.public-filters__fieldset label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  padding: 4px 0;
  min-height: 32px;
}

/* El reset global `input{width:100%}` (app-premium.css) estira los
   checkboxes de este fieldset a todo el ancho del label flex -- igual que
   ya se corrige en `.login-remember input[type="checkbox"]`. */
.public-filters__fieldset input[type="checkbox"] {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  accent-color: var(--primary);
  cursor: pointer;
}

.public-filters__actions {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}

/* Búsqueda dentro de un desplegable de filtro (Organismo, Familia, Tipo de
   plaza, Comunidad, Provincia). El input es puramente progresivo: sin JS no
   hace nada, la lista completa restringida a resultados sigue debajo. */
.filter-multi__search {
  padding: 8px 10px 4px;
}

.filter-multi__search-input {
  width: 100%;
  min-height: 36px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
}

.filter-multi__count {
  color: var(--text-secondary);
  font-weight: 700;
  font-size: 12px;
  margin-left: auto;
}

.filter-multi__empty {
  padding: 8px 10px;
  margin: 0;
  color: var(--text-secondary);
  font-size: 13px;
}

/* ---------- Filtros activos ---------- */
.public-active-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 14px 0;
}

.public-active-filters__chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  min-height: 32px;
  border: 1px solid rgba(30, 99, 255, .28);
  border-radius: 999px;
  background: rgba(30, 99, 255, .08);
  color: var(--primary);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.public-active-filters__chip:hover,
.public-active-filters__chip:focus-visible {
  background: rgba(30, 99, 255, .16);
}

.public-active-filters__clear {
  font-size: 13px;
  font-weight: 800;
  color: var(--text-secondary);
  text-decoration: underline;
  padding: 6px 4px;
}

/* ---------- Toolbar de resultados ---------- */
.public-results-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 14px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--border);
}

.public-results-toolbar h2 {
  margin: 0;
  color: var(--text);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.01em;
}

.public-results-toolbar__order {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  white-space: nowrap;
}

.public-results-toolbar__order label {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-secondary);
}

.public-results-toolbar__order select {
  min-height: 40px;
  padding: 6px 30px 6px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  font-weight: 700;
}

.public-results-toolbar__order select:focus-visible {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(30, 99, 255, .14);
}

/* ---------- Acento secundario dentro del badge de estado ----------
   3 familias visuales (verde/gris-azulado/stone, .pill--estado--* en
   organism-detail-2026.css) siguen siendo la señal principal. Este punto
   añade detalle por estado concreto reutilizando tonos ya existentes en la
   paleta del sitio -- ninguno nuevo. El ámbar (urgencia real de plazo)
   nunca se usa como color base de una familia, solo como acento. */
.pill__accent-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-right: 5px;
  vertical-align: middle;
}

.pill__accent-dot--violeta { background: #7c3aed; }
.pill__accent-dot--naranja { background: #ea6c0b; }
.pill__accent-dot--teal { background: #0f766e; }
.pill__accent-dot--ambar { background: #b45309; }

/* ---------- Tarjetas de resultados: más aire y más peso ----------
   Todo aquí queda scoped a .public-results-list (solo se carga este archivo
   en /oposiciones/ y /bolsas/, nunca en /organismos/<slug>/...): mismo
   partial compartido (public_process_result_card.html) sin tocarlo, sin
   riesgo alguno para las páginas de organismo. */
.public-results-list {
  gap: 16px;
}

.public-results-list .result-card {
  padding: 20px 22px;
  border-radius: 14px;
}

.result-card__title a {
  text-underline-offset: 3px;
}

.result-card__title a:hover,
.result-card__title a:focus-visible {
  text-decoration: underline;
}

/* "Ver detalle": mismo botón primario, más presencia (altura/tipografía a
   la par de "Seguir", que ya mide 44px vía organism-detail-2026.css). */
.public-results-list .result-card__detail {
  min-height: 44px;
  padding: 10px 18px;
  font-size: 14px;
  white-space: nowrap;
}

.public-results-list .result-card__follow {
  font-size: 13.5px;
}

/* Acción de staff: icono discreto, no un botón de texto que compita con
   "Ver detalle"/"Seguir". */
.result-card__staff-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  min-width: 36px;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-secondary);
  background: #fff;
  flex: 0 0 auto;
}

.result-card__staff-action svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.result-card__staff-action:hover,
.result-card__staff-action:focus-visible {
  border-color: var(--primary);
  color: var(--primary);
}

/* ---------- Bloques SEO editoriales: contenido fluido, no cajas apiladas ----------
   "Explora" y "Guía rápida" dejan de ser dos cajas blancas más en la columna
   -- sus componentes (chips con sombra propia, tarjetas con acento superior)
   ya llevan el peso visual, así que la caja exterior heredada de
   app-premium.css:.seo-block (borde+sombra+fondo) se aplana aquí: el
   contenido fluye igual que el resto de la página, con más ritmo editorial y
   sin anidar "caja dentro de caja". Mismo criterio ya aplicado a la FAQ
   (.faq-strip--compact). */
.seo-block--links,
.seo-guide {
  padding-left: 0;
  padding-right: 0;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.seo-block__lead {
  margin: 4px 0 4px !important;
  font-size: 13.5px;
}

.seo-block--links h3 {
  margin: 16px 0 8px;
  font-size: 14px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: .03em;
}

.seo-block--links h3:first-of-type {
  margin-top: 10px;
}

.seo-block__more {
  display: inline-block;
  margin-top: 10px;
  font-size: 13px;
  font-weight: 800;
}

/* Chips compactos para territorio/nivel/familia -- mismo lenguaje visual
   que .year-chip (ya existente), en vez de las cards grandes de
   .internal-link-card. */
.public-explore-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.public-explore-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  min-height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(30, 99, 255, .16);
  background: #fff;
  box-shadow: var(--shadow-sm, 0 2px 8px rgba(15, 23, 42, .05));
  color: var(--primary);
  font-size: 13.5px;
  font-weight: 800;
  text-decoration: none;
  transition: border-color .15s ease, box-shadow .15s ease, transform .1s ease;
}

.public-explore-chip:hover,
.public-explore-chip:focus-visible {
  border-color: rgba(30, 99, 255, .35);
  box-shadow: 0 6px 16px rgba(2, 17, 48, .08);
  transform: translateY(-1px);
}

.public-explore-chip span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  padding: 0 6px;
  height: 20px;
  border-radius: 999px;
  background: rgba(30, 99, 255, .1);
  color: var(--primary);
  font-weight: 800;
  font-size: 12px;
}

/* "Guía rápida": UNA sola caja con 3 columnas -- cada tarjeta con un acento
   superior y una cabecera con más presencia, mismo espíritu que .levels-card
   (niveles-2026.css), para que lea como bloque editorial serio. */
.seo-guide__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 14px;
}

.seo-guide__card {
  padding: 20px;
  border: 1px solid var(--border);
  border-top: 3px solid var(--primary);
  border-radius: var(--radius, 16px);
  background: #fff;
  box-shadow: var(--shadow-sm, 0 2px 8px rgba(15, 23, 42, .06));
}

.seo-guide__card:nth-child(2) { border-top-color: #079d72; }
.seo-guide__card:nth-child(3) { border-top-color: #7c3aed; }

.seo-guide__card h3 {
  margin: 0 0 8px;
  font-size: 15.5px;
  font-weight: 800;
  color: var(--text);
}

.seo-guide__card p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 13.5px;
  line-height: 1.6;
}

/* FAQ: mismo contenido, menos "otra caja blanca enorme" -- fondo plano y
   menos sombra que el resto de .seo-block de la página. */
.faq-strip--compact {
  margin-top: 18px;
  padding: 20px 24px;
  box-shadow: none;
  background: var(--surface, #f8fafc);
}

/* ---------- Móvil ---------- */
@media (max-width: 900px) {
  .seo-guide__grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .public-listing-hero__actions .btn {
    flex: 1 1 auto;
    min-height: 44px;
  }

  /* Campo de búsqueda siempre visible; el resto de filtros primarios se
     pliega en un acordeón accesible (misma marca <details>/<summary> que
     "Más filtros"), con un botón "Filtros" que muestra cuántos hay
     aplicados. */
  .public-filters__search {
    margin-bottom: 10px;
  }

  /* Visible por defecto (fallback sin JS y funcional); JS es quien añade
     el estado plegado y hace funcionar el botón "Filtros (N)". */
  .public-filters-card.is-mobile-collapsed .public-filters__grid {
    display: none;
  }

  .public-filters-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    min-height: 44px;
    margin-bottom: 10px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #fff;
    color: var(--text);
    font-weight: 800;
    font-size: 14px;
    box-shadow: none;
  }

  .public-results-list,
  .public-results-list--org {
    grid-template-columns: 1fr;
  }

  .public-results-toolbar {
    align-items: stretch;
  }

  .public-results-toolbar__order {
    flex-wrap: wrap;
    white-space: normal;
  }

  .public-results-toolbar__order select {
    flex: 1 1 auto;
  }

  .public-active-filters__chip,
  .public-active-filters__clear {
    min-height: 36px;
  }

  .public-explore-chip {
    min-height: 40px;
  }
}

@media (min-width: 761px) {
  .public-filters-toggle {
    display: none;
  }
}