/**
 * Barra de filtros expuestos de las vistas-buscador (Programas academicos y Clubes).
 *
 * Todo lo de aqui cuelga de `.views-exposed-form` y de Select2, nunca del id de una
 * vista, para que sirva a las dos. Lo propio de cada buscador --el acolchado de la
 * seccion y el reparto de la fila-- vive en css/start_to_way.css y css/clubes.css,
 * que dependen de esta libreria y por tanto cargan despues.
 */

.view-filters {
    margin-top: 0;
    margin-bottom: 32px;
    color: var(--secondary);
}

.views-exposed-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

/* Buscador: fila propia a ancho completo, siempre, en los tres breakpoints. */
.views-exposed-form .form-item-combine {
    order: -1;
    flex: 1 1 100%;
}

/* Resto de filtros: ancho natural (pastilla del tamaño de su texto), no estirados. */
.views-exposed-form .form-item:not(.form-item-combine) {
    flex: 0 0 auto;
}

.views-exposed-form .form-actions {
    flex: 0 0 auto;
    display: flex;
    margin: 0;
}

/* Bandera opcional: `.view-filters--inline` en el wrapper hace que el buscador
   comparta la misma fila con el resto de pastillas en vez de ir en su propia
   fila a ancho completo (comportamiento por defecto arriba). Se añade la clase
   solo en la plantilla de la vista que lo necesita (p.ej. views-view--services.html.twig)
   para no afectar a los buscadores (Programas academicos, Clubes) que sí deben
   verse en dos filas. */
.view-filters--inline .views-exposed-form .form-item:not(.form-item-combine) {
    order: 0;
}


.view-filters--inline .views-exposed-form .form-item-combine {
    order: 1;
    flex: 1 1 320px;
    padding-left: 24px;
}

.view-filters--inline .views-exposed-form .form-item-combine::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 32px;
    background-color: currentColor;
    opacity: 0.3;
}

.view-filters--inline .views-exposed-form .form-actions {
    order: 2;
    margin-left: 16px;
    gap: 16px;
}

.view-filters--inline .views-exposed-form [id^="edit-submit"] {
    position: static;
    width: auto;
    height: 48px;
    border-radius: 61px;
    background-color: var(--secondary);
    color: var(--white);
    padding: 0 1.75rem;
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    white-space: nowrap;
}

:where(html[data-theme="dark"]) .view-filters--inline .views-exposed-form [id^="edit-submit"] {
    background-color: var(--white);
    color: var(--secondary);
}

/* El buscador es el ancla del submit, que va posicionado sobre su lupa. */
.views-exposed-form {
    position: relative;
}

.views-exposed-form label {
    display: block;
    margin-bottom: 4px;
}

/* El submit es la lupa de la píldora. Los desplegables se auto-envían solos,
   pero el campo de texto no, así que este botón es la única forma de buscar
   además de Enter: se posiciona sobre el extremo derecho del buscador. */
/* Se posiciona el botón, no su contenedor: .form-actions también envuelve a la
   X de limpiar, que va en la fila de los chips y no sobre el buscador. */
.views-exposed-form [id^="edit-submit"] {
    position: absolute;
    top: 0;
    right: 0;
    width: 3.75rem;
    height: 56px;
    border: 0;
    border-radius: 50%;
    background-color: transparent;
    font-size: 0;
    padding: 0;
    cursor: pointer;
    z-index: 1;
}

.views-exposed-form input[type="text"] {
    width: 100%;
    height: 56px;
    border: 1px solid var(--secondary);
    border-radius: 61px;
    background-color: transparent;
    color: var(--secondary);
    padding: 0 3.5rem 0 1.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.8125rem;
    font-weight: 600;
}

.views-exposed-form input[type="text"]::placeholder {
    color: var(--secondary);
    opacity: 0.6;
}

.views-exposed-form .form-item-combine {
    position: relative;
}

.views-exposed-form .form-item-combine::after {
    content: '';
    position: absolute;
    z-index: 0;
    right: 1.75rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1.25rem;
    height: 1.25rem;
    background-color: var(--secondary);
    mask-image: url("data:image/svg+xml,%3Csvg width='48' height='48' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M34 21.551C34 15.0588 28.6274 9.7959 22 9.7959C15.3726 9.7959 9.99998 15.0588 9.99998 21.551C9.99998 28.0431 15.3726 33.3061 22 33.3061C25.1591 33.3061 28.0309 32.1078 30.1738 30.153C30.3207 29.9823 30.481 29.8187 30.6552 29.6651C30.6953 29.6298 30.7363 29.5957 30.7773 29.5618C32.7751 27.4622 34 24.6476 34 21.551ZM43.9999 21.551C43.9999 25.8106 42.7375 29.781 40.5605 33.1243L46.7167 39.8255C48.5638 41.8362 48.3971 44.9334 46.3447 46.7429C44.2921 48.5523 41.1304 48.389 39.2831 46.3784L33.4072 39.9824C30.081 41.9621 26.1764 43.102 22 43.102C9.84972 43.102 0 33.4533 0 21.551C0 9.64871 9.84972 0 22 0C34.1502 0 43.9999 9.64871 43.9999 21.551Z' fill='currentColor'/%3E%3C/svg%3E");
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    pointer-events: none;
}

/* Botón de reset ("X"): BEF solo lo muestra si hay un filtro activo, salvo que
   reset_button_always_show esté activo (lo está en views.view.start-to-way.yml) — por eso
   se puede dar por hecho que existe siempre en el DOM, no solo tras filtrar. */
/* Un <input> es un elemento reemplazado: ::before/::after nunca se pintan sobre él
   (limitación de CSS, no del esquema de color) — la X va como background-image. */
.views-exposed-form [id^="edit-reset"] {
    flex: 0 0 auto;
    width: 47px;
    height: 47px;
    border-radius: 50%;
    border: 1px solid var(--secondary);
    background-color: transparent;
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 6L18 18M18 6L6 18' stroke='%23000000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 14px;
    font-size: 0;
    padding: 0;
    cursor: pointer;
}

/* view-filters-reset.js oculta el boton de reset ("X") cuando no hay ningun
   filtro activo. reset_button_always_show lo mantiene siempre en el DOM, por
   eso la visibilidad se resuelve con esta clase en vez de con Views/BEF. */
.views-exposed-form [id^="edit-reset"].usfq-reset-hidden {
    display: none;
}

/* select2-init.js solo pone width:100% cuando detecta clases col-* de Bootstrap en el
   ancestro; aquí el layout es flex propio con pastillas de ancho natural, así que se
   fuerza el ancho de Select2 al de su propia columna en vez de al que calcula por texto. */
.select2-container {
    width: auto !important;
    max-width: 100% !important;
}

.select2-container--default .select2-selection--single {
    height: 48px;
    display: flex;
    align-items: center;
    border: 1px solid currentColor;
    border-radius: 3.063rem;
    background-color: transparent;
    padding: 0 4rem 0 1.5rem;
    font-family: var(--headings-font-family);
    font-weight: 500;
    font-size: 12px;
    leading-trim: NONE;
    line-height: var(--lh-eyebrow);
    letter-spacing: 25%;
    text-transform: uppercase;
}
.select2-container--open .select2-dropdown--below,
.select2-container--open .select2-dropdown--above {
    padding-right: 2px;
    padding-top: 14px;
    padding-bottom: 14px;
}
.select2-container--default.select2-container--open.select2-container--below .select2-selection--single,
.select2-container--default.select2-container--open.select2-container--above .select2-selection--single {
    border-radius: 3.063rem!important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    padding: 0;
    color: var(--secondary);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    white-space: nowrap;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100%;
    top: 0;
    right: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    display: none;
}

.select2-container--default .select2-selection--single .select2-selection__arrow::after {
    content: '';
    display: block;
    width: 1rem;
    height: 1rem;
    background-color: currentColor;
    mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.27271 22.2159L16.7273 11.6705L7.27271 1.125' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    transform: rotate(90deg);
    transition: transform 0.2s ease;
}

.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow::after {
    transform: rotate(-90deg);
}

.select2-dropdown {
    border: 1px solid currentColor !important;
    border-radius: 1.5rem !important;
    background-color: var(--white);
    margin-top: 0.5rem;
    overflow: hidden;
}

.select2-results__option {
    padding: 0.4rem 1.5rem;
}

/* En claro el panel es blanco, asi que un velo de blanco al 20% (--light-opacity-20,
   que es lo que vale en oscuro sobre el panel negro) dejaba el hover invisible. Se usa
   la misma pastilla negra que form_fields.css da a este mismo desplegable en los
   formularios, para que el estado se vea igual en todo el sitio. */
.select2-results__option--highlighted.select2-results__option--selectable {
    background-color: var(--secondary) !important;
    color: var(--white) !important;
}

:where(html[data-theme="dark"]) .view-filters {
    color: var(--white);
}

:where(html[data-theme="dark"]) .views-exposed-form input[type="text"] {
    border-color: var(--white);
    color: var(--white);
    font-family: var(--headings-font-family);
    font-weight: 500;
    font-size: 12px;
}

:where(html[data-theme="dark"]) .views-exposed-form input[type="text"]::placeholder {
    color: var(--white)!important;
    /* opacity: 0.6; */
    font-family: var(--headings-font-family);
    font-weight: 500;
    font-size: 12px;
}

:where(html[data-theme="dark"]) .views-exposed-form .form-item-combine::after {
    background-color: var(--white);
}

:where(html[data-theme="dark"]) .views-exposed-form [id^="edit-reset"] {
    border-color: var(--white);
    background-color: var(--white);
    /* background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 6L18 18M18 6L6 18' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); */
}

/* La pastilla es transparente tambien en oscuro, asi que su rotulo va en blanco:
   en negro se perdia sobre el fondo. Pasaba en los dos buscadores. */
:where(html[data-theme="dark"]) .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--white) !important;
}

:where(html[data-theme="dark"]) .select2-dropdown {
    background-color: var(--secondary) !important;
    border-color: var(--white) !important;
    color: var(--white) !important;
}

:where(html[data-theme="dark"]) .select2-results__option {
    color: var(--white) !important;
}

:where(html[data-theme="dark"]) .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: var(--light-opacity-20) !important;
    color: var(--white) !important;
}

:where(html[data-theme="dark"]) .select2-results__option--selected,
:where(html[data-theme="dark"]) .select2-results__option--selected[aria-selected="true"] {
    background-color: var(--white) !important;
    color: var(--secondary) !important;
}

/* MOBILE: cada filtro (los desplegables Select2, no el buscador, que ya iba a
   ancho completo) en su propia fila, uno debajo del otro, en vez de la pastilla
   de ancho natural que usan tablet/desktop. */
@media (max-width: 767px) {
    .views-exposed-form .form-item:not(.form-item-combine) {
        flex: 1 1 100%;
        width: 100%;
    }

    .select2-container {
        width: 100% !important;
    }
}

@media (max-width: 767px) {
    .view-filters--inline .views-exposed-form .form-item-combine {
        padding-left: 0;
    }

    .view-filters--inline .views-exposed-form .form-item-combine::before {
        display: none;
    }

    .view-filters--inline .views-exposed-form .form-actions {
        flex: 1 1 100%;
        margin-left: 0;
    }

    .view-filters--inline .views-exposed-form [id^="edit-submit"] {
        width: 100%;
    }
}

/*Tablet*/
@media (min-width: 768px) and (max-width: 1024px) {
    .views-exposed-form input[type="text"] {
        height: 48px;
        font-family: var(--headings-font-family);
        font-weight: 500;
        font-size: 12px;
    }
}

/*DESKTOP*/
@media (min-width: 1025px) {
    .views-exposed-form input[type="text"] {
        max-width: none;
        font-family: var(--headings-font-family);
        font-weight: 500;
        font-size: 12px;
    }
}

/* Boton "Cargar mas" del scroll infinito, identico en los dos buscadores. Va con
   los dos raices y no suelto porque en las fichas de programa conviven otras
   vistas paginadas que no lo quieren. */
.view-start-to-way .js-pager__items.pager,
.clubes-buscador .js-pager__items.pager {
    padding: 2rem 0;
    display: flex;
    justify-content: center;
    list-style: none;

    .pager__item {
        a.button {
            padding: 1.25rem 1.5rem;
            text-decoration: none;
            transition: all 0.3s ease !important;
            font-family: var(--ff-eyebrow) !important;
            font-weight: 500 !important;
            font-size: var(--fs-eyebrow) !important;
            line-height: var(--lh-eyebrow) !important;
            letter-spacing: 0.25em !important;
            position: relative;
            text-transform: uppercase !important;

            background-color: var(--dark) !important;
            color: var(--white) !important;
            border-radius: 61px !important;
            border: 2px solid var(--white) !important;

            &:hover:not(:disabled):not([aria-disabled="true"]) {
                background-color: var(--white) !important;
                color: var(--dark) !important;
                border-color: var(--dark) !important;
            }

            &:focus:not(:disabled):not([aria-disabled="true"]),
            &:focus-visible:not(:disabled):not([aria-disabled="true"]) {
                background-color: var(--dark) !important;
                color: var(--white) !important;
                border: 2px solid var(--white) !important;
                box-shadow: 0 0 0 4px rgba(225, 27, 34, 0.5) !important;
            }
        }
    }
}