/* ===========================================================================
   Section card search — listado buscable

   El patrón del Figma "FASE 2 - Boletines" (section-card-search): titular,
   fila de filtros con desplegable y buscador, rejilla de tarjetas y pie con
   paginador. Lo comparten la vista del listado y la franja de listado que
   cierra la ficha, y sirve para cualquier otro listado con la misma forma.

   Las tarjetas las pone quien lo usa: el organismo solo coloca.
   =========================================================================== */
.section-card-search__title {
    margin-bottom: 2.5rem;
}

/* ------------------------------------------------------ Fila de filtros ---
   El organismo no sabe de qué vista viene el formulario: engancha por la forma
   de los campos (`:has()`), no por los identificadores de un listado concreto.
   Así vale igual para el formulario expuesto de una vista que para un
   formulario propio que apunte al listado real. */
.section-card-search__filters form {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
    margin-bottom: 3rem;
    position: relative;
}

.section-card-search__filters .form-item {
    margin: 0;
}

.section-card-search__filters label {
    /* La etiqueta la lleva el propio placeholder de la píldora. */
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.section-card-search__filters select,
.section-card-search__filters input[type="text"],
.section-card-search__filters input[type="search"] {
    width: 100%;
    height: 52px;
    border: 1px solid var(--secondary);
    border-radius: 61px;
    background-color: transparent;
    color: var(--secondary);
    padding: 0 3.25rem 0 1.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.8125rem;
    font-weight: var(--fw-subtitle);
    font-family: var(--headings-font-family);
}

.section-card-search__filters input::placeholder {
    color: var(--secondary);
    opacity: 0.6;
    text-transform: uppercase;
}

/* El desplegable nativo trae su propia flecha del sistema; se sustituye por la
   chevron del diseño. */
.section-card-search__filters select {
    appearance: none;
    -webkit-appearance: none;
    text-align: center;
    text-align-last: center;
    padding-left: 1.25rem;
    padding-right: 2.75rem;
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='10' viewBox='0 0 16 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L8 8L15 1' stroke='%23000000' stroke-width='2'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1.75rem center;
}

/* Un <input> es un elemento reemplazado: ::after nunca se pinta sobre él, así
   que la lupa cuelga del contenedor del campo. */
.section-card-search__filters .form-item:has(input[type="text"]),
.section-card-search__filters .form-item:has(input[type="search"]) {
    position: relative;
}

/* La lupa decorativa solo cuando el campo no trae su propio boton: si lo trae,
   la dibuja el boton y pulsarla envia de verdad. */
.section-card-search__filters .form-item:has(input[type="text"]):not(:has(button))::after,
.section-card-search__filters .form-item:has(input[type="search"]):not(:has(button))::after {
    content: '';
    position: absolute;
    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;
}

/* La lupa clicable: mismo dibujo que el ::after decorativo, pero es el submit.
   Se apoya en el .form-item, que ya va en position: relative. */
.section-card-search__filters .form-item button[type="submit"] {
    position: absolute;
    right: 1.15rem;
    top: 50%;
    transform: translateY(-50%);
    /* La caja es de 2.75rem para dar un area de pulsacion decente; el dibujo se
       queda en 1.25rem con `mask-size` fijo, no `contain`. */
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 0;
    font-size: 0;
    cursor: pointer;
    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: 1.25rem;
}

.section-card-search__filters .form-item button[type="submit"]:hover,
.section-card-search__filters .form-item button[type="submit"]:focus-visible {
    background-color: var(--primary);
}

.section-card-search__filters .form-actions {
    margin: 0;
}

.section-card-search__filters input[type="submit"],
.section-card-search__filters button[type="submit"] {
    width: 100%;
    height: 52px;
    padding: 0 2.25rem;
    border: 1px solid var(--secondary);
    border-radius: 61px;
    background-color: var(--secondary);
    color: var(--white);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.8125rem;
    font-weight: var(--fw-subtitle);
    font-family: var(--headings-font-family);
    cursor: pointer;
}

.section-card-search__filters input[type="submit"]:hover,
.section-card-search__filters button[type="submit"]:hover {
    background-color: var(--primary);
    border-color: var(--primary);
}

@media (min-width: 768px) {
    .section-card-search__filters form {
        flex-direction: row;
        align-items: center;
        gap: 1.25rem;
    }

    /* El desplegable abre la fila y se separa del buscador con una divisoria de
       1px, aunque el formulario lo declare en otro orden. */
    .section-card-search__filters .form-item:has(select) {
        order: -1;
        flex: 0 0 auto;
        padding-right: 1.25rem;
        border-right: 1px solid var(--secondary);
    }

    .section-card-search__filters .form-item:has(select) select {
        width: 187px;
    }

    .section-card-search__filters .form-item:has(input[type="text"]),
    .section-card-search__filters .form-item:has(input[type="search"]) {
        flex: 1 1 auto;
    }

    .section-card-search__filters .form-actions,
    .section-card-search__filters input[type="submit"],
    .section-card-search__filters button[type="submit"] {
        width: auto;
        flex: 0 0 auto;
    }
}

/* ------------------------------------------------------------- Rejilla --- */
/* Cada hijo directo del slot es una celda: da igual que sean los .views-row de
   un listado o tarjetas puestas a mano. */
.section-card-search__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem 1.5rem;
}

.section-card-search__grid > * {
    display: flex;
}

.section-card-search__grid > * > * {
    width: 100%;
}

@media (min-width: 768px) {
    /* `1fr` es `minmax(auto, 1fr)`: una palabra larga que no quepa ensancha su
       columna y la fila deja de ser regular. Con el minimo a 0 las tres miden
       igual y la palabra la parte la tarjeta. */
    .section-card-search__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 4rem 1.5rem;
    }
}

/* ----------------------------------------------------------- Paginador --- */
.section-card-search__footer {
    margin-top: 4rem;
}

.section-card-search__footer .pager__items {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

.section-card-search__footer .pager__item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding: 0 1.5rem;
}

/* La vista es un pager completo y trae también primera y última página. El
   Figma solo pinta PREV, tres números y NEXT, y la config del pager está
   cerrada, así que las dos puntas se ocultan aquí. Va DESPUÉS de la regla de
   arriba: misma especificidad, y con `display: flex` detrás no se ocultarían. */
.section-card-search__footer .pager__item--first,
.section-card-search__footer .pager__item--last {
    display: none;
}

.section-card-search__footer .pager__item + .pager__item {
    border-left: 1px solid var(--secondary);
}

/* Con la primera pagina oculta, la divisoria de la que le sigue abre la fila
   con una linea suelta; el Figma no lleva ninguna delante de PREV. */
.section-card-search__footer .pager__item--first + .pager__item {
    border-left: 0;
}

.section-card-search__footer .pager__item a {
    color: var(--secondary);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-family: var(--headings-font-family);
    font-weight: var(--fw-subtitle);
    font-size: 0.8125rem;
}

.section-card-search__footer .pager__item a:hover {
    color: var(--primary);
}

/* La página actual va encajonada en el Figma. El recuadro sustituye a la
   divisoria de su derecha para no doblar la línea. */
.section-card-search__footer .pager__item.is-active {
    border: 1px solid var(--secondary);
    padding: 0 1rem;
    min-width: 48px;
}

.section-card-search__footer .pager__item.is-active + .pager__item {
    border-left: 0;
}

.section-card-search__footer .pager__item.is-active a {
    font-weight: var(--fw-heading);
}

.section-card-search__footer .pager__heading {
    display: none;
}

/* --------------------------------------------------- Modo oscuro ---
   Las píldoras, el paginador y la divisoria son negras sobre blanco en el
   Figma; sobre el fondo negro del sitio se invierten para no desaparecer. */

:where(html[data-theme="dark"]) .section-card-search__filters select,
:where(html[data-theme="dark"]) .section-card-search__filters input[type="text"],
:where(html[data-theme="dark"]) .section-card-search__filters input[type="search"] {
    border-color: var(--white);
    color: var(--white);
}

:where(html[data-theme="dark"]) .section-card-search__filters input::placeholder {
    color: var(--white);
}

:where(html[data-theme="dark"]) .section-card-search__filters select {
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='10' viewBox='0 0 16 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L8 8L15 1' stroke='%23FFFFFF' stroke-width='2'/%3E%3C/svg%3E");
}

/* El desplegable nativo hereda el fondo de la página; sus opciones se
   pintan con el color del sistema y hay que darles el suyo. */
:where(html[data-theme="dark"]) .section-card-search__filters select option {
    background-color: var(--dark);
    color: var(--white);
}

:where(html[data-theme="dark"]) .section-card-search__filters .form-item:has(input[type="text"]):not(:has(button))::after,
:where(html[data-theme="dark"]) .section-card-search__filters .form-item:has(input[type="search"]):not(:has(button))::after,
:where(html[data-theme="dark"]) .section-card-search__filters .form-item button[type="submit"] {
    background-color: var(--white);
}

:where(html[data-theme="dark"]) .section-card-search__filters .form-item button[type="submit"]:hover,
:where(html[data-theme="dark"]) .section-card-search__filters .form-item button[type="submit"]:focus-visible {
    background-color: var(--primary);
}

:where(html[data-theme="dark"]) .section-card-search__filters .form-item:has(select) {
    border-right-color: var(--white);
}

:where(html[data-theme="dark"]) .section-card-search__filters input[type="submit"],
:where(html[data-theme="dark"]) .section-card-search__filters button[type="submit"] {
    background-color: var(--white);
    border-color: var(--white);
    color: var(--secondary);
}

:where(html[data-theme="dark"]) .section-card-search__footer .pager__item + .pager__item {
    border-left-color: var(--white);
}

:where(html[data-theme="dark"]) .section-card-search__footer .pager__item.is-active {
    border-color: var(--white);
}

:where(html[data-theme="dark"]) .section-card-search__footer .pager__item a {
    color: var(--white);
}