html, body {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            overflow: hidden; /* Evitar scrollbars en la página principal */
        }
        #geovisor-container {
            height: 100vh;
            display: flex;
            position: relative;
        }
        #panel-controles {
            width: 350px;
            background: #2c3e50;
            color: white;
            padding: 20px;
            box-shadow: 4px 0 15px rgba(0,0,0,0.2);
            overflow-y: auto;
            z-index: 10;
        }
        #panel-controles h4 {
            color: #ffffff;
            margin-bottom: 20px;
            font-weight: 600;
        }
        #viewDiv {
            flex-grow: 1;
            height: 100%;
            position: relative;
        }
        #loading-indicator {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 1000;
            background: rgba(44, 62, 80, 0.9);
            color: white;
            padding: 20px 30px;
            border-radius: 12px;
            display: none;
            text-align: center;
        }
        .info-panel, .date-info, .legend-container, #widgets-container > div {
            background: rgba(255,255,255,0.1);
            backdrop-filter: blur(10px);
            padding: 15px;
            border-radius: 10px;
            margin-bottom: 20px;
            border: 1px solid rgba(255,255,255,0.2);
        }
        .control-group { margin-bottom: 20px; }
        .control-group label { font-weight: 600; margin-bottom: 8px; display: block; }
        .form-select {
            background: rgba(255,255,255,0.9);
            border: 1px solid rgba(0,0,0,0.2);
            border-radius: 6px; 
            color: #333; 
            font-weight: 500;
            width: 100%;
            padding: 8px;
        }
        .btn-custom {
            background-color: #17a2b8; 
            border: none; 
            color: white;
            padding: 8px 16px; 
            border-radius: 8px; 
            font-weight: 600;
            transition: all 0.3s ease; 
            cursor: pointer;
            width: 100%;
        }
        .btn-custom:hover { background-color: #138996; }
        .view-controls { display: flex; gap: 10px; margin-bottom: 20px; }
        .view-btn {
            flex: 1; 
            padding: 10px; 
            background: rgba(255,255,255,0.15);
            border: 1px solid rgba(255,255,255,0.3); 
            color: white;
            border-radius: 8px; 
            cursor: pointer; 
            transition: all 0.3s ease; 
            font-weight: 600;
        }
        .view-btn.active { background: #17a2b8; border-color: #17a2b8; }
        .gradient-bar {
            height: 15px; 
            border-radius: 5px; 
            margin-bottom: 5px;
            background: linear-gradient(to right, 
                rgba(30, 144, 255, 0.8) 10%, 
                rgba(0, 255, 255, 0.85) 35%, 
                rgba(50, 205, 50, 0.85) 55%, 
                rgba(255, 255, 0, 0.88) 75%, 
                rgba(255, 165, 0, 0.9) 90%, 
                rgba(255, 40, 0, 0.95) 100%);
        }
        .legend-labels { 
            display: flex; 
            justify-content: space-between; 
            color: #fff; 
            opacity: 0.8; 
            font-size: 12px;
        }
        #timeSliderContainer {
            position: absolute;
            bottom: 25px;
            left: 50%;
            transform: translateX(-50%);
            width: 60%;
            max-width: 700px;
            z-index: 50;
        }
        .esri-time-slider__layout {
            background: rgba(0,0,0,0.85) !important;
            backdrop-filter: blur(15px) !important;
            border-radius: 15px !important;
            padding: 12px 20px !important;
            border: 1px solid rgba(255,255,255,0.3) !important;
        }
        .demo-alert {
            background: rgba(255, 193, 7, 0.2);
            color: #ffc107;
            padding: 10px;
            border-radius: 5px;
            margin-bottom: 15px;
            font-size: 12px;
            text-align: center;
            border: 1px solid rgba(255, 193, 7, 0.5);
        }
        .home-btn{
            display:flex;align-items:center;justify-content:center;
            gap:6px;
            background:#17a2b8;
            color:#fff;text-decoration:none;
            padding:10px 16px;
            border-radius:8px;
            font-weight:600;
            transition:all .3s ease;
            box-shadow:0 2px 8px rgba(0,0,0,.25);
        }
        .home-btn:hover{background:#138996;transform:translateY(-2px);}
        .home-btn i{font-size:1rem;}