/* Estilo global para el cuerpo y html */
body, html {
    margin: 0; /* Sin margen */
    padding: 0; /* Sin relleno */
    height: 100%; /* Altura completa */
    background: none; /* Sin fondo */
}

/* Estilo para el header */
header {
    background-color: #800020; /* Color de fondo del header */
    display: flex; /* Usa flexbox para el layout */
    align-items: center; /* Alinea elementos verticalmente en el centro */
    padding: 5px; /* Añade un relleno de 5px */
    position: fixed; /* Fija el header en la parte superior */
    width: 100%; /* Ocupa todo el ancho */
    z-index: 1000; /* Asegura que esté por encima de los demás elementos */
    color: white; /* Color del texto */
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2); /* Sombra ligera */
}

/* Estilo para el div de controles */
#controls {
    background-color: #800020; /* Mismo color que el header */
    color: white; /* Asegura que el texto sea visible */
    padding: 2px; /* Espaciado interno */
    padding-top: 5px;
    position: fixed; /* Posición fija para que quede en la parte superior */
    top: 60px; /* Justo debajo del header */
    width: 100%; /* Ocupa todo el ancho */
    z-index: 900; /* Debajo del header pero encima del mapa */
    display: flex; /* Usar flexbox para el layout */
    justify-content: flex-start; /* Alinea los elementos al inicio */
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.5); /* Sombra ligera */
    border-bottom: 2px solid #4B0015; /* Borde guinda más oscuro */
}


.btn-border-animate {
    background-color: #800020; /* Fondo guinda */
    border: 2px solid #800020; /* Borde del mismo color */
    color: white; /* Texto blanco */
    padding: 2px 5px; /* Espaciado interno */
    text-align: center; /* Texto centrado */
    text-decoration: none; /* Sin subrayado */
    display: inline-block; /* Se muestra como un bloque en línea */
    font-size: 16px; /* Tamaño de fuente */
    margin: 1px 2px; /* Espaciado externo */
    border-radius: 6px; /* Bordes redondeados */
    transition: all 0.3s ease; /* Transición suave para todos los cambios */
    cursor: pointer; /* Cursor de puntero al pasar sobre el botón */
}

.btn-border-animate:hover {
    background-color: #800020; /* Mismo color que el header */
    color: #FFD700; /* Texto amarillo */
}

.btn-border-animate:active {
    background-color: #800020; /* Mismo color que el header */
    color: #FFD700; /* Texto amarillo */
    border: none; /* Sin borde cuando el botón está activo */
    outline: none; /* Sin contorno */
    box-shadow: none; /* Sin sombra al presionar */
}


/* Estilo para el logo en el header */
#logo {
    height: 50px; /* Altura del logo */
    padding-left: 8px;
    margin-right: 20px; /* Margen derecho */
    display: flex; /* Usa flexbox */
    align-items: center; /* Alinea elementos verticalmente en el centro */
}

/* Estilo para el título del header */
header h1 {
    color: white; /* Texto blanco */
    text-align: center; /* Texto centrado */
    flex-grow: 1; /* El elemento crece para ocupar el espacio disponible */
}

/* Estilo para el mapa */
#map {
    position: absolute; /* Fija el mapa debajo del header y controles */
    top: 100px; /* Ajusta la posición para dejar espacio al header y controles */
    bottom: 0; /* Ajusta la altura hasta el fondo */
    width: 100%; /* Ancho completo */
    z-index: 800; /* Asegura que el mapa esté debajo del header y controles */
}

/* Estilo para tooltip sin borde */
.noBorderTooltip {
   color: #000000; /* texto negro */
  font-weight: bold;
  text-shadow:
    -1px -1px 0 #ffffff,
     1px -1px 0 #ffffff,
    -1px  1px 0 #ffffff,
     1px  1px 0 #ffffff; /* halo blanco */
  background: none;
  border: none;
  font-size: 13px;
  padding: 0;
}

/* Estilo para tooltip sin borde */
.noBorderTooltipNucleos 
{
    background: none; /* Sin fondo */
    border: none; /* Sin borde */
    box-shadow: none; /* Sin sombra */
    color: #eafaf1; /* Texto BLANCO */
    font-size: 10px; /* Tamaño de fuente */    
}

.noBorderTooltipEstados 
{
    background: none; /* Sin fondo */
    border: none; /* Sin borde */
    box-shadow: none; /* Sin sombra */
    color: #eafaf1; /* Texto BLANCO */
    font-size: 10px; /* Tamaño de fuente */    
}

/* Estilo para imagen en popup */
.popup-img-dpto {
    width: 100%; /* Ancho completo */
    height: auto; /* Altura automática */
}
/*Para quitar las leyendas de Leaflet*/
.leaflet-control-attribution {
    display: none;
}

/* Estilo para tooltip */
.tooltip-dpto {
    background-color: rgba(255, 255, 255, 0.5); /* Fondo blanco semi-transparente */
}

/* Estilo para el título de la leyenda en Leaflet */
.leaflet-legend-title {
    text-align: center; /* Texto centrado */
    font-weight: bold; /* Texto en negrita */
    font-size: 16px; /* Tamaño de fuente */
}

/* Media query para dispositivos con un ancho máximo de 768px */
@media (max-width: 768px) {
    header {
        flex-direction: column; /* Coloca los elementos en una columna */
        text-align: center; /* Texto centrado */
    }

    #logo {
        margin-right: 0; /* Sin margen derecho */
        margin-bottom: 10px; /* Margen inferior */
    }
}


/* Estilo para contenedor de checkbox */
.checkbox-container {
    display: flex; /* Usa flexbox */
    flex-direction: column; /* Dirección de columna */
    align-items: flex-start; /* Alinea elementos al inicio */
}

/* Estilo para checkbox animado */
.animated-checkbox {
    display: none; /* Oculta el checkbox real */
}

.animated-checkbox + label {
    display: inline-block; /* Se muestra como un bloque en línea */
    position: relative; /* Posicionamiento relativo */
    padding-left: 35px; /* Relleno izquierdo */
    cursor: pointer; /* Cursor de puntero */
    user-select: none; /* Evita la selección del texto */
    font-size: 14px; /* Tamaño de fuente */
    color: #333; /* Color del texto */
    transition: color 0.3s; /* Transición suave del color */
    margin-bottom: 10px; /* Espacio entre checkboxes */
}

.animated-checkbox + label:before {
    content: ""; /* Contenido vacío */
    display: inline-block; /* Se muestra como un bloque en línea */
    width: 25px; /* Ancho */
    height: 25px; /* Altura */
    position: absolute; /* Posicionamiento absoluto */
    left: 0; /* Posición izquierda */
    top: 0; /* Posición superior */
    border: 2px solid #ddd; /* Borde gris */
    background: white; /* Fondo blanco */
    transition: background 0.3s; /* Transición suave del fondo */
}

.animated-checkbox:checked + label:before {
    background: #007bff; /* Fondo azul cuando está seleccionado */
}

.animated-checkbox:checked + label:after {
    content: ""; /* Contenido vacío */
    display: inline-block; /* Se muestra como un bloque en línea */
    width: 5px; /* Ancho */
    height: 10px; /* Altura */
    border: solid white; /* Borde blanco */
    border-width: 0 3px 3px 0; /* Ancho del borde */
    position: absolute; /* Posicionamiento absoluto */
    left: 10px; /* Posición izquierda */
    top: 5px; /* Posición superior */
    transform: rotate(45deg); /* Rotación */
    transition: width 0.2s ease 0.1s, height 0.2s ease 0.1s, border-color 0.2s ease 0.1s; /* Transiciones suaves */
}

.animated-checkbox + label:hover {
    color: #007bff; /* Color azul al pasar el cursor */
}

.dist-marker {
    font-size: 9px;
    border: 1px solid #777;
    border-radius: 10px;
    text-align: center;
    color: #000;
    background: #fff;
}