/* ═══════════════════════════════════════
   RESPONSIVE — All @media queries
   ═══════════════════════════════════════ */

@media (max-width: 1400px) {
    .control-panel { width: 370px; }
    .dashboard-panel { width: 400px; }
    .analise-panel { width: 400px; }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .control-panel { width: 340px; }
    .dashboard-panel { display: none !important; }
}

@media screen and (max-width: 768px) {
    .floating-toolbar {
        top: 15px !important;
        left: 0 !important; right: 0 !important;
        width: 100% !important;
        transform: none !important;
        display: flex !important; flex-direction: column !important;
        align-items: center !important; justify-content: flex-start !important;
        gap: 10px !important; padding: 0 10px !important; overflow: visible !important;
    }

    .toolbar-actions {
        width: 100% !important;
        display: flex !important; flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 8px !important; padding: 0 !important;
        background: transparent !important;
        border: none !important; box-shadow: none !important;
        backdrop-filter: none !important; overflow: visible !important;
    }

    .toolbar-actions::-webkit-scrollbar { display: none; }

    .toolbar-btn, .view-btn {
        padding: 8px 14px !important;
        font-size: 11px !important;
        height: auto !important;
        white-space: nowrap !important;
        background: rgba(8,17,31,0.95) !important;
        border: 1px solid var(--border-default) !important;
        border-radius: var(--radius-pill) !important;
        color: var(--text-primary) !important;
        flex-shrink: 0 !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
    }

    .toolbar-brand {
        position: relative !important;
        top: 0 !important; left: 0 !important;
        transform: none !important;
        padding: 6px 16px !important;
        min-width: auto !important; height: auto !important;
        border-radius: var(--radius-pill) !important;
        background: rgba(8,17,31,0.95) !important;
        border: 1px solid var(--border-default) !important;
        z-index: 800 !important;
    }
    .brand-icon { width: 22px !important; height: 18px !important; font-size: 9px !important; border-radius: 20% !important; display: flex !important; align-items: center !important; justify-content: center !important; }
    .brand-text { display: flex !important; flex-direction: column !important; }
    .brand-title { font-size: 11px !important; margin: 0 !important; display: block !important; white-space: nowrap !important; }
    .brand-subtitle { display: none !important; }
    
    #controlPanel.control-panel { width: 100% !important; height: 60vh !important; max-height: 80vh !important; top: auto !important; bottom: 0 !important; left: 0 !important; right: 0 !important; border-radius: 20px 20px 0 0 !important; transform: translateY(120%) !important; transition: transform .32s var(--ease-smooth) !important; z-index: 2000 !important; background: var(--bg-surface) !important; gap: 0 !important; display: flex !important; flex-direction: column !important; padding-top: 0 !important; }
    #controlPanel.control-panel.active { transform: translateY(0) !important; }
    #controlPanel .panel-card { background: transparent !important; border: none !important; box-shadow: none !important; border-radius: 0 !important; margin: 0 !important; padding: 0 14px !important; }
    #controlPanel .panel-card:first-child { flex: 0 0 auto !important; height: auto !important; padding-bottom: 8px !important; border-bottom: 1px solid var(--border-subtle) !important; }
    #controlPanel .panel-card:first-child .panel-content { flex: 0 0 auto !important; height: auto !important; max-height: none !important; overflow: visible !important; padding: 0 !important; }
    #controlPanel .panel-card:last-child { flex: 1 1 auto !important; display: flex !important; flex-direction: column !important; min-height: 0 !important; padding-top: 8px !important; }
    #controlPanel .panel-card:last-child .panel-content { flex: 1 1 auto !important; height: auto !important; overflow-y: auto !important; padding-bottom: 60px !important; }
    #controlPanel .panel-header { background: transparent !important; border: none !important; padding: 8px 0 4px 0 !important; }
    #controlPanel .panel-header::after { display: none !important; }
    
    .dashboard-panel { display: none !important; }
    .analise-panel { display: none !important; }
    .esri-ui-top-left { top: 120px !important; left: 10px !important; }
    .esri-ui-bottom-left, .esri-ui-bottom-right { bottom: 20px !important; }
    .obras-panel { width: calc(100vw - 20px); left: 10px; right: 10px; top: auto; bottom: 10px; max-height: 55vh; }
    #customLegend { display: flex !important; right: 0 !important; transform: translateX(100%) !important; pointer-events: none !important; transition: transform .3s var(--ease-smooth) !important; }
    .side-tab { display: flex !important; }
    .admin-r2 { grid-template-columns: 1fr; }

    /* Cinematic mobile fix */
    .floating-toolbar .toolbar-actions {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
    }
}