/* ============================================================
   Buscador — estilos PROPIOS (cards .bcard + sidebar de filtros),
   aislados del cascade generico del tema. Match al mockup de mejora/.
   Tokens: primary #0065CA · celeste #CCE0F4/#0051A2 · verde #ABDA4F
           gris contenedor #EEF1F1 · texto #29323d / #3f4652 / #5b6472
   Fuentes: Poppins (el tema usa Merriweather serif en <p>, se fuerza aca).
   ============================================================ */

/* La grilla es flex; asegurar alturas iguales por fila */
.grid-cards-filter {
    align-items: stretch;
}

/* ---- Card (enlace: toda la tarjeta es clickeable) ----
   Ancho fluido por defecto: la card llena su columna/slide contenedor
   (grids de 3 col, sliders, tabs). El 2-col del buscador se scope abajo. */
.bcard {
    display: flex;
    flex-direction: column;
    width: 100%;
    background: #fff;
    border: 1px solid #eef0f3;
    border-radius: 12px;
    box-shadow: 0 0 20px rgba(51, 51, 51, .10);
    padding: 16px;
    text-decoration: none;
    color: inherit;
    transition: box-shadow .2s ease, transform .2s ease;
}
.bcard:hover,
.bcard:focus {
    box-shadow: 0 12px 30px rgba(51, 51, 51, .16);
    transform: translateY(-2px);
    color: inherit;
    text-decoration: none;
}
/* 2 columnas SOLO dentro de la grilla del buscador */
.grid-cards-filter .bcard {
    flex: 0 0 calc(50% - 12px);
    max-width: calc(50% - 12px);
}
@media (max-width: 768px) {
    .grid-cards-filter .bcard {
        flex-basis: 100%;
        max-width: 100%;
    }
}

/* hero del single de recurso: encuadrar la imagen completa, venga del tamano que venga */
.section-single .figure-fit img {
    width: 100%;
    height: auto;
    object-fit: contain;
    border-radius: 8px;
}

/* ---- Imagen + badge ---- */
.bcard__media {
    position: relative;
    height: 176px;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 14px;
}
.bcard__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* Encuadre (recursos/productos): mostrar la imagen COMPLETA sin recortar
   (suelen ser laminas/portadas verticales que el crop 380x160 cortaba, igual
   que el hero del single-resource). Fondo suave para el letterbox.
   Noticias/eventos siguen en cover porque son fotos y el recorte les queda bien. */
.bcard__media--fit {
    background: #f2f4f6;
}
.bcard__media--fit img {
    object-fit: contain;
}
/* El posicionamiento vive en el contenedor: asi "Destacado" y "Nuevo" se apilan
   en vez de pisarse cuando un producto tiene los dos (FED-100 #5). */
.bcard__badges {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}
.bcard__badge {
    background: #ABDA4F;
    color: #23350a;
    font-family: 'Poppins SemiBold', sans-serif;
    font-size: .78rem;
    line-height: 1;
    padding: .42rem .8rem;
    border-radius: 999px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
    white-space: nowrap;
}
/* Destacado: naranjo Aptus ($naranjo #E48B20 de assets/sass/components/_pilars.scss).
   Texto cafe oscuro para contraste AA (5.6:1); con blanco quedaba en 2.6:1. */
.bcard__badge--destacado {
    background: #E48B20;
    color: #3A2408;
}

/* ---- Cuerpo ---- */
.bcard__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}
.bcard__chip {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    max-width: 100%;
    background: #EEF1F1;
    color: #3f4652;
    font-family: 'Poppins Regular', sans-serif;
    font-size: .8125rem;
    line-height: 1;
    padding: .42rem .75rem;
    border-radius: 999px;
    margin-bottom: .9rem;
}
.bcard__chip i,
.bcard__chip svg {
    color: #3f4652;
    font-size: .95em;
    flex: 0 0 auto;
}
.bcard__chip > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bcard__title {
    font-family: 'Poppins SemiBold', sans-serif;
    font-size: 1.0625rem;
    line-height: 1.35;
    color: #1f2a37;
    margin: 0 0 .5rem;
}
.bcard__desc {
    font-family: 'Poppins Regular', sans-serif;
    font-size: .875rem;
    line-height: 1.55;
    color: #5b6472;
    margin: 0 0 1rem;
}
.bcard__desc p {
    margin: 0;
    font: inherit;
    color: inherit;
    line-height: inherit;
}
.bcard__more {
    margin-top: auto;
    align-self: flex-end;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: #0065CA;
    font-family: 'Poppins SemiBold', sans-serif;
    font-size: .875rem;
    padding-top: .25rem;
    transition: gap .2s ease;
}
.bcard:hover .bcard__more {
    gap: .6rem;
}

/* ============================================================
   SIDEBAR DE FILTROS (scoped al buscador)
   ============================================================ */

/* titulo "Filtros" */
.section-tabs-search-global .filter .bfilter-title {
    font-family: 'Poppins SemiBold', sans-serif;
    font-size: 1rem;
    color: #29323d;
    margin: 0 0 14px;
}

/* ocultar el heading "Filtra por" (el mockup no lo tiene) */
.section-tabs-search-global .filtered-by > h3.h5 {
    display: none;
}

/* --- caja "Filtros aplicados" --- */
.section-tabs-search-global .box-filter.applied.is-empty {
    display: none;
}
.section-tabs-search-global .applied-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: 10px;
}
.section-tabs-search-global .applied-head h3 {
    font-family: 'Poppins SemiBold', sans-serif !important;
    font-size: .9rem !important;
    color: #29323d !important;
    margin: 0 !important;
}
.section-tabs-search-global .link-clear {
    background: none;
    border: 0;
    padding: 0;
    color: #0065CA;
    font-family: 'Poppins Medium', 'Poppins Regular', sans-serif;
    font-size: .8125rem;
    cursor: pointer;
}
.section-tabs-search-global .link-clear:hover {
    text-decoration: underline;
}

/* chips celestes (los <span> los genera main.js; click = quitar) */
.section-tabs-search-global .checks-applied {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.section-tabs-search-global .checks-applied > span {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    background: #CCE0F4;
    color: #0051A2;
    font-family: 'Poppins Medium', 'Poppins Regular', sans-serif;
    font-size: .8125rem;
    line-height: 1.2;
    padding: .4rem .75rem;
    border-radius: 999px;
    cursor: pointer;
}
.section-tabs-search-global .checks-applied > span::after {
    content: "\f00d";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: .8em;
}
.section-tabs-search-global .checks-applied > span.not-found {
    display: none;
}

/* --- grupos del acordeon: tarjetas blancas --- */
.section-tabs-search-global .accordion--filter .accordion-item {
    background: #fff;
    border: 0;
    border-radius: 12px;
    margin-bottom: 10px;
    overflow: hidden;
}
.section-tabs-search-global .accordion--filter .accordion-button {
    display: flex;
    align-items: center;
    width: 100%;
    gap: .4rem;
    background: #fff;
    border: 0;
    box-shadow: none;
    color: #29323d;
    font-family: 'Poppins SemiBold', 'Poppins Medium', sans-serif;
    font-size: .9375rem;
    text-align: left;
    padding: 14px 20px;
}
/* divisor sutil bajo el header cuando esta expandido */
.section-tabs-search-global .accordion--filter .accordion-button:not(.collapsed) {
    color: #29323d;
    background: #fff;
    border-bottom: 1px solid #EDF0F3;
}
/* DOBLE chevron AZUL propio (SVG). OJO: el theme define el icono del grupo con
   MAS especificidad y con glyph FA via content + position:absolute; right:0
   (.filtered-by ... .accordion-item button:after). Si solo cambio background-image
   se ve el glyph FA ENCIMA del SVG (parecia una X sobre el chevron) y pegado al
   borde. Por eso aca subo la especificidad y anulo content/position del theme. */
.section-tabs-search-global .filter .box-filter.filtered-by .accordion--filter .accordion-item button.accordion-button::after {
    content: "" !important;
    font-size: 0 !important;
    position: static !important;
    right: auto !important;
    width: 16px !important;
    height: 16px !important;
    flex: 0 0 16px;
    margin-left: auto !important;
    margin-right: 4px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 14 14'%3E%3Cpath fill='none' stroke='%230065CA' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M3.5 3.5 7 6.5 10.5 3.5 M3.5 7.5 7 10.5 10.5 7.5'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 16px 16px !important;
    transform: rotate(0deg);
    transition: transform .2s ease;
}
/* abierto: giro a doble-chevron-arriba (y mantengo content vacio) */
.section-tabs-search-global .filter .box-filter.filtered-by .accordion--filter .accordion-item button.accordion-button:not(.collapsed)::after,
.section-tabs-search-global .filter .box-filter.filtered-by .accordion--filter .accordion-item button.accordion-button[aria-expanded="true"]::after {
    content: "" !important;
    transform: rotate(180deg);
}
.section-tabs-search-global .accordion--filter .group-count {
    color: #5b6472;
    font-family: 'Poppins Regular', sans-serif;
    font-size: .8125rem;
}
.section-tabs-search-global .accordion--filter .accordion-item > .accordion-collapse {
    padding: 6px 16px 14px;
}

/* filas de opciones, con aire */
.section-tabs-search-global .accordion--filter .check-group .form-check {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .5rem;
    padding: 9px 0;
    margin: 0;
}
.section-tabs-search-global .accordion--filter .form-check label {
    display: flex;
    align-items: center;
    gap: .65rem;
    margin: 0;
    cursor: pointer;
}
.section-tabs-search-global .accordion--filter .label-text {
    font-family: 'Poppins Regular', sans-serif;
    font-size: .875rem;
    color: #3f4652;
    line-height: 1.4;
}
/* "+" / "−" del sub-nivel: AZUL (el tema lo pinta gris) */
.section-tabs-search-global .accordion--filter .button-collapse {
    cursor: pointer;
    flex: 0 0 auto;
    line-height: 1;
}
.section-tabs-search-global .accordion--filter .button-collapse::after {
    color: #0065CA !important;
    font-size: 1.05rem !important;
}

/* radios / checkboxes custom, mas grandes y livianos */
.section-tabs-search-global .accordion--filter input[type="radio"],
.section-tabs-search-global .accordion--filter input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    margin: 0;
    border: 1.5px solid #C1C9D2;
    background: #fff;
    cursor: pointer;
    position: relative;
}
.section-tabs-search-global .accordion--filter input[type="radio"] {
    border-radius: 50%;
}
.section-tabs-search-global .accordion--filter input[type="checkbox"] {
    border-radius: 6px;
}
.section-tabs-search-global .accordion--filter input[type="radio"]:checked {
    border-color: #0065CA;
    background: #0065CA;
    box-shadow: inset 0 0 0 4px #fff;
}
.section-tabs-search-global .accordion--filter input[type="checkbox"]:checked {
    border-color: #0065CA;
    background: #0065CA url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5 6.5 11.5 12.5 4.5'/%3E%3C/svg%3E") center/12px 12px no-repeat;
}

/* --- desktop: contenedor gris, area scrolleable con fade y boton fijo --- */
@media (min-width: 992px) {
    .section-tabs-search-global .filter {
        background: #EEF1F1;
        border-radius: 14px;
        padding: 18px 16px;
    }
    .section-tabs-search-global .filter .box-filter {
        background: #fff;
        border-radius: 12px;
        box-shadow: none;
        padding: 14px 16px;
        margin-bottom: 12px;
    }
    .section-tabs-search-global .filter .box-filter.filtered-by {
        background: transparent;
        padding: 0;
        margin-bottom: 0;
        position: relative;
    }

    /* area de grupos scrolleable con scrollbar fino */
    .section-tabs-search-global .filter .accordion--filter {
        max-height: 540px;
        overflow-y: auto;
        padding-right: 8px;
        scrollbar-width: thin;
        scrollbar-color: #9AA4B2 transparent;
    }
    .section-tabs-search-global .filter .accordion--filter::-webkit-scrollbar {
        width: 6px;
    }
    .section-tabs-search-global .filter .accordion--filter::-webkit-scrollbar-thumb {
        background: #9AA4B2;
        border-radius: 999px;
    }
    .section-tabs-search-global .filter .accordion--filter::-webkit-scrollbar-track {
        background: transparent;
    }
    /* fade-out al fondo del area (los grupos se desvanecen antes del boton) */
    .section-tabs-search-global .filter .box-filter.filtered-by::after {
        content: "";
        position: absolute;
        left: 0;
        right: 8px;
        bottom: 0;
        height: 72px;
        background: linear-gradient(180deg, rgba(238, 241, 241, 0), #EEF1F1 82%);
        pointer-events: none;
    }

    /* boton de accion: solo "Aplicar filtros" full-width azul, fijo bajo el area */
    .section-tabs-search-global .filter .buttons-filter.d-lg-flex {
        flex-direction: column;
        margin-top: 10px;
    }
    .section-tabs-search-global .filter .buttons-filter.d-lg-flex .clean-filter {
        display: none;
    }
    .section-tabs-search-global .filter .buttons-filter.d-lg-flex .hideFilter {
        width: 100%;
        margin: 0 !important;
        background: #0065CA;
        border: 0;
        border-radius: 999px;
        color: #fff;
        font-family: 'Poppins SemiBold', sans-serif;
        font-size: .9375rem;
        padding: .85rem 1rem;
    }
    .section-tabs-search-global .filter .buttons-filter.d-lg-flex .hideFilter:hover {
        background: #0051A2;
    }
    .section-tabs-search-global .filter .buttons-filter.d-lg-flex .hideFilter .icon i {
        display: none;
    }
}

/* ============================================================
   BARRA DE RESULTADOS: conteo + "Ordena por" (match mockup)
   ============================================================ */
.section-tabs-search-global .results-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 4px 0 18px;
}
.section-tabs-search-global .results-count {
    font-family: 'Poppins Regular', sans-serif;
    font-size: .9375rem;
    color: #3f4652;
    margin: 0;
}
.section-tabs-search-global .bsort {
    display: flex;
    align-items: center;
    gap: .6rem;
}
.section-tabs-search-global .bsort__label {
    font-family: 'Poppins Regular', sans-serif;
    font-size: .8125rem;
    color: #3f4652;
    margin: 0;
    white-space: nowrap;
}
.section-tabs-search-global .bsort__select {
    -webkit-appearance: none;
    appearance: none;
    background: #fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%233f4652' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M1.5 1.75 6 6.25l4.5-4.5'/%3E%3C/svg%3E") right .9rem center/11px no-repeat;
    border: 1px solid #D5DCE4;
    border-radius: 999px;
    padding: .55rem 2.4rem .55rem 1.1rem;
    font-family: 'Poppins Regular', sans-serif;
    font-size: .875rem;
    color: #29323d;
    cursor: pointer;
}
.section-tabs-search-global .bsort__btn {
    background: #0065CA;
    color: #fff;
    border: 0;
    border-radius: 999px;
    padding: .58rem 1.5rem;
    font-family: 'Poppins SemiBold', sans-serif;
    font-size: .875rem;
    cursor: pointer;
}
.section-tabs-search-global .bsort__btn:hover {
    background: #0051A2;
}

/* ============================================================
   PAGINACION (← Anterior · ① 2 3 … 10 · Siguiente →)
   ============================================================ */
.section-tabs-search-global .parent-pagination {
    margin-top: 28px;
}
.section-tabs-search-global .pagination {
    justify-content: center;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
/* FED-100 #1: "Siguiente" se veia cortado ("uiente"). El tema hace
   .page-item { border-radius:50%; overflow:hidden } y .page-link { width:40px }
   (circulo de un digito), asi que el texto largo desbordaba y el <li> lo recortaba.
   Aca el item deja de cortar y prev/next miden segun su contenido.
   Se incluye .parent-pagination en el selector para ganar por especificidad y no
   depender del orden de encolado de las hojas. */
.section-tabs-search-global .parent-pagination .pagination .page-item {
    border-radius: 999px;
    overflow: visible;
}
.section-tabs-search-global .pagination .page-item .page-link {
    border: 0;
    background: none;
    box-shadow: none;
    color: #3f4652;
    font-family: 'Poppins Regular', sans-serif;
    font-size: .9rem;
    border-radius: 999px;
    min-width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    gap: .45rem;
}
.section-tabs-search-global .pagination .page-item .page-link:hover {
    color: #0065CA;
    background: #EEF1F1;
}
/* pagina actual: circulo con borde azul */
.section-tabs-search-global .pagination .page-item.active .page-link {
    border: 1.5px solid #0065CA;
    color: #0065CA;
    background: #fff;
    font-family: 'Poppins SemiBold', sans-serif;
}
.section-tabs-search-global .parent-pagination .pagination .page-item .page-link.prev,
.section-tabs-search-global .parent-pagination .pagination .page-item .page-link.next {
    font-family: 'Poppins Medium', 'Poppins Regular', sans-serif;
    color: #29323d;
    /* pages.css fija width:40px pensando en un digito: aca manda el contenido */
    width: auto;
    min-width: 0;
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 0 14px;
}
.section-tabs-search-global .pagination .page-link.prev:hover,
.section-tabs-search-global .pagination .page-link.next:hover {
    background: none;
    color: #0065CA;
}
.section-tabs-search-global .pagination .page-link.dots {
    pointer-events: none;
    min-width: 24px;
}

/* ---- variantes de card: fecha (noticias) y meta (eventos) ---- */
.bcard__date {
    font-family: 'Poppins Regular', sans-serif;
    font-size: .8125rem;
    color: #5b6472;
    margin-bottom: .5rem;
    display: block;
}
.bcard__meta {
    list-style: none;
    padding: 0;
    margin: 0 0 .6rem;
    display: flex;
    flex-direction: column;
    gap: .3rem;
}
.bcard__meta li {
    font-family: 'Poppins Regular', sans-serif;
    font-size: .8125rem;
    color: #5b6472;
    display: flex;
    align-items: center;
    gap: .4rem;
}
.bcard__meta li i,
.bcard__meta li svg {
    color: #0065CA;
    font-size: .9em;
}
.bcard__meta li strong {
    font-family: 'Poppins Medium', sans-serif;
    color: #3f4652;
    font-weight: 500;
}

/* ---- boton flotante de contacto (sitio completo) ---- */
.float-contact .buttons .float-link {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
}
.float-contact .buttons .float-link i {
    font-size: 1.15em;
    flex: 0 0 auto;
}
/* WhatsApp con su verde de marca */
.float-contact .buttons .float-link--wsp i {
    color: #25D366;
}

/* ---- auto-aplicar en desktop: el boton Aplicar queda solo en movil ---- */
@media (min-width: 992px) {
    .section-tabs-search-global .filter .buttons-filter.d-lg-flex {
        display: none !important;
    }
}

/* ============================================================
   Banner del buscador (.bbanner)
   El editor sube UNA imagen de fondo completa (sin texto) y el
   theme superpone titulo/bajada/boton encima. Reemplaza al
   banner-text-mask partido, solo dentro del buscador.
   ============================================================ */
.bbanner {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 220px;
    margin: 2.25rem 0;
    border-radius: 8px;
    overflow: hidden;
    background-color: #0065ca; /* fallback si no hay imagen */
}

/* imagen de fondo a sangre completa */
.bbanner__bg {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 0;
    z-index: 0;
}
.bbanner__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* velo sutil a la izquierda para que el texto sea legible
   sin arruinar el diseño de la imagen subida */
.bbanner::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, rgba(0, 40, 81, 0.35) 0%, rgba(0, 40, 81, 0.12) 45%, rgba(0, 40, 81, 0) 70%);
    pointer-events: none;
}

/* bloque de texto superpuesto */
.bbanner__content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    max-width: 60%;
    padding: 2rem 2.25rem;
    color: #fff;
    font-family: 'Poppins', sans-serif;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}
.bbanner__title {
    color: #fff;
    font-weight: 700;
    margin-bottom: 0.75rem;
    font-family: 'Poppins', sans-serif;
}
.bbanner__text {
    color: #fff;
    margin-bottom: 1.25rem;
    font-family: 'Poppins', sans-serif;
}
.bbanner__btn {
    margin-top: 0.25rem;
}

@media (max-width: 991.98px) {
    .bbanner__content {
        max-width: 75%;
    }
}
@media (max-width: 767.98px) {
    .bbanner {
        min-height: 180px;
    }
    .bbanner__content {
        max-width: 100%;
        padding: 1.25rem;
    }
}

/* ============================================================
   Menos aire arriba + banner superior (hero) del buscador.
   La clase .section pone 64px de padding vertical; en el buscador
   lo reducimos porque ese espacio ahora lo aprovecha el banner_top.
   ============================================================ */
.section-tabs-search-global {
    padding-top: 28px;
}
/* el banner superior va bajo el titulo y sobre las pestanas */
.section-tabs-search-global .banner-top-wrap {
    margin-bottom: 1.5rem;
}
.section-tabs-search-global .banner-top-wrap .bbanner {
    margin-top: 0.5rem;
    margin-bottom: 0;
    min-height: 200px;
}
@media (max-width: 767.98px) {
    .section-tabs-search-global {
        padding-top: 18px;
    }
}