/**
 * Grafos - GeoNetwork Viewer Styles
 * Bootstrap 5 / Cassiopeia & Atum Compatible
 * Optimizado para pantalla completa
 * 
 * @package     Grafos
 * @subpackage  Media
 * @author      Lic. Joel Salazar
 */

/* Main Container - Fullscreen Optimized */
.grafos-geonetwork-viewer {
    padding: 0;
    margin: 0;
}

/* Cassiopeia Frontend - Remove default padding */
.com_grafos .grafos-fullscreen {
    margin-left: calc(-1 * var(--cassiopeia-container-padding-x, 1rem));
    margin-right: calc(-1 * var(--cassiopeia-container-padding-x, 1rem));
    width: calc(100% + 2 * var(--cassiopeia-container-padding-x, 1rem));
}

/* Atum Backend - Remove admin padding */
.com_cpanel .grafos-fullscreen,
body.admin .grafos-fullscreen {
    margin: -1rem -1rem 0 -1rem;
}

/* Map Container - Fullscreen */
#map-container {
    width: 100%;
    height: calc(100vh - 300px);
    min-height: 600px;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.5rem;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

/* Leaflet Popup Customization */
.leaflet-popup-content-wrapper {
    border-radius: 0.5rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.leaflet-popup-content {
    margin: 12px 16px;
    font-size: 14px;
    line-height: 1.5;
}

/* Marker Cluster Customization */
.marker-cluster-small {
    background-color: rgba(51, 136, 255, 0.6);
}

.marker-cluster-small div {
    background-color: rgba(51, 136, 255, 0.8);
}

.marker-cluster-medium {
    background-color: rgba(241, 211, 87, 0.6);
}

.marker-cluster-medium div {
    background-color: rgba(241, 211, 87, 0.8);
}

.marker-cluster-large {
    background-color: rgba(253, 156, 115, 0.6);
}

.marker-cluster-large div {
    background-color: rgba(253, 156, 115, 0.8);
}

/* Stats Card */
.grafos-geonetwork-viewer .card {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
}

.grafos-geonetwork-viewer .badge {
    padding: 0.75rem 1rem;
    font-weight: 500;
}

/* Responsive */
@media (max-width: 991.98px) {
    #map-container {
        height: calc(100vh - 350px);
        min-height: 500px;
    }
}

@media (max-width: 767.98px) {
    .grafos-geonetwork-viewer {
        padding: 1rem 0;
    }
    
    #map-container {
        height: calc(100vh - 400px);
        min-height: 400px;
    }
}

@media (max-width: 575.98px) {
    #map-container {
        min-height: 350px;
    }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    #map-container {
        border-color: var(--bs-border-color-translucent, rgba(255, 255, 255, 0.15));
    }
}

/* Loading State */
#map-container.loading::after {
    content: "Cargando mapa...";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #666;
    font-size: 1.25rem;
    font-weight: 600;
    z-index: 1000;
}