/**
 * Estilos personalizados para el mapa interactivo de medición
 * Estos estilos complementan a los proporcionados por Tailwind CSS
 */

/* Estilo para las etiquetas de medición */
.measurement-label {
    background-color: rgba(255, 255, 255, 0.9) !important;
    border: 2px solid rgba(33, 150, 243, 0.7) !important;
    border-radius: 4px !important;
    color: #333 !important;
    font-size: 12px !important;
    font-weight: bold !important;
    padding: 4px 8px !important;
    white-space: nowrap !important;
    pointer-events: none !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3) !important;
    text-align: center !important;
    min-width: 100px !important;
    z-index: 400 !important;
}

/* Estilo para los tooltips */
.measurement-tooltip {
    background-color: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid #2196F3 !important;
    border-radius: 4px !important;
    padding: 4px 8px !important;
    font-size: 12px !important;
    max-width: 250px !important;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2) !important;
}

/* Contenedor del botón de eliminación */
.delete-button-container {
    background: none !important;
    border: none !important;
    z-index: 500 !important; /* Asegurar que esté por encima de la etiqueta */
}

/* Botón de eliminación para polígonos */
.shape-delete-btn {
    width: 24px;
    height: 24px;
    background-color: #f44336;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    border: 2px solid white;
    z-index: 1000;
    transition: all 0.2s ease;
}

.shape-delete-btn:hover {
    background-color: #d32f2f;
    transform: scale(1.1);
    box-shadow: 0 3px 7px rgba(0, 0, 0, 0.4);
}

/* Tooltip para coordenadas */
#coordinates {
    font-family: monospace;
    font-size: 11px;
    padding: 4px 8px;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 3px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    pointer-events: none;
}

/* Animación de carga */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.animate-spin {
    animation: spin 1s linear infinite;
}

/* Estilo para notificaciones */
#notification {
    transition: opacity 0.3s ease-in-out;
    max-width: 80%;
    z-index: 2000;
}

/* IMPORTANTE: Ajustes optimizados para Esri Leaflet con zoom artificial */
/* Mostrar mejor las imágenes pixeladas */
.leaflet-tile {
    image-rendering: auto;
}

/* Aplicar renderizado pixelado a los tiles en zoom extremo */
.extreme-zoom .leaflet-tile,
.extreme-zoom .esri-tile-container img {
    image-rendering: pixelated !important;
    image-rendering: -moz-crisp-edges !important;
    image-rendering: crisp-edges !important;
}

/* Asegurar que los tiles no tengan bordes */
.leaflet-tile-container {
    transform-origin: 0 0;
}

/* Fondo para los tiles de Esri */
.leaflet-container {
    background-color: #f5f5f5;
}

/* Contenedor de Esri específico */
.esri-tile-container {
    transform-origin: 0 0;
}

/* Asegurar que no haya bordes blancos entre tiles */
.esri-tile-container img {
    display: block;
    margin: 0;
    padding: 0;
}

/* Indicador visual de zoom artificial */
.extreme-zoom .leaflet-container::after {
    content: "Zoom artificial activo";
    position: absolute;
    bottom: 10px;
    right: 10px;
    background-color: rgba(76, 175, 80, 0.8);
    color: white;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: bold;
    pointer-events: none;
    z-index: 1000;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* Ajustes para controles de zoom */
.leaflet-control-zoom-max {
    font-weight: bold;
    font-size: 14px;
    background-color: #fff;
    display: block;
    text-align: center;
    text-decoration: none;
    color: black;
    width: 30px;
    height: 30px;
    line-height: 30px;
}

.leaflet-control-zoom-max:hover {
    background-color: #f4f4f4;
}

.extreme-zoom .leaflet-control-zoom-max {
    background-color: #e8f5e9;
    color: #2e7d32;
}

/* Estilos para polígonos */
.leaflet-interactive {
    transition: fill-opacity 0.2s ease, stroke-width 0.2s ease;
}

.leaflet-interactive:hover {
    fill-opacity: 0.5 !important;
    stroke-width: 4px !important;
}

/* Durante el zoom extremo, ajusta el ancho del trazo para que se vea mejor */
.extreme-zoom .leaflet-interactive {
    stroke-width: 1.5px !important;
}

/* Eliminar bordes de los controles nativos de Leaflet.Draw que no queremos mostrar */
.leaflet-draw {
    display: none !important;
}

/* Estilos para el sidebar */
.sidebar {
    width: 18.5rem;
}

/* Estilos para dispositivos móviles */
@media (max-width: 768px) {
    .measurement-label {
        font-size: 10px;
        padding: 1px 4px;
    }
    
    .shape-delete-btn {
        width: 30px;
        height: 30px;
        font-size: 16px;
    }
    
    #coordinates {
        font-size: 10px;
        bottom: 5px !important;
        left: 5px !important;
    }
    
    /* Ajustar tamaño de controles para pantallas táctiles */
    .leaflet-touch .leaflet-control-zoom a {
        width: 40px;
        height: 40px;
        line-height: 40px;
        font-size: 18px;
    }
    
    /* Indicador de zoom artificial en móvil */
    .extreme-zoom .leaflet-container::after {
        padding: 2px 6px;
        font-size: 9px;
        bottom: 5px;
        right: 5px;
    }
}

/* Estilo personalizado para el control de capas */
.map-layers-control {
    background-color: white;
    padding: 5px;
    border-radius: 4px;
    box-shadow: 0 1px 5px rgba(0,0,0,0.4);
}

/* Icono más visible para el control de capas */
.map-layers-control .leaflet-control-layers-toggle {
    width: 36px;
    height: 36px;
    background-size: 20px 20px;
}

/* Asegurarse de que el menú desplegable se vea bien */
.map-layers-control .leaflet-control-layers-list {
    padding: 5px;
}

/* Ajustes específicos para móvil */
@media (max-width: 768px) {
    /* Posicionamiento fijo en móvil para evitar solapamientos */
    .map-layers-control {
        margin: 0 !important;
    }
    
    /* Hacer el icono más grande y claro en móvil */
    .map-layers-control .leaflet-control-layers-toggle {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background-color: white;
        box-shadow: 0 2px 5px rgba(0,0,0,0.3);
        border: 1px solid #ccc;
    }
}

/* Animación para los resultados de búsqueda */
.search-result-marker {
    background: none !important;
    border: none !important;
}

.pulse-animation {
    width: 20px;
    height: 20px;
    background-color: rgba(38, 198, 218, 0.7);
    border-radius: 50%;
    box-shadow: 0 0 0 rgba(38, 198, 218, 0.4);
    animation: pulse 1.5s infinite;
    border: 2px solid white;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(38, 198, 218, 0.7);
    }
    70% {
        box-shadow: 0 0 0 15px rgba(38, 198, 218, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(38, 198, 218, 0);
    }
}

/* Estilos para los tooltips de marcadores */
.marker-tooltip {
    background-color: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid #FF5722 !important;
    border-radius: 4px !important;
    padding: 2px 6px !important;
    font-size: 12px !important;
    font-weight: bold !important;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2) !important;
}

/* Estilos para el popup de marcadores */
.marker-popup input {
    border: 1px solid #ddd;
    border-radius: 3px;
}

.marker-popup button {
    transition: all 0.2s ease;
}

.marker-popup button:hover {
    transform: translateY(-1px);
}