/* backend/static/css/auditivo.css */

body {
    font-family: 'Roboto', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #ffffff;
    color: #333333;
}

/* Style para la sección de información */
#info {
    background-color: #495057;
    color: #ffffff;
    font-size: 2em;
    text-align: center;
    padding: 1em;
    box-sizing: border-box; /* Para que el padding no aumente el tamaño total */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

/* Style para el mapa */
#map {
    height: calc(100vh - 8em); /* Ajusta la altura del mapa según el espacio que ocupe #info */
    width: 100%;
}

/* Styles y ajuste para pantallas pequeñas */
@media (max-width: 767px) { /* Pone un ancho máximo al pading en celulares */
    #info {
        padding: 0.5em; /* Achica un poco el padding para liberar espacio */
        font-size: 1.5em; /* Ajusta el tamaño de fuente si hace falta */
    }
}
#map {
    height: calc(100vh - 6em); /* Ajusta la altura del mapa según el padding del #info */
}