/* ==========================================================================
   atlas.css
   Estilos propios de la página "Atlas y otros documentos cartográficos"
   Pantallas de referencia XD: 8 y 9
   Depende de: flexboxgrid.min.css, style-modern.css, barra.css
   ========================================================================== */

.atlas-page {
    width: 100%;
    margin: 0;
    padding: 40px clamp(24px, 4vw, 64px) 80px clamp(120px, 9vw, 160px);
    box-sizing: border-box;
    color: #FFFFFF;
}

.atlas-page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 24px;
    /* Hoja «AJUSTES finales», filas 13 y 14 — 2026-09-11
       Esta cabecera era la unica de las cuatro secciones con
       «max-width: 1400px; margin-left/right: auto». Como .atlas-page es flex,
       ese auto la CENTRABA: medido a 1440px el titulo arrancaba en x=296
       mientras la entradilla y la reticula lo hacian en x=130. De ahi el
       «aun falta el ajuste en la seccion Atlas». Se deja a ancho completo,
       como en Proyectos, Recursos y Creditos. */
    width: 100%;
    max-width: 1400px;
    margin-left: 0;
    margin-right: auto;
}

.atlas-page-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 35px;
    color: #58BA5C;
    margin: 0 0 16px 0;
}

.atlas-page-logo {
    height: 60px;
    width: auto;
}

.atlas-page-description {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 19px;
    color: #FFFFFF;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 40px;
}

.atlas-category-section {
    margin-bottom: 48px;
}

.atlas-category-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    padding-bottom: 12px;
    margin-bottom: 24px;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
}

.atlas-category-heading-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.atlas-category-heading-left img {
    width: 28px;
    height: auto;
}

.atlas-category-heading-left h2 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 25px;
    line-height: 30px;
    color: #FFFFFF;
    margin: 0;
}

.atlas-explore-link {
    display: inline-block;
    padding: 10px 20px;
    border: 1px solid #FFFFFF;
    border-radius: 4px;
    color: #FFFFFF;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    white-space: nowrap;
}

.atlas-explore-link:hover {
    background: rgba(255, 255, 255, 0.1);
}

.atlas-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-bottom: 24px;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 1024px) {
    .atlas-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 560px) {
    .atlas-grid {
        grid-template-columns: 1fr;
    }
}

.atlas-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
}

.atlas-card-image {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background: #A7B4C6;
    margin-bottom: 10px;
}

.atlas-card-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 1.4;
    color: #FFFFFF;
}

.atlas-see-more {
    display: block;
    margin: 0 auto;
    padding: 10px 28px;
    border: 1px solid #FFFFFF;
    border-radius: 4px;
    background: transparent;
    color: #FFFFFF;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
}

.atlas-see-more:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* TODO: cuando se conecte el origen de datos (lista SharePoint), remover
   las tarjetas de ejemplo del markup y generarlas dinámicamente igual que
   se hace en index.aspx con spDataService. */

/* ==========================================================================
   Responsive — 2026-08-31
   En móvil el enlace "Explorar más en el repositorio" se salía del ancho de
   pantalla: el heading ya hace wrap, pero el enlace no tiene dónde cortar y
   el padding izquierdo de la página (barra lateral) le deja poco espacio.
   ========================================================================== */

@media (max-width: 768px) {

    .atlas-page {
        padding-left: 76px;
        padding-right: 16px;
    }

    .atlas-category-heading {
        gap: 10px;
    }

    .atlas-explore-link {
        max-width: 100%;
        overflow-wrap: anywhere;
        /* área de toque cómoda */
        display: inline-block;
        min-height: 30px;
        padding: 5px 0;
    }

    .atlas-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 16px;
    }
}

@media (max-width: 480px) {

    .atlas-grid {
        grid-template-columns: 1fr 1fr;
    }
}

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

/* Fila 13 — Títulos y encabezados alineados a la izquierda. */
.atlas-page-title,
.atlas-category-heading h2 {
    text-align: left;
}

/* Fila 14 — Entradilla a la izquierda y en caja más angosta.
   El «margin-left: max(0px, calc((100% - 1400px) / 2))» que había aquí era un
   parche para compensar la cabecera centrada: desplazaba la entradilla a la
   derecha en cuanto la pantalla pasaba de 1400px. Corregida ya la cabecera,
   sobra — y era lo que dejaba la entradilla descolgada respecto al título y a
   las tarjetas. */
.atlas-page-description {
    text-align: left;
    max-width: 600px;
    margin-left: 0;
    margin-right: auto;
}

/* Fila 15 — La línea divisoria va entre sección y sección, no entre el título
   de la sección y su contenido. */
.atlas-category-heading {
    border-bottom: none;
    padding-bottom: 4px;
}

.atlas-category-section + .atlas-category-section {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    padding-top: 40px;
}

/* ==========================================================================
   Verificación 1:1 contra Adobe XD — pantalla «Atlas y otros documentos
   cartográficos» (screen 56803094-011f-4fda-a81b-2858b83c583d), 2026-09-10.
   Misma retícula que Proyectos y Recursos: 4 columnas de 239px con
   separación horizontal de 16px (ancho total 1004px) e imagen de 239 x 184.
   Estilos de carácter de la pantalla: Bold 35px #58BA5C (título),
   Medium 25px #FFFFFF (sección), Regular 16px #FFFFFF (entradilla),
   Regular 15px #FFFFFF (nombre de ficha), Bold 14px #FFFFFF y #85DE88
   (botones).
   ========================================================================== */

.atlas-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 48px 16px;
    max-width: 1004px;
    margin-left: 0;
    margin-right: auto;
}

.atlas-card-image {
    aspect-ratio: 239 / 184;
    margin-bottom: 14px;
}

.atlas-card-title {
    line-height: 19px;
}

.atlas-see-more {
    color: #85DE88;
    border-color: #85DE88;
}

@media (max-width: 1024px) {
    .atlas-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 32px 16px;
    }
}

@media (max-width: 560px) {
    .atlas-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* El bloque de cada categoría (encabezado + botón + retícula + «Ver más»)
   ocupa los mismos 1004px del diseño, y el botón «Ver más» queda centrado
   respecto a esa columna, no respecto a la página. */
.atlas-category-section {
    max-width: 1004px;
    margin-left: 0;
    margin-right: auto;
}

.atlas-grid {
    margin-left: 0;
    margin-right: 0;
}

/* El borde del botón «Ver más» es una línea tenue; el verde va solo en el
   texto (Bold 14px #85DE88). */
.atlas-see-more {
    border-color: rgba(255, 255, 255, 0.35);
}

/* Corrección 2026-09-10 (2.ª pasada): la retícula quedaba anclada a la
   izquierda y no ocupaba la página. */
.atlas-category-section,
.atlas-grid {
    max-width: 1400px;
}

/* Los bloques @media anteriores de .atlas-grid quedaban pisados por las
   reglas sin media query añadidas hoy. Se reponen al final, que es donde
   la cascada los respeta. */
@media (max-width: 1024px) {
    .atlas-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 32px 16px;
    }
}

@media (max-width: 560px) {
    .atlas-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px 16px;
    }
}

@media (max-width: 768px) {
    .atlas-page-title {
        line-height: 1.2;
    }
}