/*
    Theme Name: Tenerife Herramientas Digitales
    Theme URI: 
    Author: CBT Comunicación y multimedia
    Author URI: https://cbt.es
    Description: Theme Diseñado para la plataforma de Tierras Altas
    Version: 1.5
    License: GNU General Public License v2 or later
    License URI: http://www.gnu.org/licenses/gpl-2.0.html
    Text Domain:mapatenerife.cbtpruebas.es
*/

:root {
    --primary:#0072CE;
    --bs-link-color-rgb:#0072CE;
    --secondary:#333;
    --primaryHover : rgba(0, 114, 206,0.9);
    --GrisFondos : #f6f6f6;
    --Negro : #333;
    --GrisLetras : #7c7c7c;
  }

*{
    font-family: 'Gibson', sans-serif;
}


/* Estilos menu-lateral / barra-lateral del panel de administración + menú del panel de admin*/
.fixed-sidebar {
  position: fixed;
  top: 80px; 
  left: 0;
  width: 250px;
  height: 100vh; 
  background-color: #fff; 
  z-index: 999; 
  border-right: 1px solid #ddd; 
  overflow-y: auto;

}

/* Ajusta el contenido principal para no superponerse con la barra lateral */
.main-content {
  /*margin-left: 310px; */
  padding: 20px; 
}

.fixed-header-admin {
  position: fixed;
  top: 0; 
  left: 0; 
  width: 100%; 
  background-color: #fff; 
  z-index: 1000;
}

.card-img-top {
    object-fit: cover; /* Asegura que la imagen cubra el área sin distorsionarse */
    height: 200px; /* Define una altura fija para todas las imágenes */
    width: 100%; /* Asegura que la imagen ocupe el ancho completo */
}

.card-body {
    height: 150px; /* Ajusta la altura del cuerpo de la card si es necesario */
    overflow: hidden; /* Asegura que el contenido no se desborde */
}

/* ------ ESTILOS FORMULARIOS ACF------*/


/* Estilo general para el formulario ACF */
.acf-form {
    background-color: #fff; /* Fondo blanco */
    padding: 20px; /* Espaciado interno */
    border-radius: 8px; /* Bordes redondeados */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra suave */
    max-width: 800px; /* Ancho máximo */
    margin: 0 auto; /* Centrado horizontal */
    display: block; /* Asegura que el formulario se muestre como un bloque */
}




/* Estilo para los campos de texto, select y textarea */
.acf-form input[type="text"],
.acf-form input[type="email"],
.acf-form input[type="url"],
.acf-form input[type="number"],
.acf-form select,
.acf-form textarea {
    width: 100%; /* Los campos ocuparán todo el ancho disponible */
    padding: 10px; /* Relleno interno para los campos */
    border: 1px solid #ccc; /* Borde sutil */
    border-radius: 5px; /* Bordes redondeados */
    background-color: #f4f4f4; /* Fondo suave para los campos */
    font-size: 14px; /* Tamaño de fuente */
    color: #333; /* Color del texto */
    margin-bottom: 15px; /* Separación entre campos */
}

/* Cuando el campo está enfocado, cambia el borde */
.acf-form input[type="text"]:focus,
.acf-form input[type="email"]:focus,
.acf-form input[type="url"]:focus,
.acf-form input[type="number"]:focus,
.acf-form select:focus,
.acf-form textarea:focus {
    border-color: #007bff; /* Color de borde azul en el foco */
    outline: none; /* Elimina el borde por defecto */
    background-color: #fff; /* Fondo blanco al enfocar */
}


/* Contenedor de los botones */
.acf-form .acf-button-wrapper {
    display: flex;
    justify-content: space-between; /* Asegura que los botones se distribuyan entre sí */
    margin-top: 20px; /* Espacio arriba de los botones */
}

/* Estilo común para los botones */
.acf-form input[type="submit"],
.acf-form .acf-button-cancel {
    background-color: transparent;
    border: 2px solid #1D73FD;
    transition: all 0.3s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 20px;
    font-size: 16px;
    color: #000;
    border-radius: 5px;
    text-decoration: none;
    cursor: pointer;
    width: 48%; /* Ambos botones ocupan 48% del ancho del contenedor */
}

/* Estilo específico para el botón Cancelar */
.acf-form .acf-button-cancel {
    border-color: #FF3B3B;
    
}

/* Hover effects */
.acf-form input[type="submit"]:hover {
    background-color: rgba(0, 123, 255, 0.1);
    color: #0056b3;
    border-color: #0056b3;
}

.acf-form .acf-button-cancel:hover {
    background-color: rgba(255, 59, 59, 0.1);
    color: #B30000;
    border-color: #B30000;
}

/* Click (Active) Effect */
.acf-form input[type="submit"]:active,
.acf-form .acf-button-cancel:active {
    transform: scale(0.95);
}

.form-control
{
	width:250px !important;
}














/*-----------------------------------*/

/* Estilos botón de search (lupa) */
.search-btn {
  background-color: transparent;
  color: #1D73FD;
  font-size: 18px;
  padding: 3px 8px;
  border: 2px solid #1D73FD;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  display: flex;
  align-items: center;
  justify-content: center;
}

.search-btn:hover {
  background-color: rgba(0, 123, 255, 0.1);
  color: #0056b3;
  border-color: #0056b3;
}

.search-btn:active {
  transform: scale(0.95);
}

/* Estilos botones */

.boton-home1
{
	background-color: transparent;
	border: 2px solid #1D73FD !important;
	transition: all 0.3s ease-in-out;
  	display: flex;
  	align-items: center;
  	justify-content: center;
 
}

.boton-home1:hover {
  background-color: rgba(0, 123, 255, 0.1);
  color: #0056b3;
  border-color: #0056b3;
}

.boton-home1:active {
  transform: scale(0.95);
}

.boton-home2
{
	background-color: transparent;
	border-color: #FF3B3B !important;
	transition: all 0.3s ease-in-out;
  	display: flex;
  	align-items: center;
  	justify-content: center;

}

.boton-home2:hover {
  background-color: rgba(255, 59, 59, 0.1);
  color: #FF3B3B;
  border-color: #FF3B3B;
}

.boton-home2:active {
  transform: scale(0.95);
}

/* Estilos tablas */
.tablas
{
	background-color: white;
}

.tablas tbody tr {
  transition: background-color 0.3s ease-in-out;
}

.tablas tbody tr:hover {
  background-color: rgba(0, 123, 255, 0.1);
}

/* Estilos form registro usuarios */
.registro-usuario-form {
  max-width: 400px;
  margin: 20px auto;
  padding: 20px;
  border-radius: 8px;
  background-color: white;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.registro-usuario-form label {
  font-weight: 500;
  margin-bottom: 5px;
  display: block;
  color:#333; 
}

.registro-usuario-form input {
  width: 100%;
  padding: 10px;
  margin-bottom: 15px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 16px;
  background-color: #edeff0 !important;
}


/* Estilos banner mapa */
.footer-banner {
    position: fixed;
    bottom: 0;
    width: 100%;
    background: #1321C4;
    color: white;
    padding: 15px;
    font-size: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.footer-banner p {
    margin: 0;
    line-height: 1.5;
    display: flex;
    align-items: center;
}

.cta-button {
    background: white;
    color: #0047BA;
    border: none;
    border-radius: 25px;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
	transition: background 0.3s ease-in-out, color 0.3s ease-in-out, transform 0.2s ease-in-out;
}

.cta-button:hover {
    background: #91D1E3;
    color: white;
	/*transform: scale(1.05);*/
}

.modal {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    justify-content: center;  /* Centra el modal horizontalmente */
    align-items: center;      /* Centra el modal verticalmente */
    z-index: 9999;            /* Asegúrate de que el modal esté encima de otros elementos */
	
}

.modal-content {
    background: white;
    padding: 20px;
   border-radius: 10px;
    width: 100%;                /* El modal ocupa el 80% del ancho de la pantalla */
    max-width: 650px;          /* Limita el tamaño máximo del modal */
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);  /* Opcional: agrega sombra para el modal */
    overflow: hidden;         /* Evita el desbordamiento de contenido */
    max-height: 80%;          /* Limita la altura máxima del modal */
    overflow-y: auto;         /* Permite el desplazamiento si el contenido es largo */
	border: none;
}

.close {
    position: absolute;
    right: 15px;
    top: 10px;                /* Ajusta la posición vertical del ícono de cierre */
    font-size: 20px;
    cursor: pointer;
}

/* Animación de apertura */
.modal.fade-in {
    opacity: 1; /* Hace el modal visible */
}

/* Animación de cierre */
.modal.fade-out {
    opacity: 0; /* Hace el modal invisible */
}



.modal form {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
	box-shadow:none !important;

	
}


.modal form input,
.modal form select,
.modal form textarea {
    width: 100%;              /* El formulario ocupa el 100% del ancho del modal */
    padding: 10px;
    margin-bottom: 15px;
    border-radius: 5px;
    border: 1px solid #ccc;
    box-sizing: border-box;   /* Asegura que los elementos no se desborden */
}


/* Oculta el botón de cancelar cuando está dentro del modal */
.modal .acf-button-cancel {
    display: none !important; /* Asegura que se oculte el botón */
}





/* Oculta el campo + label de estado en el modal */
.modal #acf-field_67c5812ba3fa2,
.modal label[for="acf-field_67c5812ba3fa2"] {
    display: none !important;
}


/* Estilo para el botón dentro del modal */
.modal .acf-button.searchButton {
    width: 100%; 
    padding: 10px 40px; 
    text-align: center; 
    font-size: 18px;
    background-color: #1321C4; 
    color: white;
    border: none; 
    border-radius: 50px; 
    cursor: pointer; 
}



/* Opcional: Centra el botón dentro del contenedor */
.modal .acf-button.searchButton {
    display: block;
    margin: 0 auto; /* Centra el botón horizontalmente */
}

/* Estilos mensaje de Update de un recurso */

#message.updated {
    background-color: #4CAF50; /* Verde claro de éxito */
    color: white;              /* Texto blanco */
    padding: 15px 20px;        /* Espaciado interno */
    border-radius: 8px;        /* Bordes redondeados */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra suave */
    font-size: 16px;           /* Tamaño de fuente */
    font-weight: bold;         /* Texto en negrita */
    display: flex;             /* Para alinear los elementos internos */
    align-items: center;       /* Centra el contenido verticalmente */
    justify-content: center;   /* Centra el contenido horizontalmente */
    animation: fadeIn 0.5s ease-out, fadeOut 0.5s ease-out 2s forwards; /* Animaciones de aparición y desaparición */

    width: auto;               /* Ajusta el ancho al contenido */
    max-width: 500px;          /* No se expande demasiado */
    position: fixed;           /* Fijo en la pantalla */
    top: 200px;                /* Lo coloca en la parte superior */
    left: 50%;                 /* Centrado horizontalmente */
    transform: translateX(-50%); /* Centrado correcto */
    text-align: center;        /* Centra el texto */
    z-index: 999;              /* Asegura que esté visible */
}

/* Animación de aparición */
@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/* Animación de desaparición */
@keyframes fadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

/* Ajustes para móviles */
@media screen and (max-width: 768px) {
    #message.updated {
        width: 100%;             /* Más adaptable en móviles */
        font-size: 14px;         /* Texto más pequeño */
        padding: 10px;           /* Reduce el padding */
        position: relative;      /* Se mantiene fijo también en móvil */
        top: 20px;               /* Lo coloca más cerca del borde superior */
        left: 50%;               /* Centrado horizontalmente */
        transform: translateX(-50%); /* Centrado correcto */
        margin: 0;               /* Elimina márgenes */
        display: flex;           /* Cambia la visualización a flex */
        justify-content: center; /* Centra el contenido horizontalmente */
        align-items: center;     /* Centra el contenido verticalmente */
        text-align: center;      /* Asegura que el texto dentro también esté centrado */
    }
}






/* Estilo para el texto del mensaje */
#message.updated p {
    margin: 0;
    font-size: 18px; /* Tamaño de texto más grande */
    text-align: center; /* Centra el texto */
}

#um-submit-btn.um-button {
    background: #1321C4 !important;
    transition: background-color 0.3s ease; /* Suaviza la transición del color */
}

#um-submit-btn.um-button:hover {
    background: #1A38D7 !important; /* Color más claro o oscuro, ajusta como desees */
}

.um-alt {
    box-shadow: none !important; /* Elimina cualquier sombra aplicada */
}
.um_request_name
{
	display: none !important;
}


/* Ocultar botón de Registro en el formulario de login */
.um-right.um-half {
    display: none !important;
}

/* Centrar botón de submit al hacer login */
.um-left.um-half {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%; 
    height: 100%;
}

/* Estilos cards del Dashboard*/
.card {
    transition: all 0.3s ease-in-out; /* Suaviza la transición */
}

.card:hover {
    transform: translateY(-5px); /* Levanta la tarjeta un poco */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Agrega sombra */
}


/* ESTILOS CARD DE LOS MAPAS */

/* Estilo para la caja de información */
.custom-info-box {
    background-color: #ffffff; /* Color de fondo blanco */
    border: none; /* Sin bordes */
    border-radius: 0; /* Sin bordes redondeados */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra suave */
    width: 160px; /* Ancho fijo para la caja */
    height: 240px; /* Altura fija para la caja */
    display: flex;
    flex-direction: column; /* Alineación vertical de los elementos */
	
    
}


/* Estilo para la imagen */
.custom-info-box img {
    width: 100%; /* La imagen ocupa todo el ancho de la caja */
    height: 150px; /* Altura de la imagen */
    object-fit: cover; /* Ajusta la imagen sin distorsionarla */
    border-bottom: 2px solid #ddd; /* Línea divisoria entre la imagen y el contenido */
	
}

/* Estilo para la sección de texto */
.info-text {
    padding: 10px;
    font-size: 12px;
    height: 90px; /* Altura fija para la sección de texto */
    overflow: hidden; /* Evitar desbordamiento de texto */
	
}

/* Estilo para el título */
.info-text .fw-bold {
    font-size: 14px; /* Tamaño del título */
    margin-bottom: 5px; /* Separación entre el título y la dirección */
}

/* Estilo para la dirección */
.info-text p {
    font-size: 12px; /* Tamaño de la dirección */
    margin-bottom: 0; /* Sin margen inferior */
}

/* Ocultar el botón y eliminar el espacio residual */
.gm-style-iw-chr button {
    display: none !important; /* Asegura que el botón no se vea */
    margin: 0 !important; /* Elimina cualquier margen del botón */
    padding: 0 !important; /* Elimina cualquier padding del botón */
}

/* Ajustar el contenedor del info window para que el contenido se mueva hacia arriba */
.gm-style-iw {
    margin-top: 0 !important; /* Elimina el margen superior */
    padding-top: 0 !important; /* Elimina el padding superior */
}

/* Asegurarse de que no haya margen ni padding en los elementos de la cabecera */
.gm-style-iw .gm-style-iw-t {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Si el botón está oculto pero aún hay un espacio residual en los elementos hijos */
.gm-style-iw .gm-style-iw-c {
    padding-top: 0 !important;
    margin-top: 0 !important;
}



/* QUITA BORDES REDONDOS DEL CARD DEL MAPA */

/* Para el contenedor principal de la ventana de información */
.gm-style-iw {
    border-radius: 0 !important; /* Eliminar bordes redondeados */
	

}

/* Para el contenedor interno de la ventana de información */
.gm-style-iw-c {
    border-radius: 0 !important; /* Eliminar bordes redondeados */
}




/* -------------------------------ESTILOS SIDEBAR MAPA ---------------------------------*/

/* ESTILOS SIDEBAR MAPA */
.sidebar-map {
    width: 300px;
    position: fixed;
    right: 0;
    top: 0;
    background: #ffffff;
    z-index: 9999;
    box-shadow: -2px 0 5px rgba(0, 0, 0, 0.2);
    transform: translateX(100%);
    transition: transform 0.3s ease;
    height: calc(100vh - 75.5px);
    overflow: hidden; /* Evita desbordamiento */
}

/* Estilos para dispositivos móviles */
@media (max-width: 768px) {
    .sidebar-map {
        width: 100%; /* Ocupa todo el ancho */
        height: 70vh; /* Ocupa el 80% de la pantalla */
        bottom: 0;
        left: 0;
        right: 0;
        top: auto;
        transform: translateY(100%); /* Oculto por defecto */
        
    }

    #sidebar-content {
        max-height: calc(80vh - 50px); /* Deja espacio para el botón de cerrar */
        overflow-y: auto; /* Permite scroll si el contenido es largo */
        padding-bottom: 20px; /* Espacio extra para evitar que el contenido toque el borde */
    }
}

/* ESTILOS CONTENIDO DEL SIDEBAR */
#sidebar-content {
    padding: 20px;
    color: #333;
    max-height: 100%;
    overflow-y: auto; /* Permite scroll si hay contenido largo */
}

/* BOTÓN CERRAR SIDEBAR */
.close-sidebar {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: white;
    color: #F32735;
    padding: 10px;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Ocultar el botón de toggle en dispositivos móviles */
@media (max-width: 768px) {
    .toggle-sidebar {
        display: none;
    }
}

/* BOTON ABRIR SIDEBAR */
.toggle-sidebar {
    position: fixed;
    top: 100px;
    right: 12px;
    background-color: #1321C4;
    color: white;
    padding: 10px;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    transition: box-shadow 0.3s ease;
}

.toggle-sidebar:hover {
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3);
}

/* ESTILOS CONTENIDO DEL SIDEBAR */
#sidebar-content {
    padding: 20px;
    color: #333;
}

/* TÍTULO DEL COMERCIO */
#sidebar-content h2 {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 10px;
    color: #222;
}

/* IMAGEN DEL COMERCIO */
#sidebar-content img {
    width: 100%;
    max-height: 180px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 15px;
}

/* PÁRRAFOS DE INFORMACIÓN */
#sidebar-content p {
    font-size: 14px;
    color: #555;
    margin-bottom: 8px;
    line-height: 1.4;
}

/* DESTACAR TÍTULOS DENTRO DEL CONTENIDO */
#sidebar-content p strong {
    color: #111;
}

/* ESTILO DE LA CATEGORÍA */
/* Estilo base */
#sidebar-content .category {
    display: inline-block;
    color: white;
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 5px;
    font-weight: bold;
    margin-top: 5px;
}

/* Colores específicos */
.bodega { background: #1D73FD; }   
.restaurante { background: #1321C4; }
.cofradia { background: #009840; }    
.guachinche { background: #E88900; }  
.mercado { background: #F32735; }    
.otros { background: #B0BEC5; }



/* ESPACIADO ENTRE ELEMENTOS */
#sidebar-content > *:last-child {
    margin-bottom: 0;
}

/* Ocultar el botón de toggle en dispositivos móviles */
@media (max-width: 768px) {
    .toggle-sidebar {
        display: none; /* Oculta el botón de toggle en pantallas pequeñas */
    }
}


/* -------------------------------ESTILOS SIDEBAR MAPA END---------------------------------*/

/* Estilos imagen del sidecard*/
.img-fluid {
    border: none !important;
    border-radius: 0px !important;
}

/* -------------------- ESTILOS FILTROS DEL MAPA --------------------*/

 /* Estilos generales de los botones */
.category-buttons-container {
    position: absolute;
    top: 50px !important;
    left: 50%;
    transform: translateX(-50%);
    background-color: transparent;
    padding: 10px;
    z-index: 10;
    display: flex;
    justify-content: flex-start !important;
    gap: 10px;
    overflow-x: auto; /* Habilitar scroll horizontal */
    -webkit-overflow-scrolling: touch; /* Para mejorar la experiencia en iOS */
	
}

.category-button {
    display: inline-flex;
    align-items: center;
    padding: 2px 16px;
    border-radius: 50px; /* Forma de píldora */
    background-color: white;
    color: black;
    text-decoration: none;
    border: 2px solid white; /* Borde ligero */
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    text-decoration: none;
}

.category-button:hover {
    background-color: #000B8C;
    color: white;
    text-decoration: none;
}

.category-button::before {
    content: "";
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 8px;
    border: 1px solid white;
    text-decoration: none;
}

/* Colores específicos para cada categoría */
.bodegas::before {
    background-color: #1D73FD;
}

.restaurantes::before {
    background-color: #1321C4;
}

.cofradias::before {
    background-color: #009840;
}

.guachinches::before {
    background-color: #E88900;
}

.mercados::before {
    background-color: #F32735;
}

/* Estilos botón de Todo */
.category-button-todo {
    display: inline-flex;
    align-items: center;
    padding: 2px 16px;
    border-radius: 50px; /* Forma de píldora */
    background-color: white;
    color: black;
    text-decoration: none;
    border: 2px solid white; /* Borde ligero */
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    text-decoration: none;
}

.category-button-todo:hover {
    background-color: #000B8C;
    color: white;
    text-decoration: none;
}

.category-button.active, .category-button-todo.active {
    background-color: #000B8C;
    color: white;
    text-decoration: none;
}

/* Estilos para dispositivos móviles */
@media screen and (max-width: 768px) {
    .category-buttons-container {
        width: 100%; /* Aseguramos que ocupe todo el ancho disponible */
        overflow-x: scroll; /* Permite el desplazamiento horizontal */
        flex-wrap: nowrap; /* Evita que los botones se ajusten a múltiples líneas */
        gap: 15px; /* Ajusta el espacio entre los botones si es necesario */
    }

    .category-button {
        min-width: auto; /* Ajuste para que no se estire innecesariamente */
        white-space: nowrap; /* Asegura que el texto no se divida en varias líneas */
    }
}


/* -------------------- ESTILOS FILTROS DEL MAPA END --------------------*/

/* Estilos para dispositivos móviles */
@media screen and (max-width: 768px) {
    .footer-banner {
        padding: 10px;  /* Reduce el padding en pantallas pequeñas */
        font-size: 14px; /* Ajusta el tamaño de la fuente */
    }

    .footer-banner button.cta-button {
        font-size: 12px;  /* Reduce el tamaño del texto en el botón */
        padding: 8px 12px;  /* Ajusta el padding del botón */
    }
}

/* Estilos por defecto para el mapa */
#dynamic-map {
    width: 100%;
    height: 92vh;  /* Altura en pantallas grandes */
}

/* Estilos para dispositivos móviles */
@media screen and (max-width: 768px) {
    #dynamic-map {
        height: 82vh;  /* Reduce la altura del mapa en pantallas más pequeñas */
    }
}

.menu-lateral:hover {
  background-color: #afc8f0; /* Cambio de fondo al pasar el mouse */
  transition: background-color 0.3s ease; /* Transición suave para el hover */

	
}