/* =====================================================================
   Avanxa Feed — Fase 2 · Filtros + Paginado
   Réplica 1:1 de los HTML de referencia (filtro-categorias-avanxa.html,
   paginado-avanxa.html) con los morados EXACTOS del diseño.

   Reglas (igual que Fase 1): todo scopeado bajo .avx-cz, prefijo html body y
   !important en cada propiedad para que el tema/Elementor no lo pise. Los custom
   properties (tokens) son la única excepción a !important. Clases nuevas
   (.avx-filter*, .avx-item*, .avx-pagination*, .avx-filters) → no colisionan con
   Fase 1 (que usa .avx-filterbar/.avx-chip). El grid reutiliza .avx-card de Fase 1.
   ===================================================================== */

/* ── Tokens (namespaced --avxf- para no pisar los de Fase 1) ─────────── */
html body .avx-cz{
  --avxf-purple: #471c70;          /* texto / borde del pill, números inactivos */
  --avxf-purple-active: #7932c5;   /* item seleccionado + página activa */
  --avxf-item-text: #222;          /* texto de los items */
  --avxf-count: #222;              /* contador (7) inactivo */
  --avxf-disabled: #c9bcd9;        /* flecha de paginado deshabilitada */
  --avxf-white: #ffffff;
  --avxf-shadow-pill: 0px 4px 12px 0px rgba(144, 46, 157, 0.149);
  --avxf-shadow-panel: 0px 12px 30px 0px rgba(71, 28, 112, 0.18);
}

/* ====================================================================
   BARRA DE FILTROS
   ==================================================================== */

/* Contenedor de la barra (glue mínimo: el HTML de referencia muestra UN solo
   pill; aquí se alinean varios + el botón "Limpiar"). Mantiene el alto del feed. */
html body .avx-cz .avx-filters{
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:center !important;
  gap:12px !important;
  max-width:1440px !important;
  margin:0 auto !important;
  width:100% !important;
  min-width:0 !important;
  font-family:"Inter", sans-serif !important;
}

/* ── Wrapper del filtro ── */
html body .avx-cz .avx-filter{
  position:relative !important;
  display:inline-block !important;
  font-family:"Inter", sans-serif !important;
}
/* Lote 3: filtro sin opciones en el contexto → oculto por el JS vía [hidden].
   Necesario porque .avx-filter fuerza display:inline-block !important. */
html body .avx-cz .avx-filter[hidden]{ display:none !important; }

/* ── Pill / Label (botón cerrado) ── */
html body .avx-cz .avx-filter__label{
  display:inline-flex !important;
  align-items:center !important;
  gap:10px !important;
  cursor:pointer !important;
  user-select:none !important;
  font-family:"Inter", sans-serif !important;
  font-size:16px !important;
  font-weight:400 !important;
  line-height:1.4 !important;
  letter-spacing:0px !important;
  color:var(--avxf-purple) !important;
  background:var(--avxf-white) !important;
  border-style:solid !important;
  border-width:1px !important;
  border-color:var(--avxf-purple) !important;
  border-radius:50px !important;
  box-shadow:var(--avxf-shadow-pill) !important;
  padding:8px 40px 8px 16px !important;
  position:relative !important;
  white-space:nowrap !important;
  text-transform:none !important;   /* el label va en Mayúscula Inicial, no UPPERCASE */
  transition:border-color .15s ease, color .15s ease !important;
}
/* El tema/Elementor puede forzar uppercase en spans/botones: lo neutralizamos. */
html body .avx-cz .avx-filter__text{ text-transform:none !important; }

html body .avx-cz .avx-filter__caret{
  position:absolute !important;
  right:16px !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  width:12px !important;
  height:12px !important;
  pointer-events:none !important;
  transition:transform .2s ease !important;
}
html body .avx-cz .avx-filter__caret svg{ display:block !important; width:100% !important; height:100% !important; }
html body .avx-cz .avx-filter.is-open .avx-filter__caret{ transform:translateY(-50%) rotate(180deg) !important; }

/* ── Panel desplegable ── */
html body .avx-cz .avx-filter__body{
  position:absolute !important;
  top:calc(100% + 10px) !important;
  left:0 !important;
  min-width:360px !important;
  max-height:60vh !important;
  overflow-y:auto !important;
  background:var(--avxf-white) !important;
  border-radius:10px !important;
  box-shadow:var(--avxf-shadow-panel) !important;
  padding:18px 8px !important;
  z-index:20 !important;
  opacity:0 !important;
  visibility:hidden !important;
  transform:translateY(-6px) !important;
  transition:opacity .18s ease, transform .18s ease, visibility .18s !important;
}
html body .avx-cz .avx-filter.is-open .avx-filter__body{
  opacity:1 !important;
  visibility:visible !important;
  transform:translateY(0) !important;
}

/* ── Cada fila / item ── */
html body .avx-cz .avx-item{
  display:flex !important;
  align-items:center !important;
  gap:14px !important;
  padding:9px 16px !important;
  border-radius:8px !important;
  cursor:pointer !important;
  user-select:none !important;
  transition:background .12s ease !important;
}
html body .avx-cz .avx-item:hover{ background:#f6f1fb !important; }

/* Checkbox real oculto, accesible */
html body .avx-cz .avx-item input{
  position:absolute !important;
  opacity:0 !important;
  width:0 !important;
  height:0 !important;
}

/* Caja del checkbox custom */
html body .avx-cz .avx-item__box{
  flex:0 0 auto !important;
  width:22px !important;
  height:22px !important;
  border:1.5px solid var(--avxf-purple) !important;
  border-radius:5px !important;
  background:var(--avxf-white) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  transition:background .12s ease, border-color .12s ease !important;
}
html body .avx-cz .avx-item__box svg{
  width:13px !important;
  height:13px !important;
  opacity:0 !important;
  transform:scale(.6) !important;
  transition:opacity .12s ease, transform .12s ease !important;
}
html body .avx-cz .avx-item__box svg path{ stroke:var(--avxf-white) !important; }

/* Texto del item */
html body .avx-cz .avx-item__text{
  flex:1 1 auto !important;
  font-family:"Inter", sans-serif !important;
  font-size:14px !important;
  font-weight:400 !important;
  line-height:1.3 !important;
  color:var(--avxf-item-text) !important;
  /* El nombre del término se pinta TAL CUAL viene de WordPress (v1.3.9): el tema
     no debe forzar UPPERCASE ni capitalize sobre las opciones del desplegable, o
     se perderían siglas y nombres propios (AIEP, UNAB, SPEEXX…). El pill ya lo
     tenía (.avx-filter__label / .avx-filter__text); esto cubre la lista. */
  text-transform:none !important;
  transition:color .12s ease !important;
}

/* Contador (7) */
html body .avx-cz .avx-item__count{
  flex:0 0 auto !important;
  font-family:"Inter", sans-serif !important;
  font-size:14px !important;
  font-weight:400 !important;
  color:var(--avxf-count) !important;
}

/* ── Estado seleccionado ── */
html body .avx-cz .avx-item input:checked ~ .avx-item__box{
  background:var(--avxf-purple-active) !important;
  border-color:var(--avxf-purple-active) !important;
}
html body .avx-cz .avx-item input:checked ~ .avx-item__box svg{
  opacity:1 !important;
  transform:scale(1) !important;
}
html body .avx-cz .avx-item input:checked ~ .avx-item__text{ color:var(--avxf-purple-active) !important; }
html body .avx-cz .avx-item input:checked ~ .avx-item__count{ color:var(--avxf-purple-active) !important; }

/* Foco accesible por teclado */
html body .avx-cz .avx-item input:focus-visible ~ .avx-item__box{
  outline:2px solid var(--avxf-purple-active) !important;
  outline-offset:2px !important;
}
html body .avx-cz .avx-filter__label:focus-visible{
  outline:2px solid var(--avxf-purple-active) !important;
  outline-offset:2px !important;
}

/* ── Botón "Limpiar filtros" (glue mínimo, estética del diseño) ── */
html body .avx-cz .avx-filter-clear{
  display:inline-flex !important;
  align-items:center !important;
  gap:6px !important;
  background:transparent !important;
  border:none !important;
  cursor:pointer !important;
  font-family:"Inter", sans-serif !important;
  font-size:14px !important;
  font-weight:500 !important;
  color:var(--avxf-purple-active) !important;
  text-decoration:underline !important;
  padding:8px 4px !important;
}
html body .avx-cz .avx-filter-clear[hidden]{ display:none !important; }
html body .avx-cz .avx-filter-clear:hover{ color:var(--avxf-purple) !important; }

/* ====================================================================
   PAGINADO
   ==================================================================== */
html body .avx-cz .avx-pagination{
  width:100% !important;
  max-width:1440px !important;
  margin:24px auto 0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:20px !important;
  font-family:"Inter", sans-serif !important;
}

/* "Mostrando 1-12 de 32 programas" */
html body .avx-cz .avx-pagination__count{
  font-size:16px !important;
  font-weight:400 !important;
  line-height:1.4 !important;
  color:var(--avxf-purple) !important;
}

/* Zona derecha: flechas + números */
html body .avx-cz .avx-pagination__nav{
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
}

/* Label "Página" */
html body .avx-cz .avx-pagination__label{
  font-size:16px !important;
  font-weight:400 !important;
  color:var(--avxf-purple) !important;
}

/* Lista de números */
html body .avx-cz .avx-pagination__pages{
  display:flex !important;
  align-items:center !important;
  gap:14px !important;
}

html body .avx-cz .avx-page{
  font-size:16px !important;
  font-weight:400 !important;
  color:var(--avxf-purple) !important;
  text-decoration:none !important;
  line-height:1 !important;
  cursor:pointer !important;
  background:transparent !important;
  border:none !important;
  padding:0 !important;
  transition:color .12s ease !important;
}
html body .avx-cz .avx-page:hover{ color:var(--avxf-purple-active) !important; }

/* Página activa */
html body .avx-cz .avx-page.is-active{ color:var(--avxf-purple-active) !important; }
html body .avx-cz .avx-page.is-active strong{ font-weight:700 !important; }

/* "…" separador de páginas */
html body .avx-cz .avx-page-dots{
  color:var(--avxf-purple) !important;
  font-size:16px !important;
  line-height:1 !important;
  user-select:none !important;
}

/* ── Flechas circulares ── */
html body .avx-cz .avx-arrow{
  flex:0 0 auto !important;
  width:34px !important;
  height:34px !important;
  border-radius:50% !important;
  border:1.5px solid var(--avxf-purple) !important;
  background:transparent !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  cursor:pointer !important;
  padding:0 !important;
  transition:border-color .12s ease, background .12s ease !important;
}
html body .avx-cz .avx-arrow svg{ width:14px !important; height:14px !important; display:block !important; }
html body .avx-cz .avx-arrow svg path{ stroke:var(--avxf-purple) !important; }

html body .avx-cz .avx-arrow:hover:not(:disabled){ background:var(--avxf-purple) !important; }
html body .avx-cz .avx-arrow:hover:not(:disabled) svg path{ stroke:#fff !important; }

html body .avx-cz .avx-arrow:disabled{
  border-color:var(--avxf-disabled) !important;
  cursor:default !important;
}
html body .avx-cz .avx-arrow:disabled svg path{ stroke:var(--avxf-disabled) !important; }

html body .avx-cz .avx-arrow:focus-visible{
  outline:2px solid var(--avxf-purple-active) !important;
  outline-offset:2px !important;
}

/* Estado "cargando" del grid mientras llega el AJAX */
html body .avx-cz .avx-archive-grid.is-loading{ opacity:.5 !important; transition:opacity .15s ease !important; }
html body .avx-cz .avx-archive-empty{
  font-family:"Inter", sans-serif !important;
  font-size:16px !important;
  color:var(--avxf-purple) !important;
  padding:24px 0 !important;
}

/* ── Estado vacío de BÚSQUEDA (v1.5.0) ──
   Solo tipografía y separación de los textos. El botón NO lleva CSS aquí: reusa
   la clase .avx-enroll de la card (frontend.css), que ya está scopeada bajo
   .avx-cz y aplica sola al estar el bloque dentro del mismo contenedor. */
html body .avx-cz .avx-search-empty{
  font-family:"Inter", sans-serif !important;
  padding:32px 0 !important;
  max-width:1440px !important;
  margin:0 auto !important;
}
html body .avx-cz .avx-search-empty p{
  margin:0 0 8px 0 !important;
  font-size:16px !important;
  line-height:1.5 !important;
  color:#3d3d3d !important;
}
html body .avx-cz .avx-search-empty .avx-search-empty__cta-label{
  margin:24px 0 12px 0 !important;
  font-weight:600 !important;
}
/* El .avx-enroll de la card es display:flex a ancho completo; aquí se limita para
   que no ocupe toda la fila fuera del contexto de una card. */
html body .avx-cz .avx-search-empty .avx-enroll{
  display:inline-flex !important;
  width:auto !important;
}

/* ── Responsive (réplica de los media queries del HTML) ── */
@media (max-width:640px){
  html body .avx-cz .avx-pagination{
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:16px !important;
  }
}
@media (max-width:480px){
  html body .avx-cz .avx-filter__body{ min-width:min(360px, calc(100vw - 40px)) !important; }
}