/* Estilo general del contenedor lateral */
.accordion-item {
    border: none !important;
    margin-bottom: 8px;
    border-radius: 8px !important;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* El botón principal del Sistema */
.accordion-button {
    background-color: #ffffff !important;
    color: white !important;
    font-weight: 700 !important;
    padding: 12px 15px !important;
}

.accordion-button:not(.collapsed) {
    background-color: #f8f9fa !important;
    border-bottom: 2px solid #1abc9c; /* Línea de acento al abrir */
}

/* El botón del Subsistema (sub-btn) */
.sub-btn {
    width: 100%;
    text-align: left;
    background: #ffffff;
    border: none;
    padding: 10px 20px;
    font-size: 14px;
    color: #7f8c8d;
    transition: all 0.2s;
}

.sub-btn:hover {
    background: #eef2f3;
    color: #2c3e50;
    padding-left: 25px; /* Efecto de desplazamiento al pasar el mouse */
}

/* Los links de las estaciones (el nivel más bajo) */
.estacion-link {
    display: block;
    padding: 6px 40px;
    font-size: 13px;
    color: #95a5a6;
    text-decoration: none;
    transition: color 0.2s;
}

.estacion-link:hover {
    color: #1abc9c;
    background: rgba(26, 188, 156, 0.05);
}

/* Contenedor de estaciones */
.station-container {
    border-left: 1px solid #e9ecef; /* Línea vertical sutil a la izquierda */
    margin-left: 20px; /* Alineación con el icono del subsistema */
}

/* Estilo del link con línea divisoria */
.estacion-link {
    font-size: 12px;
    color: #666;
    border-bottom: 1px solid #f1f1f1; /* LA LÍNEA DIVISORIA */
    transition: all 0.2s ease;
}

/* Quitar la línea al último elemento para que no choque con el siguiente grupo */
.estacion-link:last-child {
    border-bottom: none;
}

/* Efecto al pasar el mouse */
.estacion-link:hover {
    background-color: #f8f9fa;
    color: #2c3e50;
    padding-left: 55px !important; /* Pequeño desplazamiento de énfasis */
}
.estacion-link {
    border-bottom: 1px solid #f1f4f6; /* Línea suave */
    transition: background 0.2s;
}

/* ELIMINA LA DOBLE LÍNEA AL FINAL */
.estacion-link:last-child {
    border-bottom: none !important;
}

.pop_text {
    font-family: "Poppins", sans-serif !important;
    font-size: 13px;
    font-weight: 600;
    color: #2c3e50;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0,0,0,0.2);
    border-radius: 4px;
    padding: 2px 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Opcional: Ajustar el Tooltip de Leaflet para que no tenga bordes feos */
.leaflet-tooltip.pop_text {
    border: none;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}
.tope{
    background: linear-gradient(135deg, #34495e 0%, #2c3e50 100%); 
            height: 45px; 
            line-height: 50px; 
            color: #ffffff; 
            font-weight: 600; 
            font-size: 18px; 
            text-align: center; 
            border-bottom-left-radius: 20px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            letter-spacing: 0.5px;
            text-transform: uppercase;
}
 /* Estilo general del contenedor lateral */
         .accordion-item {
         border: none !important;
         margin-bottom: 8px;
         border-radius: 8px !important;
         overflow: hidden;
         box-shadow: 0 2px 4px rgba(0,0,0,0.05);
         }
         /* El botón principal del Sistema */
         .accordion-button {
         background-color: #ffffff !important;
         color: white !important;
         font-weight: 700 !important;
         padding: 12px 15px !important;
         }
         .accordion-button:not(.collapsed) {
         background-color: #f8f9fa !important;
         border-bottom: 2px solid #1abc9c; /* Línea de acento al abrir */
         }
         /* El botón del Subsistema (sub-btn) */
         .sub-btn {
         width: 100%;
         text-align: left;
         background: #ffffff;
         border: none;
         padding: 10px 20px;
         font-size: 14px;
         color: #7f8c8d;
         transition: all 0.2s;
         }
         .sub-btn:hover {
         background: #eef2f3;
         color: #2c3e50;
         padding-left: 25px; /* Efecto de desplazamiento al pasar el mouse */
         }
         /* Los links de las estaciones (el nivel más bajo) */
         .estacion-link {
         display: block;
         padding: 6px 40px;
         font-size: 13px;
         color: #95a5a6;
         text-decoration: none;
         transition: color 0.2s;
         }
         .estacion-link:hover {
         color: #1abc9c;
         background: rgba(26, 188, 156, 0.05);
         }

         /* Estilo base del enlace */
.estacion-link {
    transition: all 0.3s ease;
    border-bottom: 1px solid #f8f9fa !important;
}

/* Contenedor para el indicador (la barrita) */
.estacion-link.active-estacion {
    background-color: rgba(46, 204, 113, 0.05) !important; /* Un fondo verde casi invisible */
}

/* La barrita indicadora al final (derecha) */
.estacion-link.active-estacion::after {
    content: "";
    position: absolute;
    right: 0;
    top: 15%; /* No ocupa todo el alto para que se vea más moderno */
    height: 70%;
    width: 4px; /* Grosor de la barrita */
    background-color: #2ecc71; /* Color verde de "abierto" */
    border-radius: 4px 0 0 4px; /* Bordes redondeados en la parte interna */
    box-shadow: -2px 0 5px rgba(46, 204, 113, 0.2);
}

/* Efecto Hover para que se sienta interactivo */
.estacion-link:hover {
    background-color: #f8fafc !important;
    padding-left: 52px !important; /* Pequeño desplazamiento a la derecha */
}



/* La barrita indicadora lateral */
.indicador-lateral {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 4px;
    background-color: #2ecc71; /* Color verde o el que prefieras */
    box-shadow: -1px 0 4px rgba(46, 204, 113, 0.3);
}

/* Estilo para el botón cuando está activo */
.sub-btn:not(.collapsed) {
    background-color: #f8f9fa !important;
    color: #2c3e50 !important;
}

/* Rotación del icono caret */
.sub-btn.collapsed .icon-transition {
    transform: rotate(0deg);
}
.sub-btn:not(.collapsed) .icon-transition {
    transform: rotate(90deg);
    transition: transform 0.2s ease;
}


/* EL CONTENEDOR MAESTRO (Elegante y técnico) */
.custom-tooltip-master {
    background: rgba(15, 25, 40, 0.8) !important; /* Azul noche profundo */
    backdrop-filter: blur(3px); 
    color: #ffffff !important;
    border: 0.5px solid rgba(255, 255, 255, 0.25) !important; /* Borde ultra fino */
    border-radius: 2px;
    padding: 4px 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    opacity: 1 !important;
}

/* Flecha del tooltip sutil */
.custom-tooltip-master:before {
    border-right-color: rgba(15, 25, 40, 0.8) !important;
}

/* TIPOGRAFÍA TÉCNICA (Uso de Title Case) */
.label-master {
    font-family: 'Inter', 'Roboto', 'Helvetica Neue', sans-serif;
    font-weight: 500; /* Peso medio para limpieza visual */
    font-size: 11px;
    letter-spacing: 0.3px; /* Espaciado sutil */
    white-space: nowrap;
}

/* VARIACIONES DE COLOR TÉCNICO */
.text-industrial { 
    color: #f0f0f0 !important; /* Blanco hueso, menos agresivo que el blanco puro */
     font-style: italic; /* La convención cartográfica dicta cursiva para agua */
} 

.text-agua { 
    color: #a0d8ef !important; /* Celeste acero, más profesional para hidrografía */
    font-style: italic; /* La convención cartográfica dicta cursiva para agua */
}

/* EL CONTENEDOR: Integrado con el estilo de la web */
.leaflet-popup-content-wrapper {
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(8px);
    border-radius: 4px !important;
    padding: 0 !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15) !important;
    border: 1px solid #235d61 !important; /* Verde azulado oscuro de tu cabecera */
}

/* LA FLECHA: Limpia y coordinada */
.leaflet-popup-tip {
    background: white !important;
    border-left: 1px solid #235d61;
    border-bottom: 1px solid #235d61;
}

/* CONTENIDO INTERNO: Compacto y técnico */
.popup-custom-container {
    padding: 10px 14px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
}

/* TÍTULO: Color coordinado con el marcador (Naranja o Azul) */
.popup-title {
    font-family: 'Inter', 'Roboto', sans-serif; /* Más limpio que Mono para esta web */
    font-size: 13px;
    font-weight: 800;
    color: #f17316; /* El naranja que ya usas para resaltar */
    letter-spacing: 0.2px;
    margin: 0;
    border-right: 1px solid rgba(0,0,0,0.1);
    padding-right: 12px;
}

/* BOTÓN: Estilo minimalista acorde a la web */
.btn-popup-detalles {
    background: transparent;
    color: #2a7d81 !important; /* El turquesa de tu sistema */
    border: 1px solid #2a7d81;
    padding: 5px 10px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-popup-detalles:hover {
    background: #2a7d81;
    color: white !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(42, 125, 129, 0.3);
}

/* Contenedor del Popup más compacto */
.modern-action-popup .leaflet-popup-content-wrapper {
    background: rgba(255, 255, 255, 0.98) !important;
    border-radius: 30px !important; /* Forma de cápsula */
    padding: 2px !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2) !important;
    border: 1px solid rgba(42, 125, 129, 0.2) !important;
}

.modern-action-popup .leaflet-popup-content {
    margin: 6px 8px !important;
}

/* El Botón "Lindo" y con Relieve */
.btn-pro-detalles {
    background: linear-gradient(135deg, #2a7d81 0%, #1e5a5d 100%); /* Degradado corporativo */
    color: white !important;
    padding: 8px 16px;
    border-radius: 25px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(30, 90, 93, 0.23);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Efecto al pasar el mouse: se eleva y brilla ligeramente */
.btn-pro-detalles:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 10px rgba(0,0,0,0.2), 0 4px 10px rgba(30, 90, 93, 0.3);
    filter: brightness(1.1);
    color: white !important;
}

/* Ícono dentro del botón */
.btn-pro-detalles i {
    font-size: 13px;
    opacity: 0.9;
}


/* Contenedor tipo cápsula minimalista */
.modern-action-popup .leaflet-popup-content-wrapper {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(4px);
    border-radius: 25px !important; 
    padding: 2px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
    border: 1px solid rgba(42, 125, 129, 0.3) !important;
}

.modern-action-popup .leaflet-popup-content {
    margin: 5px !important;
}

/* Botón con relieve y tipografía técnica */
.btn-pro-detalles {
    background: linear-gradient(180deg, #2a7d81 0%, #216366 100%);
    color: white !important;
    padding: 7px 18px;
    border-radius: 20px;
   
    font-family: "Poppins", sans-serif !important;
    font-size: 11.5px;
    font-weight: 600; /* Menos pesado que 700 */
    text-transform: none; /* Adiós a las mayúsculas forzadas */
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    transition: all 0.25s ease;
    /* Sombra exterior y brillo interno para efecto "3D" sutil */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.2);
    border: 0.5px solid rgba(0,0,0,0.1);
}

.btn-pro-detalles:hover {
    background: linear-gradient(180deg, #329196 0%, #2a7d81 100%);
    transform: translateY(-1.5px);
    box-shadow: 0 5px 10px rgba(0,0,0,0.25);
    color: white !important;
}

/* Ajuste del icono para que se vea más tecnológico */
.btn-pro-detalles i {
    font-size: 12px;
    color: #a0d8ef; /* Un celeste suave para resaltar el icono sobre el verde */
}

#sistema, .text-normal {
    text-transform: none !important; /* Anula las mayúsculas forzadas */
    font-weight: 600;
    letter-spacing: normal; /* Quita el espaciado ancho de estilo "título" */
}

#subsistema-breadcrumb {
    letter-spacing: 0.2px; /* Mejora la legibilidad técnica */
    vertical-align: middle;
    display: inline-flex;
    align-items: center;
    opacity: 0.9;
   color: #576574; /* Gris oscuro azulado nítido */
}

#subsistema-breadcrumb i {
    margin-top: 1px; /* Alineación óptica del icono con el texto */
}

.map-overlay-info {
    position: absolute;
    bottom: 20px;
    left: 20px;
    z-index: 1000;
    display: flex;
    align-items: center;
    background: rgba(42, 125, 129, 0.85); /* El turquesa de tu web con transparencia */
    backdrop-filter: blur(8px);
    color: white;
    padding: 8px 16px;
    border-radius: 4px;
    border-left: 4px solid #f17316; /* Detalle naranja para resaltar */
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    font-family: "Poppins", sans-serif !important;
    transition: all 0.3s ease;
}

.map-overlay-info i {
    font-size: 14px;
    opacity: 0.9;
}

.map-overlay-info .divider {
    width: 1px;
    height: 18px;
    background: rgba(255, 255, 255, 0.3);
    margin: 0 12px;
}

.map-overlay-info .text-content {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: none !important; /* Respetamos minúsculas */
}



/* Contenedor padre para evitar desbordes */
.map-wrapper {
    overflow: hidden; /* Corta cualquier cosa que intente salir */
    border-radius: 8px;
}
.utm-cintillo-fijo {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 12px; /* Reducimos un poco el gap para ganar espacio */
    background: rgba(44, 62, 80, 0.95);
    padding: 6px 12px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.1);
    /* No fijamos min-width para que sea flexible al contenido */
}

.utm-unit {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
}

/* Contenedor para número + unidad */
.utm-values-wrapper {
    display: flex;
    align-items: baseline; /* Alinea la 'm' a la base del número */
    gap: 3px;
    white-space: nowrap; /* EVITA EL SALTO DE LÍNEA */
}

.badge-n, .badge-e {
    font-size: 10px;
    font-weight: 900;
    padding: 2px 4px;
    border-radius: 3px;
    color: white;
    flex-shrink: 0; /* Impide que el badge se deforme */
}

.badge-n { background-color: #f17316; }
.badge-e { background-color: #2980b9; }

.val {
    font-family: 'Roboto Mono', monospace;
    font-size: 12px; /* Reducimos 1px para asegurar que quepa en mapas de 300px */
    color: #ffffff;
    font-weight: 600;
}

.unit-m {
    font-family: 'Roboto Mono', monospace;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.6); /* Grisáceo para no distraer del número */
    font-weight: 400;
}

.utm-line {
    width: 1px;
    height: 14px;
    background: rgba(255,255,255,0.2);
}



/*******************************/


.utm-cintillo-sharp-glass {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    display: flex;
    justify-content: space-around;
    align-items: center;
    
    background: rgba(15, 23, 42, 0.15); /* Un toque azulado muy leve para profundidad */
    backdrop-filter: blur(6px) saturate(160%);
    -webkit-backdrop-filter: blur(6px) saturate(160%);
    
    padding: 14px 0;
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    /* Sombra exterior mínima para separar del mapa sin ensuciar */
    box-shadow: 0 -4px 15px rgba(0,0,0,0.1); 
}

.utm-item {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* Indicadores: Barras ultra-finas */
.indicator-n, .indicator-e {
    width: 2px;
    height: 22px;
    border-radius: 1px;
}
.indicator-n { background: #f17316; box-shadow: 0 0 10px rgba(241, 115, 22, 0.4); }
.indicator-e { background: #3498db; box-shadow: 0 0 10px rgba(52, 152, 219, 0.4); }

.utm-data {
    display: flex;
    flex-direction: column;
}

.utm-data .label {
    font-family: 'Poppins', sans-serif;
    font-size: 8px;
    font-weight: 800; /* Extra Bold para el contraste */
    color: #ffffff;
    letter-spacing: 2.5px;
    line-height: 1;
    margin-bottom: 3px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.6);
    opacity: 0.9;
}

.utm-data .value {
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: 600; /* Semi Bold */
    color: #ffffff;
    letter-spacing: 0.5px;
    line-height: 1;
    text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}

.utm-data .value small {
    font-size: 11px;
    font-weight: 300;
    margin-left: 2px;
    opacity: 0.8;
}

.utm-divider-glass {
    width: 1px;
    height: 28px;
    background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.3), transparent);
}


/* --- LEYENDA COMPACTA PREMIUM --- */
.glass-compact-box {
    position: absolute;
    bottom: 20px;
    left: 20px;
    z-index: 1000;
    min-width: 180px;
    max-width: 300px;
    
    /* Cristal más claro y menos gris */
    background: rgba(255, 255, 255, 0.15); 
    backdrop-filter: blur(8px) saturate(140%);
    -webkit-backdrop-filter: blur(8px) saturate(140%);
    
    /* Bordes rectos y finos */
    border-radius: 4px; 
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    
    display: flex;
    overflow: hidden;
    animation: fadeIn 0.4s ease-in-out;
}

/* Indicador lateral de color */
.legend-indicator {
    width: 4px;
    flex-shrink: 0;
}

.legend-body-slim {
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.legend-text-slim {
    font-family: 'Poppins', sans-serif;
    font-size: 11px; /* Fuente más pequeña y elegante */
    font-weight: 500;
    color: #ffffff;
    letter-spacing: 0.3px;
    line-height: 1.2;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

/* Animación sutil */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Re-ajuste del Selector de Capas para que combine */
.layer-control-floating {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 2px;
}



/***********************/


    .img-cintillo-sharp-glass {
                     position: absolute;
                     bottom: 0;
                     left: 0;
                     right: 0;
                     z-index: 10;
                     display: flex;
                     justify-content: space-around;
                     align-items: center;
                     /* Efecto Ultra Glass: Un poco más de blur para legibilidad sobre fotos */
                     background: rgba(15, 23, 42, 0.3); 
                     backdrop-filter: blur(10px) saturate(150%);
                     -webkit-backdrop-filter: blur(10px) saturate(150%);
                     padding: 12px 0;
                     border-top: 1px solid rgba(255, 255, 255, 0.2);
                     }
                     .img-item {
                     display: flex;
                     align-items: center;
                     }
                     .img-data {
                     display: flex;
                     flex-direction: column;
                     align-items: center;
                     }
                     .img-label {
                     font-family: 'Poppins', sans-serif;
                     font-size: 8px;
                     font-weight: 800;
                     color: rgba(255, 255, 255, 0.7);
                     letter-spacing: 1.5px;
                     line-height: 1;
                     margin-bottom: 3px;
                     text-shadow: 0 1px 2px rgba(0,0,0,0.4);
                     }
                     .img-value {
                     font-family: 'Poppins', sans-serif;
                     font-size: 15px;
                     font-weight: 600;
                     color: #ffffff;
                     line-height: 1;
                     text-shadow: 0 1px 4px rgba(0,0,0,0.6);
                     }
                     .img-value small {
                     font-size: 10px;
                     font-weight: 300;
                     margin-left: 2px;
                     }
                     .img-divider-glass {
                     width: 1px;
                     height: 25px;
                     background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.3), transparent);
                     }
                     /* Ajuste para los controles del carrusel para que no choquen con el glass */
                     .carousel-control-prev, .carousel-control-next {
                     height: 70%; /* Los acortamos para que no pisen el cintillo inferior */
                     }


/* --- ESTILO BASE UNIFICADO (SHARP GLASS) --- */
.utm-cintillo-sharp-glass, 
.img-cintillo-sharp-glass {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    display: flex;
    justify-content: space-around;
    align-items: center;
    
    /* Altura forzada y Padding idéntico */
    height: 50px; 
    padding: 0; 
    
    background: rgba(15, 23, 42, 0.25); 
    backdrop-filter: blur(8px) saturate(160%);
    -webkit-backdrop-filter: blur(8px) saturate(160%);
    
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 -4px 15px rgba(0,0,0,0.1);
}

/* --- ÍTEMS Y DATOS --- */
.utm-item, .img-item {
    display: flex;
    align-items: center;
    gap: 15px;
}

.utm-data, .img-data {
    display: flex;
    flex-direction: column;
}

/* --- ETIQUETAS (NORTE, ESTE, ESTACIÓN, PROFUNDIDAD) --- */
.utm-data .label, .img-label {
    font-family: 'Poppins', sans-serif;
    font-size: 8px;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: 2.5px;
    line-height: 1;
    margin-bottom: 3px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.6);
    opacity: 0.9;
    text-transform: uppercase;
}

/* --- VALORES NUMÉRICOS --- */
.utm-data .value, .img-value {
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #ffffff;
    letter-spacing: 0.5px;
    line-height: 1;
    text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}

.utm-data .value small, .img-value small {
    font-size: 11px;
    font-weight: 300;
    margin-left: 2px;
    opacity: 0.8;
}

/* --- DIVISORES (IGUALADOS EN ALTURA) --- */
.utm-divider-glass, .img-divider-glass {
    width: 1px;
    height: 28px; /* Altura idéntica en ambos cards */
    background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.3), transparent);
}

/* --- INDICADORES (BARRAS DE COLOR) --- */
.indicator-n, .indicator-e, .indicator-v {
    width: 2px;
    height: 22px;
    border-radius: 1px;
}
.indicator-n { background: #f17316; box-shadow: 0 0 10px rgba(241, 115, 22, 0.4); }
.indicator-e { background: #3498db; box-shadow: 0 0 10px rgba(52, 152, 219, 0.4); }
.indicator-v { background: #1abc9c; box-shadow: 0 0 10px rgba(26, 188, 156, 0.4); }



.technical-sheet {
    font-family: 'Poppins', sans-serif;
}

.technical-sheet .label-cell {
    padding: 12px 0 12px 10px !important;
    color: #7f8c8d;
    font-size: 11px;
    font-weight: 500;
    vertical-align: middle;
}

.technical-sheet .value-cell {
    padding: 12px 10px 12px 0 !important;
    text-align: right;
    font-weight: 600;
    color: #2c3e50;
    font-size: 12px;
    vertical-align: middle;
}

.technical-sheet .bg-row {
    background-color: #f8f9fa;
    border-radius: 8px; /* Crea un efecto de cápsula en las filas pares */
}

/* Iconos de la tabla */
.technical-sheet i {
    opacity: 0.6;
    font-size: 13px;
}

/* Footer de la ficha estilo Apple */
.ficha-footer-glass {
    background: rgba(17, 117, 136, 0.05);
    border: 1px solid rgba(17, 117, 136, 0.1);
    padding: 8px;
    border-radius: 8px;
    text-align: center;
    color: #117588;
    font-family: 'Poppins', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}




/* --- TOOLTIP ESTILO CRISTAL PREMIUM (FROSTED GLASS) --- */
.leaflet-label.custom-tooltip-master {
    /* Fondo más claro y vibrante para el efecto cristal */
    background: rgba(255, 255, 255, 0.15) !important; 
    
    /* Desenfoque profundo (Crucial para el efecto pro) */
    backdrop-filter: blur(12px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(180%) !important;
    
    /* Borde de "luz" sutil */
    border: 1px solid rgba(255, 255, 255, 0.4) !important; 
    border-radius: 1px !important;
    
    /* Sombra suave y amplia para elevar el elemento */
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3) !important;
    
    padding: 6px 14px !important;
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); /* Mejora la lectura sobre el mapa */
}

/* Ajuste de la flecha del tooltip para que sea translúcida también */
.leaflet-label.custom-tooltip-master:before {
    border-right-color: rgba(255, 255, 255, 0.25) !important;
}

/* --- TIPOGRAFÍA TÉCNICA REFINADA --- */
.label-master {
    font-family: 'Poppins', sans-serif;
    font-size: 11px; /* Un punto más grande para balancear el blur */
   
    letter-spacing: 0.8px;
   
}

/* Variación para que el azul del agua no se pierda en el cristal */
.text-agua { 
    color: #a5f3fc !important; /* Un celeste más brillante/neon */
    font-style: italic;
    font-weight: 700;
}

/* --- ESTILO PREMIUM PARA EL MINIMAPA --- */
.leaflet-control-minimap {
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
    border-radius: 12px !important;
    overflow: hidden;
    background: rgba(15, 23, 42, 0.4) !important;
    backdrop-filter: blur(4px);
    margin-bottom: 25px !important; /* Separación del borde inferior */
    margin-left: 20px !important;
}

.leaflet-control-minimap-toggle-display {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border-radius: 4px !important;
}



/* --- BORDE BLANCO PREMIUM PARA EL MINIMAPA --- */
.leaflet-control-minimap.leaflet-container {
    /* Forzamos el borde blanco con !important */
    border: 2px solid rgba(255, 255, 255, 0.8) !important;
    
    /* Sombra externa e interna para resaltar sobre el satélite */
    box-shadow: 0 0 0 1px rgba(0,0,0,0.2), 
                0 8px 25px rgba(0,0,0,0.5), 
                inset 0 0 10px rgba(255,255,255,0.1) !important;
    
    /* Efecto cristal (Blur) */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    
    border-radius: 12px !important;
    overflow: hidden;
    margin-bottom: 25px !important;
    margin-left: 20px !important;
}

/* El rectángulo de enfoque dentro del minimapa */
.leaflet-control-minimap-aiming-rect {
    stroke: #ffffff !important;
    stroke-width: 2px !important;
    stroke-dasharray: 4, 3; /* Estilo técnico discontinuo */
    fill: rgba(255, 255, 255, 0.1) !important;
}

/* Botón para minimizar/maximizar */
.leaflet-control-minimap-toggle-display {
    background-color: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid white !important;
    border-radius: 4px 0 0 0 !important;
    filter: invert(1); /* Hace que el icono de la flecha sea oscuro sobre el botón blanco */
}

/* Estilo para los bloques de información */
.info-block {
    display: flex;
    flex-direction: column; /* Apila el título sobre el texto */
    gap: 0px;
}

/* Título de la categoría (Arriba) */
.info-title {
    font-size: 11px;
    color: #657786; /* Gris tipo tendencia */
    margin-bottom: 0;
    text-transform: none;
    font-weight: 400;
}

/* Texto del valor (Debajo) */
.info-text {
    font-size: 12px;
    color: #14171a;
    font-weight: 600;
    line-height: 1.2;
}

/* Fondo sutil para filas alternas */
.bg-light-subtle {
    background-color: #f7f9f9 !important;
}

/* Ajuste del Card para que se vea premium */
.card {
    border: 1px solid #e1e8ed !important;
    background: #ffffff;
}

/* Contenedor principal: Ajustamos sin romper el layout del plugin */
.leaflet-control-search {
    background: rgba(255, 255, 255, 0.95) !important;
    border: 2px solid rgba(0, 0, 0, 0.05) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
    border-radius: 8px !important;
    /* Quitamos el overflow:hidden temporalmente para ver si es lo que traba el dropdown */
}

/* Input: Aseguramos que sea visible y clickeable */
.leaflet-control-search .search-input {
    font-family: 'Poppins', sans-serif !important;
    font-size: 13px !important;
    height: 30px !important;
    padding: 0 10px !important;
    border: none !important;
    outline: none !important;
}

/* El botón: Usamos el icono por defecto pero le damos color industrial */
.leaflet-control-search .search-button {
    width: 30px !important;
    height: 30px !important;
    background-color: #fff !important; /* El azul oscuro de tu barra lateral */
    border-radius: 0 6px 6px 0 !important;
}

/* Arreglo para el icono de la lupa si desaparece */
.leaflet-control-search .search-button:before {
    filter: brightness(0) invert(1); /* Pone la lupa blanca */
}

/* Dropdown de resultados (Donde suele trabarse) */
.leaflet-control-search .search-tooltip {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    width: 100% !important;
    background: #ffffff !important;
    border-radius: 0 0 8px 8px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
    z-index: 1000 !important;
}

.leaflet-control-search .search-tip {
    font-family: 'Poppins', sans-serif !important;
    font-size: 12px !important;
    padding: 8px !important;
    border-bottom: 1px solid #eee !important;
    cursor: pointer !important;
}

.leaflet-control-search .search-tip:hover {
    background-color: #f0f7f8 !important;
    color: #117588 !important;
}


/***************selector******************/
/* 1. Forzamos que el menú SIEMPRE esté por encima de Leaflet */
/* El z-index de Leaflet llega a 1000, nosotros usaremos el máximo nivel */
.select2-container--open {
    z-index: 9999999 !important;
}

/* 2. Estilizamos el dropdown para que no se vea extraño ni duplicado */
.select2-container--bootstrap-5 .select2-dropdown {
    margin-top: 5px !important;
    border: none !important;
    border-radius: 1px !important;
    background-color: #ffffff !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25) !important; /* Sombra Pro */
    overflow: hidden !important;
}

/* 3. Limpiamos los ítems para que se vean como en la imagen de referencia */
.select2-container--bootstrap-5 .select2-results__option {
    padding: 10px 16px !important;
    font-size: 13px !important;
    color: #333 !important;
    font-family: 'Poppins', sans-serif !important;
}

/* 4. Color de selección (Tu color corporativo) */
.select2-container--bootstrap-5 .select2-results__option--highlighted[aria-selected] {
    background-color: color: !important; 
    color: white !important;
}

/* 5. Evitamos que el texto se encime con los iconos del header */
.filter-item {
    position: relative;
    z-index: 1060; /* Asegura que el botón esté sobre el mapa */
}
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered
{
    padding: 0;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    font-size: 13px !important;
}


/* Forzar centrado vertical en el área de selección */
.select2-container--bootstrap-5 .select2-selection--single {
    display: flex !important;
    align-items: center !important; /* Centra verticalmente el contenido */
    height: 38px !important; /* Ajusta a la altura que desees */
    padding: 0 10px !important;
}

/* Ajustar el renderizado del texto seleccionado */
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
    line-height: normal !important; /* Elimina alturas de línea heredadas que desvían el texto */
    padding: 0 !important;
    margin: 0 !important;
    display: flex;
    align-items: center;
}

/* Centrar la flecha lateral */
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__arrow {
    height: 100% !important;
    display: flex;
    align-items: center;
    position: absolute;
    right: 10px;
}

info-title {
    display: flex;
    align-items: center;
    font-family: 'Poppins', sans-serif;
    font-size: 11px !important;       /* Tamaño pequeño pero legible */
    font-weight: 800 !important;      /* Peso extra-bold para quitar lo "endeble" */
    text-transform: uppercase;         /* Mayúsculas para mayor autoridad visual */
    letter-spacing: 1.2px;            /* Espaciado elegante */
    color: #117588;                   /* Tu turquesa corporativo */
    margin-bottom: 4px;
    opacity: 0.9;                     /* Un toque de transparencia profesional */
}

.info-title i {
    font-size: 14px;                  /* Icono ligeramente más grande que el texto */
    margin-right: 6px;
}




   .chart-loading-overlay {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.7); /* Fondo traslúcido */
    backdrop-filter: blur(4px); /* Desenfoque elegante */
    border-radius: 15px;
    height: 400px; /* Misma altura que tu gráfico */
    transition: all 0.3s ease;
}

.custom-loader {
    width: 40px;
    height: 40px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid #117588; /* Tu color turquesa */
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }



</style>



<style>
    /* Tarjeta del gráfico */
    .chart-card-pro {
        background: #ffffff;
        border-radius: 12px;
        padding: 20px;
        border: 1px solid #eaeaea;
        transition: all 0.3s ease;
    }

    /* Contenedor de nota con acento lateral */
    .info-note-container {
        background-color: #f8f9fa; /* Gris ultra claro muy profesional */
        border-left: 4px solid #006d6d; /* Tu color de identidad */
        border-radius: 4px 8px 8px 4px;
        padding: 18px 22px;
        margin-top: 5px;
        border-top: 1px solid #f0f0f0;
        border-right: 1px solid #f0f0f0;
        border-bottom: 1px solid #f0f0f0;
    }

    .info-icon-wrapper {
        margin-right: 15px;
        color: #0f7c91;
        font-size: 1.1rem;
    }

    .info-content h6 {
        color: #34495e;
        font-weight: 700;
        font-size: 12px;
        margin-bottom: 5px;
        text-transform: uppercase;
        letter-spacing: 0.8px;
    }

    .info-content p {
        color: #6c757d;
        font-size: 12px;
        line-height: 1.6;
        margin-bottom: 0;
        font-style: italic; /* Le da un toque de 'observación técnica' */
    }

    /* Animación suave al aparecer */
    .animate__fadeIn {
        animation: fadeIn 0.6s;
    }
    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(10px); }
        to { opacity: 1; transform: translateY(0); }
    }



    .warning-note-container {
        background-color: #fffdf0; /* Fondo crema suave */
        border-left: 4px solid #f39c12; /* Acento naranja/warning profesional */
        border-radius: 6px;
        padding: 18px 22px;
        margin-top: 15px;
        border-top: 1px solid #faebcc; /* Borde sutil superior */
        border-right: 1px solid #faebcc;
        border-bottom: 1px solid #faebcc;
        box-shadow: 0 4px 12px rgba(243, 156, 18, 0.05); /* Sombra con matiz naranja */
    }

    .warning-icon-wrapper {
        margin-right: 18px;
        color: #006d6d; /* Color de icono warning vibrante */
        font-size: 1.3rem;
        padding-top: 2px;
    }

    .warning-content h6 {
        color: #006d6d; /* Título en naranja oscuro para contraste */
        font-weight: 700;
        font-size: 13px;
        margin-bottom: 5px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .warning-content p {
        color: #856404; /* Texto en tono café/dorado oscuro */
        font-size: 11.5px;
        line-height: 1.6;
        margin-bottom: 0;
    }


  /* Contenedor Base compartido */
    .info-box-premium {
        border-radius: 8px;
        padding: 15px 20px;
        border: 1px solid transparent;
        transition: all 0.3s ease;
        box-shadow: 0 2px 4px rgba(0,0,0,0.02);
    }

    /* Estilo para la NOTA (Azul/Verde institucional) */
    .nota-blue {
        background-color: #f8f9fa; /* Fondo gris ultra claro */
        border-left: 5px solid #007F2D; /* Color de tu serie 1 */
        border-color: #e9ecef;
    }
    .nota-blue .info-icon { color: #0f7c91; }
    .nota-blue h6 { color: #2c3e50; }

    /* Estilo para el WARNING (Ámbar técnico) */
    .warning-amber {
        background-color: #fffdf2; /* Amarillo crema pálido */
        border-left: 5px solid #f9e28e; /* Borde ámbar fino */
        border-color: #f9e28e;
    }
    .warning-amber .info-icon { color: #c09107; }
    .warning-amber h6 { color: #b08506; }

    /* Tipografía común para que conversen */
    .info-icon {
        margin-right: 15px;
        font-size: 18px;
        margin-top: 2px;
    }

    .info-body h6 {
        font-size: 11px;
        font-weight: 800;
        margin-bottom: 4px;
        text-transform: uppercase;
        letter-spacing: 0.8px;
    }

    .info-body p {
        margin-bottom: 0;
        font-size: 12px;
        line-height: 1.5;
        color: #555;
    }

    .info-body strong {
        font-weight: 700;
        color: #333;
    }


   
    /* El contenedor que cubre toda el área del chart-container */
    .chart-loading-wrapper {
        height: 100%;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #fcfcfc; /* Fondo neutro muy claro */
        border: 1px solid #eaeaea;  /* Borde fino similar a tus notas */
        border-radius: 1px;       /* Radio elegante coincidente con el dashboard */
        box-shadow: inset 0 0 10px rgba(0,0,0,0.01); /* Sutil profundidad */
        animation: pulseFade 2s infinite ease-in-out;
    }

    .chart-loading-overlay {
        text-align: center;
    }

    .loading-text {
        margin-top: 15px; 
        color: #7f8c8d; /* Gris elegante de tus ejes */
        font-family: 'Poppins', sans-serif; 
        font-weight: 400; 
        font-size: 13px;
        letter-spacing: 0.5px;
        text-transform: lowercase; /* Look minimalista moderno */
    }

    /* Animación de latido para el contenedor mientras carga */
    @keyframes pulseFade {
        0% { border-color: #eaeaea; }
        50% { border-color: #0f7c91; opacity: 0.8; } /* Flash con tu color corporativo */
        100% { border-color: #eaeaea; }
    }

    /* Tu custom-loader (asegúrate de tenerlo definido) */
    .custom-loader {
        width: 40px;
        height: 40px;
        border: 3px solid #f3f3f3;
        border-top: 3px solid #0f7c91; /* Color Caserones */
        border-radius: 50%;
        display: inline-block;
        animation: spin 1s linear infinite;
    }

    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }


     .tope-majestuoso {
        background-color: #34495e; /* Azul pizarra coherente con el mapa */
        padding: 0 25px;
        display: flex;
        align-items: center;       /* Centrado vertical de todos los elementos */
        min-height: 55px;          /* Altura estandarizada para evitar saltos */
        border-radius: 0 0 0 20px; /* Curva característica inferior izquierda */
        margin-bottom: 20px;
        border: none;
        overflow: hidden;
    }

    #sistema-header {
        display: flex;
        align-items: center;
        width: 100%;
        flex-wrap: nowrap;
    }

    .sistema-main {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .sistema-icon {
        font-size: 18px;
        filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
    }

    .sistema-title {
        font-family: 'Poppins', sans-serif;
        font-size: 17px;
        font-weight: 300;
        color: #FFFFFF;
        letter-spacing: 1.5px;
        margin: 0;
        white-space: nowrap;
        line-height: 1;            /* Centrado óptico mejorado */
    }

    .sistema-divider {
        color: #b08506;            /* Dorado ocre de los divisores editoriales */
        font-size: 22px;
        font-weight: 200;
        margin: 0 20px;
        opacity: 0.5;
        line-height: 1;
    }

    .sistema-brand {
        display: flex;
        flex-direction: column; 
        justify-content: center;   /* Centrado vertical del bloque de texto */
        line-height: 1.1;
    }

    .brand-name {
        font-size: 15px;
        font-weight: 700;
        letter-spacing: 0.5px;
        text-transform: none;
    }

    .brand-group {
        font-size: 10px;
        font-weight: 400;
        color: #95a5a6;            /* Gris suave para la marca secundaria */
        letter-spacing: 3px;       /* Kerning premium majestuoso */
        margin-top: 2px;
        text-transform: uppercase;
    }

.icon-square {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 6px; /* Ajusta este valor si lo quieres más o menos cuadrado */
    margin-right: 10px; /* Espacio entre el cuadro y el texto */
    flex-shrink: 0;
}