/* Adaptación a ventanas estrechas y móviles.
   Se carga después de main.css y solo corrige lo necesario para que nada se salga de su columna. */

html, body {
    overflow-x: hidden;
}

/* Las columnas reparten el ancho y nunca se ensanchan por su contenido */
.header-container {
    width: auto;
    flex: 0 0 auto;
}

.col_recursos, .col_usuario, .col_ciudad {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    overflow-x: hidden;
}

.card {
    max-width: none;
    min-width: 0;
    box-sizing: border-box;
}

/* Las rejillas de iconos ponen tantas columnas como quepan, en vez de un número fijo */
.acciones-container {
    grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
}

.accion-icon {
    width: 100%;
    max-width: 50px;
    height: auto;
    aspect-ratio: 1;
}

.recursos, .productos {
    grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
}

.productos.sin-productos {
    grid-template-columns: 1fr;
}

.niveles {
    grid-template-columns: repeat(auto-fill, minmax(36px, 1fr));
}

.tools {
    flex-wrap: wrap;
}

.edificio-detalle {
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.edificio-columna {
    min-width: 120px;
}

/* Móvil y ventanas estrechas: una sola columna y la página se desplaza entera */
@media (max-width: 800px) {
    .main-content {
        flex-direction: column;
        height: auto;
        overflow: visible;
        padding: 0 8px 8px;
    }

    .header-container {
        width: 100%;
        justify-content: center;
    }

    .col_recursos, .col_usuario, .col_ciudad,
    .col_recursos.col_recursos, .col_usuario.col_usuario, .col_ciudad.col_ciudad {
        width: 100%;
        flex: none;
        overflow: visible;
    }

    .info-usuario td {
        white-space: normal;
    }

    .modal-mapa .modal-contenido,
    .modal-donacion .modal-contenido {
        width: 94vw;
        max-width: none;
        box-sizing: border-box;
    }
}

/* Mapa en pantallas estrechas: casillas más pequeñas y cabecera compacta */
@media (max-width: 800px) {
    .mapa-body {
        padding: 8px;
    }

    .mapa-header h1 {
        font-size: 24px;
    }

    .mapa-casilla {
        width: 24px;
        height: 24px;
    }

    #mapa-grid-container {
        height: 70vh;
        justify-content: flex-start;
    }

    .ficha-ciudadano {
        padding: 12px;
    }
}