/**
 * ================================================================================
 *                        NÚCLEO INTEGRADO DE PREVISÃO
 * ================================================================================
 * Projeto: NIMBUS - Nó Integrador de Monitoramento de Bacias de Uso no Sul
 * Sub-projeto: geo-NIMBUS
 * Direção: Gabriel Paz
 * Autoria: Gabriel Paz auxiliado por IA
 * SENIP – Setor de Engenharia e Inovação do Núcleo Integrado de Previsão
 * Data: Dezembro/2025
 * Versão: 9.0
 * 
 * Descrição: Estilos CSS principais - Material Design minimalista
 *            Paleta: Azul escuro (#1a237e) e Laranja (#ff6f00)
 *            Inclui suporte a modo noturno e responsividade mobile
 * 
 * Melhorias 9.0:
 *   - Legenda mobile mais compacta
 *   - Menu de navegação mobile integrado no sidebar
 *   - Contraste melhorado
 * ================================================================================
 */

@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,400,0..1,0&display=swap');

/* ============================================================================
   CSS RESET E VARIÁVEIS
   ============================================================================ */
:root {
    /* Cores principais - Modo Claro */
    --primary-dark: #1a237e;
    --primary: #283593;
    --primary-light: #3949ab;
    --secondary: #ff6f00;
    --secondary-light: #ff8f00;
    --secondary-dark: #e65100;

    /* Cores neutras - Modo Claro */
    --background: #edf2f6;
    --surface: #f5f7fa;
    --surface-container-low: #f1f4f7;
    --surface-container: #e7edf3;
    --surface-container-high: #dfe6ee;
    --text: #212121;
    --text-secondary: #757575;
    --outline: #737782;
    --outline-variant: #c7c9d1;
    --border-color: var(--outline-variant);
    --focus-ring: rgba(40, 53, 147, 0.28);
    --state-hover: rgba(40, 53, 147, 0.08);
    --state-pressed: rgba(40, 53, 147, 0.14);
    --gray-50: #f1f4f7;
    --gray-100: #edf2f6;
    --gray-200: #eeeeee;
    --gray-300: #e0e0e0;
    --gray-400: #bdbdbd;
    --gray-500: #9e9e9e;
    --gray-600: #757575;
    --gray-700: #616161;
    --gray-800: #424242;
    --gray-900: #212121;

    /* Cores de estado */
    --success: #4caf50;
    --warning: #ff9800;
    --error: #f44336;
    --info: #2196f3;

    /* Sombras (Material Design) */
    --shadow-1: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    --shadow-2: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
    --shadow-3: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
    --shadow-4: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);

    /* Transições */
    --transition-fast: 0.15s ease-out;
    --transition-normal: 0.3s ease-out;
    --transition-slow: 0.5s ease-out;

    /* Tamanhos */
    --header-height: 64px;
    --sidebar-width: 320px;
    --timeline-height: 90px;
    --timeline-actual-height: var(--timeline-height);
    --border-radius: 8px;
    --border-radius-lg: 12px;
    --touch-target: 44px;
    --legend-gap: 8px;
    --radar-legend-floating-right: 10px;
    --radar-legend-floating-width: 216px;

    /* Fontes */
    --font-family: 'Inter', 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'Roboto Mono', monospace;
}

/* ============================================================================
   MODO NOTURNO (9.0)
   Ativado pela classe .dark-mode no body
   ============================================================================ */
body.dark-mode {
    --primary-dark: #90caf9;
    --primary: #64b5f6;
    --primary-light: #42a5f5;
    --secondary: #ff5e14;
    --secondary-light: #ffcc80;
    --secondary-dark: #ffa726;

    --background: #121212;
    --surface: #1e1e1e;
    --surface-container-low: #191c20;
    --surface-container: #20242a;
    --surface-container-high: #2a2f36;
    --text: #e0e0e0;
    --text-secondary: #a0a0a0;
    --outline: #8d919b;
    --outline-variant: #42474f;
    --border-color: var(--outline-variant);
    --focus-ring: rgba(144, 202, 249, 0.35);
    --state-hover: rgba(144, 202, 249, 0.1);
    --state-pressed: rgba(144, 202, 249, 0.16);
    --gray-50: #2d2d2d;
    --gray-100: #1e1e1e;
    --gray-200: #333333;
    --gray-300: #424242;
    --gray-400: #616161;
    --gray-500: #757575;
    --gray-600: #9e9e9e;
    --gray-700: #bdbdbd;
    --gray-800: #e0e0e0;
    --gray-900: #f5f5f5;

    --shadow-1: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow-2: 0 3px 6px rgba(0, 0, 0, 0.4), 0 3px 6px rgba(0, 0, 0, 0.5);
    --shadow-3: 0 10px 20px rgba(0, 0, 0, 0.4), 0 6px 6px rgba(0, 0, 0, 0.5);
    color-scheme: dark;
}

/* Ajustes de contraste para páginas específicas no modo escuro */
body.dark-mode.monitoramento-page .control-group select {
    background: linear-gradient(135deg, #171717, #111111);
    border-color: var(--gray-400);
    color: var(--text);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), var(--shadow-1);
}

body.dark-mode.monitoramento-page .print-button {
    background: rgba(41, 41, 41, 0.95);
    border-color: var(--gray-300);
    color: var(--text);
    box-shadow: var(--shadow-2);
}

body.dark-mode.monitoramento-page .live-pill {
    background: rgba(59, 130, 246, 0.16);
    color: #e0e0e0;
}

body.dark-mode.monitoramento-page table.monitor-table th,
body.dark-mode.monitoramento-page table.monitor-table td {
    border-color: var(--gray-200);
}

body.dark-mode.monitoramento-page table.monitor-table th {
    color: var(--text);
}

body.dark-mode.monitoramento-page .sidebar-links span {
    background: #1f2937;
    color: #e5e7eb;
}

body.dark-mode.monitoramento-page .sidebar-links a {
    color: var(--primary-light);
}

/* Ajustes globais de contraste para selects/menu de opções no modo escuro */
body.dark-mode select,
body.dark-mode .control-select {
    background-color: var(--surface);
    color: var(--text);
    border-color: var(--gray-300);
}

body.dark-mode .variable-selector select {
    background-color: transparent;
    color: var(--text);
}

body.dark-mode select option,
body.dark-mode select optgroup {
    background-color: #141414;
    color: #e5e5e5;
}

/* Reset básico */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

/* 9.0: Body com suporte a safe-area para Android/iOS */
body {
    margin: 0;
    padding: 0;
    padding-bottom: env(safe-area-inset-bottom);
    font-family: var(--font-family);
    font-size: 1rem;
    line-height: 1.5;
    color: var(--text);
    background-color: var(--background);
    overflow: hidden;
    height: 100vh;
    height: calc(100vh - env(safe-area-inset-bottom));
    position: relative;
    -webkit-font-smoothing: antialiased;
    transition: background-color var(--transition-normal), color var(--transition-normal);
}

a {
    color: var(--primary);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* ============================================================================
   TELA DE CARREGAMENTO (9.0 - Atualizada com selo e textos)
   ============================================================================ */
/* 9.0: Tela de carregamento com fundo em tons de laranja */
.loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #0e2045 0%, #151b2e 50%, #0d163b 100%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    transition: opacity var(--transition-slow), visibility var(--transition-slow);
}

.loading-screen.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.loading-screen[hidden] {
    display: none;
}

.loading-logos {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-bottom: 24px;
}

.loading-logo {
    max-width: 120px;
    height: auto;
    animation: pulse 2s infinite ease-in-out;
}

.loading-selo {
    max-width: 100px;
    height: auto;
    animation: pulse 2s infinite ease-in-out;
    animation-delay: 0.5s;
}

.loading-text-container {
    text-align: center;
    color: #ffffff;
    margin-bottom: 24px;
}

.loading-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 3px;
}

.loading-subtitle {
    font-size: 1rem;
    opacity: 0.9;
}

.loading-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid rgba(255, 255, 255, 0.3);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.loading-status {
    color: #ffffff;
    font-size: 0.875rem;
    margin-top: 16px;
    opacity: 0.8;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes pulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.03);
        opacity: 0.9;
    }
}

@keyframes liveBlink {

    0%,
    45% {
        opacity: 1;
    }

    46%,
    100% {
        opacity: 0.35;
    }
}

/* ============================================================================
   MODAL DE BOAS-VINDAS (9.0)
   ============================================================================ */
.welcome-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9200;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-normal), visibility var(--transition-normal);
}

.welcome-modal.visible {
    opacity: 1;
    visibility: visible;
}

.welcome-content {
    background: var(--surface);
    border-radius: var(--border-radius-lg);
    max-width: 500px;
    width: 90%;
    max-height: 90vh;
    overflow: hidden;
    box-shadow: var(--shadow-4);
    animation: modalSlideIn 0.3s ease-out;
    display: flex;
    flex-direction: column;
}

@keyframes modalSlideIn {
    from {
        transform: translateY(-20px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.welcome-header {
    background: linear-gradient(135deg, var(--secondary-light) 0%, var(--gray-600) 100%);
    padding: 24px;
    color: #ffffff;
    text-align: center;
}

body.dark-mode .welcome-header {
    background: linear-gradient(135deg, #1e1e1e 0%, #333333 100%);
}

.welcome-header img {
    max-width: 80px;
    margin-bottom: 12px;
}

.welcome-header h2 {
    font-size: 1.25rem;
    margin-bottom: 4px;
}

.welcome-header p {
    font-size: 0.875rem;
    opacity: 0.9;
}

.welcome-body {
    padding: 24px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.welcome-body h3 {
    font-size: 1rem;
    color: var(--primary-dark);
    margin-bottom: 12px;
}

body.dark-mode .welcome-body h3 {
    color: var(--primary);
}

.welcome-body ul {
    list-style: none;
    margin-bottom: 16px;
}

.welcome-body li {
    padding: 8px 0;
    padding-left: 24px;
    position: relative;
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.welcome-body li::before {
    content: "•";
    position: absolute;
    left: 8px;
    color: var(--secondary);
}

.welcome-alert {
    background: #fff3e0;
    border-left: 4px solid var(--secondary);
    padding: 8px 9px;
    border-radius: 4px;
    margin-top: 16px;
    font-size: 0.875rem;
    color: #e65100;
}

body.dark-mode .welcome-alert {
    background: #3d2c1a;
    color: #ffb74d;
}

.welcome-footer {
    padding: 16px 24px;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    flex: 0 0 auto;
    background: var(--surface);
}

.welcome-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    color: var(--text-secondary);
    cursor: pointer;
}

.welcome-checkbox input {
    width: 18px;
    height: 18px;
    accent-color: var(--primary);
}

.welcome-btn {
    min-height: var(--touch-target);
    padding: 10px 24px;
    background: var(--primary);
    color: #ffffff;
    border: none;
    border-radius: var(--border-radius);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color var(--transition-fast);
}

.welcome-btn:hover {
    background: var(--primary-dark);
}

/* ============================================================================
   ALERTA DE COOKIES/LGPD
   ============================================================================ */
.cookie-consent-banner {
    position: fixed;
    top: calc(var(--header-height) + 16px + env(safe-area-inset-top));
    right: 16px;
    width: min(560px, calc(100vw - 32px));
    z-index: 9100;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
}

.cookie-consent-banner.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.cookie-consent-content {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    background: var(--surface);
    border: 1px solid var(--gray-300);
    box-shadow: var(--shadow-2);
    border-radius: var(--border-radius-lg);
    padding: 12px 16px;
}

.cookie-consent-content p {
    margin: 0;
    flex: 1 1 320px;
    color: var(--text-secondary);
    font-size: 0.875rem;
    line-height: 1.4;
}

.cookie-consent-btn {
    border: none;
    border-radius: var(--border-radius);
    background: var(--primary);
    color: #fff;
    font-weight: 600;
    font-size: 0.875rem;
    padding: 10px 16px;
    cursor: pointer;
    transition: background-color var(--transition-fast);
}

.cookie-consent-btn:hover {
    background: var(--primary-dark);
}

body.dark-mode .cookie-consent-content {
    border-color: var(--gray-700);
}

@media (max-width: 768px) {
    .welcome-modal {
        align-items: flex-start;
        padding: calc(16px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom));
    }

    .welcome-content {
        width: 100%;
        max-height: calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    }

    .welcome-header,
    .welcome-body,
    .welcome-footer {
        padding: 14px;
    }

    .welcome-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .welcome-btn,
    .cookie-consent-btn {
        width: 100%;
    }

    .cookie-consent-banner {
        left: 10px;
        right: 10px;
        top: calc(var(--header-height) + 10px + env(safe-area-inset-top));
        width: auto;
    }

    .cookie-consent-content {
        gap: 7px;
        padding: 8px 9px;
        border-radius: var(--border-radius);
    }

    .cookie-consent-content p {
        flex-basis: 220px;
        font-size: 0.74rem;
        line-height: 1.28;
    }

    .cookie-consent-btn {
        min-height: 34px;
        padding: 7px 11px;
        font-size: 0.76rem;
    }
}

.station-modal-btn {
    width: 100%;
    padding: 10px;
    background: var(--gray-100);
    border: 1px solid var(--gray-300);
    border-radius: var(--border-radius);
    cursor: pointer;
    font-size: 0.875rem;
}

/* ============================================================================
   HEADER (9.0 - Com menu de navegação)
   ============================================================================ */
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--header-height);
    background: var(--surface);
    box-shadow: var(--shadow-2);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    z-index: 1250;
    transition: background-color var(--transition-normal);
}

.header-left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.menu-toggle {
    width: 44px;
    height: 44px;
    border: none;
    background: transparent;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color var(--transition-fast);
    color: var(--text);
}

.menu-toggle:hover {
    background-color: var(--gray-100);
}

.welcome-btn:focus-visible,
.cookie-consent-btn:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

.menu-toggle:focus-visible,
.timeline-btn:focus-visible,
.legend-toggle-btn:focus-visible,
.station-modal-close:focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: 2px;
}

.menu-toggle svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
}

.logo-container {
    display: flex;
    align-items: center;
    gap: 12px;
}

.logo-link {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.logo {
    height: 40px;
    width: auto;
}

.logo-text-container {
    display: flex;
    flex-direction: column;
}

.logo-text {
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--primary-dark);
    letter-spacing: 0;
    text-decoration: none;
}

body.dark-mode .logo-text {
    color: var(--primary);
}

.logo-subtitle {
    font-size: 0.62rem;
    color: var(--text-secondary);
}

/* Menu de navegação no header (9.0) */
.header-nav {
    display: flex;
    align-items: center;
    gap: 3px;
    margin-left: 24px;
    min-width: 0;
    flex-wrap: nowrap;
}

.header-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: var(--border-radius);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
    text-decoration: none;
    line-height: 1;
    white-space: nowrap;
    transition: all var(--transition-fast);
}

.nav-link-icon {
    width: 1.25rem;
    height: 1.25rem;
    flex: 0 0 auto;
    fill: currentColor;
}

.header-nav-link > .nav-link-icon {
    width: 1.125rem;
    height: 1.125rem;
}

.nav-link-label {
    min-width: 0;
    overflow-wrap: anywhere;
}

.material-symbols-rounded {
    font-family: 'Material Symbols Rounded';
    font-weight: normal;
    font-style: normal;
    font-size: 1.25rem;
    line-height: 1;
    letter-spacing: 0;
    text-transform: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.header-nav-link > .nav-link-label {
    overflow-wrap: normal;
}

.header-nav-dropdown {
    position: relative;
}

.dropdown-toggle {
    border: none;
    background: transparent;
    cursor: pointer;
}

.dropdown-caret {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid currentColor;
    transition: transform var(--transition-fast);
}

.header-nav-dropdown.is-open .dropdown-caret,
.header-nav-dropdown:focus-within .dropdown-caret,
.header-nav-dropdown:hover .dropdown-caret {
    transform: rotate(180deg);
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    display: none;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--gray-200);
    box-shadow: var(--shadow-3);
    border-radius: var(--border-radius);
    min-width: 180px;
    padding: 6px;
    z-index: 1260;
}

.header-nav-dropdown.is-open .dropdown-menu,
.header-nav-dropdown:hover .dropdown-menu,
.header-nav-dropdown:focus-within .dropdown-menu {
    display: flex;
}

.dropdown-menu .header-nav-link {
    width: 100%;
    text-align: left;
    justify-content: flex-start;
}

.header-nav-link:hover {
    background: var(--gray-100);
    color: var(--text);
    text-decoration: none;
}

.header-nav-link.active {
    background: var(--primary);
    color: #ffffff;
}

body.dark-mode .header-nav-link.active {
    background: var(--primary-dark);
    color: #121212;
}

.header-center {
    flex: 1;
    display: flex;
    justify-content: center;
    padding: 0 16px;
}

.variable-selector {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--gray-200);
    padding: 8px 16px;
    border-radius: 24px;
    max-width: 300px;
    width: 100%;
}

.variable-selector label {
    font-size: 0.875rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

.variable-selector select {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--primary-dark);
    cursor: pointer;
    padding: 4px 8px;
}

body.dark-mode .variable-selector select {
    color: var(--primary);
}

.variable-selector select:focus {
    outline: none;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.variable-indicator-text {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--primary-dark);
    text-align: center;
    white-space: nowrap;
}

body.dark-mode .variable-indicator-text {
    color: var(--primary);
}

.partner-logos {
    display: flex;
    align-items: center;
    gap: 8px;
}

.partner-logo-link {
    display: flex;
    align-items: center;
}

.partner-logo {
    height: 32px;
    width: auto;
    max-width: 80px;
    object-fit: contain;
    opacity: 0.8;
    transition: opacity var(--transition-fast);
}

.partner-logo:hover {
    opacity: 1;
}

body.nimbus-header-sidebar-nav .header {
    padding: 0 10px;
}

body.nimbus-header-sidebar-nav .header-nav {
    display: none;
}

body.nimbus-header-sidebar-variable .header-center {
    display: none;
}

body.nimbus-header-hide-partner-1 .partner-logos .partner-logo-link:nth-child(-n + 1),
body.nimbus-header-hide-partner-2 .partner-logos .partner-logo-link:nth-child(-n + 2),
body.nimbus-header-hide-partner-3 .partner-logos .partner-logo-link:nth-child(-n + 3) {
    display: none;
}

body.nimbus-header-sidebar-nav .header-left,
body.nimbus-header-sidebar-nav .header-right {
    min-width: 0;
}

body.nimbus-header-sidebar-nav .sidebar-section-menu {
    display: block !important;
}

.datetime-display {
    text-align: right;
    padding: 5px 10px;
    background: var(--gray-50);
    border-radius: var(--border-radius);
    line-height: 1.1;
}

body.dark-mode .datetime-display {
    background: #1b1b1b;
    border: 1px solid #434343;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
}

.datetime-display .date {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--primary-dark);
}

body.dark-mode .datetime-display .date {
    color: var(--primary);
}

.datetime-display .time {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--secondary);
}

.live-indicator {
    position: fixed;
    left: 12px;
    bottom: calc(var(--timeline-actual-height, var(--timeline-height)) + 12px + env(safe-area-inset-bottom));
    z-index: 905;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    min-height: 24px;
    padding: 4px 8px;
    margin-top: 0;
    border-radius: 999px;
    background: rgba(248, 250, 252, 0.58);
    color: #dc2626;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--transition-fast), visibility var(--transition-fast), background-color var(--transition-fast);
}

.live-indicator::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 6px rgba(220, 38, 38, 0.7);
}

.datetime-display.is-live .live-indicator,
.live-indicator.is-live {
    visibility: visible;
    opacity: 1;
    animation: liveBlink 1.1s steps(1, end) infinite;
}

body.dark-mode .datetime-display .time {
    color: #fb923c;
}

/* ============================================================================
   SIDEBAR / MENU LATERAL (9.0 - Rodapé melhorado)
   ============================================================================ */
.sidebar {
    position: fixed;
    top: var(--header-height);
    left: 0;
    width: var(--sidebar-width);
    height: calc(100vh - var(--header-height));
    background: var(--surface);
    border-right: 1px solid var(--border-color);
    box-shadow: var(--shadow-3);
    transform: translateX(-100%);
    transition: transform var(--transition-normal), background-color var(--transition-normal);
    /* Elevado para sobrepor controles do mapa (ex.: escala) em mobile */
    z-index: 1200;
    display: flex;
    flex-direction: column;
}

.sidebar.open {
    transform: translateX(0);
}

.sidebar-overlay {
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-normal), visibility var(--transition-normal);
    z-index: 1199;
}

.sidebar-overlay.visible {
    opacity: 1;
    visibility: visible;
}

.sidebar-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
}

.sidebar-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 16px;
    border-bottom: 1px solid var(--border-color);
    background: var(--surface-container-low);
}

.sidebar-header-icon {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius);
    background: color-mix(in srgb, var(--primary) 14%, var(--surface));
    color: var(--primary-dark);
}

.sidebar-header-icon .material-symbols-rounded {
    font-size: 1.5rem;
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.sidebar-header-copy {
    min-width: 0;
}

.sidebar-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--primary-dark);
    margin-bottom: 4px;
}

body.dark-mode .sidebar-title {
    color: var(--primary);
}

.sidebar-subtitle {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.sidebar-section {
    border-bottom: 1px solid var(--border-color);
}

.sidebar-section-header {
    min-height: var(--touch-target);
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
    transition: background-color var(--transition-fast);
}

.sidebar-section-header:hover {
    background-color: var(--state-hover);
}

.sidebar-section-header:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: -3px;
}

.sidebar-section-title {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0;
}

.sidebar-section-label {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.sidebar-section-leading-icon {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    color: var(--primary);
    font-size: 1.25rem;
}

.sidebar-section-icon {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    color: var(--text-secondary);
    fill: currentColor;
    font-size: 1.25rem;
    transition: transform var(--transition-fast);
}

.sidebar-section-icon path {
    fill: currentColor;
}

.sidebar-section.collapsed .sidebar-section-icon {
    transform: rotate(-90deg);
}

.sidebar-section-content {
    padding: 0 16px 16px;
    display: block;
}

.tutorial-button {
    width: 100%;
    padding: 10px 12px;
    background: var(--gray-50);
    border: 1px solid var(--gray-300);
    border-radius: var(--border-radius);
    cursor: pointer;
    font-size: 0.875rem;
    color: var(--text);
    font-weight: 600;
    transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.tutorial-button:hover,
.tutorial-button:focus-visible {
    background: var(--gray-100);
    border-color: var(--gray-400);
    box-shadow: var(--shadow-1);
    outline: none;
}

body.dark-mode .tutorial-button {
    background: var(--gray-200);
    border-color: var(--gray-400);
    color: var(--gray-900);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

body.dark-mode .tutorial-button:hover,
body.dark-mode .tutorial-button:focus-visible {
    background: var(--gray-300);
    color: #ffffff;
    border-color: var(--gray-500);
    box-shadow: var(--shadow-1);
}

.sidebar-section.collapsed .sidebar-section-content {
    display: none;
}

/* Controles do sidebar */
.control-group {
    margin-bottom: 14px;
}

.control-group:last-child {
    margin-bottom: 0;
}

.control-group-spaced {
    margin-top: 15px;
}

.control-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 5px;
}

.control-label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.control-select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--gray-300);
    border-radius: var(--border-radius);
    font-size: 0.875rem;
    color: var(--text);
    background: var(--surface);
    cursor: pointer;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.control-select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(40, 53, 147, 0.1);
}

.control-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    cursor: pointer;
}

.control-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--primary);
    cursor: pointer;
}

.control-checkbox span {
    font-size: 0.875rem;
    color: var(--text);
}

.control-hint {
    margin-top: 6px;
    padding-left: 28px;
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--text-secondary);
}

.control-source-logo {
    height: 16px;
    width: auto;
    flex: 0 0 auto;
    opacity: 0.8;
}

.sidebar-details {
    margin-top: 10px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background: var(--surface-container-low);
    overflow: hidden;
}

.sidebar-details summary {
    min-height: 40px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    cursor: pointer;
    color: var(--text);
    font-size: 0.875rem;
    font-weight: 600;
    list-style: none;
}

.sidebar-details summary::-webkit-details-marker {
    display: none;
}

.sidebar-details summary::after {
    content: 'expand_more';
    margin-left: auto;
    font-family: 'Material Symbols Rounded';
    font-size: 1.25rem;
    line-height: 1;
    color: var(--text-secondary);
    transition: transform var(--transition-fast);
}

.sidebar-details[open] summary::after {
    transform: rotate(180deg);
}

.sidebar-details summary:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: -3px;
}

.sidebar-details .shape-list {
    padding: 4px 10px 10px;
}

.forecast-display-control[hidden],
.station-forecast-badge[hidden] {
    display: none !important;
}

.forecast-display-control {
    margin-top: 12px;
    padding: 10px 12px;
    border: 1px solid var(--gray-200);
    border-radius: var(--border-radius);
    background: color-mix(in srgb, var(--secondary) 8%, var(--surface));
}

.forecast-display-header {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
}

.forecast-display-header > .material-symbols-rounded {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--primary) 12%, var(--surface));
    color: var(--primary);
    font-size: 20px;
}

.forecast-display-header strong {
    display: block;
    color: var(--text);
    font-size: 0.88rem;
    line-height: 1.2;
}

.forecast-display-header p {
    margin: 3px 0 0;
    color: var(--text-secondary);
    font-size: 0.78rem;
    line-height: 1.35;
}

.forecast-display-control .control-checkbox {
    padding: 0;
}

.forecast-toggle-row {
    align-items: flex-start;
}

.forecast-toggle-row input:disabled + span {
    color: var(--text-secondary);
}

.forecast-model-hint {
    margin-top: 6px;
    font-size: 0.75rem;
    line-height: 1.35;
    color: var(--text-secondary);
}

.forecast-display-control[data-status="available"] {
    border-color: color-mix(in srgb, var(--success) 42%, var(--gray-200));
}

.forecast-display-control[data-status="available"] .forecast-model-hint {
    color: var(--success);
}

.forecast-display-control[data-status="unavailable"] {
    background: color-mix(in srgb, var(--warning) 8%, var(--surface));
}

.control-range {
    width: 100%;
    accent-color: var(--primary);
    cursor: pointer;
}

.control-range-value {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-top: 4px;
}

.control-divider {
    height: 1px;
    margin: 12px 0;
    background: var(--gray-200);
    opacity: 0.8;
}

.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.radar-legend {
    margin-top: 8px;
    padding: 8px 9px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background: color-mix(in srgb, var(--surface) 94%, transparent);
    color: var(--text);
    max-width: min(320px, calc(100vw - 20px));
    overflow-wrap: normal;
    backdrop-filter: blur(10px);
}

.radar-legend-title {
    min-width: max-content;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    line-height: 1.25;
    white-space: nowrap;
    overflow-wrap: normal;
}

.radar-legend-subtitle {
    font-size: 0.6rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin: 4px 0 5px;
}

.radar-legend-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.42rem;
    text-align: center;
    color: var(--text);
}

.radar-legend-row td {
    padding: 2px 0;
}

.radar-legend-scale td {
    padding: 2px 0;
}

.radar-legend-gradient td {
    height: 6px;
}

.radar-legend-left {
    text-align: left;
}

.radar-legend-right {
    text-align: right;
}



#radarOperationalLegend .radar-legend-table {
    font-size: 0.5rem;
    table-layout: fixed;
}

#radarLegendDcsc .radar-legend-gradient td {
    height: 14px;
}

#radarLegendDcsc .radar-legend-scale td {
    font-size: 0.55rem;
    padding: 2px 0;
    text-align: center;
}

#radarLegendDcsc .radar-legend-scale td {
    color: transparent;
    font-size: 0;
    line-height: 1.05;
}

#radarLegendDcsc .radar-legend-scale td:nth-child(1),
#radarLegendDcsc .radar-legend-scale td:nth-child(3),
#radarLegendDcsc .radar-legend-scale td:nth-child(5),
#radarLegendDcsc .radar-legend-scale td:nth-child(7),
#radarLegendDcsc .radar-legend-scale td:nth-child(9),
#radarLegendDcsc .radar-legend-scale td:nth-child(11),
#radarLegendDcsc .radar-legend-scale td:nth-child(13),
#radarLegendDcsc .radar-legend-scale td:nth-child(15),
#radarLegendDcsc .radar-legend-scale td:nth-child(17) {
    color: var(--text);
    font-size: 0.48rem;
}

#radarOperationalLegend th,
#radarOperationalLegend td {
    padding: 3px 4px;
    font-size: 0.62rem;
    line-height: 1.2;
    word-break: normal;
    overflow-wrap: normal;
}

#radarOperationalLegend th {
    text-align: left;
    white-space: normal;
}

#radarOperationalLegend th:nth-child(2),
#radarOperationalLegend td:nth-child(2),
#radarOperationalLegend th:nth-child(3),
#radarOperationalLegend td:nth-child(3) {
    text-align: center;
}

#radarOperationalLegend th:nth-child(2),
#radarOperationalLegend td:nth-child(2),
#radarOperationalLegend td:nth-child(3) {
    white-space: nowrap;
}

#radarOperationalLegend .radar-operational-col-name {
    width: 50%;
}

#radarOperationalLegend .radar-operational-col-status {
    width: 18%;
}

#radarOperationalLegend .radar-operational-col-time {
    width: 32%;
}

.radar-operational-name {
    vertical-align: middle;
}

.radar-operational-row {
    cursor: pointer;
}

.radar-operational-row:hover {
    background: rgba(148, 163, 184, 0.12);
}

.radar-operational-logo-btn {
    border: 0;
    background: transparent;
    padding: 0;
    margin: 0 3px 0 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    vertical-align: middle;
}

.radar-operational-logo-btn:focus-visible {
    outline: 1px solid var(--primary);
    outline-offset: 1px;
    border-radius: 2px;
}

.radar-operational-logo {
    width: 13px;
    height: 13px;
    flex: 0 0 13px;
    opacity: 0.9;
}

.radar-operational-status {
    text-align: center;
}

.radar-status-led {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    display: inline-block;
    box-shadow: 0 0 0 1px rgba(23, 23, 23, 0.2);
}

.radar-status-led-on {
    background: #22c55e;
}

.radar-status-led-off {
    background: #ef4444;
}

.radar-operational-time {
    font-size: 0.6rem;
}

.radar-legend-footer {
    margin-top: 4px;
    font-size: 0.42rem;
    font-weight: 600;
    text-align: center;
    color: var(--text-secondary);
}

.radar-legend-timestamp {
    margin-top: 1px;
    font-size: 0.5rem;
    font-weight: 500;
    text-align: center;
    color: var(--text-secondary);
    opacity: 0.75;
}

.radar-legend-colorbar-image {
    display: block;
    width: 100%;
    height: auto;
    max-height: 130px;
    object-fit: contain;
    border-radius: 4px;
}

.radar-status-label {
    pointer-events: none;
    overflow: visible;
}

.radar-status-label-inner {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    width: 280px;
    max-width: 280px;
    padding: 12px 16px;
    border-radius: 18px;
    border: 1px dashed rgba(146, 64, 14, 0.22);
    background: rgba(255, 247, 237, 0.22);
    color: rgba(124, 45, 18, 0.72);
    text-align: center;
    box-shadow: none;
    backdrop-filter: blur(1px);
}

.radar-status-label-title {
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.radar-status-label-subtitle {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.radar-status-label-text {
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: 0.03em;
}

.radar-hover-tooltip {
    position: fixed;
    z-index: 1300;
    pointer-events: none;
    padding: 8px 10px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background: color-mix(in srgb, var(--surface) 94%, transparent);
    color: var(--text);
    font-size: 0.72rem;
    font-weight: 600;
    box-shadow: var(--shadow-2);
    backdrop-filter: blur(10px);
    opacity: 0;
    transform: translate(12px, 12px);
    transition: opacity 0.12s ease;
    max-width: min(320px, calc(100vw - 32px));
}

.radar-hover-tooltip.visible {
    opacity: 1;
}

.radar-hover-tooltip .radar-hover-label {
    display: flex;
    align-items: center;
    gap: 6px;
}

.radar-hover-tooltip .radar-hover-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.radar-hover-tooltip .radar-hover-title {
    font-size: 0.62rem;
    font-weight: 700;
}

.radar-hover-tooltip .radar-hover-subtitle {
    font-size: 0.68rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.radar-hover-tooltip .radar-hover-swatch {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    border: 1px solid var(--border-color);
}

.radar-center-marker-wrapper {
    background: transparent;
    border: 0;
}

.radar-center-marker {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(23, 23, 23, 0.76);
    border: 1px solid rgba(255, 255, 255, 0.42);
    box-shadow: 0 0 0 2px rgba(23, 23, 23, 0.24), 0 6px 12px rgba(2, 6, 23, 0.45);
}

.radar-center-marker img {
    width: 18px;
    height: 18px;
    object-fit: contain;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.3));
}

.station-hover-overlay {
    position: fixed;
    z-index: 1150;
    pointer-events: none;
    min-width: 180px;
    max-width: 300px;
    padding: 8px 10px;
    border-radius: 10px;
    background: rgba(23, 23, 23, 0.94);
    border: 1px solid rgba(148, 163, 184, 0.3);
    color: #fff;
    box-shadow: var(--shadow-2);
    opacity: 0;
    transform: translate(14px, 14px);
    transition: opacity 0.1s ease;
}

.station-hover-overlay.visible {
    opacity: 1;
}

.station-hover-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.station-hover-logo {
    width: 22px;
    height: 22px;
    object-fit: contain;
    border-radius: 4px;
    background: rgba(241, 245, 249, 0.92);
    padding: 2px;
    flex: 0 0 auto;
}

.station-hover-source {
    font-size: 0.67rem;
    font-weight: 700;
    line-height: 1.2;
    color: rgba(226, 232, 240, 0.95);
    letter-spacing: 0.02em;
}

.station-hover-code {
    margin: 0;
    font-size: 0.62rem;
    font-weight: 700;
    color: #bae6fd;
    letter-spacing: 0.01em;
}

.station-hover-name {
    margin: 2px 0 0;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.3;
    color: #fff;
}

.station-hover-time {
    margin: 3px 0 0;
    font-size: 0.66rem;
    font-weight: 600;
    line-height: 1.25;
    color: rgba(226, 232, 240, 0.9);
}

.station-hover-trend {
    margin: 3px 0 0;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.25;
    color: #fde68a;
}

.station-hover-cluster-list {
    margin: 0;
    font-size: 0.73rem;
    line-height: 1.35;
    color: rgba(226, 232, 240, 0.95);
    max-height: 86px;
    overflow: hidden;
    word-break: break-word;
}

.radar-legend-floating {
    position: fixed;
    bottom: calc(var(--timeline-actual-height, var(--timeline-height)) + 12px);
    right: var(--radar-legend-floating-right);
    z-index: 900;
    width: var(--radar-legend-floating-width);
    max-width: var(--radar-legend-floating-width);
    max-height: calc(100dvh - var(--header-height) - var(--timeline-actual-height, var(--timeline-height)) - 24px);
    overflow-y: auto;
    display: none;
    box-shadow: var(--shadow-2);
    overscroll-behavior: contain;
}

.radar-legend-floating.visible {
    display: block;
}


#radarOperationalLegend {
    bottom: calc(var(--timeline-actual-height, var(--timeline-height)) + 12px);
    right: var(--legend-row-right, calc(var(--radar-legend-floating-right) + var(--radar-legend-floating-width) + var(--legend-gap)));
}

.shape-list {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.shape-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.shape-action-checkbox {
    padding: 5px 8px;
    border: 1px solid var(--gray-300);
    background: var(--surface);
    color: var(--text);
    border-radius: var(--border-radius);
    transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
    gap: 6px;
}

.shape-action-checkbox:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.shape-category {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 4px 0;
}

.shape-category-header {
    font-weight: 700;
    color: var(--text);
    font-size: 0.95rem;
}

.shape-category-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.shape-folder-header {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--text-secondary);
    margin-top: 2px;
}

.shape-folder-toggle {
    width: 100%;
    justify-content: flex-start;
    padding: 3px 2px;
    border: 0;
    background: transparent;
    color: var(--text-secondary);
    border-radius: 0;
}

.shape-folder-toggle:hover {
    border: 0;
    color: var(--primary);
}

.shape-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 5px 8px;
    border: 1px solid var(--gray-200);
    border-radius: var(--border-radius);
    background: var(--surface);
}

.shape-item .control-checkbox {
    padding: 0;
    margin: 0;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.shape-item .control-checkbox span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.shape-focus-btn {
    padding: 4px 8px;
    font-size: 0.75rem;
    border: 1px solid var(--primary);
    background: transparent;
    color: var(--primary);
    border-radius: var(--border-radius);
    font-weight: 600;
    cursor: pointer;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.shape-focus-btn:hover {
    background: var(--primary);
    color: #fff;
}

.empty-hint {
    color: var(--text-secondary);
    font-size: 0.875rem;
    margin: 8px 0;
}

/* Switch toggle para modo noturno (9.0) */
.switch-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
}

.switch-label {
    font-size: 0.875rem;
    color: var(--text);
}

.switch {
    position: relative;
    width: 48px;
    height: 24px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.switch-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--gray-400);
    border-radius: 24px;
    transition: background-color var(--transition-fast);
}

.switch-slider::before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    border-radius: 50%;
    transition: transform var(--transition-fast);
}

.switch input:checked+.switch-slider {
    background-color: var(--primary);
}

.switch input:checked+.switch-slider::before {
    transform: translateX(24px);
}

/* Chips para filtros de fonte */
.filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.filter-chips.is-loading {
    min-height: 30px;
    position: relative;
    pointer-events: none;
}

.filter-chips.is-loading::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 12px;
    background: linear-gradient(90deg, rgba(148, 163, 184, 0.12) 25%, rgba(148, 163, 184, 0.25) 50%, rgba(148, 163, 184, 0.12) 75%);
    background-size: 200% 100%;
    animation: nimbusShimmer 1.2s linear infinite;
}

.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 6px 12px;
    background: var(--gray-100);
    border: 1px solid var(--gray-300);
    border-radius: 16px;
    font-size: 0.8125rem;
    color: var(--text);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.filter-chip:hover {
    background: var(--gray-200);
}

.filter-chip.active {
    background: var(--primary);
    border-color: var(--primary);
    color: #ffffff;
}

.filter-chip img {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    object-fit: contain;
}

/* Controle de acumulado (9.0) */
.accumulation-control {
    margin-top: 12px;
    padding: 8px 9px;
    background: var(--gray-50);
    border-radius: var(--border-radius);
}

.accumulation-title {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 3px;
}

.accumulation-slider {
    width: 100%;
    margin-bottom: 3px;
}

.accumulation-value {
    text-align: center;
    font-size: 1rem;
    font-weight: 600;
    color: var(--primary-dark);
}

body.dark-mode .accumulation-value {
    color: var(--primary);
}

/* 9.0: Menu de navegação no sidebar (sempre visível no mobile) */
.sidebar-section-menu {
    display: none;
}

.sidebar-nav-menu {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.sidebar-nav-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sidebar-nav-group-title {
    margin: 0 2px 2px;
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0;
    text-transform: uppercase;
}

.sidebar-nav-menu-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    min-height: var(--touch-target);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--border-radius);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text);
    text-decoration: none;
    transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
}

.sidebar-nav-menu-link .sidebar-nav-icon {
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    border-radius: 16px;
    color: var(--text-secondary);
    font-size: 1.25rem;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.sidebar-nav-menu-link > svg {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    padding: 6px;
    box-sizing: border-box;
    border-radius: 16px;
    color: var(--text-secondary);
    fill: currentColor;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.sidebar-nav-menu-link > svg path {
    fill: currentColor;
}

.sidebar-nav-submenu {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: -2px;
    padding-left: 18px;
}

.sidebar-nav-subitem {
    min-height: 40px;
    padding: 7px 10px;
    font-size: 0.82rem;
}

.sidebar-nav-subitem .sidebar-nav-icon {
    width: 28px;
    height: 28px;
    font-size: 1.12rem;
}

.sidebar-nav-menu-link:not(a) {
    color: var(--text-secondary);
    opacity: 1 !important;
    cursor: default;
}

.sidebar-nav-menu-link:hover {
    background: var(--state-hover);
    border-color: var(--border-color);
    text-decoration: none;
}

.sidebar-nav-menu-link:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

.sidebar-nav-menu-link.active {
    background: color-mix(in srgb, var(--primary) 14%, var(--surface));
    border-color: color-mix(in srgb, var(--primary) 28%, var(--border-color));
    color: var(--primary-dark);
    font-weight: 700;
}

.sidebar-nav-menu-link.active .sidebar-nav-icon {
    background: color-mix(in srgb, var(--primary) 18%, transparent);
    color: var(--primary-dark);
    font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}

.sidebar-nav-menu-link.active > svg {
    background: color-mix(in srgb, var(--primary) 18%, transparent);
    color: var(--primary-dark);
}

body.dark-mode .sidebar-nav-menu-link.active {
    background: color-mix(in srgb, var(--primary-dark) 18%, var(--surface));
    border-color: color-mix(in srgb, var(--primary-dark) 32%, var(--border-color));
    color: var(--primary-dark);
}

body.dark-mode .sidebar-nav-menu-link.active .sidebar-nav-icon {
    background: color-mix(in srgb, var(--primary-dark) 18%, transparent);
    color: var(--primary-dark);
}

body.dark-mode .sidebar-nav-menu-link > svg {
    color: var(--text-secondary);
}

body.dark-mode .sidebar-nav-menu-link.active > svg {
    background: color-mix(in srgb, var(--primary-dark) 18%, transparent);
    color: var(--primary-dark);
}

/* 9.0: Seção "Sobre" reorganizada */
.sidebar-sobre-content {
    text-align: center;
}

.sobre-logo {
    margin-bottom: 16px;
}

.sobre-logo img {
    max-width: 120px;
    height: auto;
}

.sobre-instituicao {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 16px;
}

.sobre-apoio {
    margin-bottom: 20px;
    padding: 8px 9px;
    background: var(--gray-50);
    border-radius: var(--border-radius);
}

.sobre-apoio-title {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 3px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sobre-parceiros {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.sobre-parceiros a {
    display: inline-block;
}

.sobre-parceiros img {
    height: 28px;
    width: auto;
    max-width: 60px;
    object-fit: contain;
    opacity: 0.8;
    transition: opacity var(--transition-fast);
}

.sobre-parceiros img:hover {
    opacity: 1;
}

.sobre-descricao {
    font-size: 0.875rem;
    color: var(--text);
    line-height: 1.5;
    margin-bottom: 16px;
}

.sobre-creditos {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    margin-bottom: 3px;
}

.sobre-autor {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    margin-bottom: 16px;
}

.sobre-autor a {
    color: var(--primary);
    text-decoration: none;
}

.sobre-autor a:hover {
    text-decoration: underline;
}

.sobre-versao {
    font-size: 0.75rem;
    color: var(--gray-500);
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--gray-200);
}

/* ============================================================================
   ÁREA DO MAPA
   ============================================================================ */
.map-container {
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    bottom: var(--timeline-actual-height, var(--timeline-height));
    z-index: 1;
}

body.timeline-collapsed .map-container {
    bottom: 0;
}

#map {
    width: 100%;
    height: 100%;
    background: var(--gray-200);
}

#map.map-busy,
#map.map-busy .leaflet-container,
#map.map-busy .leaflet-interactive {
    cursor: progress !important;
}

#map:focus,
#map:focus-visible,
#map .leaflet-interactive:focus,
#map .leaflet-interactive:focus-visible {
    outline: none !important;
}

.leaflet-container.nimbus-drawing-active,
.leaflet-container.nimbus-drawing-active * {
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
}

.map-data-loading {
    position: absolute;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 980;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(23, 23, 23, 0.85);
    color: #ffffff;
    font-size: 0.8125rem;
    box-shadow: var(--shadow-2);
    backdrop-filter: blur(2px);
}

.map-data-loading[hidden] {
    display: none !important;
}

.map-data-loading-spinner {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}


.map-tools {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 950;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

.map-tools-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-end;
}

.map-tools-panel {
    min-width: 210px;
    max-width: 240px;
    padding: 10px;
    border-radius: 12px;
    border: 1px solid var(--gray-300);
    background: rgba(241, 245, 249, 0.96);
    box-shadow: var(--shadow-2);
    display: grid;
    gap: 10px;
}

.map-tools-group {
    display: grid;
    gap: 6px;
}

.map-tools-group-title {
    margin: 0;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--gray-500);
}

.map-color-palette {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 6px;
}

.map-color-swatch {
    width: 26px;
    height: 26px;
    border-radius: 999px;
    border: 2px solid rgba(255, 255, 255, 0.95);
    box-shadow: inset 0 0 0 1px rgba(23, 23, 23, 0.2), 0 1px 3px rgba(23, 23, 23, 0.3);
    cursor: pointer;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.map-color-swatch[data-color="#ef4444"] {
    background: #ef4444;
}

.map-color-swatch[data-color="#0ea5e9"] {
    background: #0ea5e9;
}

.map-color-swatch[data-color="#10b981"] {
    background: #10b981;
}

.map-color-swatch[data-color="#f59e0b"] {
    background: #f59e0b;
}

.map-color-swatch[data-color="#a855f7"] {
    background: #a855f7;
}

.map-color-swatch[data-color="#1b1b1b"] {
    background: #1b1b1b;
}

.map-color-swatch.active {
    transform: scale(1.08);
    box-shadow: inset 0 0 0 2px #fff, 0 0 0 2px var(--primary), 0 2px 5px rgba(23, 23, 23, 0.25);
}

.map-stroke-control {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--gray-600);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

#drawStrokeWidth {
    width: 100%;
}

.map-tools-inline-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.map-tool-mini-btn {
    border: 1px solid var(--gray-300);
    background: var(--surface);
    color: var(--text);
    border-radius: 999px;
    padding: 5px 10px;
    font-size: 0.74rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

.map-tool-mini-btn:hover {
    background: #e0f2fe;
    border-color: #38bdf8;
    transform: translateY(-1px);
}

.map-tools-hint {
    margin: 0;
    font-size: 0.74rem;
    line-height: 1.35;
    color: var(--gray-600);
}

.map-tools.collapsed .map-tools-actions {
    display: none;
}

.map-tool-btn {
    width: 48px;
    height: 48px;
    border: 1px solid var(--gray-300);
    background: rgba(241, 245, 249, 0.94);
    color: var(--text);
    border-radius: 999px;
    padding: 0;
    font-size: 1.1rem;
    line-height: 1;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--shadow-1);
    transition: transform var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
    touch-action: manipulation;
}

.map-tools-toggle {
    background: rgba(14, 165, 233, 0.95);
    border-color: rgba(2, 132, 199, 0.9);
    color: #fff;
}

.map-tool-btn:hover {
    transform: translateY(-1px);
    border-color: var(--primary-light);
}

.map-tool-btn.active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

.map-tool-btn.danger {
    border-color: #e53935;
    color: #b71c1c;
}

.map-tool-btn.danger:hover {
    background: rgba(229, 57, 53, 0.12);
}

body.dark-mode .map-tool-btn {
    background: rgba(41, 41, 41, 0.95);
    border-color: rgba(148, 163, 184, 0.35);
    color: #e5e5e5;
}

body.dark-mode .map-tools-panel {
    background: rgba(23, 23, 23, 0.96);
    border-color: rgba(148, 163, 184, 0.35);
}

.radar-hover-tooltip .radar-hover-value {
    color: var(--text);
    font-size: 0.88rem;
    font-weight: 700;
}

.radar-hover-tooltip .radar-hover-meta {
    color: var(--text-secondary);
    font-size: 0.64rem;
    font-weight: 500;
    line-height: 1.35;
}

body.dark-mode .radar-hover-tooltip .radar-hover-value {
    color: #dcdcdc;
}

body.dark-mode .radar-hover-tooltip .radar-hover-meta {
    color: rgba(255, 255, 255, 0.68);
}


.map-data-loading[hidden] {
    display: none !important;
}

.map-data-loading-spinner {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}


.map-tools {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 950;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

.map-tools-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-end;
}

.map-tools-panel {
    min-width: 210px;
    max-width: 240px;
    padding: 10px;
    border-radius: 12px;
    border: 1px solid var(--gray-300);
    background: rgba(241, 245, 249, 0.96);
    box-shadow: var(--shadow-2);
    display: grid;
    gap: 10px;
}

.map-tools-group {
    display: grid;
    gap: 6px;
}

.map-tools-group-title {
    margin: 0;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--gray-500);
}

.map-color-palette {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 6px;
}

.map-color-swatch {
    width: 26px;
    height: 26px;
    border-radius: 999px;
    border: 2px solid rgba(255, 255, 255, 0.95);
    box-shadow: inset 0 0 0 1px rgba(23, 23, 23, 0.2), 0 1px 3px rgba(23, 23, 23, 0.3);
    cursor: pointer;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.map-color-swatch[data-color="#ef4444"] {
    background: #ef4444;
}

.map-color-swatch[data-color="#0ea5e9"] {
    background: #0ea5e9;
}

.map-color-swatch[data-color="#10b981"] {
    background: #10b981;
}

.map-color-swatch[data-color="#f59e0b"] {
    background: #f59e0b;
}

.map-color-swatch[data-color="#a855f7"] {
    background: #a855f7;
}

.map-color-swatch[data-color="#1b1b1b"] {
    background: #1b1b1b;
}

.map-color-swatch.active {
    transform: scale(1.08);
    box-shadow: inset 0 0 0 2px #fff, 0 0 0 2px var(--primary), 0 2px 5px rgba(23, 23, 23, 0.25);
}

.map-stroke-control {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--gray-600);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

#drawStrokeWidth {
    width: 100%;
}

.map-tools-inline-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.map-tool-mini-btn {
    border: 1px solid var(--gray-300);
    background: var(--surface);
    color: var(--text);
    border-radius: 999px;
    padding: 5px 10px;
    font-size: 0.74rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

.map-tool-mini-btn:hover {
    background: #e0f2fe;
    border-color: #38bdf8;
    transform: translateY(-1px);
}

.map-tools-hint {
    margin: 0;
    font-size: 0.74rem;
    line-height: 1.35;
    color: var(--gray-600);
}

.map-tools.collapsed .map-tools-actions {
    display: none;
}

.map-tool-btn {
    width: 48px;
    height: 48px;
    border: 1px solid var(--gray-300);
    background: rgba(241, 245, 249, 0.94);
    color: var(--text);
    border-radius: 999px;
    padding: 0;
    font-size: 1.1rem;
    line-height: 1;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--shadow-1);
    transition: transform var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
    touch-action: manipulation;
}

.map-tools-toggle {
    background: rgba(14, 165, 233, 0.95);
    border-color: rgba(2, 132, 199, 0.9);
    color: #fff;
}

.map-tool-btn:hover {
    transform: translateY(-1px);
    border-color: var(--primary-light);
}

.map-tool-btn.active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

.map-tool-btn.danger {
    border-color: #e53935;
    color: #b71c1c;
}

.map-tool-btn.danger:hover {
    background: rgba(229, 57, 53, 0.12);
}

body.dark-mode .map-tool-btn {
    background: rgba(41, 41, 41, 0.95);
    border-color: rgba(148, 163, 184, 0.35);
    color: #e5e5e5;
}

body.dark-mode .map-tools-panel {
    background: rgba(23, 23, 23, 0.96);
    border-color: rgba(148, 163, 184, 0.35);
}

body.dark-mode .map-tools-group-title,
body.dark-mode .map-stroke-control,
body.dark-mode .map-tools-hint {
    color: #cccccc;
}

body.dark-mode .meteo-quick-status {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 16px;
}

.meteo-quick-status span {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    font-size: 0.8rem;
    font-weight: 500;
    border-radius: 8px;
    border: 1px solid #e5e5e5;
    background: var(--surface);
    color: #434343;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
}

.meteo-quick-status span:hover {
    background: #fafafa;
    border-color: #cccccc;
    color: #141414;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

body.dark-mode .meteo-quick-status span {
    background: rgba(23, 23, 23, 0.75);
    border-color: rgba(148, 163, 184, 0.25);
    color: #f5f5f5;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

body.dark-mode .meteo-quick-status span:hover {
    background: rgba(144, 202, 249, 0.15);
    border-color: rgba(144, 202, 249, 0.35);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
}

body.dark-mode .map-tool-mini-btn {
    background: #141414;
    border-color: rgba(148, 163, 184, 0.45);
    color: #e5e5e5;
}

body.dark-mode .map-tool-mini-btn:hover {
    background: #082f49;
    border-color: #38bdf8;
}

body.dark-mode .map-tool-btn.active {
    background: #1d4ed8;
    border-color: #1d4ed8;
    color: #fff;
}

body.dark-mode .map-tool-btn.danger {
    color: #fecaca;
    border-color: rgba(248, 113, 113, 0.6);
}

/* Estilos do Leaflet para modo noturno */
body.dark-mode .leaflet-control-zoom a {
    background: var(--surface) !important;
    color: var(--text) !important;
}

body.dark-mode .leaflet-control-zoom a:hover {
    background: var(--gray-200) !important;
}

body.dark-mode .leaflet-control-layers {
    background: var(--surface) !important;
    color: var(--text) !important;
}

/* ============================================================================
   MARCADORES DO MAPA
   ============================================================================ */
.station-marker-icon {
    cursor: pointer;
    pointer-events: auto;
}

.station-marker {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 2px solid #ffffff;
    box-shadow: var(--shadow-2);
    font-weight: 700;
    font-size: 11px;
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.station-marker:hover {
    transform: scale(1.15);
    box-shadow: var(--shadow-3);
    z-index: 1000 !important;
}

/* Cluster markers */
.marker-cluster div {
    width: 36px;
    height: 36px;
    margin-left: 4px;
    margin-top: 4px;
    text-align: center;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 700;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.marker-cluster-small {
    background-color: rgba(40, 53, 147, 0.6);
}

.marker-cluster-small div {
    background-color: var(--primary);
}

.marker-cluster-medium {
    background-color: rgba(255, 111, 0, 0.6);
}

.marker-cluster-medium div {
    background-color: var(--secondary);
}

.marker-cluster-large {
    background-color: rgba(230, 81, 0, 0.6);
}

.marker-cluster-large div {
    background-color: var(--secondary-dark);
}

/* ============================================================================
   MODAL DE DETALHES DA ESTAÇÃO (9.0 - Horizontal)
   ============================================================================ */
.station-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--transition-normal), visibility var(--transition-normal);
}

.station-modal.visible {
    display: flex;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.station-modal-content {
    background: var(--surface);
    border-radius: var(--border-radius-lg);
    max-width: 980px;
    width: min(96vw, 980px);
    max-height: min(92vh, 860px);
    overflow: hidden;
    box-shadow: var(--shadow-4);
    display: flex;
    flex-direction: column;
    animation: modalSlideIn 0.3s ease-out;
}

.station-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 18px 24px;
    background: linear-gradient(135deg, var(--gray-800) 0%, var(--gray-600) 100%);
    color: #ffffff;
}

body.dark-mode .station-modal-header {
    background: linear-gradient(135deg, #2d2d2d 0%, #424242 100%);
}

.station-modal-title {
    flex: 1;
}

.station-modal-title h2 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 4px;
}

.station-modal-title .codigo {
    font-size: 0.8125rem;
    opacity: 0.9;
    font-family: var(--font-mono);
}

.station-modal-fonte {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}

.station-modal-fonte img {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    background: var(--surface);
    object-fit: contain;
    padding: 2px;
}

.station-modal-fonte span {
    font-size: 0.8125rem;
    opacity: 0.9;
}

.station-modal-close {
    width: 36px;
    height: 36px;
    border: none;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    color: #ffffff;
    font-size: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color var(--transition-fast);
    flex-shrink: 0;
}

.station-modal-close:hover {
    background: rgba(255, 255, 255, 0.3);
}

.station-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px 24px;
    position: relative;
}

/* Layout horizontal do modal (9.0) */
.station-modal-grid {
    display: grid;
    grid-template-columns: minmax(340px, 0.95fr) minmax(420px, 1.05fr);
    align-items: start;
    gap: 16px 20px;
}

#shapeSummaryModal .station-modal-grid {
    grid-template-columns: 1fr;
}

.radar-summary-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) 280px;
    gap: 20px;
    align-items: stretch;
}

.radar-summary-info-list {
    grid-column: 1;
    grid-row: 1 / span 2;
    margin: 0;
    display: block !important;
    /* Override station-info-list display grid constraint */
}

.radar-summary-main {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-direction: column;
}

.radar-summary-main .station-value-highlight {
    background: var(--gray-50);
    border-radius: var(--border-radius);
    padding: 24px;
    text-align: center;
    border: 1px solid color-mix(in srgb, var(--gray-300) 30%, transparent);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.radar-summary-main .station-value-highlight:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.radar-summary-main .station-value-number {
    font-size: 3.5rem;
    font-weight: 800;
    color: var(--gray-800);
    background: linear-gradient(135deg, var(--gray-800) 0%, var(--gray-500) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    line-height: 1;
}

.radar-summary-main .station-value-unit {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-secondary);
    margin-left: 2px;
}

.radar-summary-main .station-value-label {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-secondary);
    font-weight: 700;
    margin-top: 8px;
}

.radar-summary-side {
    grid-column: 2;
    grid-row: 2;
    background: var(--gray-50);
    border-radius: var(--border-radius);
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 180px;
    border: 1px solid color-mix(in srgb, var(--gray-300) 30%, transparent);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.radar-summary-side:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.radar-summary-logo {
    max-width: 100%;
    max-height: 160px;
    object-fit: contain;
    border-radius: 8px;
}

.station-modal-main {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.station-value-card {
    text-align: center;
    padding: 18px 20px;
    background: var(--gray-50);
    border-radius: var(--border-radius);
}

.station-value-number {
    font-size: 3rem;
    font-weight: 700;
    color: var(--primary-dark);
    line-height: 1;
}

body.dark-mode .station-value-number {
    color: var(--primary);
}

.station-value-unit {
    font-size: 1.25rem;
    color: var(--text-secondary);
    margin-left: 4px;
}

.station-value-label {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-top: 6px;
}

.station-info-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.shape-summary-period {
    margin-top: 6px;
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.radar-summary-timestamp.station-value-unit {
    display: block;
    margin-top: 10px;
    margin-left: 0;
    font-size: 0.95rem;
    font-weight: 600;
}

.shape-meta-section {
    background: var(--gray-50);
    border-radius: var(--border-radius);
    padding: 20px;
    margin-bottom: 10px;
    border: 1px solid color-mix(in srgb, var(--gray-300) 30%, transparent);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.shape-meta-section-title {
    margin: 0 0 16px 0;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-secondary);
    font-weight: 700;
}

.shape-meta-grid,
.shape-meta-list {
    display: grid;
    gap: 10px;
}

.shape-meta-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.radar-summary-meta-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.shape-meta-list--scroll {
    max-height: 220px;
    overflow-y: auto;
    padding-right: 4px;
}

.shape-meta-row {
    background: color-mix(in srgb, var(--surface) 85%, var(--gray-100));
    border: 1px solid color-mix(in srgb, var(--gray-300) 50%, transparent);
    border-radius: 10px;
    padding: 10px 12px;
}

.radar-summary-meta-list .shape-meta-row {
    display: block;
}

.shape-meta-label {
    display: block;
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.45px;
    color: var(--text-secondary);
    margin-bottom: 2px;
}

.shape-meta-value {
    font-size: 0.875rem;
    color: var(--text);
    font-weight: 600;
    line-height: 1.35;
    word-break: break-word;
}

#radarSummaryModal .station-modal-content {
    max-width: 980px;
    width: min(92vw, 980px);
}

body.dark-mode .shape-meta-section {
    background: rgba(255, 255, 255, 0.06);
}

body.dark-mode .shape-meta-row {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.12);
}

.station-media-section[hidden] {
    display: none !important;
}

.station-media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 12px;
}

.station-media-section.station-modal-other-full {
    margin-top: 12px;
}

.station-media-card {
    background: var(--gray-50);
    border-radius: var(--border-radius);
    padding: 8px 9px;
}

.station-media-title {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--text-secondary);
    margin-bottom: 3px;
    font-weight: 600;
}

.station-camera-image,
.station-camera-video {
    width: 100%;
    border-radius: 8px;
    background: #000;
    display: block;
}

.station-camera-video {
    border: 0;
}

.station-camera-video[hidden] {
    display: none !important;
}

.station-camera-image {
    max-height: 220px;
    object-fit: cover;
    cursor: zoom-in;
}

.station-camera-video {
    height: 220px;
    max-height: 220px;
    object-fit: cover;
}

.station-camera-meta {
    margin-top: 8px;
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.station-camera-preset-controls[hidden] {
    display: none !important;
}

.station-camera-preset-controls {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed color-mix(in srgb, var(--text-secondary) 30%, transparent);
}

.station-camera-preset-title {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--text-secondary);
    margin-bottom: 4px;
    font-weight: 600;
}

.station-camera-preset-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.station-camera-preset-select {
    flex: 1;
    min-width: 180px;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    padding: 8px 10px;
    background: var(--surface);
    color: var(--text);
    font-size: 0.85rem;
}

.station-camera-preset-btn {
    border: 0;
    border-radius: 8px;
    padding: 8px 12px;
    background: var(--primary);
    color: #fff;
    font-weight: 600;
    font-size: 0.72rem;
    cursor: pointer;
}

.station-camera-preset-btn:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

.station-camera-preset-feedback {
    margin-top: 6px;
    font-size: 0.79rem;
    color: var(--text-secondary);
}

.station-camera-link {
    display: inline-flex;
    margin-top: 8px;
    font-size: 0.8125rem;
    color: var(--primary);
    text-decoration: none;
    font-weight: 600;
}

.station-camera-link:hover {
    text-decoration: underline;
}

.station-info-item {
    min-width: 0;
    padding: 10px 12px;
    background: var(--gray-50);
    border-radius: var(--border-radius);
}

.station-info-label {
    font-size: 0.62rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 3px;
}

.station-info-value {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text);
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.station-modal-chart {
    display: flex;
    flex-direction: column;
}

.camera-lightbox[hidden] {
    display: none !important;
}

.camera-lightbox {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.camera-lightbox-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(23, 23, 23, 0.7);
    backdrop-filter: blur(2px);
}

.camera-lightbox-content {
    position: relative;
    z-index: 1;
    width: min(960px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    overflow: auto;
    background: var(--surface);
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(23, 23, 23, 0.35);
    padding: 16px;
}

.camera-lightbox-close {
    position: absolute;
    top: 8px;
    right: 10px;
    border: 0;
    background: transparent;
    color: var(--text-secondary);
    font-size: 1.8rem;
    line-height: 1;
    cursor: pointer;
}

.camera-lightbox-title {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--text-secondary);
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.camera-lightbox-image {
    width: 100%;
    max-height: 72vh;
    object-fit: contain;
    border-radius: 10px;
    background: #000;
    display: block;
}

.camera-lightbox-meta {
    margin-top: 10px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
    color: var(--text);
    font-size: 0.875rem;
}

.station-modal-other-full {
    grid-column: 1 / -1;
}

.station-modal-grid.layout-image-without-video #modalOtherData {
    grid-column: 1;
    grid-row: 2;
}

.station-modal-grid.layout-image-without-video #modalMediaSection {
    grid-column: 2;
    grid-row: 2;
    margin-top: 0;
}

.station-modal-grid.layout-image-no-video #modalMediaSection {
    margin-top: 0;
}

.station-modal-grid.layout-image-no-video #modalMediaSection .station-media-grid {
    grid-template-columns: 1fr;
}

/* Quando não há player de vídeo: outros dados ficam à esquerda da imagem, e imagem abaixo do gráfico */
.station-modal-grid.layout-image-without-video #modalMediaSection .station-media-card {
    min-height: 100%;
}

@media (max-width: 900px) {

    .station-modal-grid.layout-image-without-video #modalOtherData,
    .station-modal-grid.layout-image-without-video #modalMediaSection {
        grid-column: 1 / -1;
        grid-row: auto;
    }
}

/* 9.0: Container com altura fixa e overflow hidden para evitar crescimento do gráfico */
.station-chart-container {
    flex: 1;
    padding: 14px 16px 12px;
    background: var(--gray-50);
    border-radius: var(--border-radius);
    min-height: 310px;
    max-height: 310px;
    height: 310px;
    position: relative;
    overflow: hidden;
}

.station-chart-container canvas {
    max-width: 100% !important;
    max-height: 276px !important;
}

.station-chart-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 3px;
}

.station-forecast-badge {
    display: inline-flex;
    align-items: center;
    max-width: 72%;
    min-height: 24px;
    padding: 3px 8px;
    border: 1px solid color-mix(in srgb, var(--secondary) 45%, var(--gray-300));
    border-radius: var(--border-radius);
    color: var(--secondary-dark);
    background: color-mix(in srgb, var(--secondary) 10%, var(--surface));
    font-size: 0.62rem;
    font-weight: 600;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.station-modal-loading {
    position: absolute;
    inset: 24px;
    border-radius: var(--border-radius);
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--text-secondary);
    font-size: 0.875rem;
    z-index: 2;
}

.station-modal-loading[hidden] {
    display: none !important;
}

.station-modal-loading-spinner {
    width: 26px;
    height: 26px;
    border: 3px solid var(--gray-300);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 0.75s linear infinite;
}

.chart-loading-placeholder {
    position: absolute;
    inset: 40px 16px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--text-secondary);
    font-size: 0.8125rem;
    border-radius: var(--border-radius);
    background: color-mix(in srgb, var(--gray-50) 90%, transparent);
}

.chart-loading-placeholder[hidden] {
    display: none !important;
}

.station-other-data {
    margin-top: 16px;
}

#modalOtherData {
    align-self: stretch;
    background: var(--gray-50);
    border-radius: var(--border-radius);
    padding: 12px 14px;
}

.station-other-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 3px;
}

.station-data-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
}

.station-data-chip {
    display: flex;
    align-items: baseline;
    gap: 3px;
    flex: 0 1 auto;
    max-width: 100%;
    padding: 6px 10px;
    background: var(--gray-100);
    border-radius: var(--border-radius);
    font-size: 0.8125rem;
    line-height: 1.25;
}

.station-data-chip.forecast-chip {
    border: 1px dashed color-mix(in srgb, var(--secondary) 55%, var(--gray-300));
    background: color-mix(in srgb, var(--secondary) 9%, var(--surface));
}

.station-data-chip-source {
    color: var(--secondary-dark);
    font-weight: 600;
}

.station-data-chip-value {
    font-weight: 600;
    color: var(--primary-dark);
}

body.dark-mode .station-data-chip-value {
    color: var(--primary);
}

.station-data-chip-unit {
    color: var(--text-secondary);
    font-size: 0.75rem;
}

.station-other-meta-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    justify-content: start;
    gap: 8px;
    margin-bottom: 10px;
}

.station-info-item--compact {
    width: fit-content;
    min-width: 92px;
    padding: 8px 10px;
}

.station-modal-footer {
    padding: 14px 24px 18px;
    background: var(--gray-50);
    border-top: 1px solid var(--gray-200);
}

.station-modal-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px 20px;
    background: var(--secondary);
    color: #ffffff;
    border: none;
    border-radius: var(--border-radius);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background-color var(--transition-fast);
}


.station-modal-btn:hover {
    background: var(--secondary-dark);
    text-decoration: none;
}

.station-modal-btn svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

/* ============================================================================
   TIMELINE (9.0 - Invertida, presente à direita)
   ============================================================================ */
/* 9.0: Timeline com suporte a safe-area para Android */
.timeline-container {
    box-sizing: border-box;
    position: fixed;
    bottom: 0;
    bottom: env(safe-area-inset-bottom);
    left: 0;
    right: 0;
    height: var(--timeline-height);
    background: var(--surface);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    padding-bottom: calc(20px + env(safe-area-inset-bottom));
    z-index: 800;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 20px;
    transition: background-color var(--transition-normal);
}

.timeline-body {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    order: 2;
    min-width: 0;
    width: 100%;
    position: relative;
}

.timeline-container > .live-indicator {
    display: inline-flex;
}

.timeline-container > .live-indicator.is-live {
    visibility: visible;
    opacity: 1;
}

.timeline-collapse-btn {
    position: static;
    order: 0;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border: 1px solid rgba(148, 163, 184, 0.55);
    border-radius: 999px;
    background: rgba(241, 245, 249, 0.96);
    color: #141414;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    line-height: 1;
    font-size: 1rem;
    font-weight: 700;
    z-index: 960;
    opacity: 1;
    box-shadow: 0 2px 10px rgba(23, 23, 23, 0.22);
    transition: transform 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

.timeline-collapse-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(23, 23, 23, 0.25);
}

.timeline-collapse-btn:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.timeline-container.is-collapsed {
    height: 0;
    padding: 0;
    overflow: visible;
    background: transparent;
    border-top-color: transparent;
    box-shadow: none;
    pointer-events: none;
}

.timeline-container.is-collapsed .timeline-body {
    opacity: 1;
    pointer-events: none;
}

.timeline-container.is-collapsed .timeline-slider-container,
.timeline-container.is-collapsed .timeline-current,
.timeline-container.is-collapsed .timeline-controls .timeline-btn {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.timeline-container.is-collapsed .timeline-collapse-btn {
    position: fixed;
    top: auto;
    right: auto;
    left: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    width: 40px;
    height: 40px;
    font-size: 1.25rem;
    pointer-events: auto;
    opacity: 1;
    visibility: visible;
    z-index: 1200;
    border-color: rgba(100, 116, 139, 0.45);
    background: rgba(241, 245, 249, 0.98);
    box-shadow: 0 8px 24px rgba(2, 6, 23, 0.3);
}

.timeline-container.is-loading {
    opacity: 0.8;
}

.timeline-container.is-loading .timeline-btn,
.timeline-container.is-loading .timeline-slider {
    pointer-events: none;
    cursor: wait;
}

.timeline-controls {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.timeline-btn {
    width: 36px;
    height: 36px;
    border: none;
    background: var(--gray-100);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color var(--transition-fast), transform var(--transition-fast);
    color: var(--text);
}

.timeline-btn:hover {
    background: var(--gray-200);
}

.timeline-btn:active {
    transform: scale(0.95);
}

.timeline-btn svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

.timeline-btn.active {
    background: var(--primary);
    color: #ffffff;
}

.timeline-slider-container {
    flex: 1;
    margin: 0 16px;
    position: relative;
}

/* 9.0: Timeline invertida - esquerda é passado, direita é presente */
.timeline-slider {
    width: 100%;
    height: 6px;
    border-radius: 3px;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    background: var(--gray-300);
}

/* Barra preenchida à esquerda do thumb */
.timeline-slider::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 3px;
    background: linear-gradient(to right, var(--primary) 0%, var(--primary) var(--timeline-progress, 100%), var(--gray-300) var(--timeline-progress, 100%));
}

.timeline-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    background: var(--surface);
    border: 3px solid var(--primary);
    border-radius: 50%;
    cursor: grab;
    box-shadow: var(--shadow-1);
    margin-top: -6px;
}

.timeline-slider::-webkit-slider-thumb:active {
    cursor: grabbing;
}

.timeline-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    background: var(--surface);
    border: 3px solid var(--primary);
    border-radius: 50%;
    cursor: grab;
    box-shadow: var(--shadow-1);
}

.timeline-slider::-moz-range-progress {
    background: var(--primary);
    height: 6px;
    border-radius: 3px;
}

.timeline-ticks {
    position: relative;
    min-height: 18px;
    margin-top: 6px;
    padding: 0 9px;
}

.timeline-tick {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    font-size: 0.625rem;
    color: var(--text-secondary);
    text-align: center;
    white-space: nowrap;
}

.timeline-tick-date {
    color: var(--primary);
    font-weight: 700;
}

.timeline-tick-hour {
    top: 2px;
    font-size: 0.58rem;
    opacity: 0.78;
}

.timeline-tick:first-child {
    transform: translateX(0);
}

.timeline-current {
    text-align: center;
    flex-shrink: 0;
    min-width: 100px;
}

.timeline-current-date {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.timeline-current-time {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--primary-dark);
}

body.dark-mode .timeline-current-time {
    color: #7dd3fc;
}

body.dark-mode .timeline-current-date {
    color: #cccccc;
}

.chart-color-notice {
    position: fixed;
    left: 50%;
    bottom: calc(var(--timeline-actual-height, var(--timeline-height)) + 6px);
    transform: translateX(-50%);
    z-index: 850;
    max-width: min(92vw, 720px);
    margin: 0;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(248, 250, 252, 0.78);
    color: #6f6f6f;
    font-size: 0.6rem;
    line-height: 1.2;
    text-align: center;
    pointer-events: none;
    box-shadow: 0 2px 8px rgba(23, 23, 23, 0.08);
}

body.dark-mode .chart-color-notice {
    background: rgba(2, 6, 23, 0.82);
    color: #cccccc;
    box-shadow: 0 4px 14px rgba(2, 6, 23, 0.42);
}

body.timeline-collapsed .chart-color-notice {
    bottom: calc(10px + env(safe-area-inset-bottom));
}

/* ============================================================================
   LEGENDA DE CORES
   ============================================================================ */
.color-legend {
    position: fixed;
    box-sizing: border-box;
    --legend-shelf-tab-min-width: 0px;
    --legend-shelf-tab-horizontal-extra: 0px;
    bottom: calc(var(--timeline-actual-height, var(--timeline-height)) + 12px);
    right: calc(var(--radar-legend-floating-right) + var(--radar-legend-floating-width) + var(--legend-gap));
    background: color-mix(in srgb, var(--surface) 94%, transparent);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-2);
    padding: 8px 9px;
    z-index: 900;
    width: max-content;
    min-width: calc(var(--legend-shelf-tab-min-width) + var(--legend-shelf-tab-horizontal-extra));
    max-width: min(216px, calc(100vw - 20px));
    max-height: calc(100dvh - var(--header-height) - var(--timeline-actual-height, var(--timeline-height)) - 24px);
    overflow-y: auto;
    overflow-wrap: normal;
    overscroll-behavior: contain;
    backdrop-filter: blur(10px);
    transition: background-color var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal);
}

.mobile-legend-shelf-toggle {
    display: none;
}

.mobile-legend-shelf-item {
    --legend-shelf-tab-height: 30px;
    --legend-shelf-tab-min-width: 110px;
    --legend-shelf-tab-horizontal-extra: 26px;
    overflow: visible;
    transition: transform var(--transition-normal), opacity var(--transition-fast), visibility var(--transition-fast);
    will-change: transform;
}

.mobile-legend-shelf-item::before {
    content: attr(data-mobile-title);
    position: absolute;
    top: calc(-1 * var(--legend-shelf-tab-height));
    right: 0;
    z-index: 2;
    min-width: var(--legend-shelf-tab-min-width);
    height: var(--legend-shelf-tab-height);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    border: 1px solid var(--border-color);
    border-bottom: 0;
    border-radius: 10px 10px 0 0;
    background: color-mix(in srgb, var(--surface) 94%, transparent);
    color: var(--text);
    box-shadow: var(--shadow-1);
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
    text-transform: uppercase;
    backdrop-filter: blur(12px);
}

.mobile-legend-shelf-item:not(.is-mobile-shelf-open) {
    transform: translateY(calc(100% + 8px)) !important;
}

.mobile-legend-shelf-item.is-mobile-shelf-open {
    transform: translate(0, 0) !important;
}

.legend-toggle-btn {
    display: none !important;
}

/* GLM age-color legend — stacks above the main color legend */
.glm-age-legend {
    bottom: calc(var(--timeline-actual-height, var(--timeline-height)) + 12px + 132px);
    min-width: 118px;
}

.glm-age-gradient {
    height: 86px;
    background: linear-gradient(to bottom,
            #ff2200 0%,
            #ff8800 8%,
            #ffdd00 17%,
            #00ddff 33%,
            #0044ff 50%,
            #1a006e 67%,
            #6b5b8c 83%,
            #c0bec8 100%);
}

.glm-age-labels {
    height: 86px;
}

.color-legend-title {
    min-width: max-content;
    font-size: 0.62rem;
    font-weight: 600;
    color: var(--text);
    text-transform: uppercase;
    margin-bottom: 3px;
    text-align: center;
    line-height: 1.25;
    white-space: nowrap;
    overflow-wrap: normal;
}

.legend-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.legend-toggle-btn {
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-secondary);
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-size: 0.85rem;
    cursor: pointer;
    transition: border-color var(--transition-fast), color var(--transition-fast), background-color var(--transition-fast);
}

.legend-toggle-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--state-hover);
}

.legend-toggle-btn:active {
    background: var(--state-pressed);
}

.color-legend.is-collapsed,
.radar-legend.is-collapsed {
    padding: 5px 7px;
}

.color-legend.is-collapsed .legend-body,
.radar-legend.is-collapsed .legend-body {
    display: none;
}

.color-legend.is-collapsed .color-legend-title,
.radar-legend.is-collapsed .radar-legend-title {
    margin-bottom: 0;
}

.color-legend-gradient {
    height: 100px;
    width: 16px;
    border-radius: 4px;
    margin: 0 auto;
}

.color-legend-labels {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100px;
    margin-left: 8px;
    font-size: 0.62rem;
    color: var(--text-secondary);
}

.color-legend-content {
    display: flex;
    justify-content: center;
}

.cota-display-control {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border-color);
}

.cota-trend-legend {
    margin-top: 7px;
    padding-top: 6px;
    border-top: 1px solid var(--border-color);
    font-size: 0.6rem;
    color: var(--text-secondary);
}

.cota-trend-legend-title {
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.cota-trend-legend ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 3px;
}

.cota-trend-legend li {
    display: flex;
    align-items: center;
    gap: 6px;
}

.cota-trend-legend li span {
    font-weight: 700;
    width: 12px;
    text-align: center;
}

/* ============================================================================
   RESPONSIVIDADE MOBILE (9.0 - Melhorada)
   ============================================================================ */
@media (max-width: 900px) {

    /* Modal em layout vertical no tablet */
    .station-modal-grid {
        grid-template-columns: 1fr;
    }

    .radar-summary-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .radar-summary-info-list {
        grid-column: 1;
        grid-row: 3;
    }

    .radar-summary-main {
        grid-column: 1;
        grid-row: 1;
    }

    .radar-summary-side {
        grid-column: 1;
        grid-row: 2;
        min-height: 140px;
    }

    .radar-summary-meta-list .shape-meta-row {
        display: block;
    }

    .radar-summary-meta-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    :root {
        --header-height: 44px;
        --sidebar-width: 100%;
        --timeline-height: 72px;
        --mobile-legend-bottom-offset: 70px;
        --radar-legend-floating-right: 6px;
        --radar-legend-floating-width: min(82vw, 276px);
        --touch-target: 34px;
    }

    .header {
        padding: 0 6px;
        gap: 6px;
    }

    .header-left,
    .logo-container,
    .header-right,
    .user-session {
        gap: 6px;
    }

    .menu-toggle {
        width: 34px;
        height: 34px;
    }

    .menu-toggle svg {
        width: 19px;
        height: 19px;
    }

    .logo {
        height: 29px;
    }

    .logo-text {
        font-size: 0.9rem;
        line-height: 1;
    }

    .logo-subtitle {
        display: none;
    }

    .radar-summary-meta-list {
        grid-template-columns: 1fr;
    }

    .datetime-display {
        padding: 2px 5px;
        border-radius: 6px;
    }

    .datetime-display .date {
        font-size: 0.5rem;
    }

    .datetime-display .time {
        font-size: 0.7rem;
    }

    .sidebar {
        width: 100%;
        max-width: 100%;
    }

    /* 9.0: Seção sobre ocupa mais espaço no mobile */
    .sobre-apoio {
        display: block !important;
    }

    /* Timeline mobile */
    .timeline-container {
        flex-wrap: wrap;
        align-content: center;
        height: auto;
        min-height: var(--timeline-height);
        padding: 4px 7px calc(5px + env(safe-area-inset-bottom));
        gap: 3px 5px;
    }

    .timeline-body {
        flex-wrap: wrap;
        flex: 1 1 180px;
        gap: 3px 5px;
    }

    .timeline-container > .live-indicator {
        min-height: 23px;
        padding: 3px 6px;
        font-size: 0.48rem;
    }

    .timeline-controls {
        order: 1;
        flex: 0 1 auto;
        min-width: 0;
    }

    .timeline-slider-container {
        order: 3;
        flex: 0 0 100%;
        margin: 0;
    }

    .timeline-current {
        order: 2;
        flex: 1;
        text-align: right;
        min-width: 72px;
    }

    .timeline-collapse-btn {
        flex-basis: 26px;
        width: 26px;
        height: 26px;
        font-size: 0.8rem;
    }

    .timeline-current-date {
        font-size: 0.56rem;
        line-height: 1.05;
    }

    .timeline-current-time {
        font-size: 0.8rem;
        line-height: 1.05;
    }

    .timeline-btn {
        width: 26px;
        height: 26px;
    }

    .timeline-btn svg {
        width: 13px;
        height: 13px;
    }

    .timeline-slider {
        height: 4px;
    }

    .timeline-slider::-webkit-slider-runnable-track {
        height: 4px;
    }

    .timeline-slider::-webkit-slider-thumb {
        width: 13px;
        height: 13px;
        border-width: 2px;
        margin-top: -5px;
    }

    .timeline-slider::-moz-range-thumb {
        width: 13px;
        height: 13px;
        border-width: 2px;
    }

    .timeline-slider::-moz-range-progress {
        height: 4px;
    }

    .timeline-ticks {
        display: block;
        min-height: 14px;
        margin-top: 4px;
        padding: 0 7px;
    }

    .timeline-tick {
        font-size: 0.5rem;
        line-height: 1;
    }

    .timeline-tick-hour {
        top: 1px;
        font-size: 0.48rem;
    }

    .timeline-tick-date {
        font-size: 0.52rem;
    }

    .map-container {
        bottom: var(--timeline-actual-height, 80px);
    }

    .map-tools {
        top: 5px;
        right: 5px;
        gap: 4px;
    }

    .map-tools-actions {
        gap: 4px;
    }

    .map-tools-panel {
        min-width: 190px;
        max-width: 210px;
        padding: 8px;
        gap: 8px;
    }

    .map-tool-btn {
        width: 34px;
        height: 34px;
        font-size: 0.82rem;
    }

    .leaflet-touch .leaflet-bar a {
        width: 28px;
        height: 28px;
        line-height: 28px;
    }

    .leaflet-touch .leaflet-control-zoom-in,
    .leaflet-touch .leaflet-control-zoom-out {
        font-size: 18px;
    }

    .map-color-palette {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .mobile-legend-shelf-toggle {
        display: none;
    }

    /* 9.0: Legenda mobile mais compacta e melhor posicionada acima da timeline */
    .color-legend {
        bottom: calc(var(--mobile-legend-bottom-offset) + env(safe-area-inset-bottom));
        right: calc(var(--radar-legend-floating-right) + var(--radar-legend-floating-width) + var(--legend-gap));
        padding: 5px 7px;
        min-width: calc(var(--legend-shelf-tab-min-width) + var(--legend-shelf-tab-horizontal-extra));
    }

    .radar-status-label-inner {
        width: 240px;
        max-width: 240px;
        padding: 10px 12px;
        border-radius: 14px;
    }

    .radar-status-label-title {
        font-size: 0.84rem;
    }

    .radar-status-label-subtitle {
        font-size: 0.68rem;
    }

    .radar-status-label-text {
        font-size: 0.64rem;
    }

    .radar-legend-floating {
        bottom: calc(var(--mobile-legend-bottom-offset) + env(safe-area-inset-bottom));
        right: var(--radar-legend-floating-right);
        width: var(--radar-legend-floating-width);
        max-width: var(--radar-legend-floating-width);
        padding: 6px 7px;
    }

    #radarOperationalLegend {
        bottom: calc(var(--mobile-legend-bottom-offset) + env(safe-area-inset-bottom));
        right: calc(var(--radar-legend-floating-right) + var(--radar-legend-floating-width) + var(--legend-gap));
    }

    .radar-legend-title {
        font-size: 0.62rem;
    }

    .radar-legend-subtitle {
        font-size: 0.5rem;
        margin: 3px 0 4px;
    }

    .radar-legend-table {
        font-size: 0.36rem;
    }

    .radar-legend-gradient td {
        height: 6px;
    }

    .radar-legend-footer {
        margin-top: 3px;
        font-size: 0.5rem;
    }


    #radarOperationalLegend th,
    #radarOperationalLegend td {
        font-size: 0.58rem;
        padding: 2px 3px;
    }

    .radar-operational-logo {
        width: 12px;
        height: 12px;
        flex-basis: 12px;
    }

    .color-legend-title {
        font-size: 0.54rem;
        margin-bottom: 3px;
    }

    .color-legend-gradient {
        height: 64px;
        width: 10px;
    }

    .color-legend-labels {
        height: 64px;
        font-size: 0.52rem;
        margin-left: 4px;
    }


    /* Radar mobile: tabelas precisam de largura, escalas simples ficam estreitas. */
    .radar-legend-floating,
    #radarOperationalLegend {
        left: 50%;
        right: auto;
        width: min(82vw, 276px);
        max-width: min(82vw, 276px);
        transform: translateX(-50%);
    }

    .radar-legend-floating {
        bottom: calc(var(--mobile-legend-bottom-offset) + env(safe-area-inset-bottom));
        padding: 6px 7px;
        max-height: min(30dvh, 220px);
    }

    .mobile-legend-shelf-item {
        --mobile-legend-tab-width: 38px;
        --mobile-legend-tab-radius: 8px;
        --mobile-legend-tab-gutter: 8px;
        --mobile-legend-tab-seam: 1px;
        --mobile-legend-tab-join-width: 3px;
        --mobile-legend-tab-min-height: 56px;
        --mobile-legend-tab-max-height: 96px;
        --mobile-legend-closed-height: 74px;
        --mobile-legend-closed-peek: 1px;
        --mobile-legend-tab-surface: color-mix(in srgb, var(--surface) 98%, transparent);
        transition: transform var(--transition-normal), opacity var(--transition-fast), visibility var(--transition-fast);
        overflow: visible !important;
        touch-action: pan-y;
        will-change: transform;
    }

    .mobile-legend-shelf-item::before,
    .mobile-legend-shelf-item::after {
        pointer-events: none;
    }

    .mobile-legend-shelf-item::before {
        content: attr(data-mobile-title);
        position: absolute;
        top: 0;
        bottom: 0;
        left: calc(-1 * var(--mobile-legend-tab-width) + var(--mobile-legend-tab-seam));
        z-index: 2;
        box-sizing: border-box;
        width: var(--mobile-legend-tab-width);
        min-width: 0;
        max-width: var(--mobile-legend-tab-width);
        height: 100%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 8px 0;
        border: 1px solid var(--border-color);
        border-right: 0 !important;
        border-radius: var(--mobile-legend-tab-radius) 0 0 var(--mobile-legend-tab-radius) !important;
        background: var(--mobile-legend-tab-surface);
        color: var(--text);
        box-shadow: -6px 8px 18px rgba(2, 6, 23, 0.24);
        font-size: 0.6rem;
        font-weight: 800;
        line-height: 1.05;
        letter-spacing: 0;
        text-transform: uppercase;
        writing-mode: vertical-rl;
        transform: none;
        backdrop-filter: blur(12px);
        overflow: hidden;
        text-align: center;
        text-overflow: ellipsis;
        text-shadow: 0 1px 2px rgba(2, 6, 23, 0.58);
    }

    .mobile-legend-shelf-item::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: calc(-1 * var(--mobile-legend-tab-join-width));
        z-index: 3;
        width: calc(var(--mobile-legend-tab-join-width) + 2px);
        height: 100%;
        box-sizing: border-box;
        border-top: 1px solid var(--border-color);
        border-bottom: 1px solid var(--border-color);
        background: var(--mobile-legend-tab-surface);
        transform: none;
    }

    .mobile-legend-shelf-item:not(.is-mobile-shelf-open) {
        right: 0 !important;
        opacity: 1;
        pointer-events: auto;
        visibility: visible;
        height: var(--mobile-legend-closed-height);
        min-height: var(--mobile-legend-closed-height);
        border-right: 0 !important;
        border-radius: var(--mobile-legend-tab-radius) 0 0 var(--mobile-legend-tab-radius) !important;
        transform: translateX(calc(100% - var(--mobile-legend-closed-peek))) !important;
    }

    .mobile-legend-shelf-item.is-mobile-shelf-open {
        opacity: 1;
        pointer-events: auto;
        visibility: visible;
        transform: translateX(0) !important;
    }

    .mobile-legend-shelf-item:not(.is-mobile-shelf-open) .legend-header,
    .mobile-legend-shelf-item:not(.is-mobile-shelf-open) .legend-body {
        pointer-events: none;
        visibility: hidden;
    }

    .radar-legend-floating.is-mobile-shelf-open {
        max-height: min(34dvh, 240px) !important;
    }

    .radar-legend-floating.is-mobile-shelf-open,
    .color-legend.is-mobile-shelf-open {
        margin-bottom: 8px;
    }

    #radarOperationalLegend {
        bottom: calc(var(--mobile-legend-bottom-offset) + 82px + env(safe-area-inset-bottom));
    }

    .color-legend {
        display: block;
        left: auto;
        right: var(--radar-legend-floating-right);
        bottom: calc(var(--mobile-legend-bottom-offset) + 126px + env(safe-area-inset-bottom));
        width: max-content;
        min-width: calc(var(--legend-shelf-tab-min-width) + var(--legend-shelf-tab-horizontal-extra));
        max-width: min(216px, calc(100vw - 20px));
        padding: 5px 7px 7px;
        transform: none;
        max-height: none;
        overflow: visible;
    }

    .glm-age-legend {
        bottom: calc(var(--mobile-legend-bottom-offset) + 126px + env(safe-area-inset-bottom) + 82px);
        width: max-content;
        max-width: min(216px, calc(100vw - 20px));
    }

    .color-legend .legend-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 5px;
        min-height: 24px;
        margin-bottom: 4px;
    }

    .color-legend .legend-body {
        width: 100%;
    }

    .color-legend .color-legend-title {
        max-width: none;
        margin: 0;
        font-size: 0.5rem;
        line-height: 1.1;
        text-align: left;
        white-space: nowrap;
        writing-mode: horizontal-tb;
        transform: none;
    }

    .color-legend .color-legend-content {
        justify-content: center;
        gap: 4px;
    }

    .color-legend .color-legend-labels {
        white-space: nowrap;
        overflow-wrap: normal;
    }

    .glm-age-legend .color-legend-gradient,
    .glm-age-legend .color-legend-labels {
        height: 82px;
    }

    .color-legend .legend-toggle-btn {
        width: 24px;
        height: 24px;
        flex-basis: 24px;
        font-size: 0.68rem;
    }

    body.dark-mode .mobile-legend-shelf-item::before {
        border-color: var(--gray-700);
        color: #e2e8f0;
    }

    body.dark-mode .mobile-legend-shelf-item {
        --mobile-legend-tab-surface: color-mix(in srgb, var(--surface) 96%, transparent);
    }

    @media (prefers-reduced-motion: reduce) {
        .mobile-legend-shelf-item {
            transition: none;
        }
    }


    .radar-legend-table {
        font-size: 0.5rem;
    }

    #radarOperationalLegend th,
    #radarOperationalLegend td {
        font-size: 0.62rem;
        padding: 4px;
    }

    /* Modal mobile */
    .station-modal-content {
        max-height: 95vh;
        width: 100%;
        border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
        margin-top: auto;
    }

    .station-modal-header {
        padding: 16px;
    }

    .station-modal-body {
        padding: 16px;
    }

    .station-modal-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .station-value-number {
        font-size: 2.5rem;
    }

    .station-info-list {
        grid-template-columns: 1fr;
    }

    .shape-meta-grid {
        grid-template-columns: 1fr;
    }
}

.meteo-sidebar-close {
    position: absolute;
    top: 14px;
    right: 16px;
    width: 32px;
    height: 32px;
    border: 1px solid #cccccc;
    border-radius: 999px;
    background: var(--surface);
    color: #434343;
    cursor: pointer;
    line-height: 1;
    font-size: 1.2rem;
}

#meteoSidebar .sidebar-header {
    position: relative;
    padding-right: 56px;
}

#meteoSidebar .bbox-grid .control-label {
    margin-bottom: 0;
}

.bbox-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.55rem;
}

.bbox-helper-text {
    margin: 0.45rem 0 0;
    font-size: 0.78rem;
    line-height: 1.35;
    color: #6f6f6f;
}

.sidebar-placeholder-text {
    margin: 0;
    font-size: 0.84rem;
    line-height: 1.45;
    color: #4c4c4c;
    background: #fafafa;
    border: 1px solid #e5e5e5;
    border-radius: 10px;
    padding: 0.7rem 0.75rem;
}

.bbox-grid input[readonly] {
    cursor: not-allowed;
    opacity: 0.82;
    background: #fafafa;
}

.meteo-actions {
    display: grid;
    gap: 0.5rem;
    margin-top: 0.6rem;
}

.meteo-actions .welcome-btn,
.meteo-actions .timeline-btn,
.timeline-controls .timeline-btn {
    transition: opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.meteo-actions .timeline-btn {
    width: 100%;
    height: auto;
    min-height: 42px;
    border-radius: 10px;
    padding: 0.62rem 0.9rem;
    border: 1px solid #cccccc;
    background: var(--surface);
    color: #2b2b2b;
    font-size: 0.84rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.meteo-actions .timeline-btn:hover {
    background: #fafafa;
    border-color: #9e9e9e;
}

.meteo-actions .welcome-btn:focus-visible,
.meteo-actions .timeline-btn:focus-visible,
.timeline-controls .timeline-btn:focus-visible,
.control-select:focus-visible,
.control-range:focus-visible {
    outline: 2px solid #1d4ed8;
    outline-offset: 2px;
}

.meteo-page.meteo-is-loading .meteo-actions .welcome-btn,
.meteo-page.meteo-is-loading .meteo-actions .timeline-btn,
.meteo-page.meteo-is-loading .timeline-controls .timeline-btn,
.meteo-page.meteo-is-loading .header-center select,
.meteo-page.meteo-is-loading .control-select,
.meteo-page.meteo-is-loading .control-range {
    pointer-events: none;
    opacity: 0.6;
}

.meteo-gradient {
    width: 160px;
    height: 14px;
    border-radius: 999px;
    background: linear-gradient(to right, #83b7cb 0%, #4f8cb5 7%, #3858a6 14%, #1238b5 21%, #00dc55 22%, #009a1f 36%, #fff319 37%, #ffb300 53%, #ff5d15 67%, #d82100 80%, #a90000 89%, #e947d8 90%, #b72a9f 100%);
}

.meteo-page .color-legend {
    right: 14px;
    bottom: calc(var(--timeline-actual-height, var(--timeline-height)) + 18px);
    min-width: 212px;
    padding: 8px 10px 7px;
    border-radius: 10px;
}

.meteo-page .color-legend-title {
    margin-bottom: 3px;
    text-align: center;
    font-size: 0.62rem;
    letter-spacing: 0.02em;
}

.meteo-radar-scale-table {
    width: 100%;
    min-width: 190px;
    border-collapse: collapse;
    font-size: 0.42rem;
    text-align: center;
    color: var(--text);
}

.meteo-radar-scale-table .radar-legend-gradient td {
    height: 6px;
}

.meteo-radar-scale-table .radar-legend-scale td {
    padding: 2px 0;
}

.meteo-page .radar-legend-footer {
    margin-top: 5px;
    text-align: center;
}

.meteo-page .color-legend-content {
    display: grid;
    grid-template-columns: minmax(130px, 1fr) auto;
    align-items: center;
    column-gap: 7px;
}

.meteo-page .color-legend-labels {
    height: auto;
    margin-left: 0;
    font-size: 0.72rem;
    line-height: 1;
    display: block;
}

.meteo-page .color-legend-labels span:first-child {
    font-weight: 600;
}

.meteo-page #meteoTimestamp {
    margin-top: 10px;
    text-align: center;
    font-size: 0.72rem;
}

#meteoTimestamp {
    display: block;
    margin-top: 0.5rem;
    color: #4c4c4c;
}

.timeline-container {
    z-index: 1200;
    bottom: calc(0px + env(safe-area-inset-bottom));
    border-top: 1px solid #dbe1ea;
}

#meteoSidebar.open~.timeline-container,
#meteoSidebar.open~.meteo-source-note {
    z-index: 1180;
}

#sidebar.open~.timeline-container {
    z-index: 1180;
}

.meteo-source-note {
    position: fixed;
    right: 14px;
    bottom: calc(var(--timeline-actual-height, var(--timeline-height)) + 18px + env(safe-area-inset-bottom));
    width: min(380px, calc(100vw - 28px));
    margin: 0;
    padding: 12px 14px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: color-mix(in srgb, var(--surface) 94%, transparent);
    box-shadow: var(--shadow-3);
    text-align: left;
    font-size: 0.76rem;
    line-height: 1.35;
    color: var(--text);
    z-index: 1210;
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transform: translateY(0);
    backdrop-filter: blur(12px);
    transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease;
}

.meteo-source-note.is-dismissed {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transform: translateY(12px);
}

.meteo-source-note a {
    color: inherit;
    text-decoration: underline;
    pointer-events: auto;
}

/* ============================================================
   METEOROLOGIA PAGE — mapa e overlays
   ============================================================ */

.meteo-map-stage {
    position: relative;
    width: 100%;
    height: 100%;
}

#meteoMap {
    width: 100%;
    height: 100%;
    background: #e8edf4;
}

.meteo-loading-overlay {
    position: absolute;
    inset: 0;
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(248, 250, 252, 0.55);
    backdrop-filter: blur(2px);
}

.meteo-loading-overlay[hidden] {
    display: none;
}

.meteo-loading-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    background: var(--surface);
    border: 1px solid #e5e5e5;
    border-radius: 14px;
    padding: 20px 28px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.10);
    font-size: 0.92rem;
    color: #2b2b2b;
    min-width: 220px;
    text-align: center;
}

.meteo-loading-card small {
    color: #6f6f6f;
    font-size: 0.8rem;
}

.meteo-loading-spinner {
    display: inline-block;
    width: 28px;
    height: 28px;
    border: 3px solid #e5e5e5;
    border-top-color: #1d4ed8;
    border-radius: 50%;
    animation: meteo-spin 0.8s linear infinite;
}

@keyframes meteo-spin {
    to {
        transform: rotate(360deg);
    }
}

.meteo-diagnostic-overlay {
    position: absolute;
    inset: 0;
    z-index: 510;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(3px);
}

.meteo-diagnostic-overlay[hidden] {
    display: none;
}

.meteo-diagnostic-card {
    background: var(--surface);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-left: 4px solid #ef4444;
    border-radius: 12px;
    padding: 18px 20px;
    max-width: 480px;
    width: calc(100% - 32px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    color: #2b2b2b;
}

.meteo-diagnostic-card strong {
    display: block;
    font-size: 0.95rem;
    margin-bottom: 4px;
    color: #b91c1c;
}

.meteo-diagnostic-card p {
    font-size: 0.85rem;
    color: #4c4c4c;
    margin: 0 0 8px;
}

.meteo-diagnostic-card ul {
    font-size: 0.8rem;
    color: #585858;
    margin: 0 0 12px;
    padding-left: 18px;
}

.meteo-diagnostic-card button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 14px;
    padding: 8px 16px;
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid #cccccc;
    background: var(--surface);
    color: #2b2b2b;
    width: auto;
    height: auto;
}

.meteo-diagnostic-card button:hover {
    background: #f5f5f5;
    border-color: #9e9e9e;
}

.meteo-fallback-badge {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 490;
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 251, 235, 0.95);
    border: 1px solid #fcd34d;
    border-radius: 999px;
    padding: 5px 14px;
    font-size: 0.78rem;
    color: #92400e;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: opacity 0.4s ease, transform 0.4s ease;
    white-space: nowrap;
}

.meteo-fallback-badge.is-compact .meteo-fallback-badge__text {
    display: none;
}

body.dark-mode.meteo-page .map-container,
body.dark-mode #meteoMap {
    background: linear-gradient(180deg, #171717 0%, #121212 100%);
}

body.dark-mode .meteo-loading-overlay {
    background: rgba(20, 20, 20, 0.62);
}

body.dark-mode .meteo-loading-card {
    background: rgba(23, 23, 23, 0.96);
    border-color: #434343;
    color: #e5e5e5;
}

body.dark-mode .meteo-loading-card small {
    color: #9e9e9e;
}

body.dark-mode .meteo-diagnostic-card {
    background: rgba(41, 41, 41, 0.96);
    border: 1px solid rgba(248, 113, 113, 0.2);
    border-left: 4px solid #ef4444;
    color: #cccccc;
}

body.dark-mode .meteo-diagnostic-card strong {
    color: #fca5a5;
}

body.dark-mode .meteo-diagnostic-card p,
body.dark-mode .meteo-diagnostic-card ul {
    color: #cccccc;
}

body.dark-mode .meteo-diagnostic-card button {
    background: #2b2b2b;
    border-color: #4c4c4c;
    color: #fafafa;
}

body.dark-mode .meteo-diagnostic-card button:hover {
    background: #434343;
    border-color: #6f6f6f;
}

body.dark-mode .meteo-fallback-badge {
    background: rgba(23, 23, 23, 0.94);
    border-color: rgba(148, 163, 184, 0.4);
    color: #e5e5e5;
}

body.dark-mode .fallback-telemetry-panel {
    background: rgba(23, 23, 23, 0.92);
    border-color: #434343;
}

body.dark-mode .fallback-telemetry-list {
    color: #cccccc;
}

body.dark-mode .fallback-telemetry-list strong {
    color: #fafafa;
}

body.dark-mode .fallback-telemetry-panel small {
    color: #9e9e9e;
}

body.dark-mode .meteo-quick-status {
    color: #e5e5e5;
}

body.dark-mode .meteo-quick-status span {
    background: rgba(23, 23, 23, 0.9);
    border-color: rgba(148, 163, 184, 0.45);
    color: #fafafa;
}

body.dark-mode .meteo-sidebar-close {
    background: #141414;
    border-color: #4c4c4c;
    color: #e5e5e5;
}

body.dark-mode .bbox-helper-text {
    color: #cccccc;
}

body.dark-mode .bbox-grid input[readonly] {
    background: #2b2b2b;
    color: #e5e5e5;
    border-color: #4c4c4c;
}

body.dark-mode .meteo-actions .timeline-btn {
    background: #141414;
    border-color: #4c4c4c;
    color: #e5e5e5;
}

body.dark-mode .meteo-actions .timeline-btn:hover {
    background: #2b2b2b;
    border-color: #6f6f6f;
}

body.dark-mode .timeline-container {
    background: #121212;
    border-top-color: #434343;
}

body.dark-mode.meteo-page .color-legend {
    background: rgba(23, 23, 23, 0.95);
    border: 1px solid #434343;
}

body.dark-mode.meteo-page .color-legend-title,
body.dark-mode.meteo-page .color-legend-labels,
body.dark-mode.meteo-page #meteoTimestamp {
    color: #fafafa;
}

body.dark-mode.meteo-page .color-legend-labels {
    text-shadow: 0 1px 2px rgba(2, 6, 23, 0.7);
}

body.dark-mode.meteo-page #meteoTimestamp {
    color: #cccccc;
}

body.dark-mode .meteo-source-note {
    color: #cccccc;
    background: rgba(2, 6, 23, 0.55);
}

@media (max-width: 1100px) {
    .meteo-quick-status {
        display: none;
    }

    #meteoMap {
        height: calc(100vh - 190px);
    }

    .meteo-page .color-legend {
        right: 10px;
        min-width: 196px;
        padding: 7px 9px 6px;
    }

    .meteo-page .color-legend-content {
        grid-template-columns: minmax(110px, 1fr) auto;
        column-gap: 8px;
    }

    .meteo-page .meteo-gradient {
        width: 100%;
    }
}

@media (max-width: 768px) {
    body.meteo-page {
        --timeline-height: 60px;
    }

    body.meteo-page .map-container {
        bottom: calc(var(--timeline-actual-height, var(--timeline-height)) + env(safe-area-inset-bottom));
    }

    body.meteo-page.timeline-collapsed .map-container {
        bottom: 0;
    }

    body.meteo-page .timeline-container {
        box-sizing: border-box;
        bottom: 0;
        height: var(--timeline-height);
        min-height: var(--timeline-height);
        padding: 4px 7px calc(5px + env(safe-area-inset-bottom));
        align-items: flex-start;
        gap: 3px 5px;
    }

    body.meteo-page .timeline-body {
        box-sizing: border-box;
        padding-left: 0;
        gap: 3px 5px;
    }

    body.meteo-page .timeline-controls {
        gap: 3px;
    }

    body.meteo-page .timeline-btn {
        width: 26px;
        height: 26px;
        flex: 0 0 26px;
        font-size: 0.66rem;
    }

    body.meteo-page .timeline-slider-container {
        flex-basis: 100%;
    }

    body.meteo-page .timeline-current {
        min-width: 0;
        padding-right: 2px;
    }

    body.meteo-page .timeline-current-date {
        font-size: 0.56rem;
        line-height: 1.1;
    }

    body.meteo-page .timeline-current-time {
        font-size: 0.82rem;
        line-height: 1.1;
    }

    body.meteo-page .timeline-collapse-btn {
        flex-basis: 26px;
        width: 26px;
        height: 26px;
        z-index: 1220;
    }

    body.meteo-page .meteo-source-note {
        box-sizing: border-box;
        right: 8px;
        bottom: calc(var(--timeline-actual-height, var(--timeline-height)) + 10px + env(safe-area-inset-bottom));
        width: min(320px, calc(100vw - 16px));
        max-height: min(32dvh, 190px);
        overflow: auto;
        padding: 10px 12px;
        font-size: 0.68rem;
        line-height: 1.28;
    }

    body.meteo-page .color-legend {
        right: 8px;
        bottom: calc(var(--timeline-actual-height, var(--timeline-height)) + 10px + env(safe-area-inset-bottom));
        width: min(272px, calc(100vw - 16px));
        min-width: 0;
        max-width: calc(100vw - 16px);
        max-height: 112px;
        padding: 7px 9px 8px;
        overflow: hidden;
    }

    body.meteo-page .color-legend .legend-header {
        min-height: 26px;
        margin-bottom: 2px;
    }

    body.meteo-page .color-legend .color-legend-title {
        font-size: 0.58rem;
        line-height: 1.15;
        text-align: left;
    }

    body.meteo-page .color-legend .legend-toggle-btn {
        width: 28px;
        height: 28px;
        flex-basis: 28px;
    }

    body.meteo-page .meteo-radar-scale-table {
        min-width: 0;
        font-size: 0.38rem;
    }

    body.meteo-page .radar-legend-footer {
        margin-top: 3px;
        font-size: 0.5rem;
        line-height: 1.15;
    }

    body.meteo-page .meteo-fallback-badge {
        top: 10px;
        width: max-content;
        max-width: calc(100vw - 96px);
        padding: 5px 10px;
        font-size: 0.72rem;
        line-height: 1.15;
        white-space: normal;
        text-align: center;
    }
}


#meteoHoverTooltip {
    pointer-events: none;
    z-index: 1600;
}

.meteo-raster-pixelated img {
    image-rendering: pixelated;
}

.meteo-raster-smooth img {
    image-rendering: auto;
}

/* Meteo tools (Open-Meteo free resources) */
.meteo-actions-inline {
    grid-template-columns: 1fr 1fr;
}

.meteo-tools-status {
    margin-top: 12px;
    border: 1px solid rgba(29, 78, 216, 0.2);
    background: rgba(29, 78, 216, 0.08);
    color: #1d4ed8;
    border-radius: 10px;
    padding: 8px 10px;
    font-size: 0.72rem;
}

.meteo-tools-error {
    margin-top: 10px;
    border: 1px solid rgba(220, 38, 38, 0.25);
    background: rgba(220, 38, 38, 0.08);
    color: #991b1b;
    border-radius: 10px;
    padding: 8px 10px;
    font-size: 0.8rem;
    display: grid;
    gap: 3px;
}

.meteo-tools-cards {
    margin-top: 12px;
    display: grid;
    gap: 10px;
}

.meteo-tools-card {
    border: 1px solid rgba(148, 163, 184, 0.3);
    background: #fafafa;
    border-radius: 12px;
    padding: 10px;
}

.meteo-tools-card h4 {
    margin: 0 0 8px;
    font-size: 0.88rem;
    color: #141414;
}

.meteo-tools-card ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 3px;
    font-size: 0.8rem;
    color: #434343;
}

.meteo-tools-card li {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.meteo-tools-card li strong {
    color: #141414;
}

.meteo-tools-card-diagnostics {
    border-style: dashed;
}

body.dark-mode .meteo-tools-status {
    border-color: rgba(96, 165, 250, 0.4);
    background: rgba(37, 99, 235, 0.22);
    color: #e0e0e0;
}

body.dark-mode .meteo-tools-error {
    border-color: rgba(248, 113, 113, 0.45);
    background: rgba(153, 27, 27, 0.35);
    color: #fecaca;
}

body.dark-mode .meteo-tools-card {
    border-color: rgba(71, 85, 105, 0.65);
    background: rgba(23, 23, 23, 0.78);
}

body.dark-mode .meteo-tools-card h4 {
    color: #e5e5e5;
}

body.dark-mode .meteo-tools-card ul {
    color: #cccccc;
}

body.dark-mode .meteo-tools-card li strong {
    color: #e5e5e5;
}

.meteo-geocode-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
}

.meteo-geocode-results {
    margin-top: 8px;
    display: grid;
    gap: 6px;
}

.meteo-geocode-item {
    text-align: left;
    border: 1px solid rgba(148, 163, 184, 0.35);
    background: var(--surface);
    border-radius: 10px;
    padding: 8px 10px;
    font-size: 0.78rem;
    color: #141414;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.meteo-geocode-item small {
    color: #4c4c4c;
}

.meteo-geocode-item:hover {
    border-color: rgba(29, 78, 216, 0.45);
    background: rgba(219, 234, 254, 0.45);
    transform: translateY(-1px);
}

.meteo-geocode-item:focus-visible {
    outline: 2px solid rgba(37, 99, 235, 0.6);
    outline-offset: 1px;
}

.meteo-geocode-item.is-outside {
    border-style: dashed;
    border-color: rgba(239, 68, 68, 0.45);
    background: rgba(254, 242, 242, 0.9);
}

.meteo-geocode-item.is-outside small {
    color: #991b1b;
}

.meteo-quick-status-point {
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.dark-mode .meteo-geocode-item {
    border-color: rgba(71, 85, 105, 0.65);
    background: rgba(23, 23, 23, 0.82);
    color: #e5e5e5;
}

body.dark-mode .meteo-geocode-item small {
    color: #9e9e9e;
}

body.dark-mode .meteo-geocode-item:hover {
    border-color: rgba(96, 165, 250, 0.5);
    background: rgba(30, 64, 175, 0.35);
}

body.dark-mode .meteo-geocode-item.is-outside {
    border-color: rgba(248, 113, 113, 0.55);
    background: rgba(127, 29, 29, 0.45);
}

body.dark-mode .meteo-geocode-item.is-outside small {
    color: #fecaca;
}

body.dark-mode .meteo-geocode-item:focus-visible {
    outline-color: rgba(147, 197, 253, 0.85);
}

/* Seletor de idioma */
.language-selector-subtitle {
    margin: 0 0 10px;
    font-size: 0.72rem;
    opacity: 0.8;
}

body.dark-mode .language-selector-subtitle {
    color: #cccccc;
    opacity: 0.95;
}

.language-selector-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.language-option {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 10px;
    padding: 8px 10px;
    background: rgba(241, 245, 249, 0.9);
    color: inherit;
    font: inherit;
    cursor: pointer;
    text-align: left;
    transition: all 0.2s ease;
}

.nimbus-language-floating .language-option {
    width: auto;
    white-space: nowrap;
}

.language-flag {
    flex: 0 0 auto;
    width: 24px;
    height: 16px;
    border-radius: 3px;
    object-fit: cover;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.22);
}

.language-label {
    min-width: 0;
}

.language-option:hover {
    transform: translateY(-1px);
    border-color: rgba(24, 98, 162, 0.4);
}

.language-option.active {
    border-color: rgba(24, 98, 162, 0.75);
    background: rgba(24, 98, 162, 0.12);
    font-weight: 600;
}

body.dark-mode .language-option {
    background: rgba(34, 34, 34, 0.75);
    border-color: rgba(255, 255, 255, 0.16);
}

body.dark-mode .language-option.active {
    border-color: rgba(114, 178, 255, 0.75);
    background: rgba(72, 133, 196, 0.24);
}

/* GOES-19 ABI overlays: follows the platform sidebar surface and Material 3 control density. */
.goes19-controls {
    margin-top: 12px;
}

.goes19-heading,
.goes19-layer-card {
    background: transparent;
    border: 0;
}

.goes19-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0 0 10px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--border-color);
}

.goes19-heading small {
    display: block;
    margin-top: 3px;
    color: var(--text-secondary);
    font-size: .62rem;
}

.goes19-badge {
    align-items: center;
    background: transparent;
    border-radius: 999px;
    display: inline-flex;
    flex: 0 0 auto;
    justify-content: center;
    min-height: 32px;
    min-width: 32px;
    padding: 3px;
}

.goes19-badge img {
    display: block;
    height: 24px;
    width: 24px;
}

.goes19-layer-card {
    padding: 0;
    margin-top: 0;
}

.goes19-layer-card .control-checkbox {
    min-height: 48px;
}

.goes19-layer-card .control-group {
    margin-top: 4px;
}

.goes19-status,
.goes19-warning {
    margin: 6px 0 0;
    color: var(--text-secondary);
    font-size: .75rem;
    line-height: 1.4;
}

.goes19-status[data-kind="error"],
.goes19-warning {
    color: #a33a00;
}

.goes19-legend {
    position: fixed;
    right: 12px;
    bottom: 112px;
    z-index: 780;
    width: min(236px, calc(100vw - 20px));
    max-height: calc(100dvh - var(--header-height) - var(--timeline-actual-height, var(--timeline-height)) - 24px);
    overflow-y: auto;
    overflow-wrap: anywhere;
    padding: 8px 9px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background: color-mix(in srgb, var(--surface) 94%, transparent);
    color: var(--text);
    box-shadow: var(--shadow-2);
    backdrop-filter: blur(8px);
    overscroll-behavior: contain;
}

.goes19-legend[hidden] {
    display: none;
}

.goes19-legend.mobile-legend-shelf-item {
    overflow: visible;
}

.goes19-legend-row {
    margin-top: 6px;
}

.goes19-legend-row span,
.goes19-legend-row small {
    display: block;
    font-size: .62rem;
}

.goes19-legend-row i {
    display: block;
    height: 6px;
    margin: 4px 0;
    border-radius: 999px;
}

.goes19-legend-ticks {
    display: flex;
    justify-content: space-between;
    gap: 3px;
    margin-bottom: 3px;
}

.goes19-cursor-tooltip {
    min-width: 150px;
}

.goes19-cursor-tooltip[hidden] {
    display: none;
}

body[data-satellite-only="1"] .radar-only-section,
body[data-satellite-only="1"] #radarLegend,
body[data-satellite-only="1"] #radarOperationalLegend,
body[data-satellite-only="1"] #radarHoverTooltip {
    display: none !important;
}

body.dark-mode .goes19-legend {
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    color: var(--text);
}

@media (max-width: 768px) {
    .goes19-legend {
        right: 8px;
        bottom: 98px;
        width: min(220px, calc(100vw - 16px));
        max-height: min(26dvh, 170px);
    }

    .legend-toggle-btn {
        width: 44px;
        height: 44px;
        flex-basis: 44px;
    }
}

body.timeline-collapsed .radar-legend-floating {
    bottom: calc(12px + env(safe-area-inset-bottom));
}

body.meteo-page.timeline-collapsed .color-legend {
    bottom: calc(18px + env(safe-area-inset-bottom));
}


body.dark-mode .timeline-collapse-btn {
    background: rgba(23, 23, 23, 0.94);
    color: #fafafa;
    border-color: rgba(148, 163, 184, 0.35);
    box-shadow: 0 2px 10px rgba(2, 6, 23, 0.45);
}

body.dark-mode .timeline-container.is-collapsed .timeline-collapse-btn {
    background: rgba(23, 23, 23, 0.98);
    box-shadow: 0 10px 26px rgba(2, 6, 23, 0.62);
}


body.timeline-collapsed .live-indicator {
    position: fixed;
    left: 60px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    z-index: 1200;
}

body.dark-mode .live-indicator {
    background: rgba(23, 23, 23, 0.58);
}

@media (max-width: 768px) {
    .live-indicator {
        left: 8px;
        bottom: calc(var(--timeline-actual-height, var(--timeline-height)) + 8px + env(safe-area-inset-bottom));
        font-size: 0.58rem;
        padding: 3px 7px;
    }

    .timeline-container > .live-indicator {
        position: fixed;
        right: auto;
        bottom: calc(var(--timeline-actual-height, var(--timeline-height)) + 8px + env(safe-area-inset-bottom));
        left: 8px;
    }

    body.timeline-collapsed .live-indicator {
        position: fixed;
        left: 56px;
        bottom: calc(8px + env(safe-area-inset-bottom));
        z-index: 1200;
    }
}

/* Tooltip de Raios (NIMBUS Lightning Tooltip) */
.nimbus-lightning-tooltip {
    background: #f5f7fa !important;
    border: none !important;
    border-radius: 8px !important;
    box-shadow: var(--shadow-2) !important;
    color: #141414 !important;
    padding: 0 !important;
}

/* Radar: legendas compactas em linha para preservar a área útil do mapa. */
body[data-radar-only="1"] .radar-legend-floating,
body[data-radar-only="1"] .color-legend {
    box-sizing: border-box;
    bottom: calc(var(--timeline-actual-height, var(--timeline-height)) + 12px);
    right: var(--legend-row-right, 12px);
    left: auto;
    transform: none;
    max-height: min(42dvh, 340px);
}

body[data-radar-only="1"] .radar-legend-floating {
    width: 260px;
    max-width: 260px;
}

body[data-radar-only="1"] #radarOperationalLegend {
    width: 260px;
    max-width: 260px;
}

body[data-radar-only="1"] #radarOperationalLegend .radar-legend-table {
    table-layout: fixed;
}

body[data-radar-only="1"] #radarOperationalLegend th,
body[data-radar-only="1"] #radarOperationalLegend td {
    overflow-wrap: normal;
}

body[data-radar-only="1"] .color-legend {
    width: max-content;
    min-width: calc(var(--legend-shelf-tab-min-width) + var(--legend-shelf-tab-horizontal-extra));
    max-width: min(216px, calc(100vw - 20px));
}

body[data-radar-only="1"] .color-legend:not(.is-collapsed) {
    display: grid;
    grid-template-columns: max-content max-content 28px;
    grid-template-areas: "title scale toggle";
    align-items: start;
    gap: 7px;
    padding: 8px;
}

body[data-radar-only="1"] .color-legend:not(.is-collapsed) .legend-header {
    display: contents;
}

body[data-radar-only="1"] .color-legend:not(.is-collapsed) .color-legend-title {
    grid-area: title;
    align-self: stretch;
    margin: 0;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    text-align: left;
    white-space: nowrap;
}

body[data-radar-only="1"] .color-legend:not(.is-collapsed) .legend-toggle-btn {
    grid-area: toggle;
    justify-self: end;
}

body[data-radar-only="1"] .color-legend:not(.is-collapsed) .legend-body {
    grid-area: scale;
}

body[data-radar-only="1"] .color-legend:not(.is-collapsed) .color-legend-content {
    justify-content: flex-start;
}

body[data-radar-only="1"] .glm-age-legend {
    width: auto;
    min-width: 92px;
    max-width: 110px;
}

body[data-radar-only="1"] .glm-age-legend:not(.is-collapsed) .radar-legend-footer {
    display: none;
}

@media (max-width: 768px) {
    body[data-radar-only="1"] {
        --header-height: 44px;
        --timeline-height: 52px;
        --legend-gap: 5px;
    }

    body[data-radar-only="1"] .header {
        min-height: var(--header-height);
        padding: 0 6px;
    }

    body[data-radar-only="1"] .logo {
        width: 29px;
        height: 29px;
    }

    body[data-radar-only="1"] .logo-text {
        font-size: 0.88rem;
    }

    body[data-radar-only="1"] .menu-toggle {
        width: 34px;
        height: 34px;
    }

    body[data-radar-only="1"] .datetime-display {
        padding: 2px 5px;
    }

    body[data-radar-only="1"] .datetime-display .date {
        display: none;
    }

    body[data-radar-only="1"] .datetime-display .time {
        font-size: 0.72rem;
    }

    body[data-radar-only="1"] .timeline-container > .live-indicator {
        position: fixed;
        top: auto;
        right: auto;
        bottom: calc(var(--timeline-actual-height, var(--timeline-height)) + 8px + env(safe-area-inset-bottom));
        left: 8px;
        z-index: 905;
    }

    body[data-radar-only="1"].timeline-collapsed .live-indicator {
        position: fixed;
        top: auto;
        bottom: calc(8px + env(safe-area-inset-bottom));
        left: 56px;
        z-index: 1200;
    }

    body[data-radar-only="1"] .map-container {
        bottom: var(--timeline-actual-height, var(--timeline-height));
    }

    body[data-radar-only="1"].timeline-collapsed .map-container {
        bottom: 0;
    }

    body[data-radar-only="1"] .timeline-container {
        height: auto;
        min-height: var(--timeline-height);
        padding: 4px 7px calc(5px + env(safe-area-inset-bottom));
        gap: 3px;
        flex-wrap: wrap;
    }

    body[data-radar-only="1"] .timeline-container.is-collapsed {
        height: 0;
        min-height: 0;
        padding: 0;
    }

    body[data-radar-only="1"] .timeline-body {
        flex-wrap: wrap;
        flex: 1 1 100%;
        gap: 3px;
    }

    body[data-radar-only="1"] .timeline-controls {
        gap: 3px;
    }

    body[data-radar-only="1"] .timeline-btn {
        width: 26px;
        height: 26px;
    }

    body[data-radar-only="1"] .timeline-slider-container {
        order: 3;
        flex: 0 0 100%;
        min-width: 0;
        margin: 0;
    }

    body[data-radar-only="1"] .timeline-ticks {
        display: block;
    }

    body[data-radar-only="1"] .timeline-current {
        order: 2;
        flex: 0 0 auto;
        min-width: 50px;
    }

    body[data-radar-only="1"] .timeline-current-date {
        display: block;
        font-size: 0.5rem;
        line-height: 1;
    }

    body[data-radar-only="1"] .timeline-current-time {
        font-size: 0.66rem;
    }

    body[data-radar-only="1"] .timeline-collapse-btn {
        flex-basis: 26px;
        width: 26px;
        height: 26px;
    }

    body[data-radar-only="1"] .chart-color-notice {
        display: none;
    }

    body[data-satellite-only="1"] .chart-color-notice {
        display: none;
    }

    body[data-radar-only="1"] .radar-legend-floating {
        left: auto;
        right: var(--legend-row-right, 6px);
        bottom: calc(var(--timeline-actual-height, var(--timeline-height)) + 6px);
        width: min(92px, calc((100vw - 30px) / 4));
        min-width: min(92px, calc((100vw - 30px) / 4));
        max-width: min(92px, calc((100vw - 30px) / 4));
        max-height: min(34dvh, 220px);
        padding: 4px;
        transform: none;
        overflow-x: hidden;
    }

    body[data-radar-only="1"] .color-legend {
        left: auto;
        right: var(--legend-row-right, 6px);
        bottom: calc(var(--timeline-actual-height, var(--timeline-height)) + 6px);
        width: max-content;
        min-width: calc(var(--legend-shelf-tab-min-width) + var(--legend-shelf-tab-horizontal-extra));
        max-width: min(216px, calc(100vw - 20px));
        max-height: min(34dvh, 220px);
        padding: 4px;
        transform: none;
        overflow-x: visible;
    }

    body[data-radar-only="1"] #radarOperationalLegend,
    body[data-radar-only="1"] .glm-age-legend {
        width: min(92px, calc((100vw - 30px) / 4));
        min-width: min(92px, calc((100vw - 30px) / 4));
        max-width: min(92px, calc((100vw - 30px) / 4));
    }

    body[data-radar-only="1"] .radar-legend-floating.is-mobile-shelf-open,
    body[data-radar-only="1"] #radarOperationalLegend.is-mobile-shelf-open {
        width: min(340px, calc(100vw - 58px));
        min-width: min(260px, calc(100vw - 58px));
        max-width: calc(100vw - 58px);
        padding: 7px 8px 8px;
        overflow: visible;
    }

    body[data-radar-only="1"] .mobile-legend-shelf-item {
        --mobile-legend-tab-min-height: 54px;
        --mobile-legend-tab-max-height: 76px;
        --mobile-legend-closed-height: 62px;
        overflow: visible;
    }

    body[data-radar-only="1"] .radar-legend-floating.is-mobile-shelf-open .legend-body,
    body[data-radar-only="1"] #radarOperationalLegend.is-mobile-shelf-open .legend-body {
        max-height: calc(min(34dvh, 240px) - 18px);
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    body[data-radar-only="1"] .legend-header {
        gap: 2px;
    }

    body[data-radar-only="1"] .color-legend:not(.is-collapsed) {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 3px;
        padding: 4px 3px 5px;
        width: max-content;
        min-width: calc(var(--legend-shelf-tab-min-width) + var(--legend-shelf-tab-horizontal-extra));
        max-width: min(216px, calc(100vw - 20px));
        overflow: visible;
    }

    body[data-radar-only="1"] .glm-age-legend:not(.is-collapsed) {
        width: 64px;
        max-width: 64px;
    }

    body[data-radar-only="1"] .color-legend:not(.is-collapsed) .legend-header {
        display: flex;
        justify-content: center;
        width: 100%;
        min-height: 26px;
    }

    body[data-radar-only="1"] .color-legend:not(.is-collapsed) .legend-toggle-btn {
        position: static;
        width: 26px;
        height: 26px;
        flex-basis: 26px;
        margin: 0;
        background: color-mix(in srgb, var(--surface) 80%, transparent);
        border-color: color-mix(in srgb, var(--border-color) 65%, transparent);
        font-size: 0.68rem;
    }

    body[data-radar-only="1"] .color-legend:not(.is-collapsed) .legend-body {
        width: 100%;
        padding-top: 0;
    }

    body[data-radar-only="1"] .color-legend:not(.is-collapsed) .color-legend-title {
        position: static;
        max-height: none;
        font-size: 0.46rem;
        overflow: visible;
        text-overflow: clip;
        opacity: 0.72;
        pointer-events: auto;
    }

    body[data-radar-only="1"] .color-legend:not(.is-collapsed) .color-legend-gradient {
        width: 10px;
        height: 86px;
    }

    body[data-radar-only="1"] .color-legend:not(.is-collapsed) .color-legend-labels {
        height: 86px;
        margin-left: 2px;
        font-size: 0.46rem;
        line-height: 1.05;
    }

    body[data-radar-only="1"] .color-legend:not(.is-collapsed) .color-legend-content {
        justify-content: center;
        padding-left: 0;
    }

    body[data-radar-only="1"] .radar-legend-title,
    body[data-radar-only="1"] .color-legend-title {
        margin: 0;
        font-size: 0.54rem;
        line-height: 1.1;
        text-align: left;
    }

    body[data-radar-only="1"] .legend-toggle-btn {
        width: 44px;
        height: 44px;
        flex-basis: 44px;
        margin: -4px;
        border-color: transparent;
        font-size: 0.75rem;
    }

    body[data-radar-only="1"] .radar-legend.is-collapsed,
    body[data-radar-only="1"] .color-legend.is-collapsed {
        width: 58px;
        min-width: 58px;
        max-width: 58px;
        padding: 4px;
        border-right: 0 !important;
        border-radius: var(--mobile-legend-tab-radius) 0 0 var(--mobile-legend-tab-radius) !important;
        overflow: hidden;
    }

    body[data-radar-only="1"] .radar-legend.is-collapsed .legend-header,
    body[data-radar-only="1"] .color-legend.is-collapsed .legend-header {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
    }

    body[data-radar-only="1"] .radar-legend.is-collapsed .radar-legend-title,
    body[data-radar-only="1"] .color-legend.is-collapsed .color-legend-title {
        writing-mode: vertical-rl;
        transform: rotate(180deg);
        font-size: 0.48rem;
        line-height: 1;
    }

    body[data-radar-only="1"] .radar-legend.is-collapsed .legend-toggle-btn,
    body[data-radar-only="1"] .color-legend.is-collapsed .legend-toggle-btn {
        width: 32px;
        height: 32px;
        flex-basis: 32px;
        margin: 0;
    }

    body[data-radar-only="1"] .radar-legend:not(.is-collapsed),
    body[data-radar-only="1"] .color-legend:not(.is-collapsed),
    body[data-radar-only="1"] #radarOperationalLegend:not(.is-collapsed) {
        z-index: 920;
    }

    body[data-radar-only="1"] .radar-legend:not(.is-collapsed) .radar-legend-table,
    body[data-radar-only="1"] #radarOperationalLegend:not(.is-collapsed) th,
    body[data-radar-only="1"] #radarOperationalLegend:not(.is-collapsed) td {
        font-size: 0.62rem;
        padding: 4px 3px;
    }

    body[data-radar-only="1"] .radar-legend-table,
    body[data-radar-only="1"] #radarOperationalLegend th,
    body[data-radar-only="1"] #radarOperationalLegend td {
        font-size: 0.48rem;
        padding: 2px 1px;
    }

    body[data-radar-only="1"] .radar-legend-footer,
    body[data-radar-only="1"] .radar-legend-timestamp {
        font-size: 0.48rem;
        line-height: 1.15;
    }
}

.nimbus-lightning-tooltip:before {
    border-right-color: #ffffff !important;
}

/* Compatibilidade com o Dark Mode (Padrão Material Design) */
body.dark-mode .nimbus-lightning-tooltip {
    background: #2b2b2b !important;
    /* Padrão de fundo escuro elevado do NIMBUS */
    border: none !important;
    color: #fafafa !important;
    box-shadow: var(--shadow-3) !important;
}

body.dark-mode .nimbus-lightning-tooltip:before {
    border-right-color: #2b2b2b !important;
}

/* ============================================================================
   USER SESSION MENU (Material Design & Mobile Ready)
   ============================================================================ */
.user-session {
    display: flex;
    align-items: center;
    font-family: 'Outfit', 'Inter', sans-serif;
}

.user-session-menu {
    position: relative;
    display: inline-block;
}

.user-session-menu::after {
    content: "";
    position: absolute;
    top: 100%;
    right: 0;
    width: 100%;
    height: 10px;
    z-index: 1099;
}

/* O "Pill" do usuário no estilo Material Chip */
.user-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    max-width: min(280px, 44vw);
    background-color: var(--surface, #f5f7fa);
    color: var(--text, #141414);
    border: 1px solid var(--gray-200, #e5e5e5);
    border-radius: 999px;
    padding: 5px 10px 5px 5px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.user-pill-avatar,
.user-menu-meta-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    color: var(--primary, #283593);
    background: color-mix(in srgb, var(--primary, #283593) 12%, #f5f7fa);
    border: 1px solid color-mix(in srgb, var(--primary, #283593) 18%, transparent);
    border-radius: 50%;
}

.user-pill-avatar {
    width: 32px;
    height: 32px;
}

.user-pill-avatar svg,
.user-menu-meta-icon svg,
.user-pill-chevron,
.user-menu-link svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

.user-pill-avatar img,
.user-menu-meta-icon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: inherit;
    background: #ffffff;
    box-sizing: border-box;
}

.user-pill-avatar img {
    padding: 3px;
}

.user-menu-meta-icon img {
    padding: 4px;
}

.user-pill-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    line-height: 1.12;
}

.user-pill-name,
.user-pill-entity {
    display: block;
    max-width: 170px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-pill-name {
    color: var(--text, #141414);
}

.user-pill-entity {
    margin-top: 2px;
    color: var(--text-secondary, #6f6f6f);
    font-size: 0.72rem;
    font-weight: 500;
}

.user-pill-chevron {
    flex: 0 0 auto;
    color: var(--text-secondary, #6f6f6f);
    transition: transform 0.2s ease;
}

.user-menu-trigger[aria-expanded="true"] .user-pill-chevron,
.user-session-menu:hover .user-pill-chevron {
    transform: rotate(180deg);
}

.user-pill:hover,
.user-session-menu:hover .user-pill {
    background-color: var(--gray-50, #fafafa);
    border-color: color-mix(in srgb, var(--primary, #283593) 32%, var(--gray-300, #cccccc));
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

/* Dropdown Card em estilo Material Design */
.user-menu-card {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background-color: var(--surface, #f5f7fa);
    border: 1px solid var(--gray-200, #e5e5e5);
    border-radius: 8px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    padding: 10px;
    min-width: 250px;
    z-index: 1100;

    /* Estado inicial invisível com animação suave de fade/slide */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
        visibility 0.25s;
}

/* Exibe ao passar o mouse ou focar no menu */
.user-session-menu:hover .user-menu-card,
.user-session-menu:focus-within .user-menu-card,
.user-menu-card.is-active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

/* Meta-informações do usuário */
.user-menu-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid var(--gray-100, #f5f5f5);
    padding: 4px 4px 12px;
    margin-bottom: 8px;
}

.user-menu-meta-icon {
    width: 38px;
    height: 38px;
}

.user-menu-meta-text {
    min-width: 0;
}

.user-menu-name {
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--text, #141414);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-menu-entity {
    font-size: 0.75rem;
    color: var(--text-secondary, #6f6f6f);
    margin-top: 4px;
    font-weight: 400;
}

/* Link para Redefinir Senha */
.user-menu-link {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    text-align: left;
    padding: 10px 12px;
    background-color: transparent;
    color: var(--text, #141414) !important;
    border-radius: 6px;
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.1s ease;
}

.user-menu-link:hover {
    background-color: color-mix(in srgb, var(--primary, #283593) 10%, transparent);
    color: var(--primary, #283593) !important;
    text-decoration: none;
}

.user-menu-link:active {
    transform: scale(0.98);
}

.user-menu-link-danger {
    color: #dc2626 !important;
}

.user-menu-link-danger:hover {
    background-color: rgba(220, 38, 38, 0.1);
    color: #b91c1c !important;
}

/* Link de Sair (Logout) */
.logout-link {
    font-size: 0.875rem;
    color: #ef4444 !important;
    font-weight: 500;
    text-decoration: none;
    padding: 6px 14px;
    border-radius: 20px;
    border: 1px solid transparent;
    transition: all 0.2s ease;
}

.logout-link:hover {
    background-color: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.15);
    text-decoration: none;
}

/* Estilos de Modo Escuro (body.dark-mode) */
body.dark-mode .user-pill {
    background-color: #2b2b2b;
    border-color: #434343;
    color: #fafafa;
}

body.dark-mode .user-pill-avatar,
body.dark-mode .user-menu-meta-icon {
    background: rgba(96, 165, 250, 0.16);
    border-color: rgba(96, 165, 250, 0.24);
    color: #93c5fd;
}

body.dark-mode .user-pill-avatar img,
body.dark-mode .user-menu-meta-icon img {
    background: #0f172a;
}

body.dark-mode .user-pill-name {
    color: #fafafa;
}

body.dark-mode .user-pill-entity,
body.dark-mode .user-pill-chevron {
    color: #bdbdbd;
}

body.dark-mode .user-pill:hover,
body.dark-mode .user-session-menu:hover .user-pill {
    background-color: #434343;
    border-color: #4c4c4c;
}

body.dark-mode .user-menu-card {
    background-color: #2b2b2b;
    border-color: #434343;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

body.dark-mode .user-menu-meta {
    border-bottom-color: #434343;
}

body.dark-mode .user-menu-name {
    color: #fafafa;
}

body.dark-mode .user-menu-entity {
    color: #9e9e9e;
}

body.dark-mode .user-menu-link {
    color: #fafafa !important;
}

body.dark-mode .user-menu-link:hover {
    background-color: rgba(96, 165, 250, 0.14);
    color: #93c5fd !important;
}

body.dark-mode .user-menu-link-danger {
    color: #f87171 !important;
}

body.dark-mode .user-menu-link-danger:hover {
    background-color: rgba(248, 113, 113, 0.14);
    color: #fca5a5 !important;
}

/* Adaptação Responsiva para Dispositivos Móveis */
@media (max-width: 768px) {
    .user-session {
        gap: 8px;
    }

    .user-pill {
        max-width: 58vw;
        min-height: 38px;
        padding: 4px 8px 4px 4px;
        font-size: 0.8125rem;
    }

    .user-pill-avatar {
        width: 30px;
        height: 30px;
    }

    .user-pill-name,
    .user-pill-entity {
        max-width: 118px;
    }

    .user-menu-card {
        right: 0;
        min-width: min(250px, calc(100vw - 24px));
    }
}

/* ============================================================================
   SHAPES / BACIAS INTERACTIVE OVERRIDES
   ============================================================================ */
.nimbus-bacia-path {
    pointer-events: stroke !important;
}

/* Material 3 inspired Open-Meteo schedule card */
.meteo-schedule-card {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    color: var(--text);
    padding: 0;
}

.meteo-schedule-card__supporting {
    color: var(--text-secondary);
    font-size: 0.78rem;
    line-height: 1.45;
    margin: 0 0 12px;
}

.meteo-schedule-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.meteo-schedule-item {
    align-items: center;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    display: flex;
    gap: 10px;
    justify-content: space-between;
    min-height: 48px;
    padding: 8px 10px;
}

.meteo-schedule-item--fallback {
    background: transparent;
}

.meteo-schedule-item__model {
    color: var(--text);
    font-size: 0.83rem;
    font-weight: 700;
    letter-spacing: 0.005em;
}

.meteo-schedule-item__chips {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    justify-content: flex-end;
}

.meteo-schedule-chip,
.meteo-schedule-note {
    align-items: center;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    display: inline-flex;
    font-size: 0.72rem;
    font-weight: 700;
    min-height: 28px;
    padding: 0 9px;
    white-space: nowrap;
}

.meteo-schedule-chip {
    background: transparent;
    color: var(--text);
}

.meteo-schedule-chip--tonal,
.meteo-schedule-note {
    background: transparent;
    color: var(--text-secondary);
}

body[data-radar-only="1"] #radarOperationalLegend.visible,
body[data-radar-only="1"] #radarOperationalLegend.is-mobile-shelf-open {
    z-index: 1305;
    pointer-events: auto;
}