/* Estilos para el minimapa - RESPONSIVO */
#minimapa {
    position: absolute;
    top: 10px;
    right: 10px;
    border: 2px solid #0d6efd;
    border-radius: 8px;
    /* Tamaño adaptativo basado en el viewport */
    max-width: min(250px, 20vw); /* Máximo 250px o 20% del ancho de la ventana */
    max-height: min(200px, 20vh); /* Máximo 200px o 20% del alto de la ventana */
    overflow: hidden; /* Ocultar cualquier contenido que salga del minimapa */
    cursor: default; /* Cursor por defecto */
    /* Mantener relación de aspecto 4:3 */
    aspect-ratio: 4 / 3;
    /* Sombra para dar profundidad */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    /* Fondo para mejor contraste */
    background-color: #767878;
}

/* Media query para pantallas grandes (más espacio disponible) */
@media (min-width: 1920px) {
    #minimapa {
        max-width: min(300px, 15vw);
        max-height: min(225px, 15vh);
    }
}

/* Media query para pantallas medianas (tablets en horizontal) */
@media (max-width: 1366px) {
    #minimapa {
        max-width: min(200px, 18vw);
        max-height: min(150px, 18vh);
    }
}

/* Media query para pantallas pequeñas (tablets en vertical) */
@media (max-width: 768px) {
    #minimapa {
        max-width: min(150px, 22vw);
        max-height: min(113px, 22vh);
    }
}

/* Media query para pantallas muy pequeñas (móviles) */
@media (max-width: 600px) {
    #minimapa {
        max-width: min(120px, 25vw);
        max-height: min(90px, 25vh);
        top: 5px;
        right: 5px;
        border-width: 1px;
    }
}

/* Modo oscuro */
body.dark-mode #minimapa {
    border-color: #5a9fd4;
    box-shadow: 0 0 10px rgba(90, 159, 212, 0.3), 0 4px 8px rgba(0, 0, 0, 0.4);
    background-color: #2a2a2a;
}