/* ==========================================================================
   default.css
   Estilos propios de la página "Mapas en el tiempo / Buscador" (default.aspx)
   Extraído del <style> inline original de default.aspx
   Depende de: flexboxgrid.min.css, style-modern.css, barra.css
   ========================================================================== */

.results-header-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.mapoteca-results-logo {
    margin-bottom: 20px;
    height: 138px;
    width: auto;
}

.search-area-wrapper {
    width: 100%;
    max-width: 600px;
    text-align: center;
    position: relative;
}

.results-search-prompt-text {
    text-align: center;
}

.map-card-image-wrapper {
    position: relative;
}

.map-card-image-wrapper .recommended-pin {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 31px !important;
    height: 31px !important;
    z-index: 10;
    opacity: 1;
}

.maps-list-header.recommended-header h1 {
    display: flex;
    align-items: center;
}

.maps-list-header.recommended-header .pin-icon {
    width: 20px;
    height: auto;
    margin-right: 10px;
}

/* Estilos para la sección de recomendados */
.recommended-section {
    margin-bottom: 40px;
}

.maps-grid-recommended {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

/* Estilos para el botón de limpiar búsqueda */
.clear-search-btn {
    position: absolute;
    right: 50px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: #999;
    cursor: pointer;
    font-size: 20px;
    padding: 5px 10px;
    display: none;
}

.clear-search-btn:hover {
    color: #333;
}

.clear-search-btn.visible {
    display: block;
}

.results-search-bar {
    position: relative;
}

/* Mensaje de resultados de búsqueda */
.search-results-info {
    text-align: center;
    padding: 15px;
    background: #f5f5f5;
    margin-bottom: 20px;
    border-radius: 5px;
    display: none;
}

.search-results-info.visible {
    display: block;
}

.search-results-info strong {
    color: #17345c;
}

/* Estilos específico para el input del home */
#main-search-input {
    background-color: #A7B4C6;
    color: #17345C;
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    line-height: 22px;
    text-align: left;
    letter-spacing: 0px;
}

#main-search-input::placeholder {
    color: #17345C;
    opacity: 1;
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    line-height: 22px;
    letter-spacing: 0px;
}

#main-search-input::-ms-input-placeholder {
    color: #17345C;
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    line-height: 22px;
}

/* Ocultar la X nativa en inputs de búsqueda (Chrome, Safari, Edge) */
#main-search-input::-webkit-search-cancel-button,
#main-search-input::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
}

/* Nueva grilla de 5 columnas para los tags */
.tag-list {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 10px;
}

.tag-list li {
    flex: 0 0 calc(20% - 10px);
    max-width: calc(20% - 10px);
    box-sizing: border-box;
    margin-bottom: 10px;
}

.tag-item {
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    padding: 5px 15px;
    cursor: pointer;
    text-align: left;
}

/* ==========================================================================
   Ajustes responsive — 2026-08-31
   El panel de "Filtra por categorías" tiene ancho fijo (480px) y se posiciona
   con coordenadas absolutas desde JS. En pantallas angostas se salía por la
   derecha y la segunda columna (Idioma, Tipología, Siglo, Colección) quedaba
   fuera de la pantalla, imposible de tocar.
   ========================================================================== */

@media (max-width: 768px) {

    .categories-dropdown-panel {
        /* style-modern.css fija min-width:480px, que gana sobre width:auto y
           sobre max-width; hay que anularlo o el panel sigue midiendo 480px en
           una pantalla de 371px. El left !important gana al que escribe
           positionDropdown en línea. */
        min-width: 0 !important;
        width: auto !important;
        max-width: calc(100vw - 24px) !important;
        left: 12px !important;
        right: 12px;
        box-sizing: border-box;
        flex-wrap: wrap;
    }

    .categories-dropdown-panel .categories-column {
        width: auto;
        min-width: 0;
        flex: 1 1 45%;
    }

    .categories-dropdown-panel .category-list a {
        /* área de toque cómoda (WCAG 2.5.8) sin cambiar la tipografía */
        display: block;
        min-height: 44px;
        line-height: 1.3;
        padding-top: 11px;
        padding-bottom: 11px;
        overflow-wrap: anywhere;
    }

    /* Las etiquetas de 5 por fila son ilegibles en celular: 2 por fila. */
    .tag-list li {
        flex: 0 0 calc(50% - 10px);
        max-width: calc(50% - 10px);
    }

    .tag-item {
        min-height: 40px;
    }
}

@media (max-width: 420px) {

    /* En pantallas muy angostas las categorías van en una sola columna. */
    .categories-dropdown-panel .categories-column {
        flex: 1 1 100%;
    }
}

/* ==========================================================================
   Recomendación BNC (punto 1) — proporción de las miniaturas
   Las miniaturas del repositorio son todas de 300 x 180 px (proporción 5:3),
   pero la caja tenía altura fija de 244 px con object-fit: cover, así que el
   navegador ampliaba la imagen y recortaba cerca del 15 % del ancho de cada
   mapa. Al darle a la caja la misma proporción de la miniatura, el mapa se ve
   completo, sin recorte ni franjas vacías, y todas las tarjetas conservan el
   mismo alto. Se declara aquí y no en style-modern.css porque ese archivo es
   compartido con el resto del sitio.
   ========================================================================== */

.map-results-page .map-card-image-wrapper img:not(.recommended-pin) {
    height: auto;
    /* reserva el espacio antes de que cargue la imagen, para que la grilla no
       dé el salto de maquetación */
    aspect-ratio: 5 / 3;
    object-fit: cover;
}

/* ==========================================================================
   Buscador compacto y fijo — prueba (fila 4 de la matriz)
   Al haber una búsqueda o un filtro activo, el bloque del logo + cajón de
   búsqueda se reduce y queda fijo en la parte superior del área de
   resultados. Las clases las pone js/home.js; aquí solo va lo visual.
   Hoja de estilos de index.aspx.
   ========================================================================== */

.results-header-section,
.mapoteca-results-logo,
.search-area-wrapper,
#main-search-input {
    transition: all .18s ease;
}

body.busqueda-compacta .results-header-section {
    /* el contenedor que desplaza es .main.map-results-page (overflow-y:auto),
       así que el sticky se ancla a su borde superior */
    position: sticky;
    top: 0;
    z-index: 60;

    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 20px;

    padding: 10px 12px 12px;
    margin-bottom: 10px;

    /* el fondo del sitio es una imagen; un velo translúcido con desenfoque
       deja ver el patrón sin que el texto de las tarjetas se cruce */
    background: rgba(19, 44, 78, 0.93);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

body.busqueda-compacta .mapoteca-results-logo {
    height: 46px;
    margin-bottom: 0;
    flex: 0 0 auto;
}

body.busqueda-compacta .search-area-wrapper {
    max-width: 430px;
    margin: 0;
}

body.busqueda-compacta #main-search-input {
    font-size: 15px;
    line-height: 20px;
    height: 34px;
}

body.busqueda-compacta #main-search-input::placeholder {
    font-size: 15px;
    line-height: 20px;
}

/* El botón de la lupa conserva su alto original (39px) mientras el campo baja
   a 34px en modo compacto, y como la barra es flex con align-items por defecto
   el botón se estira y sobresale. Se iguala al alto del campo. */
body.busqueda-compacta .results-search-bar {
    align-items: center;
}

body.busqueda-compacta .search-button-action {
    height: 34px;
    align-self: center;
}

body.busqueda-compacta .clear-search-btn {
    font-size: 17px;
}

/* La sombra solo aparece cuando ya hay contenido pasando por debajo. */
body.busqueda-compacta.buscador-desplazado .results-header-section {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.38);
}

@media (max-width: 768px) {

    body.busqueda-compacta .results-header-section {
        flex-direction: column;
        gap: 8px;
        padding: 8px 10px 10px;
    }

    body.busqueda-compacta .mapoteca-results-logo {
        height: 32px;
    }

    body.busqueda-compacta .search-area-wrapper {
        max-width: 100%;
    }
}

/* --------------------------------------------------------------------------
   La "X" de borrar siempre visible
   En el archivo original solo aparece cuando hay texto escrito (clase
   .visible). Aquí se deja permanente, atenuada mientras no hay nada que
   borrar, para que el usuario siempre tenga cómo volver al estado inicial.
   -------------------------------------------------------------------------- */

.clear-search-btn,
.clear-search-btn.visible {
    display: block;
    opacity: 0.45;
    transition: opacity .15s ease, color .15s ease;
}

.clear-search-btn:hover,
.clear-search-btn:focus,
body.busqueda-compacta .clear-search-btn {
    opacity: 1;
}

/* --------------------------------------------------------------------------
   Botón "Limpiar filtros"
   Va dentro de la barra que se vuelve fija, así queda siempre a la mano
   mientras se recorren los resultados. Solo aparece cuando hay algo que
   limpiar.
   Botón "Limpiar filtros": vive dentro del panel desplegable de categorías.
   -------------------------------------------------------------------------- */

.clear-filters-btn {
    display: inline-block;
    flex: 0 0 auto;
    padding: 7px 16px;
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 4px;
    background: transparent;
    color: #FFFFFF;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 13px;
    line-height: 18px;
    white-space: nowrap;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}

.clear-filters-btn:hover,
.clear-filters-btn:focus {
    background: rgba(255, 255, 255, 0.12);
    border-color: #FFFFFF;
}

/* Vive dentro del panel desplegable de filtros: siempre visible al abrirlo.
   El panel debe poder envolver para que la fila del botón baje de línea. */
.categories-dropdown-panel {
    flex-wrap: wrap;
}

.dropdown-actions {
    flex: 1 1 100%;
    display: flex;
    justify-content: flex-end;
    padding-top: 6px;
}

@media (max-width: 768px) {
    .dropdown-actions {
        justify-content: center;
    }
}

/* ==========================================================================
   Ajustes matriz BNC — hoja «AJUSTES finales» (2026-09-10)
   ========================================================================== */

/* Fila 5 — Los títulos, años y demás textos de las tarjetas de resultados no
   deben verse subrayados (style-modern.css los subraya por ser <a>). */
.map-card-link,
.map-card-link:hover,
.map-card-link:focus,
.map-card-link *,
.map-card-item a,
.map-card-item a * {
    text-decoration: none !important;
}

/* Fila 7 — El título del mapa se muestra hasta la segunda línea; al excederla
   se corta con puntos suspensivos. El texto completo queda en el atributo
   title y en la ficha lateral. */
.map-card-description-content p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Fila 12 — Al elegir una etiqueta se oculta el título «TODOS LOS MAPAS» y su
   línea divisoria; queda solo el nombre de la etiqueta como título. La clase
   la pone js/home.js. */
body.filtro-etiqueta-activo #todos,
body.filtro-etiqueta-activo .custom-divider {
    display: none !important;
}

/* ==========================================================================
   Encabezados de sección y paginador — 2026-09-10
   style-modern.css (hoja global del portal) aplica
   .map-results-page .maps-list-header .section-title en Light 300 / 30px /
   interlineado 37 / espaciado 3.3px, y el pin en verde. En el XD estos
   títulos van en SemiBold 22px y el pin en blanco.
   Se corrige aquí, en la hoja propia de la página, para no alterar el resto
   del portal institucional. default.css se carga después de style-modern.css,
   así que basta con igualar la especificidad.
   ========================================================================== */

/* «RECOMENDADOS» y «TODOS LOS MAPAS»: mismo estilo, uniforme. */
.map-results-page .maps-list-header .section-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 22px;
    line-height: 27px;
    letter-spacing: 2.42px;
    color: #FFFFFF;
    text-transform: uppercase;
    text-align: left;
}

/* El pin de «RECOMENDADOS» va blanco, no verde. */
.map-results-page .maps-list-header.recommended-header .pin-icon {
    filter: brightness(0) invert(1);
}

/* --------------------------- Paginador ---------------------------
   Valores literales del panel Design Specs del XD, elemento «1 2 3 4 5»
   (pantalla «Búsqueda avanzada - sin filtrar»):
       font: normal normal bold 20px/24px Montserrat;
       letter-spacing: 2.2px;
       text-align: center;
       color: #5DA078  -> es el color de la página ACTUAL
   El resto de números y las dos flechas van en blanco, y bajo el número
   actual hay un punto del mismo verde.
   Se marcan con !important porque style-modern.css gana por especificidad.
   ------------------------------------------------------------------ */

.map-results-page .pagination-controls .page-link {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 24px;
    letter-spacing: 2.2px;
    text-align: center;
    color: #FFFFFF !important;
    text-decoration: none !important;
    position: relative;
    padding: 0 4px;
}

/* Página actual: verde del diseño. */
.map-results-page .pagination-controls .page-link.active {
    color: #5DA078 !important;
}

/* Punto bajo el número de la página actual. */
.map-results-page .pagination-controls .page-link.active::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -6px;
    width: 4px;
    height: 4px;
    margin-left: -2px;
    border-radius: 50%;
    background: #5DA078;
}

/* Flechas anterior / siguiente: blancas, sin el espaciado de los números. */
.map-results-page .pagination-controls .page-link.prev,
.map-results-page .pagination-controls .page-link.next {
    color: #FFFFFF !important;
    letter-spacing: 0;
    padding: 0 8px;
}

@media (max-width: 768px) {

    .map-results-page .maps-list-header .section-title {
        font-size: 18px;
        line-height: 22px;
        letter-spacing: 2px;
    }

    .map-results-page .pagination-controls .page-link {
        font-size: 17px;
        line-height: 21px;
        letter-spacing: 1.6px;
    }
}

/* ==========================================================================
   Hoja «AJUSTES finales», fila 11 — 2026-09-11
   «Nombre de etiqueta al hacer clic, tb corregir fuente».
   El título que aparece al elegir una etiqueta (#active-filter-name) heredaba
   Playfair (serif) pese a llevar la misma clase .section-title que «TODOS LOS
   MAPAS». Se iguala a ese, que es el del diseño: Montserrat SemiBold.
   ========================================================================== */

.map-results-page #active-filter-name,
#active-filter-name.section-title {
    font-family: 'Montserrat', Arial, Helvetica, sans-serif !important;
    font-weight: 600;
    font-size: 22px;
    line-height: 27px;
    letter-spacing: 2.42px;
    color: #FFFFFF;
    text-align: left;
    /* En el XD (pantalla «BA-Filtro y etiquetas ABC») el rótulo aparece como
       «NOMBRE DE LA ETIQUETA»: en versales, igual que «TODOS LOS MAPAS» y
       «RECOMENDADOS». El valor viene de la lista con mayúsculas y minúsculas
       mezcladas, así que se normaliza desde CSS. */
    text-transform: uppercase;
}

@media (max-width: 768px) {

    .map-results-page #active-filter-name,
    #active-filter-name.section-title {
        font-size: 18px;
        line-height: 22px;
        letter-spacing: 2px;
    }
}