/* Estilos generales */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #f8f9fa;
}

/* Ajuste para la pantalla de login */
#login-container {
    height: calc(100vh - 56px); /* Altura total menos la altura de navbar */
    position: absolute;
    top: 56px;
    left: 0;
    right: 0;
    z-index: 999;
    background-color: #f8f9fa;
}

/* Estilo para el contenedor del mapa */
.map-container {
    width: 100%;
    height: calc(100vh - 80px); /* Altura total - altura de navbar */
    z-index: 500;
}

/* Estilos para el sidebar */
.sidebar {
    height: calc(100vh - 56px);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    padding-top: 0.5rem;
    overflow-y: auto;
    z-index: 1000;
}

/* Ajustes para dispositivos móviles */
@media (max-width: 767.98px) {
    .sidebar {
        position: fixed;
        top: 56px;
        bottom: 0;
        width: 250px;
        z-index: 1050;
    }
    
    .sidebar-toggle {
        top: 60px;
        left: 10px;
    }
    
    /* Cuando el sidebar está colapsado, asegurarse de que el mapa ocupe todo el ancho */
    .sidebar.collapse:not(.show) {
        display: none;
    }
    
    /* Cuando el sidebar está visible, aplicar un overlay para el resto de la pantalla */
    .sidebar.show::before {
        content: "";
        position: fixed;
        top: 56px;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: -1;
    }
}

/* Estilos para formulario de login */
#login-form .form-control:focus {
    border-color: #0d6efd;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

/* Animaciones para la transición entre login y app */
.fade-in {
    animation: fadeIn 0.5s;
}

.fade-out {
    animation: fadeOut 0.5s;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

/* Estilos para popups de Leaflet */
.leaflet-popup-content {
    max-height: 300px;
    overflow-y: auto;
}

/* Mejorar contraste y visibilidad de elementos del mapa */
.leaflet-control-zoom {
    margin-top: 50px !important; /* Para no solapar con el botón de toggle en móviles */
}

/* Estilos para los encabezados del sidebar */
.sidebar h6 {
    color: #0d6efd;
    font-weight: 600;
    margin-top: 1rem;
    border-bottom: 1px solid #dee2e6;
    padding-bottom: 0.5rem;
}

/* Estilos para los toasts */
.toast {
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1);
}

.search-container {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1000; /* Asegura que esté encima de otros elementos */
}

.form-label {
    user-select: none; /* Evita la selección de texto */
    -webkit-user-select: none; /* Para navegadores basados en WebKit (Chrome, Safari) */
    -moz-user-select: none; /* Para Firefox */
    -ms-user-select: none; /* Para Internet Explorer/Edge */
  }

  .bi {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
  }

  .card-title {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
  }

/* Estilos generales para el control de búsqueda */
.leaflet-control-search {
    box-shadow: 0 1px 5px rgba(0,0,0,0.65);
    background: white;
    border-radius: 4px;
}

.leaflet-control-search .search-button {
    width: 30px;
    height: 30px;
    background-color: white;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/></svg>');
    background-repeat: no-repeat;
    background-position: center;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.leaflet-control-search .search-input {
    height: 30px;
    width: 180px;
    padding: 0 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

/* Estilos para dispositivos de escritorio */
@media (min-width: 768px) {
    .search-container {
        position: absolute;
        top: 10px;
        left: 10px;
        z-index: 1000;
    }

    .leaflet-control-search {
        max-width: 250px;
    }
}

/* Estilos para dispositivos móviles */
@media (max-width: 767.98px) {
    .search-container {
        position: absolute;
        top: 10px;
        right: 10px;
        z-index: 1000;
    }

    .leaflet-control-search {
        max-width: 250px;
    }
}

/* Tooltip de búsqueda */
.leaflet-control-search .search-tooltip {
    max-width: 250px;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 1px 5px rgba(0,0,0,0.15);
}

#checkboxes {
    background-color: transparent;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}