body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}

#map {
    width: 100%;
    height: 100vh;
}

.info {
    padding: 10px;
    background: white;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    max-width: 300px;
}

.info h4 {
    margin: 0 0 10px;
    font-size: 16px;
    color: #333;
}

.legend {
    padding: 10px;
    background: white;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
    border-radius: 5px;
}

.legend i {
    width: 18px;
    height: 18px;
    float: left;
    margin-right: 8px;
    opacity: 0.7;
}

.legend .category {
    margin-bottom: 8px;
    clear: both;
}

.legend h4 {
    margin: 0 0 10px;
    font-size: 14px;
    color: #333;
}

.legend-row {
    display: flex;
    margin-bottom: 5px;
}

.legend-color {
    width: 20px;
    height: 20px;
    margin-right: 5px;
}

.legend-value {
    font-size: 12px;
    line-height: 20px;
}

.legend-category {
    font-weight: bold;
    font-size: 14px;
    margin-top: 10px;
    margin-bottom: 5px;
    border-bottom: 1px solid #ccc;
}

/* Estilo para el botón de pantalla completa */
.fullscreen-button {
    position: relative;
}

.fullscreen-button:hover {
    background-color: #f4f4f4;
}

.fullscreen-icon {
    width: 20px;
    height: 20px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black" width="18px" height="18px"><path d="M0 0h24v24H0z" fill="none"/><path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/></svg>');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    display: block;
}

.exit-fullscreen-icon {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black" width="18px" height="18px"><path d="M0 0h24v24H0z" fill="none"/><path d="M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z"/></svg>');
}

/* Estilo para el icono de cámara */
.camera-icon {
    width: 20px;
    height: 20px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" stroke="black" stroke-width="1"><path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"/></svg>');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
}

.camera-icon-live {
    filter: drop-shadow(0 0 2px rgba(255, 0, 0, 0.8));
}

.camera-icon-image {
    filter: drop-shadow(0 0 2px rgba(0, 102, 204, 0.8));
}

/* Estilos para los visores de cámaras */
.camera-viewers-container {
    position: absolute;
    bottom: 10px;
    right: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: calc(100vh - 100px);
    pointer-events: none; /* Permite que los clics pasen a través del contenedor */
}

.camera-viewer {
    background-color: rgba(0, 0, 0, 0.7);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
    min-width: 200px;
    min-height: 150px;
    max-width: 800px;
    max-height: 600px;
    width: 320px;
    height: 240px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    margin-bottom: 10px;
    resize: both; /* Permite redimensionar */
    pointer-events: auto; /* Permite interacción con este elemento */
}

.camera-viewer-header {
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 5px 10px;
    font-size: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: move;
}

.camera-viewer-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

.camera-viewer-close {
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    font-size: 16px;
    padding: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.camera-viewer-close:hover {
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
}

.camera-viewer-content {
    width: 100%;
    height: calc(100% - 30px);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.camera-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.camera-video-container {
    width: 100%;
    height: 100%;
}

.refresh-button {
    position: absolute;
    right: 10px;
    bottom: 10px;
    background-color: rgba(255, 255, 255, 0.7);
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
}

.refresh-button:hover {
    background-color: rgba(255, 255, 255, 0.9);
}

/* Estilo para el mensaje de zoom de cámaras */
.zoom-message {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 10px;
    border-radius: 5px;
    z-index: 1000;
    font-size: 14px;
    max-width: 300px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    pointer-events: none;
    text-align: center;
}

.zoom-message strong {
    color: #FFCC00;
}

/* Estilo para el título de la aplicación con logo */
.app-title {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
}

.app-logo {
    width: 200px;
    height: auto;
    pointer-events: auto;
    background-color: rgba(255, 255, 255, 1);
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 10px;
}

/* Estilo para la versión de la app */
.app-version {
    background-color: white;
    color: #1a4780;
    border-radius: 10px;
    padding: 2px 8px;
    font-size: 10px;
    font-weight: bold;
    margin-top: -5px;
    cursor: pointer;
    pointer-events: auto;
}

/* Reposicionar controles de zoom */
.leaflet-control-zoom {
    position: fixed !important;
    bottom: 20px !important;
    right: 20px !important;
    top: auto !important;
    left: auto !important;
}


/* Estilo común para todos los botones de control */
.control-button {
    width: 36px;
    height: 36px;
    background-color: white;
    border: 2px solid rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    padding: 0;
    cursor: pointer;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 5px;
}

.control-button:hover {
    background-color: #f4f4f4;
}

/* Contenedor para los botones de control personalizados */
.custom-control-container {
    position: absolute;
    top: 10px;
    right: 16px;
    z-index: 1000;
}

/* Estilo para el botón de información */
.info-button {
    position: relative;
    z-index: 1010;
}

.info-icon {
    width: 20px;
    height: 20px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black" width="18px" height="18px"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/></svg>');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    display: block;
}

/* Estilo para el botón de sugerencias */
.suggestions-button {
    position: relative;
    z-index: 1010;
}

.suggestions-icon {
    width: 20px;
    height: 20px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black" width="18px" height="18px"><path d="M0 0h24v24H0z" fill="none"/><path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z"/></svg>');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    display: block;
}

/* Estilos para el listado de sugerencias */
.suggestions-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.suggestion-item {
    margin-bottom: 20px;
    padding: 15px;
    border-bottom: 1px solid #eee;
    background-color: #f9f9f9;
    border-radius: 5px;
}

.suggestion-item:last-child {
    border-bottom: none;
}

.suggestion-item h3 {
    margin: 0 0 10px 0;
    color: #1a4780;
    font-size: 18px;
}

.suggestion-meta {
    margin: 0 0 10px 0;
    font-size: 12px;
    color: #666;
}

.suggestion-meta span {
    font-weight: bold;
}

.suggestion-description {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
}

 /* Estilos personalizados para el control de capas */
 .leaflet-control-layers {
    margin-top: 95px !important;
    right: 4px !important
}

.leaflet-control-layers-toggle {
    width: 32px !important;
    height: 32px !important;
    background-color: white;
    border: 2px solid rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    color: black;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 17h2m4 0h14"/><path d="M2 12h4m4 0h12"/><path d="M2 7h8m4 0h8"/></svg>') !important;
    background-size: 26px 26px !important;
    background-position: center !important;
}

/* Estilo para el contenedor de botones inferior izquierdo (roadmap, info, suggestions) */
.roadmap-container {
    position: absolute;
    bottom: 20px;
    left: 20px;
    z-index: 1000;
    display: flex;
    gap: 8px;
    align-items: center;
}

/* Estilo común para todos los botones en roadmap-container */
.roadmap-container .control-button,
.roadmap-button {
    width: 36px;
    height: 36px;
    background-color: white;
    border: 2px solid rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    padding: 0;
    cursor: pointer;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
}

.roadmap-container .control-button:hover,
.roadmap-button:hover {
    background-color: #f4f4f4;
}

.roadmap-icon {
    width: 20px;
    height: 20px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black" width="18px" height="18px"><path d="M0 0h24v24H0z" fill="none"/><path d="M13 2.05v3.03c3.39.49 6 3.39 6 6.92 0 .9-.18 1.75-.48 2.54l2.6 1.53c.56-1.24.88-2.62.88-4.07 0-5.18-3.95-9.45-9-9.95zM12 19c-3.87 0-7-3.13-7-7 0-3.53 2.61-6.43 6-6.92V2.05c-5.06.5-9 4.76-9 9.95 0 5.52 4.47 10 9.99 10 3.31 0 6.24-1.61 8.06-4.09l-2.6-1.53C16.17 17.98 14.21 19 12 19z"/></svg>');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    display: block;
}

/* Estilos para el modal de roadmap */
.roadmap-modal-content {
    padding: 20px;
}

.roadmap-title {
    color: #1a4780;
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
    margin-top: 0;
}

.roadmap-feature {
    margin-bottom: 20px;
    padding: 15px;
    border-left: 4px solid #1a4780;
    background-color: #f9f9f9;
    border-radius: 0 5px 5px 0;
}

.roadmap-feature h3 {
    margin: 0 0 10px 0;
    color: #1a4780;
    font-size: 16px;
    display: flex;
    align-items: center;
}

.roadmap-feature-status {
    margin-left: 10px;
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: normal;
}

.status-planned {
    background-color: #ffcc00;
    color: #333;
}

.status-inprogress {
    background-color: #66aaff;
    color: white;
}

.status-completed {
    background-color: #66cc66;
    color: white;
}

.roadmap-feature p {
    margin: 5px 0 0 0;
    font-size: 14px;
    line-height: 1.5;
    color: #555;
}

/* Estilos para el modal */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2000;
    background-color: rgba(0, 0, 0, 0.5);
    overflow: auto;
}

.modal-content {
    position: relative;
    background-color: #fff;
    margin: 5% auto;
    padding: 0;
    width: 80%;
    max-width: 800px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    animation: modalopen 0.3s;
}

@keyframes modalopen {
    from {opacity: 0; transform: translateY(-60px);}
    to {opacity: 1; transform: translateY(0);}
}

.close-modal {
    position: absolute;
    top: 10px;
    right: 20px;
    color: #666;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    z-index: 2010;
}

.close-modal:hover {
    color: #000;
}

.modal-iframe {
    width: 100%;
    height: 80vh;
    border: none;
}

/* Estilos para el menú contextual */
.context-menu-popup .leaflet-popup-content-wrapper {
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    padding: 0;
}

.context-menu-popup .leaflet-popup-content {
    margin: 0;
    padding: 0;
    width: auto !important;
}

.context-menu {
    min-width: 150px;
}

.menu-title {
    background-color: #1a4780;
    color: white;
    padding: 8px 12px;
    font-size: 14px;
    font-weight: bold;
    border-radius: 4px 4px 0 0;
}

.menu-item {
    padding: 8px 12px;
    cursor: pointer;
    transition: background-color 0.2s;
    font-size: 13px;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
    gap: 8px;
}

.menu-item:last-child {
    border-bottom: none;
    border-radius: 0 0 4px 4px;
}

.menu-item:hover {
    background-color: #f4f4f4;
}

.layer-checkbox {
    width: 16px;
    height: 16px;
    border: 2px solid #ddd;
    border-radius: 3px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.2);
}

.layer-checkbox.checked {
    background-color: #1a4780;
    position: relative;
}

.layer-checkbox.checked::after {
    content: '';
    width: 6px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    position: absolute;
    top: 1px;
}

/* Estilo para el botón de centrar mapa */
.center-button {
    position: relative;
    z-index: 1010;
}

.center-icon {
    width: 20px;
    height: 20px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black" width="18px" height="18px"><path d="M12 8c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm8.94 3c-.46-4.17-3.77-7.48-7.94-7.94V1h-2v2.06C6.83 3.52 3.52 6.83 3.06 11H1v2h2.06c.46 4.17 3.77 7.48 7.94 7.94V23h2v-2.06c4.17-.46 7.48-3.77 7.94-7.94H23v-2h-2.06zM12 19c-3.87 0-7-3.13-7-7s3.13-7 7-7 7 3.13 7 7-3.13 7-7 7z"/></svg>');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    display: block;
}

/* Estilos para los iconos de estaciones meteorológicas */
.station-icon {
    background: transparent;
    text-align: center;
    font-weight: bold;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px !important;
    height: 30px !important;
    pointer-events: auto;
}

.station-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.station-temperature {
    border-radius: 50%;
    padding: 4px;
    color: black;
    font-weight: bold;
    font-size: 12px;
    background-color: rgba(0, 0, 0, 0.4); /* Esta propiedad será sobrescrita por el estilo inline */
    background-color: #3388ff;
    text-align: center;
    width: 15px;
    height: 15px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.4);
    z-index: 10;
    border: 8px solid white;
}

/* Estilos para los indicadores de viento */
.wind-indicator {
    position: absolute;
    width: 50px;
    height: 50px;
    background-size: 20px;  ;
    background-repeat: no-repeat;
    background-position: center 6px;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    z-index: 10;
    color: black;
}

/* Ícono base de flecha apuntando al norte para vientos escala 3 (negro) */
.wind-icon-300, .wind-icon-301, .wind-icon-302, .wind-icon-303, .wind-icon-304, .wind-icon-305,
.wind-icon-306, .wind-icon-307, .wind-icon-308, .wind-icon-309, .wind-icon-310, .wind-icon-311,
.wind-icon-312, .wind-icon-313, .wind-icon-314, .wind-icon-315 {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><polygon points="12,2 8,8 16,8" fill="black"/></svg>');
}

/* Aplicar rotaciones específicas para cada dirección de viento escala 3 */
.wind-icon-300 { transform: translateX(-50%) translateY(-50%) rotate(0deg); }
.wind-icon-301 { transform: translateX(-50%) translateY(-50%) rotate(23deg); }
.wind-icon-302 { transform: translateX(-50%) translateY(-50%) rotate(45deg); }
.wind-icon-303 { transform: translateX(-50%) translateY(-50%) rotate(68deg); }
.wind-icon-304 { transform: translateX(-50%) translateY(-50%) rotate(90deg); }
.wind-icon-305 { transform: translateX(-50%) translateY(-50%) rotate(113deg); }
.wind-icon-306 { transform: translateX(-50%) translateY(-50%) rotate(135deg); }
.wind-icon-307 { transform: translateX(-50%) translateY(-50%) rotate(158deg); }
.wind-icon-308 { transform: translateX(-50%) translateY(-50%) rotate(180deg); }
.wind-icon-309 { transform: translateX(-50%) translateY(-50%) rotate(203deg); }
.wind-icon-310 { transform: translateX(-50%) translateY(-50%) rotate(225deg); }
.wind-icon-311 { transform: translateX(-50%) translateY(-50%) rotate(248deg); }
.wind-icon-312 { transform: translateX(-50%) translateY(-50%) rotate(270deg); }
.wind-icon-313 { transform: translateX(-50%) translateY(-50%) rotate(293deg); }
.wind-icon-314 { transform: translateX(-50%) translateY(-50%) rotate(315deg); }
.wind-icon-315 { transform: translateX(-50%) translateY(-50%) rotate(338deg); }

/* Ícono base de flecha apuntando al norte para vientos escala 4-6 (amarillo) */
.wind-icon-400, .wind-icon-401, .wind-icon-402, .wind-icon-403, .wind-icon-404, .wind-icon-405, 
.wind-icon-406, .wind-icon-407, .wind-icon-408, .wind-icon-409, .wind-icon-410, .wind-icon-411, 
.wind-icon-412, .wind-icon-413, .wind-icon-414, .wind-icon-415, .wind-icon-500, .wind-icon-501, 
.wind-icon-502, .wind-icon-503, .wind-icon-504, .wind-icon-505, .wind-icon-506, .wind-icon-507, 
.wind-icon-508, .wind-icon-509, .wind-icon-510, .wind-icon-511, .wind-icon-512, .wind-icon-513, 
.wind-icon-514, .wind-icon-515, .wind-icon-600, .wind-icon-601, .wind-icon-602, .wind-icon-603, 
.wind-icon-604, .wind-icon-605, .wind-icon-606, .wind-icon-607, .wind-icon-608, .wind-icon-609, 
.wind-icon-610, .wind-icon-611, .wind-icon-612, .wind-icon-613, .wind-icon-614, .wind-icon-615 {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><polygon points="12,2 7,9 17,9" fill="yellow" stroke="orange" stroke-width="1"/></svg>');
}

/* Aplicar rotaciones específicas para cada dirección en vientos más intensos (escala 4-6) */
.wind-icon-400, .wind-icon-500, .wind-icon-600 { transform: translateX(-50%) rotate(0deg); }
.wind-icon-401, .wind-icon-501, .wind-icon-601 { transform: translateX(-50%) rotate(23deg); }
.wind-icon-402, .wind-icon-502, .wind-icon-602 { transform: translateX(-50%) rotate(45deg); }
.wind-icon-403, .wind-icon-503, .wind-icon-603 { transform: translateX(-50%) rotate(68deg); }
.wind-icon-404, .wind-icon-504, .wind-icon-604 { transform: translateX(-50%) rotate(90deg); }
.wind-icon-405, .wind-icon-505, .wind-icon-605 { transform: translateX(-50%) rotate(113deg); }
.wind-icon-406, .wind-icon-506, .wind-icon-606 { transform: translateX(-50%) rotate(135deg); }
.wind-icon-407, .wind-icon-507, .wind-icon-607 { transform: translateX(-50%) rotate(158deg); }
.wind-icon-408, .wind-icon-508, .wind-icon-608 { transform: translateX(-50%) rotate(180deg); }
.wind-icon-409, .wind-icon-509, .wind-icon-609 { transform: translateX(-50%) rotate(203deg); }
.wind-icon-410, .wind-icon-510, .wind-icon-610 { transform: translateX(-50%) rotate(225deg); }
.wind-icon-411, .wind-icon-511, .wind-icon-611 { transform: translateX(-50%) rotate(248deg); }
.wind-icon-412, .wind-icon-512, .wind-icon-612 { transform: translateX(-50%) rotate(270deg); }
.wind-icon-413, .wind-icon-513, .wind-icon-613 { transform: translateX(-50%) rotate(293deg); }
.wind-icon-414, .wind-icon-514, .wind-icon-614 { transform: translateX(-50%) rotate(315deg); }
.wind-icon-415, .wind-icon-515, .wind-icon-615 { transform: translateX(-50%) rotate(338deg); }

/* Ícono base de flecha apuntando al norte para vientos escala 7-9 (rojo) */
.wind-icon-700, .wind-icon-701, .wind-icon-702, .wind-icon-703, .wind-icon-704, .wind-icon-705, 
.wind-icon-706, .wind-icon-707, .wind-icon-708, .wind-icon-709, .wind-icon-710, .wind-icon-711, 
.wind-icon-712, .wind-icon-713, .wind-icon-714, .wind-icon-715, .wind-icon-800, .wind-icon-801, 
.wind-icon-802, .wind-icon-803, .wind-icon-804, .wind-icon-805, .wind-icon-806, .wind-icon-807, 
.wind-icon-808, .wind-icon-809, .wind-icon-810, .wind-icon-811, .wind-icon-812, .wind-icon-813, 
.wind-icon-814, .wind-icon-815, .wind-icon-900, .wind-icon-901, .wind-icon-902, .wind-icon-903, 
.wind-icon-904, .wind-icon-905, .wind-icon-906, .wind-icon-907, .wind-icon-908, .wind-icon-909, 
.wind-icon-910, .wind-icon-911, .wind-icon-912, .wind-icon-913, .wind-icon-914, .wind-icon-915 {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><polygon points="12,2 6,10 18,10" fill="red" stroke="darkred" stroke-width="1"/><path d="M12 8L9 13" stroke="red" stroke-width="2" stroke-linecap="round"/><path d="M12 8L15 13" stroke="red" stroke-width="2" stroke-linecap="round"/></svg>');
}

/* Aplicar rotaciones específicas para vientos muy fuertes (escala 7-9) */
.wind-icon-700, .wind-icon-800, .wind-icon-900 { transform: translateX(-50%) rotate(0deg); }
.wind-icon-701, .wind-icon-801, .wind-icon-901 { transform: translateX(-50%) rotate(23deg); }
.wind-icon-702, .wind-icon-802, .wind-icon-902 { transform: translateX(-50%) rotate(45deg); }
.wind-icon-703, .wind-icon-803, .wind-icon-903 { transform: translateX(-50%) rotate(68deg); }
.wind-icon-704, .wind-icon-804, .wind-icon-904 { transform: translateX(-50%) rotate(90deg); }
.wind-icon-705, .wind-icon-805, .wind-icon-905 { transform: translateX(-50%) rotate(113deg); }
.wind-icon-706, .wind-icon-806, .wind-icon-906 { transform: translateX(-50%) rotate(135deg); }
.wind-icon-707, .wind-icon-807, .wind-icon-907 { transform: translateX(-50%) rotate(158deg); }
.wind-icon-708, .wind-icon-808, .wind-icon-908 { transform: translateX(-50%) rotate(180deg); }
.wind-icon-709, .wind-icon-809, .wind-icon-909 { transform: translateX(-50%) rotate(203deg); }
.wind-icon-710, .wind-icon-810, .wind-icon-910 { transform: translateX(-50%) rotate(225deg); }
.wind-icon-711, .wind-icon-811, .wind-icon-911 { transform: translateX(-50%) rotate(248deg); }
.wind-icon-712, .wind-icon-812, .wind-icon-912 { transform: translateX(-50%) rotate(270deg); }
.wind-icon-713, .wind-icon-813, .wind-icon-913 { transform: translateX(-50%) rotate(293deg); }
.wind-icon-714, .wind-icon-814, .wind-icon-914 { transform: translateX(-50%) rotate(315deg); }
.wind-icon-715, .wind-icon-815, .wind-icon-915 { transform: translateX(-50%) rotate(338deg); }

/* Tooltip de estación mejorado para incluir datos de viento */
.station-tooltip {
    font-size: 12px;
    line-height: 1.4;
    width: 200px;
}

.station-tooltip-content h3 {
    margin: 0 0 8px 0;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(255,255,255,0.3);
    font-size: 14px;
}

.station-tooltip-content p {
    margin: 4px 0;
}

/* Unificar estilos para todos los tooltips */
.leaflet-tooltip {
    padding: 0;
    border: none;
    background: transparent;
    box-shadow: none;
    max-width: 320px;
}

.tooltip-content {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 5px;
    border: 2px solid #1a4780;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
    padding: 8px;
}

.tooltip-content h3 {
    margin: 0 0 6px 0;
    color: #1a4780;
    border-bottom: 1px solid #ddd;
    padding-bottom: 4px;
    font-size: 14px;
}

.tooltip-content p {
    margin: 3px 0;
    font-size: 12px;
    color: #333;
    line-height: 1.4;
}

.leaflet-tooltip-top:before {
    border-top-color: #1a4780;
}

/* Mantenemos el tooltip específico de estaciones que ahora servirá de base para todos */
/* Estilos para los tooltips de estaciones */
.station-tooltip {
    padding: 0;
    border: none;
    background: transparent;
    box-shadow: none;
    max-width: 320px;
}

.station-tooltip-content {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 5px;
    border: 2px solid #1a4780;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
    padding: 8px;
}

.station-tooltip-content h3 {
    margin: 0 0 6px 0;
    color: #1a4780;
    border-bottom: 1px solid #ddd;
    padding-bottom: 4px;
    font-size: 14px;
}

.station-tooltip-content p {
    margin: 3px 0;
    font-size: 12px;
    color: #333;
    line-height: 1.4;
}

.leaflet-tooltip-top.station-tooltip::before {
    border-top-color: #1a4780;
}

/* Estilos existentes para los popups de estaciones que podemos mantener */
.station-popup {
    padding: 5px;
}

.station-popup h3 {
    margin: 0 0 8px 0;
    color: #1a4780;
    border-bottom: 1px solid #ddd;
    padding-bottom: 5px;
}

.station-popup p {
    margin: 4px 0;
    font-size: 12px;
}

.station-popup-container {
    max-height: 300px;
    overflow-y: auto;
}

/* Estilos específicos para el modal de versiones */
.modal-body {
    padding: 20px;
}

.version-history {
    margin-top: 20px;
}

.version-item {
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
}

.version-item:last-child {
    border-bottom: none;
}

.version-item h3 {
    color: #1a4780;
    margin: 0 0 8px 0;
}

.version-item small {
    color: #666;
    font-weight: normal;
    margin-left: 5px;
}

.version-item p {
    margin: 5px 0 0 0;
    color: #333;
    line-height: 1.5;
}

/* White cluster marker styling */
.marker-cluster-white {
    background: transparent !important;
    border: none !important;
}

.marker-cluster-white div {
    border: 5px solid  rgba(40, 131, 158, 0.8) !important;
    width: 40px; 
    height: 40px; 
    border-radius: 25%;
    display: flex; 
    flex-direction: column;
    align-items: center; 
    justify-content: center;
    font-weight: bold;
    font-size: 10px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}