/* As fontes são auto-hospedadas em css/fonts.css (carregado antes deste arquivo
   no index.html). Sem @import de CDN: o app funciona offline, como o Leaflet. */

/* ==========================================================================
   CSS SYSTEM VARIABLES & TOKENS
   --------------------------------------------------------------------------
   :root        = Tema ESCURO refinado (grafite + roxo)
   .light-theme = Tema CLARO comercial (padrão da aplicação)
   ========================================================================== */
:root {
    /* Fonte do SISTEMA no texto de interface. Numa ferramenta operacional a
       tipografia não deve ter opinião própria: a nativa é a que o operador já
       lê o dia inteiro, custa zero byte e não puxa atenção para si.
       --font-display existe só por compatibilidade com o CSS antigo: aponta
       para a mesma família, não há mais uma fonte de exibição separada. */
    --font-primary: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-display: var(--font-primary);
    --font-mono: 'IBM Plex Mono', ui-monospace, "Cascadia Mono", Consolas, monospace;

    /* ---- ESCALA DE ESPAÇO (múltiplos de 4px) ---- */
    --sp-1: 0.25rem;   /* 4  */
    --sp-2: 0.5rem;    /* 8  */
    --sp-3: 0.75rem;   /* 12 */
    --sp-4: 1rem;      /* 16 */
    --sp-5: 1.5rem;    /* 24 */
    --sp-6: 2rem;      /* 32 */
    --sp-7: 3rem;      /* 48 */

    /* ---- ESCALA TIPOGRÁFICA ----
       Console: base de UI 13px e nada de tamanho grande. O maior número da
       tela é o KPI, a 20px — em ferramenta de operação a hierarquia vem de
       peso e cor, não de tamanho. */
    --fs-xs:    0.6875rem;  /* 11   — rótulo de cabeçalho, eyebrow */
    --fs-sm:    0.78125rem; /* 12.5 — legenda, nota                */
    --fs-data:  0.75rem;    /* 12   — número/data em mono          */
    --fs-body:  0.8125rem;  /* 13   — corpo e tabela               */
    --fs-md:    0.90625rem; /* 14.5 — título de card               */
    --fs-lg:    1.1875rem;  /* 19   — subtítulo de destaque        */
    --fs-xl:    2.375rem;   /* 38   — número herói                 */
    --fs-2xl:   1.875rem;   /* 30   — título de view               */

    /* ---- RAIO ---- */
    --r-sm: 8px;
    --r-md: 11px;
    --r-lg: 18px;
    --r-pill: 999px;

    /* Azul-quase-preto com atmosfera. As superfícies são translúcidas sobre o
       fundo, e o fundo tem brilhos difusos — é o que dá profundidade sem
       precisar de backdrop-filter, que é caro de renderizar e trava em celular. */
    --bg-main: #070a12;
    --bg-card: rgba(23, 32, 52, 0.72);
    --bg-card-2: rgba(12, 18, 32, 0.72);
    --bg-sidebar: rgba(14, 20, 35, 0.78);
    --bg-header: rgba(7, 10, 18, 0.85);
    --border-color: rgba(255, 255, 255, 0.07);
    --border-hover: rgba(255, 255, 255, 0.16);

    /* Atmosfera do fundo (aplicada em body). */
    --bg-glow-1: rgba(124, 58, 237, 0.32);
    --bg-glow-2: rgba(251, 146, 60, 0.16);
    --bg-glow-3: rgba(168, 85, 247, 0.16);

    --scrollbar-thumb: rgba(255, 255, 255, 0.14);
    --scrollbar-track: transparent;

    /* Azul elétrico é o acento de interface; o roxo de marca vira o segundo
       tom dos gradientes (anéis, barras), mantendo a assinatura da Netway. */
    --color-primary: #8b5cf6;
    --color-primary-text: #c4b5fd;
    --color-primary-glow: rgba(139, 92, 246, 0.45);
    --color-secondary: #a855f7;
    --ring-hole: #0c1220;

    /* Cores de VISUALIZAÇÃO (anel, barra, ponto). Separadas das de texto:
       elemento gráfico precisa de 3:1, texto de 4.5:1 — usar a mesma variável
       para os dois obriga a escolher o pior dos dois mundos. */
    --viz-success: #34d399;
    --viz-warning: #fbbf24;
    --viz-danger:  #f87171;
    --viz-info:    #818cf8;
    --viz-accent:  #fb923c;
    --color-accent-grad: linear-gradient(145deg, #8b5cf6, #6d28d9);
    --color-text-main: #eef2f8;
    --color-text-muted: #8b9bb4;
    --color-text-dim: #5f6f88;
    --color-text-dark: #070a12;

    /* Primary Button Text Contrast */
    --color-btn-primary-text: #ffffff;

    /* Status Colors */
    --color-success: #34d399;
    --color-success-bg: rgba(52, 211, 153, 0.14);
    --color-success-border: rgba(52, 211, 153, 0.3);

    --color-warning: #fbbf24;
    --color-warning-bg: rgba(251, 191, 36, 0.14);
    --color-warning-border: rgba(251, 191, 36, 0.3);

    --color-danger: #f87171;
    --color-danger-bg: rgba(248, 113, 113, 0.14);
    --color-danger-border: rgba(248, 113, 113, 0.32);

    --color-info: #60a5fa;
    --color-info-bg: rgba(96, 165, 250, 0.14);
    --color-info-border: rgba(96, 165, 250, 0.32);

    --bg-input: rgba(255, 255, 255, 0.04);
    --bg-select: rgba(255, 255, 255, 0.04);
    --color-input-text: #eef2f8;

    --bg-subtle: rgba(255, 255, 255, 0.025);
    --bg-btn-secondary: rgba(255, 255, 255, 0.06);
    --bg-btn-secondary-hover: rgba(255, 255, 255, 0.11);
    --bg-table-hover: rgba(139, 92, 246, 0.08);
    --bg-row-alt: transparent;

    --shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.28);
    --shadow-md: 0 10px 34px rgba(0, 0, 0, 0.34);
    --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.45);

    --transition-smooth: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-fast: all 0.15s ease;
}

/* ==========================================================================
   WHITE/LIGHT THEME VARIABLES OVERRIDES
   ========================================================================== */
.light-theme {
    /* Mesmo vocabulário de console, em superfície clara: cinza neutro (sem tom
       roxo), linha no lugar de sombra, quina no lugar de canto redondo. */
    --bg-main: #f4f6fa;
    --bg-card: #ffffff;
    --bg-card-2: #fbfcfe;   /* sem isto o degradê do card herdaria o tom escuro */
    --bg-sidebar: #0d1220;
    --bg-header: rgba(255, 255, 255, 0.92);
    --border-color: #e3e7ee;
    --border-hover: #c3cbd8;

    /* Atmosfera bem mais discreta no claro: o brilho existe, mas não lava o
       texto. Mesma composição de cores do escuro, em opacidade baixa. */
    --bg-glow-1: rgba(124, 58, 237, 0.11);
    --bg-glow-2: rgba(251, 146, 60, 0.07);
    --bg-glow-3: rgba(168, 85, 247, 0.08);

    --color-text-dim: #97a1b3;
    --color-accent-grad: linear-gradient(145deg, #3b82f6, #2563eb);

    --scrollbar-thumb: #cfd3da;
    --scrollbar-track: transparent;

    /* Acento — roxo de marca Netway (ver nota no :root) */
    --color-primary: #6d28d9;
    --color-primary-text: #6d28d9;  /* 7.2:1 sobre branco */
    --color-primary-glow: rgba(109, 40, 217, 0.22);
    --color-secondary: #9333ea;
    --ring-hole: #ffffff;

    /* Vivas no claro também: aqui elas nunca são texto (ver nota no :root). */
    --viz-success: #10b981;
    --viz-warning: #f59e0b;
    --viz-danger:  #ef4444;
    --viz-info:    #6366f1;
    --viz-accent:  #f97316;
    --color-text-main: #111827;
    --color-text-muted: #5b6472;   /* 6.6:1 sobre branco */
    --color-text-dark: #ffffff;

    /* Primary Button Text Contrast for Light Theme */
    --color-btn-primary-text: #ffffff;

    --bg-input: #ffffff;
    --bg-select: #ffffff;
    --color-input-text: #1c1726;

    /* Status Badges (texto forte sobre tinta suave).
       Os três tons foram escurecidos para passar em 4.5:1 sobre a própria
       tinta E sobre o branco do card — o badge usa 11px e a coluna "Dias
       Restantes" pinta o texto direto no fundo, então nenhum dos dois se
       qualifica como "texto grande". Antes: #16a34a (2.96), #d97706 (2.88),
       #e11d48 (4.12). O azul de info já passava e ficou como estava. */
    --color-success: #128040;   /* 4.50 sobre tinta · 5.02 sobre branco */
    --color-success-bg: #e8f6ee;
    --color-success-border: #c9ebd6;

    --color-warning: #ab5a04;   /* 4.52 sobre tinta · 5.00 sobre branco */
    --color-warning-bg: #fdf2e2;
    --color-warning-border: #f8e3c2;

    --color-danger: #d11640;    /* 4.72 sobre tinta · 5.38 sobre branco */
    --color-danger-bg: #fdecef;
    --color-danger-border: #f8cdd6;

    --color-info: #2563eb;
    --color-info-bg: #eaf1fe;
    --color-info-border: #cfddfb;

    --bg-subtle: #f2f4f7;
    --bg-btn-secondary: #ffffff;
    --bg-btn-secondary-hover: #f2f4f7;
    --bg-table-hover: #f5f7fa;
    --bg-row-alt: #fafbfc;

    --shadow-sm: none;
    --shadow-md: 0 1px 3px rgba(15, 23, 42, 0.08);
    --shadow-lg: 0 8px 24px rgba(15, 23, 42, 0.1);
}

/* ==========================================================================
   RESET & BASE STYLES
   ========================================================================== */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-primary);
    font-size: var(--fs-body);
    background-color: var(--bg-main);
    color: var(--color-text-main);
    overflow-x: hidden;
    line-height: 1.5;
    background-image:
        radial-gradient(900px 520px at 88% -6%, var(--bg-glow-1), transparent 62%),
        radial-gradient(760px 520px at 104% 76%, var(--bg-glow-2), transparent 60%),
        radial-gradient(700px 460px at -8% 108%, var(--bg-glow-3), transparent 62%);
    background-attachment: fixed;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
}
::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border: 2px solid var(--scrollbar-track);
    border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--color-primary);
}

/* ==========================================================================
   LAYOUT STRUCTURE
   ========================================================================== */
.app-container {
    display: flex;
    min-height: 100vh;
    /* 100vw inclui a barra de rolagem: com ela na tela, o container fica ~10px
       mais largo que a área visível e empurra o layout. 100% respeita. */
    width: 100%;
    position: relative;
}

/* --- SIDEBAR --- */
.sidebar {
    width: 280px;
    background-color: var(--bg-sidebar);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-shrink: 0;
    flex-direction: column;
    padding: 2rem 1.5rem;
    position: fixed;
    height: 100vh;
    z-index: 100;
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), padding 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s ease;
}

.brand-section {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 3rem;
}

.nav-menu {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex-grow: 1;
}

.nav-item {
    width: 100%;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.85rem 1.25rem;
    color: var(--color-text-muted);
    text-decoration: none;
    border-radius: 8px;
    font-weight: 500;
    font-size: 0.95rem;
    transition: var(--transition-smooth);
    border: 1px solid transparent;
}

.nav-link svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    transition: var(--transition-fast);
}

.nav-link:hover {
    color: #ffffff;
    background-color: hsla(264, 18%, 15%, 0.6);
    border-color: hsla(264, 18%, 22%, 0.4);
}

.nav-link.active {
    color: var(--color-primary);
    background-color: var(--color-primary-glow);
    border-color: rgba(124, 58, 237, 0.25);
    box-shadow: inset 0 0 8px rgba(124, 58, 237, 0.08);
}

.nav-link.active svg {
    stroke: var(--color-primary);
}

.sidebar-footer {
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* --- MAIN CONTENT AREA --- */
.main-wrapper {
    flex-grow: 1;
    margin-left: 280px;
    padding: var(--sp-6);
    display: flex;
    flex-direction: column;
    min-width: 0;
    transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.main-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--sp-5);
    padding-bottom: var(--sp-4);
    border-bottom: 1px solid var(--border-color);
}

.header-title-container h1 {
    font-family: var(--font-display);
    font-size: var(--fs-2xl);
    font-weight: 700;
    color: var(--color-text-main);
    letter-spacing: -0.02em;
    line-height: 1.15;
}

.header-title-container p {
    font-size: var(--fs-body);
    color: var(--color-text-muted);
    margin-top: 0.15rem;
}

.header-actions {
    display: flex;
    gap: 1rem;
    align-items: center;
}

/* ==========================================================================
   COMMON COMPONENTS
   ========================================================================== */
.card {
    background: linear-gradient(160deg, var(--bg-card), var(--bg-card-2));
    border: 1px solid var(--border-color);
    border-radius: var(--r-lg);
    padding: var(--sp-5);
    box-shadow: var(--shadow-md);
    transition: var(--transition-fast);
}

.card:hover {
    border-color: var(--border-hover);
}

/* O hover do card é feedback de leitura, não de clique: só cards realmente
   acionáveis (.kpi-clickable, .tower-card) mudam a borda para o roxo. */
.card:hover {
    box-shadow: var(--shadow-md);
}

/* Typography elements */
.section-title {
    font-size: var(--fs-md);
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--color-text-main);
    margin-bottom: var(--sp-4);
    color: var(--color-text-main);
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}

/* ---- DADO TÉCNICO ----
   Data, prazo, coordenada, azimute, quantidade: tudo em mono com numerais de
   largura fixa, para que os números alinhem em coluna e possam ser comparados
   de relance. É o que faz a interface parecer instrumento e não formulário. */
.num {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
    letter-spacing: -0.02em;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    padding: 0.5rem 0.9rem;
    font-weight: 500;
    font-size: var(--fs-body);
    line-height: 1.4;
    border-radius: var(--r-md);
    cursor: pointer;
    transition: var(--transition-smooth);
    border: 1px solid transparent;
}

.btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.btn-primary {
    background: var(--color-accent-grad);
    color: var(--color-btn-primary-text);
    box-shadow: 0 6px 18px var(--color-primary-glow);
}

.btn-primary:hover {
    filter: brightness(1.08);
    box-shadow: 0 8px 24px var(--color-primary-glow);
}

.btn-secondary {
    background-color: var(--bg-btn-secondary);
    border-color: var(--border-color);
    color: var(--color-text-main);
}

.btn-secondary:hover {
    background-color: var(--bg-btn-secondary-hover);
    border-color: var(--color-text-muted);
}

.btn-danger {
    background-color: var(--color-danger-bg);
    border-color: var(--color-danger-border);
    color: var(--color-danger);
}

.btn-danger:hover {
    background-color: var(--color-danger);
    color: #ffffff;
}

/* Status Badges */
/* ---- MARCA DE ESTADO ----
   Deixou de ser pílula colorida. Uma linha da tabela chegava a ter quatro
   pílulas saturadas competindo entre si — é o que mais fazia a interface
   parecer amadora. Agora é um quadrado de 6px na cor do estado + a palavra em
   texto normal: a cor continua permitindo varrer a coluna de relance, mas
   para de gritar. O nome da classe segue `badge` porque o HTML e o JS a
   referenciam em dezenas de lugares. */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    font-size: var(--fs-body);
    font-weight: 400;
    line-height: 1.4;
    white-space: nowrap;
    text-transform: none;
    letter-spacing: 0;
    color: var(--color-text-main);
}

.badge::before {
    content: '';
    width: 7px;
    height: 7px;
    flex: 0 0 auto;
    border-radius: 50%;
    background-color: var(--color-text-muted);
    box-shadow: 0 0 9px currentColor;
    color: var(--color-text-muted);
}

/* O brilho do ponto usa currentColor, então cada modificador só precisa
   definir a cor — o halo acompanha sozinho. */
.badge-sim::before, .badge-ok::before, .badge-baixa::before, .badge-baixo::before { color: var(--color-success); }
.badge-pendente::before, .badge-media::before, .badge-média::before,
.badge-médio::before, .badge-medio::before, .badge-pendência::before { color: var(--color-warning); }
.badge-em_andamento::before, .badge-retorno_necessário::before { color: var(--color-info); }
.badge-cancelado::before, .badge-alta::before, .badge-alto::before,
.badge-abandonado::before, .badge-não::before { color: var(--color-danger); }

/* Os modificadores agora colorem só o QUADRADO. O texto fica sempre na cor
   normal, então nenhum deles precisa passar em contraste como texto colorido —
   o problema que vinha se arrastando desaparece por construção. */
.badge-sim::before, .badge-ok::before, .badge-baixa::before, .badge-baixo::before {
    background-color: var(--color-success);
}

.badge-pendente::before, .badge-media::before, .badge-média::before,
.badge-médio::before, .badge-medio::before, .badge-pendência::before {
    background-color: var(--color-warning);
}

.badge-em_andamento::before, .badge-retorno_necessário::before {
    background-color: var(--color-info);
}

.badge-cancelado::before, .badge-alta::before, .badge-alto::before,
.badge-abandonado::before, .badge-não::before {
    background-color: var(--color-danger);
}

/* Responsável não é ESTADO, é rótulo: vira texto puro, sem marca nenhuma.
   Era justamente o que enchia a linha de pílula sem significado. */
.badge-vst::before, .badge-cliente::before,
.badge-terceiro::before, .badge-netway::before {
    display: none;
}

.badge-vst, .badge-cliente, .badge-terceiro, .badge-netway {
    gap: 0;
    color: var(--color-text-main);
}

/* ---- PRIORIDADE ----
   Também não é estado: é uma ordenação de três níveis. Pintar "BAIXA" de verde
   dizia "está tudo bem", que não é o que prioridade baixa significa. Só ALTA
   recebe cor, porque é a única que precisa saltar numa varredura. */
.prio {
    color: var(--color-text-main);
}

.prio-alta, .prio-alto {
    color: var(--color-danger);
    font-weight: 500;
}

.prio-baixa, .prio-baixo {
    color: var(--color-text-muted);
}

/* ==========================================================================
   ABA: DASHBOARD VIEW
   ========================================================================== */
/* ==========================================================================
   PAINEL — WIDGETS
   Cartões translúcidos sobre o fundo com atmosfera. Cada widget responde a uma
   pergunta só; nenhum depende de outro para fazer sentido.
   ========================================================================== */
.wgrid {
    display: grid;
    grid-template-columns: 1.32fr 1fr;
    gap: var(--sp-4);
    align-items: start;
    margin-bottom: var(--sp-5);
}

.wg {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.wg__eyebrow {
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
}

.wg__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--sp-3);
    margin-bottom: var(--sp-4);
}

.wg__title {
    font-size: var(--fs-md);
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--color-text-main);
}

.chip {
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--border-color);
    padding: 0.3rem 0.7rem;
    border-radius: var(--r-pill);
    white-space: nowrap;
}

.filter-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.15rem;
    height: 1.15rem;
    padding: 0 0.3rem;
    margin-left: 0.1rem;
    border-radius: var(--r-pill);
    background: var(--color-primary);
    color: #fff;
    font-size: var(--fs-xs);
    font-weight: 600;
}

.chip--btn {
    cursor: pointer;
    font-family: inherit;
    font-size: var(--fs-sm);
    color: var(--color-primary-text);
}

.chip--btn:hover {
    background: rgba(255, 255, 255, 0.11);
}

/* --- herói --- */
.wg--hero {
    position: relative;
    overflow: hidden;
    min-height: 190px;
    justify-content: flex-start;
}

.wg__hero-title {
    font-size: var(--fs-2xl);
    font-weight: 600;
    letter-spacing: -0.02em;
    margin: 0.35rem 0 0.5rem;
    color: var(--color-text-main);
}

.wg__hero-sub {
    font-size: var(--fs-body);
    color: var(--color-text-muted);
    max-width: 15rem;
    line-height: 1.55;
}

.wg__spark {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 66%;
    height: 118px;
    pointer-events: none;
}

.wg__spark svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Valor acumulado nos marcos. Vai em HTML sobre o SVG porque o gráfico é
   esticado (preserveAspectRatio="none") e texto dentro dele sairia deformado. */
.wg__spark-tag {
    position: absolute;
    transform: translate(-50%, -125%);
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.1;
    white-space: nowrap;
    pointer-events: none;
}

.wg__spark-tag b {
    font-size: var(--fs-body);
    font-weight: 600;
    color: var(--color-text-main);
}

.wg__spark-tag i {
    font-style: normal;
    font-size: var(--fs-xs);
    font-family: var(--font-mono);
    color: var(--color-text-dim);
}

/* O último marco fica na borda direita: alinhado ao centro, metade dele
   ficaria fora do card. Encosta o lado direito no ponto e ainda recua 10px,
   para não ficar colado na borda. */
.wg__spark-tag--fim {
    transform: translate(-100%, -125%);
    align-items: flex-end;
    margin-left: -10px;
}

/* Rótulo por baixo do ponto, quando o ponto está alto demais para caber o
   rótulo acima dele. */
.wg__spark-tag--abaixo {
    transform: translate(-50%, 30%);
}

.wg__spark-tag--fim.wg__spark-tag--abaixo {
    transform: translate(-100%, 30%);
}

/* A legenda da curva mora no bloco de texto, não sobre o gráfico: dentro da
   área do gráfico ela disputava espaço com os rótulos, que mudam de posição
   conforme a curva sobe. */
.wg__hero-cap {
    margin-top: var(--sp-3);
    font-size: var(--fs-xs);
    color: var(--color-text-dim);
    max-width: 15rem;
}

/* --- anel --- */
.wg__ringrow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    flex-wrap: wrap;
}

.ring {
    --pct: 0;
    width: 122px;
    height: 122px;
    flex: 0 0 auto;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: conic-gradient(from 200deg,
        var(--color-primary) 0deg,
        var(--color-secondary) calc(var(--pct) * 3.6deg),
        rgba(255, 255, 255, 0.05) calc(var(--pct) * 3.6deg) 360deg);
    filter: drop-shadow(0 0 16px var(--color-primary-glow));
}

.ring--danger {
    background: conic-gradient(from 200deg,
        var(--color-danger) 0deg,
        #fb923c calc(var(--pct) * 3.6deg),
        rgba(255, 255, 255, 0.05) calc(var(--pct) * 3.6deg) 360deg);
    filter: drop-shadow(0 0 14px rgba(248, 113, 113, 0.45));
}

.ring__hole {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: var(--ring-hole);
    display: grid;
    place-items: center;
    text-align: center;
}

.ring__hole b {
    font-size: var(--fs-lg);
    font-weight: 600;
    display: block;
}

.ring__hole s {
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
    text-decoration: none;
}

.wg__big {
    font-size: var(--fs-xl);
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1;
}

.wg__big i {
    font-size: 0.55em;
    font-style: normal;
    color: var(--color-text-muted);
}

.wg__note {
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
    margin-top: 0.4rem;
}

/* Grade de colunas iguais, não linha flexível: em flex cada item tinha a
   largura do próprio rótulo ("Visitas" é bem mais curto que "Pendentes"), então
   os números nasciam em posições irregulares e a fileira parecia torta. */
.wg__kv {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-2);
    margin-top: var(--sp-4);
}

.wg__kvi {
    background: none;
    border: 0;
    padding: 0;
    font-family: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.wg__kvi span {
    display: block;
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
}

.wg__kvi b {
    font-size: var(--fs-lg);
    font-weight: 600;
}

.wg__kvi:hover b {
    color: var(--color-primary-text);
}

.wg__kvi--warn {
    color: var(--color-warning);
}

/* --- lista de alertas --- */
.wg__list {
    display: flex;
    flex-direction: column;
    /* O ponto de status tem halo de 9px: sem esta folga ele encosta na borda
       do card e o brilho fica raspado. */
    padding-left: 3px;
}

.wg__li {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.55rem 0;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    cursor: pointer;
    background: none;
    width: 100%;
    font-family: inherit;
    color: inherit;
    text-align: left;
}

.wg__li:last-child {
    border-bottom: 0;
}

.wg__li:hover .wg__li-name {
    color: var(--color-primary-text);
}

.wg__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: 0 0 auto;
    background: currentColor;
    box-shadow: 0 0 9px currentColor;
}

.wg__li-name {
    flex: 1;
    font-size: var(--fs-body);
    color: var(--color-text-main);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wg__li-val {
    font-size: var(--fs-data);
    font-family: var(--font-mono);
    color: var(--color-text-muted);
}

.wg__more {
    margin-top: var(--sp-3);
    padding-top: var(--sp-3);
    border-top: 1px solid var(--border-color);
    background: none;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    width: 100%;
    text-align: left;
    font-family: inherit;
    font-size: var(--fs-sm);
    color: var(--color-primary-text);
    cursor: pointer;
}

.wg__more:hover { text-decoration: underline; }

.wg__empty {
    padding: var(--sp-5) 0;
    text-align: center;
    font-size: var(--fs-body);
    color: var(--color-text-muted);
}

/* --- barras --- */
.wg__bars {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--sp-3);
    height: 148px;
}

.wg__bar {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 0.6rem;
    height: 100%;
    min-width: 0;
    padding: 0.25rem 0;
}

/* A barra vive numa pista própria: sem ela, a altura percentual seria
   calculada sobre a coluna inteira (valor + barra + rótulo) e a barra
   invadiria o texto. */
.wg__bar-track {
    flex: 1;
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    min-height: 0;
}

.wg__bar-fill {
    width: 10px;
    border-radius: var(--r-pill);
    background: linear-gradient(180deg, var(--color-primary-text), rgba(139, 92, 246, 0.15));
    box-shadow: 0 0 12px rgba(167, 139, 250, 0.5);
    transition: height 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.wg__bar-label {
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.wg__bar-value {
    font-size: var(--fs-data);
    font-family: var(--font-mono);
    color: var(--color-text-main);
}

/* --- medidores --- */
.wg__meters {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.wg__meter {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    font-size: var(--fs-sm);
}

.wg__meter-name {
    width: 6.5rem;
    flex: 0 0 auto;
    color: var(--color-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wg__meter-track {
    flex: 1;
    height: 5px;
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, 0.07);
    overflow: hidden;
}

.wg__meter-fill {
    display: block;
    height: 100%;
    border-radius: var(--r-pill);
    background: linear-gradient(90deg, var(--color-primary), var(--color-primary-text));
    box-shadow: 0 0 10px rgba(167, 139, 250, 0.55);
    transition: width 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.wg__meter-val {
    width: 2.6rem;
    text-align: right;
    font-family: var(--font-mono);
    font-size: var(--fs-data);
}

/* --- eventos --- */
.wg__events {
    display: flex;
    flex-direction: column;
}

.wg__ev {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.6rem 0;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    background: none;
    width: 100%;
    font-family: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.wg__ev:last-child {
    border-bottom: 0;
}

.wg__ev:hover .wg__ev-name {
    color: var(--color-primary-text);
}

.wg__ev-date {
    width: 2.6rem;
    text-align: center;
    flex: 0 0 auto;
}

.wg__ev-date b {
    display: block;
    font-size: var(--fs-md);
    font-weight: 600;
    font-family: var(--font-mono);
}

.wg__ev-date span {
    font-size: 0.6rem;
    color: var(--color-text-dim);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.wg__ev-info {
    flex: 1;
    min-width: 0;
}

.wg__ev-name {
    display: block;
    font-size: var(--fs-body);
    font-weight: 500;
    color: var(--color-text-main);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wg__ev-meta {
    font-size: var(--fs-data);
    color: var(--color-text-muted);
    font-family: var(--font-mono);
}

/* --- legenda de vencimento --- */
.wg__legend {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
}

.wg__legend-item {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
    background: none;
    border: 0;
    padding: 0.15rem 0;
    font-family: inherit;
    cursor: pointer;
    width: 100%;
    text-align: left;
}

.wg__legend-item:hover {
    color: var(--color-text-main);
}

.wg__legend-name {
    flex: 1;
}

.wg__legend-count {
    font-family: var(--font-mono);
    color: var(--color-text-main);
}

/* ==========================================================================
   PAINEL — ALINHAMENTO, AFORDÂNCIA E PREVIEW
   ========================================================================== */

/* Cards da MESMA linha terminam na mesma altura. Com align-items:start cada um
   parava onde o conteúdo acabava, e a grade ficava com a base serrilhada. */
.wgrid {
    align-items: stretch;
}

/* O conteúdo distribui a folga em vez de empilhar tudo em cima e deixar um
   vazio embaixo — é o que fazia "Por responsável" (2 linhas) parecer quebrado
   ao lado de um card alto. */
/* Sem rolagem interna, a lista tem a altura do seu conteúdo. Com `flex: 1 1 0`
   ela era espremida contra a altura do card e, como é um flex column, os
   FILHOS encolhiam junto — o atalho "ver as outras", sendo o menor item da
   lista, era comprimido até desaparecer, mesmo estando no DOM. */
.wg > .wg__list,
.wg > .wg__events {
    flex: 0 0 auto;
}

.wg__li,
.wg__ev,
.wg__more {
    flex-shrink: 0;
}

/* Gráficos NÃO: `flex: 1` zera a flex-basis, e num card sem folga a área da
   barra colapsava para a altura mínima do conteúdo. Cresce, nunca encolhe. */
.wg > .wg__bars {
    flex: 1 0 auto;
    min-height: 148px;
}

.wg > .wg__meters {
    flex: 1 0 auto;
}

.wg__meters {
    justify-content: center;
}

/* --- afordância de clique -------------------------------------------------
   Tudo que responde a clique compartilha o mesmo comportamento: sobe 1px,
   ganha luz e mostra o cursor. Consistência aqui é o que faz o painel parecer
   acabado em vez de um amontoado de widgets com regras próprias. */
.is-clickable {
    cursor: pointer;
    transition: transform 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}

.is-clickable:hover {
    transform: translateY(-1px);
}

.is-clickable:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 3px;
    border-radius: var(--r-sm);
}

/* Números de apoio: o pulso lento diz "isto é um botão" sem precisar de
   moldura. Some inteiro em prefers-reduced-motion (ver bloco no fim). */
.wg__kvi b {
    position: relative;
    transition: color 0.15s ease, text-shadow 0.4s ease;
}

.wg__kvi::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -3px;
    height: 1px;
    background: currentColor;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.wg__kvi { position: relative; }
.wg__kvi:hover::after,
.wg__kvi:focus-visible::after { opacity: 0.5; }

.wg__kvi b { animation: pulsoClique 3.2s ease-in-out infinite; }
.wg__kvi:nth-child(2) b { animation-delay: 0.35s; }
.wg__kvi:nth-child(3) b { animation-delay: 0.7s; }
.wg__kvi:hover b { animation: none; color: var(--color-primary-text); }

@keyframes pulsoClique {
    0%, 82%, 100% { text-shadow: none; }
    91%           { text-shadow: 0 0 14px currentColor; }
}

/* --- anel em SVG ---------------------------------------------------------- */
.ring-svg {
    width: 132px;
    height: 132px;
    flex: 0 0 auto;
    overflow: visible;
}

.ring-svg__seg {
    cursor: pointer;
    transition: opacity 0.15s ease, stroke-width 0.15s ease;
    transform-origin: 50% 50%;
}

.ring-svg:hover .ring-svg__seg { opacity: 0.4; }
.ring-svg .ring-svg__seg:hover,
.ring-svg .ring-svg__seg:focus-visible {
    opacity: 1;
    stroke-width: 13;
    outline: none;
}

.ring-svg__center {
    text-anchor: middle;
    pointer-events: none;
}

.ring-svg__value {
    font-family: var(--font-mono);
    font-size: 19px;
    font-weight: 600;
    fill: var(--color-text-main);
}

.ring-svg__label {
    font-size: 10px;
    fill: var(--color-text-muted);
}

/* --- preview inline ------------------------------------------------------- */
.wg__preview {
    margin-top: var(--sp-3);
    padding-top: var(--sp-3);
    border-top: 1px solid var(--border-color);
    min-height: 3.2rem;
}

.wg__preview-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--sp-2);
    margin-bottom: 0.35rem;
}

.wg__preview-title {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--color-text-main);
}

.wg__preview-hint {
    font-size: var(--fs-sm);
    color: var(--color-text-dim);
}

.wg__preview-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.wg__tag {
    font-size: var(--fs-data);
    font-family: var(--font-mono);
    color: var(--color-text-muted);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-color);
    border-radius: var(--r-sm);
    padding: 0.15rem 0.45rem;
    cursor: pointer;
    max-width: 12rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wg__tag:hover {
    color: var(--color-text-main);
    border-color: var(--border-hover);
}

.light-theme .wg__tag { background: rgba(15, 23, 42, 0.04); }

/* --- barras clicáveis ----------------------------------------------------- */
.wg__bar {
    border: 0;
    background: none;
    font-family: inherit;
    color: inherit;
    padding: 0;
    border-radius: var(--r-sm);
}

.wg__bar:hover .wg__bar-label,
.wg__bar:focus-visible .wg__bar-label { color: var(--color-text-main); }

.wg__bar:hover .wg__bar-fill { filter: brightness(1.2); }

/* Categoria zerada continua ocupando a coluna: some a barra, fica a base.
   Sem isto o traço solto no meio da altura parecia sujeira de renderização. */
.wg__bar-fill--zero {
    height: 3px !important;
    background: var(--border-color) !important;
    box-shadow: none !important;
}

/* --- medidores clicáveis -------------------------------------------------- */
.wg__meter {
    border: 0;
    background: none;
    font-family: inherit;
    color: inherit;
    padding: 0.1rem 0;
    width: 100%;
    text-align: left;
    border-radius: var(--r-sm);
}

.wg__meter:hover .wg__meter-name,
.wg__meter:focus-visible .wg__meter-name { color: var(--color-text-main); }

.wg__meter:hover .wg__meter-fill { filter: brightness(1.18); }

/* --- rolagem discreta dentro dos widgets ---------------------------------- */
.wg__list::-webkit-scrollbar,
.wg__events::-webkit-scrollbar,
.wg__preview-list::-webkit-scrollbar {
    width: 6px;
}

.wg__list::-webkit-scrollbar-thumb,
.wg__events::-webkit-scrollbar-thumb,
.wg__preview-list::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border: 0;
    border-radius: 999px;
}

@media (prefers-reduced-motion: reduce) {
    .wg__kvi b { animation: none; }
    .is-clickable:hover { transform: none; }
}

@media (max-width: 1100px) {
    .wgrid {
        grid-template-columns: 1fr;
    }
}

/* Dashboard Analytics Grid */
.analytics-grid {
    display: grid;
    grid-template-columns: 2fr 1.2fr;
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}

/* Charts Containers */
.chart-card {
    display: flex;
    flex-direction: column;
}

.chart-placeholder {
    height: 240px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* Alert List (Dashboard right panel) */
.alerts-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-height: 240px;
    overflow-y: auto;
}

.alert-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem;
    border-radius: 8px;
    background-color: var(--bg-subtle);
    border: 1px solid var(--border-color);
}

.alert-item.critical {
    border-left: 3px solid var(--color-danger);
}

.alert-item.warning {
    border-left: 3px solid var(--color-warning);
}

.alert-text-container {
    flex-grow: 1;
    min-width: 0;
}

.alert-item-title {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--color-text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.alert-item-subtitle {
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

/* ==========================================================================
   ABA: GENERAL TOWERS (LIST & SEARCH)
   ========================================================================== */
.controls-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.search-container {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background-color: var(--bg-select);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.5rem 1rem;
    flex-grow: 1;
    max-width: 400px;
    transition: var(--transition-fast);
}

.search-container:focus-within {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-glow);
}

.search-container input {
    background: none;
    border: none;
    outline: none;
    color: var(--color-input-text);
    font-size: 0.9rem;
    width: 100%;
}

.search-container input::placeholder {
    color: var(--color-text-muted);
}

.search-container svg {
    color: var(--color-text-muted);
    width: 18px;
    height: 18px;
}

.filter-group {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    flex-wrap: wrap;
}

.select-custom {
    background-color: var(--bg-select);
    border: 1px solid var(--border-color);
    color: var(--color-text-main);
    border-radius: 8px;
    padding: 0.55rem 1rem;
    font-size: 0.85rem;
    font-weight: 500;
    outline: none;
    cursor: pointer;
    transition: var(--transition-fast);
}

.select-custom:focus {
    border-color: var(--color-primary);
}

/* Grid & Table Container */
.data-table-container {
    overflow-x: auto;
    width: 100%;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

.data-table th {
    font-family: var(--font-primary);
    font-weight: 600;
    font-size: var(--fs-xs);
    color: var(--color-text-muted);
    padding: 0.5625rem 1rem;
    background-color: var(--bg-subtle);
    border-bottom: 1px solid var(--border-color);
    text-transform: uppercase;
    letter-spacing: 0.09em;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.data-table th:first-child { border-top-left-radius: var(--r-sm); }
.data-table th:last-child  { border-top-right-radius: var(--r-sm); }

.data-table th:hover {
    color: var(--color-primary-text);
}

.data-table th span.sort-indicator {
    margin-left: 0.25rem;
    display: inline-block;
    font-size: 0.65rem;
    opacity: 0.55;
}

.data-table td {
    padding: 0.5rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.045);
    font-size: var(--fs-body);
    vertical-align: middle;
    color: #c3cfe0;
}

/* A primeira coluna é a identidade da linha (nome da torre, da unidade, do
   usuário). Sem isto, num navegador em meia tela "Campo Novo do Parecis" quebra
   em quatro linhas de uma palavra cada. Melhor rolar a tabela na horizontal —
   que o .data-table-container já faz — do que empilhar o nome na vertical. */
.data-table td:first-child {
    white-space: nowrap;
}

/* Datas, prazos e contagens dentro de tabela sempre em mono tabular. */
.data-table td .num,
.data-table td.num {
    font-size: var(--fs-data);
}

.data-table tbody tr {
    transition: var(--transition-fast);
}

.data-table tbody tr:hover {
    background-color: var(--bg-table-hover);
}

/* Nome de torre NÃO é código de site. A base real mistura código
   ("CPD CZN VST") com nome próprio ("Fazenda Carpedeam"), e nome próprio em
   monoespaçada fica estranho — parece dado de máquina, não lugar. Fica na
   fonte de texto; o mono segue reservado a data, prazo e coordenada. */
.tower-id {
    font-weight: 600;
    font-size: var(--fs-body);
    color: var(--color-text-main);
    white-space: nowrap;
}

/* Days remaining color ranges */
.days-remaining {
    font-weight: 500;
    font-size: var(--fs-data);
    white-space: nowrap;
}

/* Sem próxima visita agendada: neutro, nunca verde. */
.days-none { color: var(--color-text-muted); }
.days-critical { color: var(--color-danger); }
.days-warning { color: var(--color-warning); }
.days-safe { color: var(--color-success); }

/* Table Actions Cell */
.actions-cell {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}

.icon-btn {
    background: none;
    border: none;
    color: var(--color-text-muted);
    cursor: pointer;
    padding: 0.4rem;
    border-radius: 6px;
    transition: var(--transition-fast);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.icon-btn svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}

.icon-btn:hover {
    color: var(--color-primary);
    background-color: var(--bg-main);
}

.icon-btn.delete:hover {
    color: var(--color-danger);
}

/* ==========================================================================
   MODAIS & SLIDE-OVERS (DETAIL VIEWS & FORMS)
   ========================================================================== */
.slide-over {
    position: fixed;
    top: 0;
    right: -450px;
    width: 450px;
    height: 100vh;
    background-color: var(--bg-card);
    border-left: 1px solid var(--border-color);
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.5);
    z-index: 200;
    transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
}

.slide-over.open {
    right: 0;
}

.slide-over-header {
    padding: var(--sp-4) var(--sp-5);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--sp-3);
}

/* Mesmo tratamento do nome na tabela — ver .tower-id. */
.slide-over-title {
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--color-text-main);
    word-break: break-word;
}

.slide-over-body {
    padding: var(--sp-5);
    flex-grow: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}

/* Backdrop */
.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    z-index: 150;
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.modal-backdrop.open {
    display: block;
    opacity: 1;
}

/* Standard Dialog/Modal */
.modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.95);
    width: 90%;
    max-width: 550px;
    max-height: 85vh;
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
    z-index: 250;
    display: none;
    flex-direction: column;
    opacity: 0;
    transition: var(--transition-smooth);
}

.modal.open {
    display: flex;
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.modal-header {
    padding: var(--sp-4) var(--sp-5);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-body {
    padding: var(--sp-5);
    overflow-y: auto;
    max-height: 60vh;
}

.modal-footer {
    padding: var(--sp-3) var(--sp-5);
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: flex-end;
    gap: var(--sp-3);
}

/* --- FORMS STYLING --- */
.form-group {
    margin-bottom: var(--sp-4);
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
}

/* Rótulo de campo e rótulo de dado (.info-label) falam a mesma língua: são o
   mesmo objeto em modo de edição e em modo de leitura. */
.form-group label,
.info-label {
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.form-control {
    background-color: var(--bg-input);
    border: 1px solid var(--border-color);
    color: var(--color-input-text);
    border-radius: var(--r-md);
    padding: 0.5rem 0.75rem;
    font-family: inherit;
    font-size: var(--fs-body);
    width: 100%;
    outline: none;
    transition: var(--transition-fast);
}

.form-control:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-glow);
}

/* Campos que recebem dado técnico digitado (data, coordenada, quantidade)
   também são mono: o que se digita tem a mesma forma do que se lê depois. */
input[type="date"].form-control,
input[type="number"].form-control,
.form-control.num {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}

textarea.form-control {
    resize: vertical;
    min-height: 80px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-3);
}

/* Info Details Row (Side panel) */
.info-row {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding-bottom: var(--sp-3);
    border-bottom: 1px solid var(--border-color);
}

.info-value {
    font-size: var(--fs-body);
    color: var(--color-text-main);
}

/* ==========================================================================
   PHOTO UPLOADING & GALLERY COMPONENTS
   ========================================================================== */
.photo-gallery-section {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.photo-item {
    aspect-ratio: 1;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    border: 1px solid var(--border-color);
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: var(--transition-fast);
}

.photo-item:hover {
    border-color: var(--color-primary);
    transform: scale(1.03);
}

.photo-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.photo-delete-btn {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
    border-radius: 4px;
    background-color: rgba(0, 0, 0, 0.7);
    color: var(--color-danger);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: var(--transition-fast);
}

.photo-item:hover .photo-delete-btn {
    opacity: 1;
}

.photo-delete-btn:hover {
    background-color: var(--color-danger);
    color: #ffffff;
}

.photo-caption-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.75);
    padding: 0.25rem 0.5rem;
    font-size: 0.65rem;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* File Upload Component styling */
.file-upload-container {
    border: 2px dashed var(--border-color);
    padding: 1.5rem;
    border-radius: 10px;
    text-align: center;
    cursor: pointer;
    background-color: var(--bg-main);
    transition: var(--transition-smooth);
}

.file-upload-container:hover {
    border-color: var(--color-primary);
    background-color: var(--bg-subtle);
}

.file-upload-container svg {
    width: 36px;
    height: 36px;
    color: var(--color-text-muted);
    margin-bottom: 0.5rem;
}

.file-upload-text {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--color-text-muted);
}

.file-upload-text span {
    color: var(--color-primary);
    text-decoration: underline;
}

/* Fullscreen Photo Lightbox */
.lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.95);
    z-index: 300;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.lightbox-close {
    position: absolute;
    top: 2rem;
    right: 2rem;
    background: none;
    border: none;
    color: #ffffff;
    font-size: 2.5rem;
    cursor: pointer;
    line-height: 1;
}

.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    border: none;
    color: white;
    font-size: 2.5rem;
    padding: 1rem 0.5rem;
    cursor: pointer;
    z-index: 301;
    transition: background-color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}
.lightbox-nav:hover {
    background: rgba(0, 0, 0, 0.8);
}
.lightbox-prev {
    left: 1rem;
}
.lightbox-next {
    right: 1rem;
}

.lightbox-image-container {
    max-width: 90%;
    max-height: 80%;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.lightbox-image-container img {
    max-width: 100%;
    max-height: 75vh;
    border-radius: 6px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8);
}

.lightbox-caption {
    margin-top: 1rem;
    color: #ffffff;
    font-size: 1rem;
    font-weight: 500;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.6);
    padding: 0.5rem 1.5rem;
    border-radius: 20px;
}

/* ==========================================================================
   ABAS: HISTORICO & TECNICOS VIEWS
   ========================================================================== */
/* Timeline format for history list */
.history-timeline {
    position: relative;
    padding-left: 2rem;
    margin-top: 1rem;
}

.history-timeline::before {
    content: '';
    position: absolute;
    top: 0;
    left: 7px;
    height: 100%;
    width: 2px;
    background-color: var(--border-color);
}

.timeline-card {
    position: relative;
    margin-bottom: 2rem;
}

.timeline-dot {
    position: absolute;
    left: -2rem;
    top: 4px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: var(--bg-main);
    border: 3px solid var(--color-primary);
    z-index: 10;
}

.timeline-dot.critical { border-color: var(--color-danger); }
.timeline-dot.success { border-color: var(--color-success); }
.timeline-dot.warning { border-color: var(--color-warning); }

.timeline-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding-right: 5.5rem;
}

.timeline-title {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-text-main);
    cursor: pointer;
    transition: color 0.2s ease;
    display: inline-block;
}

.timeline-title:hover {
    color: var(--color-secondary) !important;
    text-decoration: underline;
}

.timeline-meta {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    display: flex;
    gap: 1rem;
}

.timeline-body {
    display: grid;
    grid-template-columns: 3fr 1fr;
    gap: 1.5rem;
}

.timeline-details {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.timeline-detail-item {
    font-size: 0.85rem;
}

.timeline-detail-item strong {
    color: var(--color-text-muted);
}

/* Technicians Cards Grid */
.technicians-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
}

.tech-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2rem 1.5rem;
}

.tech-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--color-primary-glow);
    border: 2px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 1rem;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.tech-name {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--color-text-main);
}

.tech-role {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin-bottom: 1rem;
}

.tech-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    border-top: 1px solid var(--border-color);
    margin-top: 1rem;
    padding-top: 1rem;
    gap: 1rem;
}

.tech-stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.tech-stat-label {
    font-size: 0.7rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.25rem;
}

.tech-stat-value {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--color-text-main);
}

/* ==========================================================================
   ANIMATION & UTILITY CLASSES
   ========================================================================== */
.fade-in {
    animation: fadeIn 0.4s ease-out forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hidden {
    display: none !important;
}

/* Chart SVG visual elements styling */
.chart-bar {
    transition: height 0.5s ease-out;
}
.chart-bar:hover {
    filter: brightness(1.2);
}

/* Responsive Overrides */
@media (max-width: 1024px) {
    .analytics-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   TOAST NOTIFICATION STYLES
   ========================================================================== */
#app-toast {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    padding: 1rem 1.5rem;
    border-radius: 8px;
    z-index: 100000;
    font-weight: 600;
    font-size: 0.9rem;
    box-shadow: 0 10px 25px rgba(0,0,0,0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    animation: toastSlideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes toastSlideIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   CUSTOM CONFIRM DIALOG STYLES
   ========================================================================== */
.confirm-dialog-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(12, 9, 16, 0.8);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.confirm-dialog-backdrop.open {
    display: flex;
    opacity: 1;
}

.confirm-dialog-card {
    width: 90%;
    max-width: 420px;
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 2rem;
    text-align: center;
    box-shadow: var(--shadow-lg);
    transform: scale(0.9);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.confirm-dialog-backdrop.open .confirm-dialog-card {
    transform: scale(1);
}

.confirm-dialog-icon {
    width: 56px;
    height: 56px;
    background-color: var(--color-danger-bg);
    color: var(--color-danger);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.25rem;
    box-shadow: 0 0 15px var(--color-danger-bg);
}

.confirm-dialog-icon svg {
    width: 28px;
    height: 28px;
}

.confirm-dialog-title {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text-main);
    margin-bottom: 0.75rem;
}

.confirm-dialog-message {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    line-height: 1.5;
    margin-bottom: 1.75rem;
}

.confirm-dialog-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

.confirm-dialog-actions .btn {
    flex: 1;
}

/* ==========================================================================
   GLOBAL LOADER SPINNER STYLES
   ========================================================================== */
.loader-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(12, 9, 16, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10001;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.loader-overlay.open {
    display: flex;
    opacity: 1;
}

.loader-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid var(--border-color);
    border-top: 4px solid var(--color-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    box-shadow: 0 0 15px var(--color-primary-glow);
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.tech-card {
    position: relative;
}

.tech-actions {
    position: absolute;
    top: 1rem;
    right: 1rem;
    display: flex;
    gap: 0.5rem;
    opacity: 0;
    transition: var(--transition-smooth);
}

.tech-card:hover .tech-actions,
.tech-card:focus-within .tech-actions {
    opacity: 1;
}

.timeline-card {
    position: relative;
}

.timeline-actions {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    display: flex;
    gap: 0.5rem;
    opacity: 1;
    transition: var(--transition-smooth);
}

/* Fallback para dispositivos touch (mobile) que não possuem hover */
@media (hover: none) {
    .tech-actions, 
    .timeline-actions {
        opacity: 1;
    }
}

/* ==========================================================================
   PAGINATION CONTROLS
   ========================================================================== */
.pagination-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

.pagination-btn {
    padding: 0.5rem 1rem !important;
    font-size: 0.85rem !important;
}

.pagination-info {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text-muted);
}

/* ==========================================================================
   Fase 3: MAPA INTERATIVO & LEAFLET DARK THEME
   ========================================================================== */
.map-dark-theme {
    filter: invert(90%) hue-rotate(180deg) brightness(95%) contrast(90%);
    background-color: var(--bg-main) !important;
}

.custom-map-marker {
    background: none;
    border: none;
}

.marker-pin-wrapper {
    position: relative;
    width: 30px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.marker-pin {
    width: 24px;
    height: 24px;
    border-radius: 50% 50% 50% 0;
    position: absolute;
    transform: rotate(-45deg);
    left: 3px;
    top: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #ffffff;
}

.marker-inner-dot {
    width: 8px;
    height: 8px;
    background-color: #ffffff;
    border-radius: 50%;
    display: block;
}

.marker-pulse {
    position: absolute;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    left: -1px;
    top: -1px;
    opacity: 0;
    transform: scale(0.6);
    animation: markerPulse 1.8s ease-out infinite;
    pointer-events: none;
}

@keyframes markerPulse {
    0% {
        transform: scale(0.6);
        opacity: 0.8;
    }
    100% {
        transform: scale(1.4);
        opacity: 0;
    }
}

/* Custom Leaflet Popups consistent with glassmorphism theme */
.leaflet-popup-custom .leaflet-popup-content-wrapper {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--color-text-main) !important;
    border-radius: 12px !important;
    box-shadow: var(--shadow-lg) !important;
    font-family: var(--font-primary) !important;
    padding: 0.5rem !important;
}

.leaflet-popup-custom .leaflet-popup-tip {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
}

.map-popup-card {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.map-popup-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1rem;
    color: var(--color-text-main);
    cursor: pointer;
    transition: color 0.2s ease;
}

.map-popup-title:hover {
    color: var(--color-primary) !important;
    text-decoration: underline;
}

.map-popup-meta {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    background-color: var(--bg-main);
    padding: 0.5rem;
    border-radius: 6px;
    border: 1px solid var(--border-color);
}

/* ==========================================================================
   Fase 3.2: RESPONSIVIDADE MOBILE-FIRST
   ========================================================================== */
@media (max-width: 768px) {
    .sidebar {
        position: fixed;
        height: 100vh;
        left: -280px;
        transition: left 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 10px 0 30px rgba(0, 0, 0, 0.5);
    }
    
    .sidebar.open {
        left: 0;
    }

    .main-wrapper {
        margin-left: 0 !important;
        padding: 1.5rem 1.5rem !important;
        width: 100% !important;
    }

    .main-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .timeline-body {
        grid-template-columns: 1fr;
    }

    .modal {
        width: 95%;
    }

    .hamburger-btn {
        display: inline-flex !important;
    }

    .analytics-grid, .analytics-grid-three {
        grid-template-columns: 1fr !important;
    }

    .slide-over {
        width: 100% !important;
        right: -100% !important;
    }
    
    .slide-over.open {
        right: 0 !important;
    }
}

/* ==========================================================================
   Fase 3.3: SLIDE-OVER EQUIPAMENTOS E ANOTAÇÃO DE CUSTOS
   ========================================================================== */
.equipment-item-card {
    background-color: var(--bg-main);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: var(--transition-fast);
}

.equipment-item-card:hover {
    border-color: var(--border-hover);
    background-color: var(--bg-subtle);
}

.equipment-item-info {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.equipment-item-type {
    font-weight: 600;
    color: var(--color-text-main);
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.equipment-item-details {
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

/* ==========================================================================
   Fase 5: SISTEMA DE AUTENTICAÇÃO E LOGIN GLASSMORPHIC
   ========================================================================== */
.login-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    /* Sem gradiente roxo nem desfoque: é a primeira tela que o operador vê e
       ela precisa dizer "ferramenta de trabalho", não "aplicativo". */
    background: #0b0d11;
    z-index: 10000;
    align-items: center;
    justify-content: center;
}

.login-card {
    width: 100%;
    max-width: 360px;
    padding: 2rem;
    text-align: center;
    border: 1px solid #23262d;
    background: #151820;
    box-shadow: none;
    border-radius: var(--r-lg);
}

/* O card de login fica sempre sobre fundo escuro (overlay roxo/preto):
   forçar texto e campos claros, independentemente do tema ativo. */
.login-card label,
.login-card p {
    color: rgba(244, 242, 251, 0.78) !important;
}
.login-card .form-control {
    background-color: rgba(255, 255, 255, 0.07) !important;
    border-color: rgba(255, 255, 255, 0.16) !important;
    color: #f4f2fb !important;
}
.login-card .form-control::placeholder {
    color: rgba(244, 242, 251, 0.40) !important;
}
.login-card .form-control:focus {
    border-color: var(--color-primary) !important;
    background-color: rgba(255, 255, 255, 0.10) !important;
}

.nav-link-logout {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border-radius: 10px;
    color: var(--color-danger);
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    transition: var(--transition-fast);
    margin-top: 0.5rem;
    cursor: pointer;
}

.nav-link-logout:hover {
    background-color: rgba(239, 68, 68, 0.1);
    color: #ff8a8a;
}

.nav-link-logout svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
}

/* ==========================================================================
   Fase 8: CONTROLE DE ACESSO DE USUÁRIOS (RBAC)
   ========================================================================== */
/* Ocultação total de botões e áreas de modificação para perfil Visualizador (viewer) */
.user-role-viewer .actions-cell,
.user-role-viewer .tech-actions,
.user-role-viewer .timeline-actions,
.user-role-viewer .equipment-actions,
.user-role-viewer #btn-add-equipment-trigger,
.user-role-viewer #btn-edit-tower-trigger,
.user-role-viewer #btn-delete-tower-trigger,
.user-role-viewer #btn-schedule-tower-trigger,
.user-role-viewer #detail-file-dropzone,
.user-role-viewer .photo-delete-btn {
    display: none !important;
}

/* Ocultar a coluna de ações da tabela de listagem de torres para viewers */
.user-role-viewer .data-table th:last-child,
.user-role-viewer .data-table td:last-child {
    display: none !important;
}

/* Helper genérico: elementos de edição/gestão (ex.: botões "Gerenciar
   responsáveis"/"Gerenciar produtos") ficam ocultos para o perfil Visualizador
   e visíveis para admin/operador. */
.user-role-viewer .js-edit-only {
    display: none !important;
}

/* ==========================================================================
   Filtro multi-cidade do cabeçalho (dropdown de checkboxes)
   ========================================================================== */
.unit-filter-panel {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 230px;
    max-height: 340px;
    overflow-y: auto;
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
    padding: 0.4rem;
    z-index: 200;
}

/* No celular o painel é ancorado por `right: 0` a um botão que fica perto da
   borda esquerda: com 230px de largura mínima ele cresce para fora da tela, e
   como o body tem overflow-x hidden não dá nem para rolar até o que ficou
   cortado. Em tela estreita ele passa a se ancorar na viewport. */
@media (max-width: 480px) {
    .unit-filter-panel {
        position: fixed;
        left: var(--sp-4);
        right: var(--sp-4);
        top: auto;
        min-width: 0;
        width: auto;
    }
}
.unit-filter-panel label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.55rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--color-text-main);
}
.unit-filter-panel label:hover {
    background-color: var(--bg-subtle);
}
.unit-filter-panel input[type="checkbox"] {
    flex-shrink: 0;
    width: 15px;
    height: 15px;
    accent-color: var(--color-primary);
    cursor: pointer;
}
.unit-filter-divider {
    height: 1px;
    background-color: var(--border-color);
    margin: 0.35rem 0;
}

/* Gerenciador de Usuários em Ajustes */
.role-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: 1px solid transparent;
}
.role-badge.admin {
    background-color: var(--color-primary-glow);
    color: var(--color-primary);
    border: 1px solid rgba(124, 58, 237, 0.25);
}
.role-badge.operador {
    background-color: var(--color-info-bg, rgba(59, 130, 246, 0.1));
    color: var(--color-info, #3b82f6);
    border: 1px solid var(--color-info-border, rgba(59, 130, 246, 0.25));
}
.role-badge.viewer {
    background-color: var(--bg-subtle);
    color: var(--color-text-muted);
    border: 1px solid var(--border-color);
}

/* ==========================================================================
   Fase 9: PREMIUM INTERACTIVE MAP SIDEBAR & TOOLTIPS
   ========================================================================== */

/* 1. Permanent Tooltip style on map icon */
.tower-marker-tooltip {
    background-color: rgba(20, 17, 24, 0.92) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(124, 58, 237, 0.3) !important;
    border-radius: 6px !important;
    color: #ffffff !important;
    font-family: var(--font-display) !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    padding: 0.25rem 0.55rem !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
    transition: opacity 0.2s ease;
    white-space: nowrap;
}

/* Light Theme overrides for permanent tooltip */
.light-theme .tower-marker-tooltip {
    background-color: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--color-text-main) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
    text-shadow: none;
}

/* 2. Sidebar Item Layout */
.map-sidebar-item {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.85rem;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background-color: var(--bg-main);
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none;
}

.map-sidebar-item:hover {
    background-color: var(--bg-subtle) !important;
    border-color: var(--color-primary) !important;
    transform: translateY(-4px);
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.1);
}

.map-sidebar-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.map-sidebar-item-name {
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--color-text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.map-sidebar-item-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

/* 3. GPS Badges in Sidebar */
.gps-badge {
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    letter-spacing: 0.3px;
    display: inline-flex;
    align-items: center;
}

.gps-badge.ok {
    background-color: rgba(124, 58, 237, 0.1);
    color: var(--color-primary);
    border: 1px solid rgba(124, 58, 237, 0.25);
}

.gps-badge.missing {
    background-color: rgba(239, 68, 68, 0.1);
    color: var(--color-danger);
    border: 1px solid rgba(239, 68, 68, 0.25);
    cursor: pointer;
    transition: all 0.2s ease;
}

.gps-badge.missing:hover {
    background-color: var(--color-danger) !important;
    color: #ffffff !important;
}

/* 4. Responsive media queries for Map Layout */
@media (max-width: 768px) {
    .map-layout {
        flex-direction: column !important;
    }
    
    .map-sidebar {
        width: 100% !important;
        height: 200px !important;
        flex-shrink: 0;
    }
}

/* 5. Tooltip hide rule */
.hide-map-tooltips .tower-marker-tooltip {
    display: none !important;
}

/* 6. Collapsed Sidebar Styles (Desktop Only) */
@media (min-width: 769px) {
    /* Shrink Sidebar width */
    .sidebar-collapsed .sidebar {
        width: 80px !important;
        padding: 2rem 0.75rem !important;
    }

    /* Adjust main content wrapper margin */
    .sidebar-collapsed .main-wrapper {
        margin-left: 80px !important;
    }

    /* Trocar wordmark pela marca compacta e empilhar */
    .sidebar-collapsed .brand-section {
        flex-direction: column !important;
        gap: 0.75rem !important;
        justify-content: center !important;
        margin-bottom: 2.5rem !important;
    }

    .sidebar-collapsed #sidebar-logo {
        display: none !important;
    }

    .sidebar-collapsed #sidebar-brand-mini {
        display: flex !important;
    }

    /* Hide collapse button inside shrunken sidebar or rotate its arrow */
    .sidebar-collapsed #btn-collapse-sidebar {
        margin-left: 0 !important;
        padding: 0.25rem !important;
    }

    /* Hide nav text */
    .sidebar-collapsed .nav-text {
        display: none !important;
    }

    /* Center navigation links */
    .sidebar-collapsed .nav-link {
        justify-content: center !important;
        padding: 0.85rem 0 !important;
        gap: 0 !important;
    }

    .sidebar-collapsed .nav-link svg {
        margin: 0 !important;
    }

    /* Adjust footer links */
    .sidebar-collapsed .sidebar-footer {
        padding: 1rem 0 !important;
        align-items: center !important;
        gap: 0.5rem !important;
    }

    .sidebar-collapsed .nav-link-logout {
        justify-content: center !important;
        padding: 0.85rem 0 !important;
        gap: 0 !important;
    }
}

/* Custom Searchable Select */
.custom-select-searchable {
    position: relative;
    width: 100%;
}
.custom-select-options-list {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    max-height: 200px;
    overflow-y: auto;
    background: var(--bg-select);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    z-index: 1000;
    margin-top: 4px;
    box-shadow: var(--shadow-lg);
    backdrop-filter: blur(10px);
}
.custom-select-option {
    padding: 0.6rem 1rem;
    font-size: 0.85rem;
    color: var(--color-text-main);
    cursor: pointer;
    transition: var(--transition-fast);
}
.custom-select-option:hover {
    background-color: var(--bg-table-hover);
    color: var(--color-primary);
}
.custom-select-option.selected {
    background-color: var(--color-primary-glow);
    color: var(--color-primary);
    font-weight: 600;
}

/* Sidebar items should always remain light-themed since the sidebar background is always dark */
.sidebar .nav-link {
    color: hsl(264, 10%, 68%) !important;
}
.sidebar .nav-link svg {
    stroke: hsl(264, 10%, 68%) !important;
}
.sidebar .nav-link:hover {
    color: #ffffff !important;
    background-color: hsla(264, 18%, 15%, 0.6) !important;
    border-color: hsla(264, 18%, 22%, 0.4) !important;
}
.sidebar .nav-link:hover svg {
    stroke: #ffffff !important;
}
.sidebar .nav-link.active {
    color: var(--color-primary) !important;
    background-color: var(--color-primary-glow) !important;
    border-color: rgba(124, 58, 237, 0.25) !important;
    box-shadow: inset 0 0 8px rgba(124, 58, 237, 0.08) !important;
}
.sidebar .nav-link.active svg {
    stroke: var(--color-primary-text) !important;
}

/* Custom styles for native datepicker calendar picker icons in inputs */
input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1); /* White in dark theme */
    cursor: pointer;
    opacity: 0.7;
    transition: var(--transition-fast);
}
input[type="date"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

.light-theme input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(0); /* Black in light theme */
}

/* Botão X discreto para fechar o seletor de tipo de mapa */
.leaflet-control-layers {
    position: relative;
}
.leaflet-control-layers-close {
    display: none;
    position: absolute;
    top: 3px;
    right: 6px;
    font-size: 15px;
    line-height: 1;
    font-weight: 500;
    color: var(--color-text-muted);
    text-decoration: none;
    opacity: 0.55;
    transition: opacity 0.15s ease, color 0.15s ease;
    z-index: 1;
}
.leaflet-control-layers-close:hover {
    opacity: 1;
    color: var(--color-primary);
}
.leaflet-control-layers-expanded .leaflet-control-layers-close {
    display: block;
}
.leaflet-control-layers-expanded .leaflet-control-layers-list {
    padding-top: 8px;
}

/* Estilos para o Filtro de Regiões no Mapa (Fase 11) */
.leaflet-control-regions {
    position: absolute;
    top: 84px;
    left: 10px;
    z-index: 1000;
    pointer-events: auto;
}

.leaflet-control-regions-expanded {
    display: none !important;
}

.leaflet-control-regions.expanded .leaflet-control-regions-expanded {
    display: flex !important;
}

.leaflet-control-regions.expanded .leaflet-control-regions-toggle {
    display: none !important;
}

.leaflet-control-regions-toggle {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 4px !important;
    width: 34px !important;
    height: 34px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: var(--shadow-sm) !important;
    text-decoration: none !important;
    /* É um <a> sem `color`, e o SVG dentro usa stroke="currentColor". Sem isto
       o ícone herda o azul de link padrão do navegador — a única coisa azul da
       interface inteira. */
    color: var(--color-text-muted) !important;
}

.leaflet-control-regions-toggle:hover {
    background-color: var(--bg-btn-secondary-hover) !important;
    border-color: var(--border-hover) !important;
    box-shadow: var(--shadow-md) !important;
}

.region-filter-btn {
    background: var(--bg-subtle);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 0.3rem 0.15rem;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--color-text-muted);
    cursor: pointer;
    text-align: center;
    transition: var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.1rem;
}

.region-filter-btn:hover {
    background: var(--bg-btn-secondary-hover);
    color: var(--color-text-main);
    border-color: var(--border-hover);
}

.region-filter-btn.active {
    background: var(--color-primary-glow) !important;
    color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 8px var(--color-primary-glow) !important;
}

.map-region-label {
    background: transparent !important;
    border: none !important;
    text-align: center;
    pointer-events: none;
}

.map-region-label span {
    color: #ffffff;
    font-size: 1.6rem;
    font-weight: 900;
    text-transform: uppercase;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 0 2px 4px rgba(0, 0, 0, 0.8);
    white-space: nowrap;
    transition: var(--transition-fast);
}

/* No celular o mapa abre no mesmo zoom, mas com um terço da largura: a 1.6rem
   as siglas de região se sobrepõem uma na outra e no controle de camadas. */
@media (max-width: 768px) {
    .map-region-label span { font-size: 1rem; }
}

.map-region-label.active-region-label span {
    color: var(--color-primary) !important;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 0 0 8px var(--color-primary) !important;
}

.light-theme .map-region-label span {
    color: #ffffff; /* Maintain high contrast white on map layers */
}

.light-theme .map-region-label.active-region-label span {
    color: var(--color-primary) !important;
}

/* Ocultar barra de atribuição do Leaflet para não sobrepor as siglas */
.leaflet-control-attribution,
.leaflet-control-attribution *,
.leaflet-container .leaflet-control-attribution,
.leaflet-bottom.leaflet-right .leaflet-control-attribution {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    pointer-events: none !important;
}

#sidebar-logo {
    cursor: pointer;
}

/* ==========================================================================
   REFINAMENTOS DE ACABAMENTO PROFISSIONAL
   ========================================================================== */

/* Renderização de fonte mais nítida e suave */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Estados de foco acessíveis e consistentes (navegação por teclado) */
.btn:focus-visible,
.icon-btn:focus-visible,
.nav-link:focus-visible,
.nav-link-logout:focus-visible,
.select-custom:focus-visible,
.form-control:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Visual corporativo: cards planos, sem deslocamento no hover */
.card:hover {
    transform: none;
}

/* Linhas zebradas para melhor leitura de dados */
/* Sem zebra: a separação é por hairline, como na referência. */

/* Hover sempre prevalece sobre o zebrado (declarado depois por intenção) */
.data-table tbody tr:hover {
    background-color: var(--bg-table-hover);
}

/* ==========================================================================
   IDENTIDADE NOC — CENTRO DE OPERAÇÕES
   ========================================================================== */

/* A monoespaçada é reservada a DADO (data, prazo, coordenada, contagem) —
   ver .num. Rótulo, badge e cabeçalho de tabela são texto, e ficam na fonte de
   texto: mono em tudo achata a hierarquia em vez de criar significado. */
.pagination-info .num {
    font-family: var(--font-mono);
}

/* Revelação escalonada no load (motion orquestrado) */
.analytics-grid > .card,
.analytics-grid-three > .card {
    animation: nocRise 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) 0.3s backwards;
}

@keyframes nocRise {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
}


/* Pílula "Sistema Online" no header */
.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid rgba(124, 58, 237, 0.35);
    border-radius: 999px;
    padding: 6px 12px;
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-primary);
    white-space: nowrap;
}
.status-pill .dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--color-primary);
    animation: nocPulseDot 2s infinite;
}
@keyframes nocPulseDot {
    0% { box-shadow: 0 0 0 0 rgba(124, 58, 237, 0.5); }
    70% { box-shadow: 0 0 0 7px rgba(124, 58, 237, 0); }
    100% { box-shadow: 0 0 0 0 rgba(124, 58, 237, 0); }
}

@media (max-width: 768px) {
    .status-pill { display: none; }
}



/* ==========================================================================
   POLIMENTO COMERCIAL (auditoria jun/2026)
   ========================================================================== */

/* Seleção de texto na cor da marca (evita o azul padrão do navegador) */
::selection {
    background: rgba(124, 58, 237, 0.28);
}

/* Autofill do Chrome sem o fundo azul/amarelo padrão */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 40px var(--bg-input) inset !important;
    -webkit-text-fill-color: var(--color-input-text) !important;
    caret-color: var(--color-input-text);
    transition: background-color 9999s ease-in-out 0s;
}
.login-card input:-webkit-autofill,
.login-card input:-webkit-autofill:hover,
.login-card input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 40px #241d31 inset !important;
    -webkit-text-fill-color: #f4f2fb !important;
}

/* Clusters do mapa na cor da marca (override do MarkerCluster.Default.css verde) */
.marker-cluster-small,
.marker-cluster-medium,
.marker-cluster-large {
    background-color: rgba(124, 58, 237, 0.25) !important;
}
.marker-cluster-small div,
.marker-cluster-medium div,
.marker-cluster-large div {
    background-color: rgba(124, 58, 237, 0.88) !important;
    color: #ffffff !important;
    font-weight: 700;
}

/* --------------------------------------------------------------------------
   TABELA DE TORRES — alinhamento
   Antes, todas as colunas do meio eram centralizadas e as pílulas tinham
   largura mínima fixa (96px / 110px). Centralizar dado tabular é o que mais
   atrapalha a leitura: cada valor começa num ponto diferente, então o olho não
   consegue descer a coluna. E a largura fixa fazia "SIM" ocupar o mesmo espaço
   de "EM ANDAMENTO", abrindo buracos entre as colunas.
   Agora: tudo à esquerda (o mono de largura fixa já alinha as datas sozinho),
   pílula do tamanho do conteúdo, e a coluna do nome absorve a folga.
   -------------------------------------------------------------------------- */
/* A sobra de largura vai para a coluna de Ações (a última, já alinhada à
   direita): assim as colunas de dado ficam encostadas umas nas outras e o olho
   percorre a linha inteira sem atravessar vão nenhum. Colocar a sobra na
   primeira coluna abriria um buraco justamente entre o nome e o status. */
#towers-table th:last-child {
    width: 100%;
}
#towers-table th:not(:first-child),
#towers-table td:not(:first-child) {
    white-space: nowrap;
}
#towers-table th:last-child,
#towers-table td:last-child {
    text-align: right;
}

/* Botão flutuante de sugestão de melhoria (pílula estendida e chamativa) */
.suggestion-fab {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.8rem 1.3rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #9333ea, #7c3aed);
    color: #ffffff;
    border: none;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.92rem;
    cursor: pointer;
    z-index: 85;
    box-shadow: 0 12px 30px rgba(124, 58, 237, 0.5);
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
    animation: fabPulse 2.6s ease-in-out infinite;
}
.suggestion-fab:hover {
    transform: translateY(-2px);
    filter: brightness(1.06);
    box-shadow: 0 14px 36px rgba(124, 58, 237, 0.62);
}
.suggestion-fab svg { width: 22px; height: 22px; flex-shrink: 0; }
.suggestion-fab .fab-label { white-space: nowrap; }
.suggestion-fab.hidden { display: none; }
@keyframes fabPulse {
    0%, 100% { box-shadow: 0 12px 30px rgba(124, 58, 237, 0.5); }
    50% { box-shadow: 0 12px 36px rgba(124, 58, 237, 0.68), 0 0 0 8px rgba(124, 58, 237, 0.10); }
}
@media (max-width: 640px) {
    .suggestion-fab { right: 1rem; bottom: 1rem; padding: 0.7rem 1.05rem; font-size: 0.85rem; }
}
@media (prefers-reduced-motion: reduce) {
    .suggestion-fab { animation: none; }

    /* Nada se move sozinho: a régua e os cards aparecem prontos, e as
       transições viram instantâneas em vez de encurtadas. */
    .analytics-grid > .card,
    .analytics-grid-three > .card,
    .fade-in {
        animation: none !important;
    }

    *, *::before, *::after {
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Painel de Ajustes organizado por categorias */
.settings-panel {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.settings-section-header {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-top: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-color);
}
.settings-section-header:first-child {
    margin-top: 0;
}
.settings-section-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(124, 58, 237, 0.10);
    color: var(--color-primary);
}
.settings-section-name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.1rem;
    line-height: 1.2;
    margin: 0;
    color: var(--color-text-main);
}
.settings-section-desc {
    margin: 0.15rem 0 0;
    font-size: 0.82rem;
    color: var(--color-text-muted);
}
/* Dentro do painel, os cards de dados ocupam a largura toda (tabelas). */
.settings-panel .card.chart-card {
    margin-top: 0;
}

/* ===== Refino visual do Dashboard / cabeçalho ===== */
/* Título não quebra em duas linhas; ações descem no mobile. */
#view-title { white-space: nowrap; }
.main-header { flex-wrap: wrap; gap: 1rem 1.25rem; }
/* Colunas do gráfico de status: leve realce no hover. */
.column-chart-bar { transition: height 0.6s cubic-bezier(0.4, 0, 0.2, 1), filter 0.15s ease; }
.column-chart-bar:hover { filter: brightness(1.08); }