/* ==========================================================================
   GuiaACS — design system.

   Tema claro/escuro via prefers-color-scheme + toggle [data-theme].
   Tudo (espaço, tamanho de fonte, raio, cor de estado) sai de variável: quem
   escreve view nova usa as classes daqui e herda a escala automaticamente.

   Ordem do arquivo:
     1. Tokens (espaço, tipografia, raio, sombra, cor)
     2. Base (reset, tipografia, foco, acessibilidade)
     3. Layout (topbar, nav, conteúdo, footer)
     4. Componentes (card, botão, alerta, form, tabela, badge, chip, barra…)
     5. Telas (ficha, dashboard, login)
     6. Responsivo
   ========================================================================== */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */

:root {
    /* --- Espaçamento (escala 4px) --- */
    --e1: 4px;
    --e2: 8px;
    --e3: 12px;
    --e4: 16px;
    --e5: 24px;
    --e6: 32px;
    --e7: 48px;

    /* --- Tipografia --- */
    --fonte: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --fonte-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    --fs-xs: .75rem;
    --fs-sm: .85rem;
    --fs-md: .92rem;
    --fs-base: 1rem;
    --fs-lg: 1.1rem;
    --fs-xl: 1.3rem;
    --fs-2xl: 1.65rem;
    --fs-3xl: 2.1rem;
    --lh-tight: 1.3;
    --lh: 1.55;

    /* --- Raio --- */
    --radius: 10px;          /* nome herdado — mantido */
    --raio-sm: 6px;
    --raio: var(--radius);
    --raio-lg: 14px;
    --raio-pill: 999px;

    color-scheme: light;
    /* --- Superfícies e texto (tema claro) --- */
    --bg: #f8fafc;
    --surface: #ffffff;
    --surface-2: #f1f5f9;
    --surface-3: #e2e8f0;     /* card dentro de card / trilho de barra */
    --overlay: #0f172a;       /* fundo de tooltip */
    --overlay-text: #f8fafc;
    --border: #cbd5e1;
    --border-forte: #94a3b8;
    --text: #0f172a;
    --muted: #475569;

    /* --- Marca --- */
    --primary: #0f766e;
    --primary-hover: #0d9488;
    --primary-contrast: #ffffff;
    --primary-suave: #ccfbf1;

    /* --- Paleta semântica de estado (texto AA sobre surface e sobre o *-bg) --- */
    --ok: #047857;
    --ok-bg: #d1fae5;
    --ok-borda: #6ee7b7;

    --atencao: #b45309;
    --atencao-bg: #fef3c7;
    --atencao-borda: #fcd34d;

    --critico: #b91c1c;
    --critico-bg: #fee2e2;
    --critico-borda: #fca5a5;

    --info: #1d4ed8;
    --info-bg: #dbeafe;
    --info-borda: #93c5fd;

    --neutro: #475569;
    --neutro-bg: #f1f5f9;
    --neutro-borda: #cbd5e1;

    /* --- Compat: nomes antigos usados por views existentes --- */
    --danger-bg: var(--critico-bg);
    --danger-border: var(--critico-borda);
    --danger-text: var(--critico);
    --warn-bg: var(--atencao-bg);
    --warn-border: var(--atencao-borda);
    --warn-text: var(--atencao);
    --borda: var(--border);
    --card-bg: var(--surface);
    /* Apelidos que telas usam e NÃO existiam: sem eles o navegador usava a cor reserva
       escrita ao lado (sempre a do tema claro) e o modo escuro saía com caixa clara/texto fraco. */
    --erro: var(--critico);
    --erro-bg: var(--critico-bg);
    --danger: var(--critico);
    --warn: var(--atencao);
    --success: var(--ok);
    --acento: var(--primary);
    --accent: var(--primary);
    --texto: var(--text);
    --fg: var(--text);
    --card: var(--surface);
    --fundo-card: var(--surface);
    --fundo2: var(--surface-2);
    --fundo-2: var(--surface-2);
    --bg-soft: var(--surface-2);
    --hover: var(--surface-2);
    --raio-md: 8px;

    /* --- Sombra --- */
    --shadow: 0 1px 3px rgba(15, 23, 42, .1), 0 1px 2px rgba(15, 23, 42, .06);
    --shadow-lg: 0 10px 28px rgba(15, 23, 42, .14), 0 4px 10px rgba(15, 23, 42, .08);
    --foco: 0 0 0 3px rgba(15, 118, 110, .35);

    /* --- Larguras --- */
    /* Fluido: preenche a tela até um teto largo, em vez de uma coluna estreita
       centralizada com margens vazias no monitor grande. */
    --largura: min(96vw, 1760px);
}

/* Escuro automático — a menos que o usuário tenha forçado claro. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --bg: #0b1120;
        --surface: #111827;
        --surface-2: #1f2937;
        --surface-3: #374151;
        --overlay: #f3f4f6;
        --overlay-text: #0b1120;
        --border: #374151;
        --border-forte: #4b5563;
        --text: #f3f4f6;
        --muted: #9ca3af;

        --primary: #2dd4bf;
        --primary-hover: #5eead4;
        --primary-contrast: #042f2e;
        --primary-suave: #134e4a;

        --ok: #34d399;
        --ok-bg: #022c22;        /* 7,9:1; cinza por cima 6,0 */
        --ok-borda: #065f46;

        --atencao: #fbbf24;
        --atencao-bg: #451a03;   /* 9,0:1; cinza por cima 5,9 */
        --atencao-borda: #92400e;

        --critico: #fb7185;
        --critico-bg: #4c0519;   /* 5,8:1 com --critico (antes 3,6) */
        --critico-borda: #9f1239;

        --info: #60a5fa;
        --info-bg: #172554;      /* 5,8:1 com --info (antes 4,1) */
        --info-borda: #1e40af;

        --neutro: #9ca3af;
        --neutro-bg: #1f2937;
        --neutro-borda: #374151;

        --shadow: 0 1px 3px rgba(0, 0, 0, .6);
        --shadow-lg: 0 10px 28px rgba(0, 0, 0, .7);
        --foco: 0 0 0 3px rgba(45, 212, 191, .4);
    }
}

/* Escuro forçado pelo toggle. */
:root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #0b1120;
    --surface: #111827;
    --surface-2: #1f2937;
    --surface-3: #374151;
    --overlay: #f3f4f6;
    --overlay-text: #0b1120;
    --border: #374151;
    --border-forte: #4b5563;
    --text: #f3f4f6;
    --muted: #9ca3af;

    --primary: #2dd4bf;
    --primary-hover: #5eead4;
    --primary-contrast: #042f2e;
    --primary-suave: #134e4a;

    --ok: #34d399;
    --ok-bg: #022c22;        /* 7,9:1; cinza por cima 6,0 */
    --ok-borda: #065f46;

    --atencao: #fbbf24;
    --atencao-bg: #451a03;   /* 9,0:1; cinza por cima 5,9 */
    --atencao-borda: #92400e;

    --critico: #fb7185;
    --critico-bg: #4c0519;   /* 5,8:1 com --critico (antes 3,6) */
    --critico-borda: #9f1239;

    --info: #60a5fa;
    --info-bg: #172554;      /* 5,8:1 com --info (antes 4,1) */
    --info-borda: #1e40af;

    --neutro: #9ca3af;
    --neutro-bg: #1f2937;
    --neutro-borda: #374151;

    --shadow: 0 1px 3px rgba(0, 0, 0, .6);
    --shadow-lg: 0 10px 28px rgba(0, 0, 0, .7);
    --foco: 0 0 0 3px rgba(45, 212, 191, .4);
}

/* ==========================================================================
   2. BASE
   ========================================================================== */

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
    font-family: var(--fonte);
    font-size: var(--fs-base);
    background: var(--bg);
    color: var(--text);
    line-height: var(--lh);
    -webkit-font-smoothing: antialiased;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

h1, h2, h3, h4 { line-height: var(--lh-tight); font-weight: 700; }

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

/* Foco sempre visível no teclado (nunca some). */
:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: var(--raio-sm);
}
/* Remove o foco "de mouse" só onde o :focus-visible cobre. */
button:focus:not(:focus-visible),
summary:focus:not(:focus-visible) { outline: none; }

/* Quem pediu menos movimento, recebe menos movimento. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

/* Só pra leitor de tela. */
.sr {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}
/* Link "pular pro conteúdo": invisível até receber foco pelo teclado. */
a.sr:focus {
    position: fixed;
    top: var(--e2);
    left: var(--e2);
    width: auto; height: auto;
    clip: auto;
    margin: 0;
    padding: var(--e2) var(--e3);
    background: var(--surface);
    border: 1px solid var(--primary);
    border-radius: var(--raio-sm);
    box-shadow: var(--shadow-lg);
    z-index: 100;
}

/* ==========================================================================
   3. LAYOUT
   ========================================================================== */

/* ---------- Topbar ---------- */
.topbar {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow);
    position: sticky;
    top: 0;
    z-index: 30;
}
.topbar__inner {
    max-width: var(--largura);
    margin: 0 auto;
    padding: 0 var(--e4);
    min-height: 58px;
    display: flex;
    align-items: center;
    gap: var(--e4);
}
.brand {
    font-weight: 800;
    font-size: var(--fs-xl);
    letter-spacing: -.01em;
    color: var(--text);
    white-space: nowrap;
}
.brand:hover { text-decoration: none; }
.brand span { color: var(--primary); }
.brand__logo { display: block; height: 32px; width: auto; }

/* Botão do menu no celular. */
.topbar__menu-btn {
    display: none;
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: var(--raio-sm);
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* ---------- Navegação ---------- */
.nav {
    display: flex;
    align-items: center;
    gap: var(--e1);
    flex-wrap: wrap;
}
.nav a,
.nav__item {
    color: var(--muted);
    font-weight: 600;
    font-size: var(--fs-md);
    padding: var(--e2) var(--e3);
    border-radius: var(--raio-sm);
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}
.nav a:hover, .nav__item:hover { color: var(--text); background: var(--surface-2); text-decoration: none; }
.nav a.ativo,
.nav__item.is-ativo {
    color: var(--primary);
    background: var(--primary-suave);
}

/* Grupo com submenu (details/summary — funciona sem JS). */
.menu { position: relative; }
.menu > summary {
    list-style: none;
    cursor: pointer;
    user-select: none;
}
.menu > summary::-webkit-details-marker { display: none; }
.menu__seta { font-size: .6em; opacity: .7; transition: transform .15s ease; }
.menu[open] > summary .menu__seta { transform: rotate(180deg); }
.menu__lista {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 228px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--raio);
    box-shadow: var(--shadow-lg);
    padding: var(--e2);
    display: flex;
    flex-direction: column;
    gap: 2px;
    z-index: 40;
}
.menu__lista a {
    display: flex;
    align-items: center;
    gap: var(--e2);
    padding: var(--e2) var(--e3);
    border-radius: var(--raio-sm);
    color: var(--text);
    font-weight: 500;
    font-size: var(--fs-md);
    min-height: 40px;
}
.menu__lista a:hover { background: var(--surface-2); text-decoration: none; }
.menu__lista a.is-ativo { background: var(--primary-suave); color: var(--primary); font-weight: 700; }
.menu__sep { height: 1px; background: var(--border); margin: var(--e1) 0; }

/* ---------- Busca rápida na topbar ---------- */
.busca-top { display: flex; align-items: center; gap: 0; }
.busca-top__campo {
    background: var(--bg);
    border: 1px solid var(--border);
    border-right: none;
    border-radius: var(--raio-sm) 0 0 var(--raio-sm);
    color: var(--text);
    font-size: var(--fs-md);
    padding: 0 var(--e3);
    height: 40px;
    width: 190px;
    min-width: 0;
}
.busca-top__campo::placeholder { color: var(--muted); }
.busca-top__campo:focus { outline: none; border-color: var(--primary); box-shadow: var(--foco); position: relative; z-index: 1; }
.busca-top__btn {
    height: 40px;
    width: 40px;
    flex: 0 0 auto;
    border: 1px solid var(--border);
    border-radius: 0 var(--raio-sm) var(--raio-sm) 0;
    background: var(--surface-2);
    color: var(--muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.busca-top__btn:hover { color: var(--text); border-color: var(--border-forte); }

.topbar__right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: var(--e2);
}
.user { color: var(--muted); font-size: var(--fs-md); font-weight: 600; }

.theme-toggle {
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    font-size: var(--fs-lg);
    line-height: 1;
    flex: 0 0 auto;
}
.theme-toggle:hover { border-color: var(--primary); }

/* ---------- Conteúdo ---------- */
.content {
    flex: 1;
    max-width: var(--largura);
    width: 100%;
    margin: 0 auto;
    padding: var(--e5) var(--e4) var(--e6);
}

.page-head { margin-bottom: var(--e5); }
.page-head h1 { margin: 0 0 var(--e1); font-size: var(--fs-2xl); letter-spacing: -.015em; }
.page-head--row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--e4);
    flex-wrap: wrap;
}
.page-head__acoes { display: flex; gap: var(--e2); flex-wrap: wrap; }

.muted { color: var(--muted); margin: 0; }

/* ---------- Footer ---------- */
.footer {
    border-top: 1px solid var(--border);
    color: var(--muted);
    font-size: var(--fs-sm);
    text-align: center;
    padding: var(--e4);
}

/* ==========================================================================
   4. COMPONENTES
   ========================================================================== */

/* ---------- Card ---------- */
/* Texto dentro de card quebra quando precisa.
   Este painel exibe muita coisa que o navegador trata como "uma palavra só":
   endereço IPv6, lista de canais "36,40,44,…,161", caminho TR-069, serial,
   comando. Sem isto, um desses estica o card e o conteúdo vaza pela borda —
   é a causa mais comum de tela "quebrada" aqui. `anywhere` só quebra quando a
   linha realmente não cabe, então texto normal não é afetado. */
.card p, .card li, .card dd, .card td, .card th, .card figcaption { overflow-wrap: anywhere; }

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: var(--e5);
}
.card__title {
    margin: 0 0 var(--e4);
    font-size: var(--fs-lg);
    letter-spacing: -.01em;
    display: flex;
    align-items: center;
    gap: var(--e2);
    flex-wrap: wrap;
}
.card__title small { font-weight: 500; color: var(--muted); font-size: var(--fs-sm); }
.card__title + .card__sub { margin-top: calc(var(--e3) * -1); }
.card__sub { margin: 0 0 var(--e4); color: var(--muted); font-size: var(--fs-md); }
.card--compacto { padding: var(--e4); }
.card--aninhado {            /* card dentro de card */
    background: var(--surface-2);
    box-shadow: none;
    border-radius: var(--raio-sm);
    padding: var(--e3) var(--e4);
}
.card--placeholder { display: flex; justify-content: center; }

/* overflow-wrap: texto de apoio costuma carregar lista sem espaço ("36,40,44,…,161")
   ou endereço longo, e o navegador não quebra depois de vírgula — a linha inteira
   vira uma palavra só e estoura o card no celular. */
.placeholder { text-align: center; padding: var(--e7) var(--e4); color: var(--muted); overflow-wrap: anywhere; }
.placeholder__icon { font-size: 2.5rem; }
.placeholder h2 { color: var(--text); margin: var(--e3) 0 var(--e1); }
.placeholder-inline { color: var(--muted); font-size: var(--fs-md); }

/* ---------- Botões ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 40px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text);
    padding: var(--e2) var(--e4);
    border-radius: var(--raio-sm);
    font-size: var(--fs-md);
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    text-align: center;
    transition: background .12s ease, border-color .12s ease;
}
.btn:hover { text-decoration: none; border-color: var(--border-forte); background: var(--surface-3); }
.btn--primary {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--primary-contrast);
}
.btn--primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.btn--ghost { background: transparent; }
.btn--ghost:hover { background: var(--surface-2); }
.btn--perigo { background: var(--critico-bg); border-color: var(--critico-borda); color: var(--critico); }
.btn--perigo:hover { background: var(--critico-bg); border-color: var(--critico); }
.btn--block { width: 100%; }
.btn--sm { min-height: 32px; padding: var(--e1) var(--e3); font-size: var(--fs-sm); }
.btn[disabled], .btn.is-disabled { opacity: .45; pointer-events: none; }

/* ---------- Toolbar (linha de ações acima de um conteúdo) ---------- */
.toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--e2);
    margin-bottom: var(--e4);
}
.toolbar__sep { flex: 1 1 auto; }
.toolbar__label { font-size: var(--fs-sm); font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }

/* ---------- Alertas ---------- */
.alert {
    border-radius: var(--raio-sm);
    padding: var(--e3) var(--e4);
    margin-bottom: var(--e4);
    font-size: var(--fs-md);
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text);
    border-left: 3px solid var(--muted);
}
.alert--erro    { background: var(--critico-bg); border-color: var(--critico-borda); border-left-color: var(--critico); color: var(--critico); }
.alert--ok      { background: var(--ok-bg);      border-color: var(--ok-borda);      border-left-color: var(--ok);      color: var(--text); }
.alert--atencao { background: var(--atencao-bg); border-color: var(--atencao-borda); border-left-color: var(--atencao); color: var(--text); }
.alert--info    { background: var(--info-bg);    border-color: var(--info-borda);    border-left-color: var(--info);    color: var(--text); }
.alert strong { color: var(--text); }
.alert--erro strong { color: inherit; }

/* ---------- Formulários ---------- */

/* Base GLOBAL dos controles de formulário: vale em qualquer tela, com ou sem
   wrapper .field/.campo. Sem isto, campo sem classe (busca solta, <select> de
   janela, etc.) cai no default do navegador — ilegível no tema escuro.
   Envolvido em :where() de propósito: especificidade 0, então é só um DEFAULT —
   qualquer regra de classe existente (.busca-top__campo, .filtros, .edit-select,
   .field/.campo…) continua prevalecendo e nada de layout muda. */
:where(
    input[type="text"],
    input[type="search"],
    input[type="email"],
    input[type="url"],
    input[type="tel"],
    input[type="password"],
    input[type="number"],
    input[type="date"],
    input[type="time"],
    input[type="datetime-local"],
    input[type="month"],
    input[type="week"],
    input:not([type]),
    select,
    textarea
) {
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text);
    font-family: inherit;
    font-size: var(--fs-base);
    padding: var(--e2) var(--e3);
    min-height: 40px;
    border-radius: var(--raio-sm);
}
:where(textarea) { min-height: 80px; }
:where(input, textarea)::placeholder { color: var(--muted); opacity: 1; }

/* Popup do <select> nativo: força superfície/texto do tema (alguns navegadores
   pintam a lista de branco no escuro mesmo com color-scheme). */
:where(select) option,
:where(select) optgroup {
    background: var(--surface);
    color: var(--text);
}

:where(
    input[type="text"],
    input[type="search"],
    input[type="email"],
    input[type="url"],
    input[type="tel"],
    input[type="password"],
    input[type="number"],
    input[type="date"],
    input[type="time"],
    input[type="datetime-local"],
    input[type="month"],
    input[type="week"],
    input:not([type]),
    select,
    textarea
):focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: var(--foco);
}

.form { display: flex; flex-direction: column; gap: var(--e3); }
.field, .campo { display: flex; flex-direction: column; gap: var(--e1); }
.field span, .campo > span { font-size: var(--fs-sm); font-weight: 700; color: var(--muted); }
.field input,
.field select,
.field textarea,
.campo input,
.campo select,
.campo textarea {
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text);
    padding: var(--e2) var(--e3);
    min-height: 40px;
    border-radius: var(--raio-sm);
    font-size: var(--fs-base);
    font-family: inherit;
    width: 100%;
}
.field input:focus,
.field select:focus,
.field textarea:focus,
.campo input:focus,
.campo select:focus,
.campo textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: var(--foco);
}
.field__dica { font-size: var(--fs-xs); color: var(--muted); font-weight: 500; }

/* ---------- Filtros ---------- */
.filtros {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e2);
    margin-bottom: var(--e4);
    align-items: center;
}
.filtros__busca, .filtros__campo {
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text);
    padding: var(--e2) var(--e3);
    min-height: 40px;
    border-radius: var(--raio-sm);
    font-size: var(--fs-md);
    font-family: inherit;
}
.filtros__busca { flex: 1 1 260px; }
.filtros__campo { flex: 0 1 180px; }
.filtros__busca:focus, .filtros__campo:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: var(--foco);
}

/* ---------- Tabela ---------- */
.card--table { padding: 0; overflow-x: auto; }
.card--table .card__title { padding: var(--e5) var(--e5) 0; }
.tabela { width: 100%; border-collapse: collapse; font-size: var(--fs-md); }
.tabela th, .tabela td {
    text-align: left;
    padding: var(--e3) var(--e4);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
.tabela thead th {
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 700;
    color: var(--muted);
    background: var(--surface-2);
    position: sticky;
    top: 0;
    z-index: 1;
}
.tabela tbody tr:last-child td { border-bottom: none; }
.tabela tbody tr:hover { background: var(--surface-2); }
.tabela td .muted { display: block; font-size: var(--fs-sm); }
.tabela__vazio { text-align: center; color: var(--muted); padding: var(--e6) var(--e4); white-space: normal; }

/* ---------- Paginação ---------- */
.paginacao {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e3);
    margin-top: var(--e4);
    flex-wrap: wrap;
}
.paginacao__botoes { display: flex; align-items: center; gap: var(--e2); }
.paginacao__atual { color: var(--muted); font-size: var(--fs-md); }
.is-disabled { opacity: .45; pointer-events: none; }

/* ---------- Bolinha de status ---------- */
.dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--muted);
    vertical-align: middle;
    flex: 0 0 auto;
}
.dot--on,
.dot--ok       { background: var(--ok);      box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 22%, transparent); }
.dot--alerta,
.dot--warn     { background: var(--atencao); box-shadow: 0 0 0 3px color-mix(in srgb, var(--atencao) 22%, transparent); }
.dot--erro     { background: var(--critico); box-shadow: 0 0 0 3px color-mix(in srgb, var(--critico) 22%, transparent); }
.dot--info     { background: var(--info);    box-shadow: 0 0 0 3px color-mix(in srgb, var(--info) 22%, transparent); }
.dot--off,
.dot--offline  { background: var(--muted); opacity: .6; }

/* ---------- Badges ---------- */
.badge {
    display: inline-block;
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: .02em;
    padding: 2px var(--e2);
    border-radius: var(--raio-pill);
    background: var(--primary);
    color: var(--primary-contrast);
    vertical-align: middle;
    white-space: nowrap;
}
.badge--soft {
    background: var(--surface-2);
    color: var(--muted);
    border: 1px solid var(--border);
}
.badge--ok      { background: var(--ok-bg);      color: var(--ok);      border: 1px solid var(--ok-borda); }
.badge--atencao { background: var(--atencao-bg); color: var(--atencao); border: 1px solid var(--atencao-borda); }
.badge--critico { background: var(--critico-bg); color: var(--critico); border: 1px solid var(--critico-borda); }
.badge--info    { background: var(--info-bg);    color: var(--info);    border: 1px solid var(--info-borda); }

/* ---------- Est: pílula de estado (o "bom / atenção / ruim" do painel) ---------- */
.est {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    /* A pílula foi feita pra rótulo curto ("ok", "crítico"), mas algumas telas
       colocam uma frase inteira dentro dela. Com nowrap e sem teto, a frase
       empurrava o card pra fora da borda no celular. O teto de 100% resolve o
       estouro sem tirar o formato de pílula de quem usa como rótulo. */
    max-width: 100%;
    font-size: var(--fs-sm);
    font-weight: 700;
    line-height: 1.4;
    padding: 3px var(--e3);
    border-radius: var(--raio-pill);
    border: 1px solid var(--neutro-borda);
    background: var(--neutro-bg);
    color: var(--neutro);
    white-space: nowrap;
}
.est--ok      { background: var(--ok-bg);      border-color: var(--ok-borda);      color: var(--ok); }
.est--atencao { background: var(--atencao-bg); border-color: var(--atencao-borda); color: var(--atencao); }
.est--critico { background: var(--critico-bg); border-color: var(--critico-borda); color: var(--critico); }
.est--info    { background: var(--info-bg);    border-color: var(--info-borda);    color: var(--info); }

/* Cor de texto solta (número dentro de métrica, célula de tabela…). */
.t-ok      { color: var(--ok); }
.t-atencao { color: var(--atencao); }
.t-critico { color: var(--critico); }
.t-info    { color: var(--info); }

/* ---------- Chip (filtro clicável / etiqueta) ---------- */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: var(--e1) var(--e3);
    border-radius: var(--raio-pill);
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--muted);
    font-size: var(--fs-sm);
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
}
.chip:hover { color: var(--text); border-color: var(--border-forte); text-decoration: none; }
.chip.is-ativo, .chip--ativo {
    background: var(--primary-suave);
    border-color: var(--primary);
    color: var(--primary);
}
.chip__n {
    font-size: var(--fs-xs);
    background: var(--surface);
    border-radius: var(--raio-pill);
    padding: 0 6px;
    border: 1px solid var(--border);
}
.chip--estatico { cursor: default; }

/* ---------- Barra de progresso / ocupação ---------- */
.barra {
    height: 8px;
    width: 100%;
    border-radius: var(--raio-pill);
    background: var(--surface-3);
    overflow: hidden;
}
.barra__fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--primary);
    transition: width .3s ease;
}
.barra--ok      .barra__fill { background: var(--ok); }
.barra--atencao .barra__fill { background: var(--atencao); }
.barra--critico .barra__fill { background: var(--critico); }
.barra--fina { height: 5px; }
.barra--grossa { height: 14px; }
.barra-linha { display: flex; align-items: center; gap: var(--e3); }
.barra-linha .barra { flex: 1; }
.barra-linha__valor { font-size: var(--fs-sm); font-weight: 700; min-width: 48px; text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- KV: lista chave→valor (dump de propriedades, ficha técnica) ---------- */
.kv {
    margin: 0;
    display: grid;
    grid-template-columns: minmax(120px, 38%) 1fr;
    font-size: var(--fs-md);
}
.kv dt, .kv dd {
    margin: 0;
    padding: var(--e2) 0;
    border-bottom: 1px solid var(--border);
    min-width: 0;
}
.kv dt { color: var(--muted); padding-right: var(--e3); }
.kv dd { font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.kv > dt:nth-last-of-type(1), .kv > dd:nth-last-of-type(1) { border-bottom: none; }
.kv--solta dt, .kv--solta dd { padding: var(--e3) 0; }

/* Lista de definições antiga (info do equipamento) — mantida. */
.info { margin: 0; display: grid; gap: 0; }
.info > div {
    display: flex;
    justify-content: space-between;
    gap: var(--e4);
    padding: var(--e2) 0;
    border-bottom: 1px solid var(--border);
}
.info > div:last-child { border-bottom: none; }
.info dt { color: var(--muted); font-size: var(--fs-md); margin: 0; }
.info dd { margin: 0; text-align: right; font-weight: 600; overflow-wrap: anywhere; }

/* ---------- Sparkline (SVG inline) ---------- */
.sparkline { display: block; width: 100%; height: 42px; overflow: visible; }
.sparkline__linha { fill: none; stroke: var(--primary); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.sparkline__area { fill: var(--primary); opacity: .14; stroke: none; }
.sparkline__ponto { fill: var(--primary); }
.sparkline--ok .sparkline__linha, .sparkline--ok .sparkline__ponto { stroke: var(--ok); fill: var(--ok); }
.sparkline--ok .sparkline__area { fill: var(--ok); }
.sparkline--critico .sparkline__linha, .sparkline--critico .sparkline__ponto { stroke: var(--critico); fill: var(--critico); }
.sparkline--critico .sparkline__area { fill: var(--critico); }
.sparkline__eixo { stroke: var(--border); stroke-width: 1; }

/* ---------- Estado vazio ---------- */
.vazio {
    text-align: center;
    padding: var(--e6) var(--e4);
    color: var(--muted);
}
.vazio__icone {
    display: block;
    font-size: 2rem;
    line-height: 1;
    margin-bottom: var(--e3);
    opacity: .6;
}
.vazio__titulo {
    margin: 0 0 var(--e1);
    color: var(--text);
    font-size: var(--fs-lg);
    font-weight: 700;
}
.vazio p { margin: 0 auto; max-width: 52ch; font-size: var(--fs-md); }
.vazio__acao { margin-top: var(--e4); display: flex; gap: var(--e2); justify-content: center; flex-wrap: wrap; }
.vazio--erro .vazio__icone { opacity: 1; }
.vazio--erro .vazio__titulo { color: var(--critico); }

/* ---------- Skeleton (carregando) ---------- */
.skeleton {
    display: block;
    border-radius: var(--raio-sm);
    background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 37%, var(--surface-2) 63%);
    background-size: 400% 100%;
    animation: skel 1.4s ease-in-out infinite;
    height: 14px;
}
.skeleton--linha  { height: 14px; margin-bottom: var(--e2); }
.skeleton--titulo { height: 20px; width: 40%; margin-bottom: var(--e3); }
.skeleton--bloco  { height: 84px; }
.skeleton--curta  { width: 60%; }
@keyframes skel {
    0%   { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

/* ---------- Tooltip só-CSS ---------- */
[data-tip] { position: relative; }
/* O balão NASCE SEM CONTEÚDO (`content: none`) e só ganha texto no hover.
   Com `opacity: 0` ele continuava existindo e, mesmo invisível, entrava na área
   de rolagem do ancestral: qualquer card com tooltip ficava ~100 px mais largo
   que o espaço disponível e empurrava o conteúdo pra fora da borda. Era um card
   "quebrado" cuja causa não estava em nada visível na tela.
   Custo: perde-se o fade de entrada. Vale a troca. */
[data-tip]::after {
    content: none;
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--overlay);
    color: var(--overlay-text);
    font-size: var(--fs-xs);
    font-weight: 600;
    line-height: 1.35;
    padding: 5px var(--e2);
    border-radius: var(--raio-sm);
    /* `nowrap` com `max-width` se contradiz: sem quebra, o texto passa do teto e
       o balão fica tão largo quanto a frase. Texto de ajuda pode ter duas linhas. */
    white-space: normal;
    width: max-content;
    max-width: 280px;
    pointer-events: none;
    box-shadow: var(--shadow-lg);
    z-index: 50;
}
[data-tip]:hover::after,
[data-tip]:focus-visible::after { content: attr(data-tip); }

/* ---------- Abas ---------- */
.abas__nav {
    display: flex;
    gap: var(--e1);
    border-bottom: 1px solid var(--border);
    margin-bottom: var(--e5);
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;   /* sem isso o overflow-x cria barra vertical fantasma */
    scrollbar-width: thin;
}
.abas__btn {
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--muted);
    font-size: var(--fs-md);
    font-weight: 600;
    font-family: inherit;
    padding: var(--e3) var(--e4);
    min-height: 44px;
    cursor: pointer;
    margin-bottom: -1px;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: var(--raio-sm) var(--raio-sm) 0 0;
}
.abas__btn:hover { color: var(--text); background: var(--surface-2); }
.abas__btn.is-ativa { color: var(--primary); border-bottom-color: var(--primary); background: transparent; }
.abas__btn .badge--soft { font-weight: 700; }
.abas__painel { display: none; }
.abas__painel.is-ativa { display: block; animation: fadeIn .16s ease; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Grids reutilizáveis ---------- */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--e3);
    margin-bottom: var(--e5);
}
.stat-card {
    /* O valor lá dentro se mede por este card, não pela janela. */
    container-type: inline-size;
    min-width: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: var(--e4);
    display: flex;
    flex-direction: column;
    gap: var(--e1);
    border-top: 3px solid var(--border);
}
.stat-card__label {
    font-size: var(--fs-sm);
    color: var(--muted);
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 6px;
}
/* __value e __valor: as views usam os dois nomes — ambos valem. */
.stat-card__value,
.stat-card__valor {
    font-size: var(--fs-3xl);
    line-height: 1;
    font-weight: 800;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}
/* O número acompanha a largura do card. Sem isto, "340,9 kb/s" a 32 px não cabe
   num card de 160 px e a unidade cai sozinha na linha de baixo — o painel fica
   com metade dos indicadores em duas linhas e metade em uma, sem critério.
   Navegador sem container query ignora esta regra e usa a de cima. */
.stat-card__value,
.stat-card__valor { font-size: clamp(1.25rem, 13cqi, var(--fs-3xl)); }
.stat-card__value small,
.stat-card__valor small { font-size: var(--fs-sm); font-weight: 600; color: var(--muted); }
.stat-card__pe { font-size: var(--fs-xs); color: var(--muted); }
a.stat-card__pe { color: var(--primary); font-weight: 600; }
.stat-card--ok       { border-top-color: var(--ok); }
.stat-card--alerta,
.stat-card--warn     { border-top-color: var(--atencao); }
.stat-card--erro,
.stat-card--critico  { border-top-color: var(--critico); }
.stat-card--info     { border-top-color: var(--info); }
.stat-card--off,
.stat-card--offline  { border-top-color: var(--border-forte); }

.quick-links { display: flex; flex-wrap: wrap; gap: var(--e2); }

/* ---------- Utilitários ---------- */
.mono { font-family: var(--fonte-mono); font-size: .94em; }
.ta-c { text-align: center; }
.ta-r { text-align: right; }
.num  { font-variant-numeric: tabular-nums; }
.voltar { margin: 0 0 var(--e3); font-size: var(--fs-md); }
.quebra { overflow-wrap: anywhere; }
.nowrap { white-space: nowrap; }

/* ==========================================================================
   5. TELAS
   ========================================================================== */

/* ---------- Login ---------- */
.login-body {
    align-items: center;
    justify-content: center;
    padding: var(--e5) var(--e4);
}
.login-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: var(--e6);
    width: 100%;
    max-width: 380px;
}
.login-logo { margin: 0; font-size: var(--fs-2xl); text-align: center; }
.login-logo span { color: var(--primary); }
.login-sub { text-align: center; color: var(--muted); margin: var(--e1) 0 var(--e5); font-size: var(--fs-md); }

/* ---------- Ficha: cabeçalho (o "estado à distância") ---------- */
.ficha-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--e4);
    flex-wrap: wrap;
    margin-bottom: var(--e4);
    padding: var(--e4) var(--e5);
    border-left: 4px solid var(--border-forte);
}
.ficha-head--on  { border-left-color: var(--ok); }
.ficha-head--off { border-left-color: var(--muted); }
.ficha-head__id { display: flex; align-items: flex-start; gap: var(--e3); min-width: 0; }
.ficha-head__icone {
    font-size: var(--fs-xl);
    width: 48px;
    height: 48px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--raio);
}
.ficha-head__nome {
    margin: 0;
    font-size: var(--fs-xl);
    display: flex;
    align-items: center;
    gap: var(--e2);
    flex-wrap: wrap;
}
.ficha-head__serial { margin: var(--e1) 0 0; font-size: var(--fs-md); }
.ficha-head__acoes { display: flex; gap: var(--e2); flex-wrap: wrap; align-items: flex-start; }
.ficha-head__acoes form { display: flex; gap: var(--e2); flex-wrap: wrap; }
.ficha-head__acoes .baixa { flex-basis: 100%; }
.ficha-head__acoes .baixa summary { list-style: none; display: inline-flex; cursor: pointer; }
.ficha-head__acoes .baixa summary::-webkit-details-marker { display: none; }
.ficha-head__acoes .baixa form { flex-direction: column; align-items: flex-start; max-width: 42ch; margin-top: var(--e2); }
.ficha-head__acoes .baixa p { margin: 0; font-size: var(--fs-sm); }
/* Fatos rápidos abaixo do nome — o que o técnico lê primeiro. */
.ficha-fatos {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e2) var(--e4);
    margin: var(--e3) 0 0;
    padding: 0;
    list-style: none;
    font-size: var(--fs-md);
}
.ficha-fatos li { display: flex; align-items: baseline; gap: 6px; }
.ficha-fatos b { font-weight: 700; }
.ficha-fatos span { color: var(--muted); font-size: var(--fs-sm); }

/* ---------- Ficha: grid de métricas ---------- */
.metricas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--e3);
    margin-bottom: var(--e5);
}
.metrica {
    /* min-width:0 é obrigatório em item de grade. O padrão é `auto`, que faz o
       item se recusar a ficar menor que o conteúdo — a coluna incha, a soma passa
       da largura do card e o conteúdo vaza pela borda. É a causa de quase todo
       "layout quebrado" em grade com texto longo dentro. */
    min-width: 0;
    /* Deixa o valor lá dentro medir-se pelo CARD, não pela janela. */
    container-type: inline-size;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: var(--e3) var(--e4);
    display: flex;
    flex-direction: column;
    gap: var(--e1);
}
.metrica--ok      { border-left-color: var(--ok); }
.metrica--atencao { border-left-color: var(--atencao); }
.metrica--critico { border-left-color: var(--critico); }
.metrica__label { font-size: var(--fs-sm); color: var(--muted); font-weight: 700; }
.metrica__valor { font-size: var(--fs-2xl); font-weight: 800; line-height: 1.1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
/* O número encolhe junto com o card, então "364,2 kb/s" cabe numa linha em vez
   de largar a unidade sozinha embaixo. Fica no tamanho cheio quando há espaço.
   Navegador sem container query ignora esta linha e mantém a de cima. */
.metrica__valor { font-size: clamp(1.1rem, 13cqi, var(--fs-2xl)); }
/* Valor que é ENDEREÇO ou DATA, não número: "0.0.0.0:9997", "2026-09-22 08:28:28".
   Na fonte de número (25,6px) isso pede 163px e a coluna da grade dá 140 — o texto
   estourava e o card cortava, virando "0.0.0.0:999". Texto assim quer caber e ser
   lido, não gritar: corpo menor, sem aperto de letra, e pode quebrar em qualquer
   ponto porque IP e timestamp não têm espaço onde quebrar. */
.metrica__valor.mono {
    font-size: var(--fs-md);
    font-weight: 700;
    letter-spacing: 0;
    overflow-wrap: anywhere;
    line-height: 1.3;
}
.metrica__un { font-size: var(--fs-sm); color: var(--muted); font-weight: 600; margin-left: 2px; }
.metrica__pe { font-size: var(--fs-xs); color: var(--muted); }

.ficha-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--e4);
    align-items: start;
}
.ficha-grid + .card, .ficha-grid + .ficha-grid { margin-top: var(--e4); }
.pilha { display: flex; flex-direction: column; gap: var(--e4); }

/* ---------- Portas físicas (LAN) ---------- */
.portas { display: flex; flex-wrap: wrap; gap: var(--e3); }
.porta { width: 86px; text-align: center; }
.porta__corpo {
    height: 56px;
    border: 2px solid var(--border-forte);
    background: var(--surface-2);
    color: var(--muted);
    border-radius: var(--raio-sm);
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: var(--fs-lg);
    /* silhueta de RJ45: retângulo com entalhe embaixo */
    clip-path: polygon(0 0, 100% 0, 100% 100%, 68% 100%, 68% 80%, 32% 80%, 32% 100%, 0 100%);
}
.porta--up .porta__corpo {
    border-color: var(--ok);
    background: var(--ok-bg);
    color: var(--ok);
}
.porta--erro .porta__corpo { border-color: var(--critico); background: var(--critico-bg); color: var(--critico); }
.porta--off .porta__corpo { opacity: .65; }
.porta__vel { display: block; font-size: var(--fs-xs); font-weight: 700; margin-top: var(--e1); color: var(--muted); }
.porta--up .porta__vel { color: var(--ok); }
.porta__mac { display: block; font-size: 10px; color: var(--muted); overflow-wrap: anywhere; line-height: 1.3; }
.portas-legenda { display: flex; gap: var(--e4); flex-wrap: wrap; margin-top: var(--e4); font-size: var(--fs-sm); color: var(--muted); }
.portas-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.porta-amostra {
    width: 16px; height: 12px;
    border: 2px solid var(--border-forte);
    background: var(--surface-2);
    border-radius: 3px;
    flex: 0 0 auto;
}
.porta-amostra--up  { border-color: var(--ok); background: var(--ok-bg); }
.porta-amostra--off { opacity: .55; }

/* ---------- Propriedades TR-069 (árvore colapsável + busca) ---------- */
.props__topo { display: flex; gap: var(--e2); flex-wrap: wrap; align-items: center; margin-bottom: var(--e4); }
.props__busca { flex: 1 1 280px; }
.props__contagem { font-size: var(--fs-sm); color: var(--muted); font-weight: 600; }
.props__grupo {
    border: 1px solid var(--border);
    border-radius: var(--raio-sm);
    background: var(--surface);
    margin-bottom: var(--e2);
}
.props__grupo > summary {
    cursor: pointer;
    padding: var(--e3) var(--e4);
    font-weight: 700;
    font-size: var(--fs-md);
    display: flex;
    align-items: center;
    gap: var(--e2);
    min-height: 44px;
    list-style: none;
    border-radius: inherit;
}
.props__grupo > summary::-webkit-details-marker { display: none; }
.props__grupo > summary::before { content: "▸"; color: var(--muted); font-size: .8em; }
.props__grupo[open] > summary::before { content: "▾"; }
.props__grupo > summary:hover { background: var(--surface-2); }
.props__corpo { border-top: 1px solid var(--border); }
.props__linha {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto;
    gap: var(--e3);
    align-items: center;
    padding: var(--e2) var(--e4);
    border-bottom: 1px solid var(--border);
    font-size: var(--fs-sm);
}
.props__linha:last-child { border-bottom: none; }
.props__linha:hover { background: var(--surface-2); }
.props__caminho { font-family: var(--fonte-mono); color: var(--muted); overflow-wrap: anywhere; }
.props__valor {
    font-family: var(--fonte-mono);
    font-weight: 700;
    overflow-wrap: anywhere;
    color: var(--text);
}
.props__valor:empty::before { content: "(vazio)"; color: var(--muted); font-weight: 400; font-style: italic; }
.props__linha--x .props__caminho { color: var(--info); }
.props__tag {
    font-size: 10px;
    font-weight: 800;
    color: var(--info);
    background: var(--info-bg);
    border: 1px solid var(--info-borda);
    border-radius: var(--raio-pill);
    padding: 0 5px;
    margin-left: 4px;
}
.props__copiar {
    background: transparent;
    border: 1px solid transparent;
    color: var(--muted);
    border-radius: var(--raio-sm);
    width: 32px;
    height: 32px;
    cursor: pointer;
    font-size: var(--fs-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.props__copiar:hover { border-color: var(--border); color: var(--text); background: var(--surface-2); }
.is-oculto { display: none !important; }

/* ---------- Timeline de eventos / logs ---------- */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline__item { display: flex; gap: var(--e3); padding-bottom: var(--e4); position: relative; }
.timeline__item:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 14px;
    bottom: 0;
    width: 2px;
    background: var(--border);
}
.timeline__ponto {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--primary);
    margin-top: var(--e1);
    flex: 0 0 auto;
    position: relative;
    z-index: 1;
}
.timeline__ponto--ok      { background: var(--ok); }
.timeline__ponto--atencao { background: var(--atencao); }
.timeline__ponto--critico { background: var(--critico); }
.timeline__ponto--neutro  { background: var(--muted); }
.timeline__corpo { min-width: 0; flex: 1; }
.timeline__topo { display: flex; justify-content: space-between; gap: var(--e3); flex-wrap: wrap; align-items: baseline; }
.timeline__tipo { font-weight: 700; font-size: var(--fs-md); }
.timeline__det { margin: 2px 0 0; font-size: var(--fs-md); overflow-wrap: anywhere; }

/* ---------- Wi-Fi (cards de rádio da ficha) ---------- */
.wifi-lista { display: flex; flex-direction: column; gap: var(--e3); }
.wifi-radio {
    border: 1px solid var(--border);
    border-radius: var(--raio-sm);
    padding: var(--e3) var(--e4);
    background: var(--surface-2);
}
.wifi-radio__topo { display: flex; align-items: center; justify-content: space-between; gap: var(--e2); }
.wifi-radio__ssid { font-weight: 700; overflow-wrap: anywhere; }
.wifi-radio__meta { display: flex; gap: var(--e4); flex-wrap: wrap; font-size: var(--fs-sm); margin-top: var(--e1); }

/* ---------- Sinal (RSSI de host) ---------- */
.sig {
    display: inline-block;
    padding: 2px var(--e2);
    border-radius: var(--raio-pill);
    font-size: var(--fs-xs);
    font-weight: 700;
    border: 1px solid transparent;
    white-space: nowrap;
}
.sig--ok    { background: var(--ok-bg);      color: var(--ok);      border-color: var(--ok-borda); }
.sig--med   { background: var(--atencao-bg); color: var(--atencao); border-color: var(--atencao-borda); }
.sig--fraco { background: var(--critico-bg); color: var(--critico); border-color: var(--critico-borda); }

/* ---------- Diagnósticos ---------- */
.diag-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--e3); }
.diag-item { border: 1px solid var(--border); border-radius: var(--raio-sm); padding: var(--e3) var(--e4); }
.diag-item__topo { display: flex; align-items: center; gap: var(--e2); flex-wrap: wrap; }
.diag-item__data { margin-left: auto; font-size: var(--fs-sm); }
.diag-item__res {
    margin: var(--e2) 0 0;
    background: var(--surface-2);
    border-radius: var(--raio-sm);
    padding: var(--e2) var(--e3);
    font-size: var(--fs-sm);
    font-family: var(--fonte-mono);
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 260px;
}

/* ---------- Edição TR-069 ---------- */
.edit-radio {
    border: 1px solid var(--border);
    border-radius: var(--raio-sm);
    padding: var(--e3) var(--e4);
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--e3);
}
.edit-radio legend { font-weight: 700; padding: 0 var(--e1); font-size: var(--fs-md); }
.edit-check { display: flex; align-items: center; gap: var(--e2); font-size: var(--fs-md); color: var(--muted); min-height: 40px; }
.edit-check input { width: auto; min-width: 18px; min-height: 18px; }
.edit-select {
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text);
    padding: var(--e2) var(--e3);
    min-height: 40px;
    border-radius: var(--raio-sm);
    font-size: var(--fs-base);
    font-family: inherit;
}

/* ---------- Link de teste de velocidade ---------- */
.speedlink__row { display: flex; gap: var(--e2); align-items: center; margin: var(--e2) 0 var(--e1); flex-wrap: wrap; }
.speedlink__input {
    flex: 1;
    min-width: 220px;
    padding: var(--e2) var(--e3);
    min-height: 40px;
    border: 1px solid var(--border);
    border-radius: var(--raio-sm);
    font-family: var(--fonte-mono);
    font-size: var(--fs-sm);
    background: var(--surface);
    color: var(--text);
}

/* ==========================================================================
   6. RESPONSIVO
   ========================================================================== */

/* Tabela larga vira cartão empilhado. OPT-IN: a tabela precisa da classe
   .tabela--empilha e cada <td> de um data-rotulo="Nome da coluna". */
@media (max-width: 720px) {
    /* Pilula com frase dentro quebra no celular em vez de estourar o card. */
    .est { white-space: normal; }
    /* `display: none`, não `left: -9999px`. Empurrar pra fora da tela mantém o
       cabeçalho no layout: a largura dele (aqui, 893 px numa tela de 390) entra
       na área de rolagem e a página inteira ganha rolagem lateral no celular.
       O rótulo de cada campo não se perde — vem do data-rotulo no ::before. */
    .tabela--empilha thead { display: none; }
    .tabela--empilha tbody tr {
        display: block;
        border: 1px solid var(--border);
        border-radius: var(--radius);
        margin: 0 var(--e3) var(--e3);
        padding: var(--e2) var(--e3);
        background: var(--surface);
    }
    .tabela--empilha tbody tr:first-child { margin-top: var(--e3); }
    .tabela--empilha tbody tr:hover { background: var(--surface); }
    .tabela--empilha td {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: var(--e3);
        padding: var(--e2) 0;
        border-bottom: 1px dashed var(--border);
        white-space: normal;
        text-align: right;
        /* O valor precisa poder encolher e quebrar: item de flex tem
           min-width:auto e se recusa a ficar menor que o conteúdo, então
           "auto 172.32.100.41 172.32.100.41" empurrava a linha pra fora do card. */
        min-width: 0;
        overflow-wrap: anywhere;
    }
    .tabela--empilha td:last-child { border-bottom: none; }
    .tabela--empilha td::before {
        content: attr(data-rotulo);
        /* Teto no rótulo pelo mesmo motivo: rótulo longo não pode espremer o
           valor até estourar. Ele quebra em duas linhas, que é o certo. */
        flex: 0 1 auto;
        max-width: 45%;
        min-width: 0;
        overflow-wrap: anywhere;
        color: var(--muted);
        font-size: var(--fs-xs);
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .04em;
        text-align: left;
    }
    .tabela--empilha td.tabela__vazio { display: block; text-align: center; }
    .tabela--empilha td.tabela__vazio::before { content: none; }
    /* Só o card cuja tabela empilha dispensa o scroll horizontal. Navegador sem
       :has() ignora a regra e mantém o scroll — degrada sem quebrar. */
    .card--table:has(.tabela--empilha) { overflow-x: visible; }
}

@media (max-width: 960px) {
    /* No celular a topbar tem duas linhas (menu + busca): grudada no topo ela
       comeria metade da tela útil. Volta a rolar junto com a página. */
    .topbar { position: static; }
    /* Nav vira menu vertical escondido atrás do botão. */
    .topbar__inner { flex-wrap: wrap; gap: var(--e2); padding: var(--e2) var(--e4); }
    .topbar__menu-btn { display: inline-flex; order: -1; }
    .topbar__right { order: 1; }
    .nav {
        display: none;
        order: 3;
        flex-basis: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: var(--e1);
        padding: var(--e2) 0 var(--e3);
        border-top: 1px solid var(--border);
        margin-top: var(--e2);
    }
    .nav.is-aberto { display: flex; }
    .menu { width: 100%; }
    .menu__lista {
        position: static;
        box-shadow: none;
        border: none;
        border-left: 2px solid var(--border);
        border-radius: 0;
        margin: var(--e1) 0 var(--e2) var(--e3);
        padding: 0 0 0 var(--e2);
        min-width: 0;
    }
    .busca-top { order: 4; flex-basis: 100%; }
    .busca-top__campo { flex: 1; width: auto; }
    .user { display: none; }
}

@media (max-width: 720px) {
    .content { padding: var(--e4) var(--e3) var(--e5); }
    .page-head h1 { font-size: var(--fs-xl); }
    .card { padding: var(--e4); }
    .card--table .card__title { padding: var(--e4) var(--e4) 0; }
    .ficha-head { flex-direction: column; align-items: stretch; padding: var(--e4); }
    .ficha-head__acoes { justify-content: stretch; }
    .ficha-head__acoes form { flex: 1; }
    .ficha-head__acoes .btn { flex: 1; }
    .filtros__campo { flex: 1 1 140px; }
    .stat-card__value, .stat-card__valor { font-size: var(--fs-2xl); }
    .props__linha { grid-template-columns: 1fr auto; }
    .props__caminho { grid-column: 1 / -1; }
    .kv { grid-template-columns: 1fr; }
    .kv dt { border-bottom: none; padding-bottom: 0; }
    .kv dd { text-align: left; padding-top: 2px; }
}

/* ---------- ONUs da OLT (resumo, colmeia = mapa de calor, tabela) ----------
   Só cores de estado do tema (nunca fixa). A colmeia é CSS grid puro: leve mesmo
   com centenas de células — nenhuma animação por célula, layout 100% do browser. */
.onu-cab { padding: var(--e4) var(--e5) 0; display: flex; flex-direction: column; gap: var(--e3); }
.onu-cab-nota { font-size: var(--fs-sm); }

/* Distribuição por PON: chips estáticos de contagem. */
.onu-dist { display: flex; flex-wrap: wrap; gap: var(--e2); }

/* Legenda de cores do mapa. */
.onu-legenda { display: flex; flex-wrap: wrap; gap: var(--e3); font-size: var(--fs-sm); color: var(--muted); }
.onu-legenda__item { display: inline-flex; align-items: center; gap: 6px; }
.onu-legenda__cor { width: 12px; height: 12px; border-radius: 3px; border: 1px solid var(--border); flex: 0 0 auto; }
.onu-legenda__cor--ok      { background: var(--ok-bg);      border-color: var(--ok-borda); }
.onu-legenda__cor--atencao { background: var(--atencao-bg); border-color: var(--atencao-borda); }
.onu-legenda__cor--critico { background: var(--critico-bg); border-color: var(--critico-borda); }
.onu-legenda__cor--sem     { background: var(--surface-2);  border-color: var(--border); }

/* Barra de ferramentas (busca + filtro + toggle de modo). */
.onu-toolbar { margin-bottom: 0; }
.onu-modos { display: inline-flex; margin-left: auto; border: 1px solid var(--border); border-radius: var(--raio-pill); overflow: hidden; }
.onu-modos__btn {
    appearance: none; background: transparent; border: none;
    font: inherit; font-size: var(--fs-md); font-weight: 600; color: var(--muted);
    padding: var(--e2) var(--e4); min-height: 40px; cursor: pointer;
}
.onu-modos__btn + .onu-modos__btn { border-left: 1px solid var(--border); }
.onu-modos__btn:hover { color: var(--text); background: var(--surface-2); }
.onu-modos__btn.is-ativa { background: var(--primary-suave); color: var(--primary); }
.onu-modos__btn:focus-visible { outline: none; box-shadow: var(--foco); }

/* Vistas alternadas (colmeia | tabela). */
.onu-vista { display: none; }
.onu-vista.is-ativa { display: block; }
.onu-vista--colmeia.is-ativa { padding: var(--e4) var(--e5) var(--e5); display: flex; flex-direction: column; gap: var(--e5); }
/* Linha filtrada some mesmo quando a tabela vira cartão empilhado no celular
   (a regra .tabela--empilha tbody tr põe display:block e venceria o [hidden]). */
.onu-vista--tabela tr[hidden] { display: none; }

/* Grupo de uma PON dentro da colmeia. */
.colmeia-grupo[hidden] { display: none; }
.colmeia-grupo__titulo {
    margin: 0 0 var(--e3); font-size: var(--fs-md); font-weight: 700;
    display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
}
.colmeia-grupo__conta { color: var(--muted); font-weight: 600; font-size: var(--fs-sm); }

/* O mapa: grade densa de células quadradas, uma por ONU. */
.colmeia { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 6px; }
.colmeia__cel {
    aspect-ratio: 1 / 1; min-height: 36px;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid transparent; border-radius: var(--raio-sm);
    font-size: var(--fs-xs); font-weight: 700; font-variant-numeric: tabular-nums;
    line-height: 1; overflow: hidden; cursor: default;
}
.colmeia__cel[hidden] { display: none; }
.colmeia__cel:hover { border-color: currentColor; }
.colmeia__cel--ok      { background: var(--ok-bg);      border-color: var(--ok-borda);      color: var(--ok); }
.colmeia__cel--atencao { background: var(--atencao-bg); border-color: var(--atencao-borda); color: var(--atencao); }
.colmeia__cel--critico { background: var(--critico-bg); border-color: var(--critico-borda); color: var(--critico); }
.colmeia__cel--sem     { background: var(--surface-2);  border-color: var(--border);        color: var(--muted); }

@media (max-width: 720px) {
    .onu-cab { padding: var(--e4) var(--e4) 0; }
    .onu-vista--colmeia.is-ativa { padding: var(--e4); }
    .onu-modos { margin-left: 0; }
    .onu-toolbar .filtros__busca { flex: 1 1 100%; }
}

/* ===========================================================================
   PANORAMA (home) — cartões-herói, fita de módulos e vitais do servidor.
   Zero cor fixa: tudo em token de tema (claro/escuro herdam sozinhos).
   =========================================================================== */
.t-muted { color: var(--muted); }

.pano-saud {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: var(--e4); flex-wrap: wrap; margin-bottom: var(--e5);
}
.pano-saud__titulo { margin: var(--e2) 0 var(--e1); font-size: var(--fs-2xl); }
.pano-saud__acoes { display: flex; gap: var(--e2); flex-wrap: wrap; align-items: center; }
.pano-pill {
    display: inline-block; font-size: var(--fs-xs); font-weight: 700;
    letter-spacing: .02em; text-transform: uppercase;
    padding: 2px var(--e2); border-radius: var(--raio-pill); border: 1px solid transparent;
}
.pano-pill--ok      { color: var(--ok);      background: var(--ok-bg);      border-color: var(--ok-borda); }
.pano-pill--atencao { color: var(--atencao); background: var(--atencao-bg); border-color: var(--atencao-borda); }

/* --- Herói: 4 cartões --- */
.pano-hero {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: var(--e4); margin-bottom: var(--e5);
}
.pano-card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--raio-lg); box-shadow: var(--shadow);
    padding: var(--e4); display: flex; flex-direction: column; gap: var(--e2);
    min-width: 0;
}
.pano-card--link { text-decoration: none; color: inherit; transition: border-color .15s, box-shadow .15s, transform .15s; }
.pano-card--link:hover { border-color: var(--primary); box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.pano-card__tag { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .04em; color: var(--muted); }
.pano-card__title { margin: 0; font-size: var(--fs-md); }
.pano-card__corpo { display: flex; align-items: center; gap: var(--e4); }
.pano-card__corpo--col { flex-direction: column; align-items: flex-start; gap: var(--e2); }
.pano-card__big { font-size: var(--fs-3xl); line-height: 1; font-variant-numeric: tabular-nums; }
.pano-card__un  { font-size: var(--fs-md); color: var(--muted); margin-left: 4px; }
.pano-card__sub { display: block; font-size: var(--fs-sm); color: var(--muted); }
.pano-traf { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px var(--e2); }
.pano-tag-est {
    display: inline-block; margin-top: var(--e1); font-size: var(--fs-xs); font-weight: 600;
    padding: 1px var(--e2); border-radius: var(--raio-pill);
}
.pano-tag-est--ok      { color: var(--ok);      background: var(--ok-bg); }
.pano-tag-est--atencao { color: var(--atencao); background: var(--atencao-bg); }
.pano-tag-est--critico { color: var(--critico); background: var(--critico-bg); }

/* --- Anel (donut) SVG --- */
.pano-donut { width: 68px; height: 68px; flex: 0 0 auto; }
.pano-donut__trilho { fill: none; stroke: var(--surface-3); stroke-width: 8; }
.pano-donut__arco   { fill: none; stroke: var(--muted); stroke-width: 8; stroke-linecap: round; }
.pano-donut__txt    { fill: var(--text); font-size: 20px; font-weight: 700; }
.pano-donut--ok      .pano-donut__arco { stroke: var(--ok); }
.pano-donut--atencao .pano-donut__arco { stroke: var(--atencao); }
.pano-donut--critico .pano-donut__arco { stroke: var(--critico); }
.pano-donut--sem     .pano-donut__arco { stroke: var(--surface-3); }

/* --- Sparkline --- */
.pano-spark { width: 100%; height: 44px; display: block; }
.pano-spark__linha { fill: none; stroke: var(--primary); stroke-width: 2; vector-effect: non-scaling-stroke; }
.pano-spark__area  { fill: color-mix(in srgb, var(--primary) 14%, transparent); stroke: none; }

/* --- Feed de incidentes --- */
.pano-card--feed { gap: var(--e2); }
.pano-feed { list-style: none; margin: 0; padding: 0; max-height: 190px; overflow-y: auto; }
.pano-feed--vazio { display: flex; align-items: center; min-height: 60px; }
.pano-feed__item {
    display: grid; grid-template-columns: 1fr auto auto; align-items: center;
    gap: var(--e2); padding: var(--e2) 0; border-bottom: 1px solid var(--border);
    font-size: var(--fs-sm);
}
.pano-feed__item:last-child { border-bottom: 0; }
.pano-feed__nome { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pano-feed__quando { color: var(--muted); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.pano-feed__est { font-size: var(--fs-xs); font-weight: 700; padding: 1px var(--e2); border-radius: var(--raio-pill); }
.pano-feed__est--aberto { color: var(--critico); background: var(--critico-bg); }
.pano-feed__est--ok     { color: var(--ok);      background: var(--ok-bg); }

/* --- Resumo por IA da frota --- */
.pano-ia {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--raio-lg);
    box-shadow: var(--shadow); padding: var(--e4); margin-bottom: var(--e5);
    display: flex; flex-direction: column; gap: var(--e2);
}
.pano-ia__cab { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--e3); }
.pano-ia__corpo p { margin: 0 0 var(--e2); line-height: 1.55; max-width: 110ch; }
.pano-ia__corpo p:last-child { margin-bottom: 0; }
.pano-ia__rodape { margin: 0; font-size: var(--fs-xs); }

/* --- Fita de módulos --- */
.pano-mods { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--e4); margin-bottom: var(--e5); }
.pano-mod {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--raio-lg);
    box-shadow: var(--shadow); padding: var(--e4); text-decoration: none; color: inherit;
    display: flex; flex-direction: column; gap: var(--e3); transition: border-color .15s, transform .15s;
}
.pano-mod:hover { border-color: var(--primary); transform: translateY(-2px); }
.pano-mod__cab { display: flex; align-items: center; gap: var(--e3); }
.pano-mod__cab h3 { margin: 0; font-size: var(--fs-md); }
.pano-mod__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e1); font-size: var(--fs-sm); }
.pano-mod__lista li { display: flex; align-items: center; gap: var(--e2); }
.pano-mod__lista b { margin-left: auto; font-variant-numeric: tabular-nums; }

/* --- Vitais do servidor --- */
.pano-vitais {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--raio-lg);
    box-shadow: var(--shadow); padding: var(--e4);
}
.pano-vitais__title { margin: 0 0 var(--e3); font-size: var(--fs-md); }
.pano-vitais__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--e4); }
.pano-medidor { display: flex; flex-direction: column; gap: var(--e1); }
.pano-medidor__rot { font-size: var(--fs-xs); color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.pano-medidor__val { font-size: var(--fs-xl); font-variant-numeric: tabular-nums; }
.pano-medidor--uptime .pano-medidor__val { font-size: var(--fs-md); }
.barra--sem .barra__fill { background: var(--muted); opacity: .4; }

/* --- Aparelhos de assinante (cabo × Wi-Fi + top marcas) --- */
.pano-apar { display: grid; grid-template-columns: 1fr 2fr; gap: var(--e4); margin-bottom: var(--e5); }
.pano-traf__dir { font-variant-numeric: tabular-nums; }
.pano-meio {
    display: flex; height: 12px; width: 100%; border-radius: var(--raio-pill);
    background: var(--surface-3); overflow: hidden;
}
.pano-meio__seg { display: block; height: 100%; }
.pano-meio__seg--cabo  { background: var(--neutro); }
.pano-meio__seg--wifi  { background: var(--primary); }
.pano-meio__seg--indef { background: var(--surface-3); }
.pano-dot--cabo { background: var(--neutro); }
.pano-dot--wifi { background: var(--primary); }
.pano-marcas { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e2); }
.pano-marcas__item {
    display: grid; grid-template-columns: minmax(90px, 160px) 1fr 3.5em 3em;
    align-items: center; gap: var(--e3); font-size: var(--fs-sm);
}
.pano-marcas__nome { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pano-marcas__qtd, .pano-marcas__pct { text-align: right; font-variant-numeric: tabular-nums; }
.pano-marcas__pct { color: var(--muted); font-size: var(--fs-xs); }

@media (max-width: 1100px) {
    .pano-hero, .pano-mods { grid-template-columns: repeat(2, 1fr); }
    .pano-apar { grid-template-columns: 1fr; }
    .pano-vitais__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .pano-hero, .pano-mods, .pano-vitais__grid { grid-template-columns: 1fr; }
}

/* ===========================================================================
   FLOW — sub-navegação e mapa-múndi.
   =========================================================================== */
.subnav {
    display: flex; gap: var(--e1); flex-wrap: wrap;
    border-bottom: 1px solid var(--border); margin-bottom: var(--e4);
}
.subnav__item {
    padding: var(--e2) var(--e4); text-decoration: none; color: var(--muted);
    font-weight: 600; font-size: var(--fs-md); border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}
.subnav__item:hover { color: var(--text); }
.subnav__item.is-ativo { color: var(--primary); border-bottom-color: var(--primary); }

.segbtn { display: inline-flex; border: 1px solid var(--border); border-radius: var(--raio); overflow: hidden; }
.segbtn__op {
    padding: var(--e2) var(--e3); text-decoration: none; color: var(--muted);
    font-size: var(--fs-sm); font-weight: 600; border-left: 1px solid var(--border);
}
.segbtn__op:first-child { border-left: 0; }
.segbtn__op:hover { background: var(--surface-2); color: var(--text); }
.segbtn__op.is-ativo { background: var(--primary); color: var(--primary-contrast); }

.flow-mapa-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--e4); flex-wrap: wrap; margin-bottom: var(--e4); }
.flow-mapa-total { font-size: var(--fs-sm); }

.flow-mapa-grid { display: grid; grid-template-columns: 2fr 1fr; gap: var(--e4); align-items: start; }
.flow-mapa-card { padding: 0; overflow: hidden; }
.flow-mapa {
    height: clamp(420px, 62vh, 720px); width: 100%; position: relative; z-index: 0; isolation: isolate;
    background: var(--surface-2); border-radius: var(--raio-lg);
}
/* Em 2 colunas, a lista acompanha a altura do mapa e rola por dentro — sem
   aquele vazio embaixo do mapa em tela grande. */
@media (min-width: 901px) {
    .flow-mapa-lista { max-height: clamp(420px, 62vh, 720px); overflow-y: auto; }
    .flow-mapa-lista .card__title {
        position: sticky; top: 0; z-index: 2; margin: 0;
        background: var(--surface); padding: var(--e4) var(--e5) var(--e3);
    }
}
.flow-mapa__fallback { display: flex; align-items: center; justify-content: center; height: 100%; padding: var(--e5); text-align: center; }

/* Arcos com fluxo correndo (tipo GIF) — pontilhado animado em direção ao PoP.
   A duração de cada arco é setada inline no JS conforme o volume. */
.flow-arc { animation: flow-arco 1.6s linear infinite; }
@keyframes flow-arco { to { stroke-dashoffset: 26; } }
@media (prefers-reduced-motion: reduce) { .flow-arc { animation: none; } }

/* Leitura de velocidade ao vivo sobre o mapa. */
.flow-mapa-card { position: relative; }
.flow-mapa-speed {
    position: absolute; top: 10px; right: 10px; z-index: 5;
    display: flex; gap: var(--e2); pointer-events: none;
}
.flow-mapa-speed__item {
    display: inline-flex; align-items: baseline; gap: 4px;
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    border: 1px solid var(--border); border-radius: var(--raio);
    padding: 4px var(--e2); font-size: var(--fs-sm); backdrop-filter: blur(3px);
    box-shadow: var(--shadow);
}
.flow-mapa-speed__item b { font-size: var(--fs-md); font-variant-numeric: tabular-nums; }
.flow-mapa-speed__item small { color: var(--muted); font-size: var(--fs-xs); }
.flow-mapa-speed__seta { font-size: 10px; }
.flow-mapa-speed__item--in  .flow-mapa-speed__seta { color: var(--primary); }
.flow-mapa-speed__item--out .flow-mapa-speed__seta { color: var(--ok); }

/* Botão "Apresentação" pulsa enquanto o tour roda. */
.btn.is-tocando { animation: tour-pulso 1.7s ease-in-out infinite; }
@keyframes tour-pulso {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary) 55%, transparent); }
    60% { box-shadow: 0 0 0 7px transparent; }
}

/* "● ao vivo" pulsando no título. */
.ao-vivo { font-size: var(--fs-sm); color: var(--critico); font-weight: 700; vertical-align: middle; }
.ao-vivo::first-letter { animation: ao-vivo-pulso 1.4s ease-in-out infinite; }
@keyframes ao-vivo-pulso { 0%,100% { opacity: 1; } 50% { opacity: .25; } }

/* Pílula de velocidade sobre o arco (como o original). */
.arc-speed { width: 0; height: 0; }
.arc-speed__lbl {
    position: absolute; left: 0; top: 0; transform: translate(-50%, -50%);
    background: rgba(15, 23, 42, .88); color: #fff; font-size: 10px; font-weight: 700;
    padding: 2px 6px; border-radius: 10px; white-space: nowrap; line-height: 1.3;
    border: 1px solid rgba(255, 255, 255, .18); box-shadow: 0 1px 4px rgba(0, 0, 0, .45);
}

/* Pino de país com a sigla — badge com ponteiro pra baixo. */
.pais-pin { background: none; border: 0; }
.pais-pin > span {
    display: flex; align-items: center; justify-content: center;
    width: 30px; height: 24px; border-radius: 8px;
    background: var(--primary); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .02em;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .35); position: relative;
}
.pais-pin > span::after {
    content: ''; position: absolute; bottom: -5px; left: 50%; transform: translateX(-50%);
    width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent;
    border-top: 6px solid var(--primary);
}
.pais-pin--pop > span { background: var(--critico); }
.pais-pin--pop > span::after { border-top-color: var(--critico); }

/* Lista lateral em Mbps → Brasil. */
.fluxo-seta { color: var(--muted); margin: 0 2px; }
.fluxo-nac { color: var(--muted); font-size: var(--fs-xs); }

/* Lista de fluxos por país — flex, responsiva em qualquer largura. */
.fx-lista { list-style: none; margin: 0; padding: 0; }
.fx-item {
    display: grid; grid-template-columns: 1fr auto; align-items: center;
    gap: 4px var(--e3); padding: var(--e2) var(--e4);
    border-bottom: 1px solid var(--border); font-size: var(--fs-sm);
}
.fx-item:last-child { border-bottom: 0; }
.fx-item__pais { min-width: 0; line-height: 1.5; overflow-wrap: anywhere; }
.fx-item__vel { white-space: nowrap; font-variant-numeric: tabular-nums; }
.fx-item__barra { grid-column: 1 / -1; margin-top: 2px; }
.pais-flag--br { background: color-mix(in srgb, var(--ok) 26%, var(--surface-3)); color: var(--ok); }
.flow-mapa-lista td b { font-variant-numeric: tabular-nums; }
.leaflet-container { background: var(--surface-2); font: inherit; border-radius: var(--raio-lg); }
.leaflet-tooltip { background: var(--surface); color: var(--text); border: 1px solid var(--border); box-shadow: var(--shadow); font-size: var(--fs-sm); }
.leaflet-tooltip-top::before { border-top-color: var(--border); }

.flow-mapa-lista .num { text-align: right; }
.pais-flag {
    display: inline-block; min-width: 2.2em; padding: 0 4px; margin-right: var(--e2);
    font-size: var(--fs-xs); font-weight: 700; text-align: center;
    background: var(--surface-3); border-radius: var(--raio-sm); color: var(--muted);
}
.flow-mapa-lista td .barra--fina { margin-top: 4px; }

@media (max-width: 900px) {
    .flow-mapa-grid { grid-template-columns: 1fr; }
    .flow-mapa { height: 380px; }
}

/* --- Flow · tráfego em tempo real (KPIs + gráfico uPlot ao vivo) --- */
.flow-vivo { margin-bottom: var(--e5); }
.flow-kpis { display: grid; grid-template-columns: 2fr 1fr 1fr 1.1fr; gap: var(--e4); margin-bottom: var(--e4); }
.flow-kpi {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--raio-lg);
    box-shadow: var(--shadow); padding: var(--e4); display: flex; flex-direction: column; gap: 2px;
}
.flow-kpi--destaque { border-left: 3px solid var(--primary); }
.flow-kpi__rot { font-size: var(--fs-xs); color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.flow-kpi__val { font-size: var(--fs-3xl); line-height: 1.05; font-variant-numeric: tabular-nums; }
.flow-kpi__sub { font-size: var(--fs-sm); color: var(--muted); margin-top: 2px; }

/* Saída de texto da análise por IA (incidente): preserva parágrafos. */
.ia-saida { white-space: pre-wrap; line-height: 1.5; margin: var(--e3) 0 0; }

/* Seletor de provedor de IA (tela /ia/config). */
.ia-prov-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--e3); margin-top: var(--e3); }
.ia-prov {
    display: grid; gap: 2px; padding: var(--e3); cursor: pointer;
    border: 1px solid var(--border); border-radius: var(--raio-md); background: var(--surface);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.ia-prov:hover { border-color: var(--primary); }
.ia-prov.is-ativo { border-color: var(--primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 30%, transparent); }
.ia-prov input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.ia-prov__nome { font-weight: 700; }
.ia-prov__chave { font-size: var(--fs-xs); font-weight: 600; }
.ia-prov__env { font-size: var(--fs-xs); font-family: ui-monospace, monospace; overflow-wrap: anywhere; }
.ia-cfg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e3) var(--e4); }
.ia-check { display: flex; align-items: center; gap: var(--e2); align-self: end; padding-bottom: 6px; }
.ia-check input { width: auto; }
@media (max-width: 760px) { .ia-cfg-grid { grid-template-columns: 1fr; } }

/* Card "Risco da rede": donut 0–100 com anel colorido por nível. */
.flow-kpi--risco { align-items: flex-start; }
.risco-donut { position: relative; width: 64px; height: 64px; margin: 2px 0; }
.risco-donut svg { display: block; }
.risco-donut__bg { stroke: var(--border); }
.risco-donut__arco { stroke: var(--ok); transition: stroke-dasharray .6s ease, stroke .3s ease; }
.risco-donut__num {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-size: var(--fs-lg); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--texto, inherit);
}
/* nível pinta o anel, o número e o rótulo */
.flow-kpi--risco[data-risco-nivel="tranquilo"] .risco-donut__arco { stroke: var(--ok); }
.flow-kpi--risco[data-risco-nivel="atencao"]  .risco-donut__arco,
.flow-kpi--risco[data-risco-nivel="atencao"]  .risco-donut__num  { stroke: var(--atencao); color: var(--atencao); }
.flow-kpi--risco[data-risco-nivel="alerta"]   .risco-donut__arco,
.flow-kpi--risco[data-risco-nivel="alerta"]   .risco-donut__num  { stroke: var(--atencao); color: var(--atencao); }
.flow-kpi--risco[data-risco-nivel="critico"]  .risco-donut__arco,
.flow-kpi--risco[data-risco-nivel="critico"]  .risco-donut__num  { stroke: var(--critico); color: var(--critico); }
.flow-kpi--risco[data-risco-nivel="critico"] { border-left: 3px solid var(--critico); }
.flow-kpi--risco[data-risco-nivel="alerta"]  { border-left: 3px solid var(--atencao); }
.flow-vivo-card { padding: var(--e4); }
.flow-vivo-head { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); margin-bottom: var(--e3); flex-wrap: wrap; }
.flow-vivo-titulo { font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.flow-vivo-tabs { display: inline-flex; gap: var(--e3); align-items: center; flex-wrap: wrap; }
.flow-vivo-fam, .flow-vivo-jan { display: inline-flex; gap: 6px; }
.flow-vivo-chart { width: 100%; min-height: 260px; position: relative; }
.flow-vivo-espera { display: flex; align-items: center; justify-content: center; min-height: 260px; text-align: center; }
/* uPlot herda o tema (o traço vem do JS; aqui só a base e a legenda/cursor) */
.u-wrap { font: inherit !important; }
.u-legend { display: none; }
@media (max-width: 1100px) { .flow-kpis { grid-template-columns: 1fr 1fr; } }
@media (max-width: 900px) { .flow-kpis { grid-template-columns: 1fr; } }

/* --- Sankey (SVG server-side) --- */
.sankey-card { padding: var(--e4); }
.sankey { width: 100%; height: auto; display: block; }
.sankey__rot { fill: var(--text); font-size: 12px; font-weight: 600; }
.sankey__rot--dir { }
.sankey__sub { fill: var(--muted); font-weight: 400; font-size: 11px; }
.sankey-legenda { margin: var(--e3) 0 0; font-size: var(--fs-sm); }

/* --- Explorar (pivô/heatmap do Flow) --- */
.explorar-toolbar { display: flex; align-items: flex-end; gap: var(--e4); flex-wrap: wrap; margin-bottom: var(--e4); }
.explorar-campo { display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-sm); }
.explorar-campo > span { color: var(--muted); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .03em; }
.explorar-campo select {
    padding: var(--e2) var(--e3); border: 1px solid var(--border); border-radius: var(--raio);
    background: var(--surface); color: var(--text); font: inherit; font-size: var(--fs-sm);
}
.explorar-total { margin-left: auto; }
.explorar-card { padding: 0; }
.explorar-scroll { overflow-x: auto; }
.explorar-matriz { min-width: 640px; font-size: var(--fs-sm); }
.explorar-matriz th, .explorar-matriz td { white-space: nowrap; }
.explorar-matriz thead th, .explorar-matriz tbody th { font-weight: 600; }
.explorar-matriz tbody th[scope="row"] { position: sticky; left: 0; background: var(--surface); z-index: 1; }
.explorar-canto { text-align: left; color: var(--muted); font-weight: 500 !important; }
.explorar-cel { text-align: right; font-variant-numeric: tabular-nums; }
.explorar-tot { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; background: var(--surface-2); }
.explorar-matriz tfoot td, .explorar-matriz tfoot th { border-top: 2px solid var(--border); }

/* --- Flow · Relatório (imprimível) --- */
.rel-doc { padding: var(--e5); }
.rel-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--e4);
    flex-wrap: wrap; border-bottom: 2px solid var(--border); padding-bottom: var(--e4); margin-bottom: var(--e4); }
.rel-cab__marca { font-size: var(--fs-lg); font-weight: 800; color: var(--primary); }
.rel-cab__marca strong { color: var(--text); }
.rel-cab__titulo { margin: var(--e1) 0 0; font-size: var(--fs-xl); }
.rel-cab__meta { display: flex; gap: var(--e5); margin: 0; }
.rel-cab__meta dt { font-size: var(--fs-xs); color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.rel-cab__meta dd { margin: 2px 0 0; font-weight: 600; font-variant-numeric: tabular-nums; }

.rel-kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--e3); margin-bottom: var(--e5); }
.rel-kpi { border: 1px solid var(--border); border-left: 3px solid var(--primary); border-radius: var(--raio);
    padding: var(--e3); display: flex; flex-direction: column; gap: 2px; }
.rel-kpi__rot { font-size: var(--fs-xs); color: var(--muted); text-transform: uppercase; letter-spacing: .02em; }
.rel-kpi__val { font-size: var(--fs-xl); font-variant-numeric: tabular-nums; }

.rel-secao { margin-bottom: var(--e5); }
.rel-secao__titulo { font-size: var(--fs-md); margin: 0 0 var(--e3); padding-bottom: var(--e2); border-bottom: 1px solid var(--border); }
.rel-chart-wrap { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--raio); padding: var(--e2); }
.rel-chart { width: 100%; height: 200px; display: block; }
.rel-chart__areaE { fill: url(#relGradE); stroke: none; }
.rel-chart__linhaE { fill: none; stroke: var(--primary); stroke-width: 2; vector-effect: non-scaling-stroke; }
.rel-chart__linhaS { fill: none; stroke: var(--ok); stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-dasharray: 4 3; }
.rel-legenda { display: flex; gap: var(--e4); align-items: center; margin: var(--e2) 0 0; font-size: var(--fs-sm); }
.rel-leg { display: inline-flex; align-items: center; gap: 6px; }
.rel-leg::before { content: ''; width: 14px; height: 3px; border-radius: 2px; }
.rel-leg--ent::before { background: var(--primary); }
.rel-leg--sai::before { background: var(--ok); }

.rel-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e4); }
.rel-tab td { padding: var(--e2) var(--e2); vertical-align: middle; }
.rel-tab .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rel-tab .barra--fina { margin-top: 4px; }
.rel-rodape { margin-top: var(--e5); padding-top: var(--e3); border-top: 1px solid var(--border); font-size: var(--fs-sm); }

@media (max-width: 900px) {
    .rel-kpis { grid-template-columns: repeat(2, 1fr); }
    .rel-cols { grid-template-columns: 1fr; }
}

/* --- Dashboard OLT: análise de sinal + alertas --- */
.olt-analise { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e4); margin-bottom: var(--e5); align-items: start; }
.olt-dist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e3); }
.olt-dist__linha { display: grid; grid-template-columns: 1fr 2fr auto; align-items: center; gap: var(--e3); font-size: var(--fs-sm); }
.olt-dist__rot { display: flex; align-items: center; gap: var(--e2); white-space: nowrap; }
.olt-dist__rot small { color: var(--muted); font-size: var(--fs-xs); }
.olt-dist__cor { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; }
.olt-dist__cor--ok { background: var(--ok); }
.olt-dist__cor--neutro { background: var(--border-forte); }
.olt-dist__cor--atencao { background: var(--atencao); }
.olt-dist__cor--critico { background: var(--critico); }
.olt-dist__cor--sem { background: var(--muted); opacity: .5; }
.olt-dist__n { font-weight: 700; font-variant-numeric: tabular-nums; min-width: 2.5ch; text-align: right; }
.olt-dist__fill--ok { background: var(--ok); }
.olt-dist__fill--neutro { background: var(--border-forte); }
.olt-dist__fill--atencao { background: var(--atencao); }
.olt-dist__fill--critico { background: var(--critico); }
.olt-sem-alerta { display: flex; align-items: center; gap: var(--e3); padding: var(--e4); color: var(--muted); }
.olt-sem-alerta__icone {
    display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
    border-radius: 50%; background: var(--ok-bg); color: var(--ok); font-weight: 800; flex: 0 0 auto;
}
.olt-sem-alerta p { margin: 0; }
@media (max-width: 900px) { .olt-analise { grid-template-columns: 1fr; } }

/* --- Histórico de sinal dos aparelhos Wi-Fi (ficha da CPE) --- */
.hh-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e2); }
.hh-item {
    display: grid; grid-template-columns: 1.4fr 2fr auto; align-items: center; gap: var(--e3);
    padding: var(--e2) var(--e3); border: 1px solid var(--border); border-radius: var(--raio);
    border-left-width: 3px;
}
.hh-item--ok    { border-left-color: var(--ok); }
.hh-item--med   { border-left-color: var(--atencao); }
.hh-item--fraco { border-left-color: var(--critico); }
.hh-item__id { min-width: 0; }
.hh-item__nome { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hh-item__pts { font-size: var(--fs-xs); color: var(--muted); }
.hh-spark { width: 100%; height: 40px; display: block; }
.hh-spark polyline { fill: none; stroke: var(--muted); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.hh-item--ok    .hh-spark polyline { stroke: var(--ok); }
.hh-item--med   .hh-spark polyline { stroke: var(--atencao); }
.hh-item--fraco .hh-spark polyline { stroke: var(--critico); }
.hh-item__vals { text-align: right; white-space: nowrap; }
.hh-item__pior { display: block; font-size: var(--fs-xs); color: var(--muted); }

@media (max-width: 560px) {
    .hh-item { grid-template-columns: 1fr auto; }
    .hh-item .hh-spark { grid-column: 1 / -1; order: 3; }
}

/* Impressão: o técnico às vezes imprime a ficha pro chamado. */
@media print {
    .topbar, .footer, .ficha-head__acoes, .abas__nav, .toolbar, .rel-noprint { display: none !important; }
    .abas__painel { display: block !important; }
    .card { box-shadow: none; break-inside: avoid; }
    body { background: #fff; }
    /* Relatório: sem borda de card, força tema claro pra economizar tinta. */
    .rel-doc { border: 0; padding: 0; }
    .rel-secao { break-inside: avoid; }
    :root { color-scheme: light; }
}

/* ==========================================================================
   7. LAYOUT PADRÃO DE PÁGINA (padronização cross-telas)

   Classes utilitárias para unificar o layout de todas as telas do painel:
   - .pagina          wrapper do conteúdo da página (já dentro de .content)
   - .pagina__cab     cabeçalho padronizado (título + subtítulo + ações)
   - .grade-cards     grid responsivo de cards com altura uniforme
   - .tabela-scroll   wrapper de tabela com rolagem horizontal visível no celular

   Estas classes NÃO substituem as existentes (.page-head, .card, .tabela etc.) —
   são complementares. Views legadas continuam funcionando; views novas ou
   refatoradas usam estas para garantir consistência visual.
   ========================================================================== */

/* ---------- Página (wrapper) ---------- */
.pagina {
    display: flex;
    flex-direction: column;
    gap: var(--e5);
}

/* ---------- Cabeçalho de página padronizado ---------- */
.pagina__cab {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--e4);
    flex-wrap: wrap;
    margin-bottom: var(--e5);   /* mesmo respiro do .page-head antigo (e2 colava nos cards) */
}
.pagina__titulos {
    display: flex;
    flex-direction: column;
    gap: var(--e1);
    min-width: 0; /* permite truncar em telas estreitas */
}
.pagina__titulo {
    margin: 0;
    font-size: var(--fs-2xl);
    letter-spacing: -.015em;
    line-height: var(--lh-tight);
    font-weight: 700;
}
.pagina__subtitulo {
    margin: 0;
    font-size: var(--fs-md);
    line-height: var(--lh);
}
.pagina__acoes {
    display: flex;
    align-items: center;
    gap: var(--e2);
    flex-wrap: wrap;
    flex-shrink: 0;
}

/* ---------- Grade de cards (grid responsivo uniforme) ---------- */
.grade-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--e4);
    align-items: stretch; /* cards da mesma linha ficam com a mesma altura */
}
/* Variante compacta: cards menores (ex.: stats, KPIs) */
.grade-cards--compacta {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--e3);
}
/* Variante larga: cards que precisam de mais espaço (ex.: gráficos, mapas) */
.grade-cards--larga {
    grid-template-columns: repeat(auto-fit, minmax(480px, 1fr));
    gap: var(--e4);
}

/* Card dentro de grade: garante altura uniforme e título consistente */
.grade-cards > .card {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.grade-cards > .card > .card__title {
    font-size: var(--fs-lg);
    font-weight: 700;
    letter-spacing: -.01em;
    margin: 0 0 var(--e3);
}
.grade-cards > .card > *:last-child {
    margin-bottom: 0;
}

/* ---------- Tabela com rolagem horizontal (celular) ---------- */
.tabela-scroll {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    position: relative;
}
/* Indicador visual de rolagem: sombra suave na direita quando há overflow */
.tabela-scroll::after {
    content: '';
    position: sticky;
    right: 0;
    top: 0;
    bottom: 0;
    width: 24px;
    pointer-events: none;
    background: linear-gradient(to right, transparent, var(--surface));
    opacity: 0;
    transition: opacity .2s ease;
}
.tabela-scroll[data-overflow="true"]::after {
    opacity: 1;
}
.tabela-scroll .tabela {
    min-width: 600px; /* força rolagem em telas estreitas */
}
/* Primeira coluna fixa na rolagem (sticky left) */
.tabela-scroll .tabela th:first-child,
.tabela-scroll .tabela td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--surface);
    border-right: 1px solid var(--border);
}
.tabela-scroll .tabela thead th:first-child {
    z-index: 3;
    background: var(--surface-2);
}

/* ---------- Responsividade do cabeçalho e grades ---------- */
@media (max-width: 640px) {
    .pagina__cab {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--e3);
    }
    .pagina__acoes {
        width: 100%;
        justify-content: flex-start;
    }
    .pagina__titulo {
        font-size: var(--fs-xl);
    }
    .grade-cards {
        grid-template-columns: 1fr;
    }
    .grade-cards--compacta {
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    }
    .grade-cards--larga {
        grid-template-columns: 1fr;
    }
    /* Botões não quebram palavra no meio em telas estreitas */
    .pagina__acoes .btn,
    .grade-cards .btn {
        white-space: nowrap;
        overflow-wrap: normal;
        word-break: keep-all;
    }
}

/* ---------- Mensagem de resultado de teste (Assistente / gerador SSH) ----------
   Cores do TEMA (--ok/--critico + -bg/-borda): nos dois temas o texto contrasta com o fundo. */
.ast-msg { margin-top: 10px; padding: 10px 12px; border-radius: 6px; font-size: .85rem; display: none; border: 1px solid transparent; }
.ast-msg--ok { background: var(--ok-bg); color: var(--ok); border-color: var(--ok-borda); }
.ast-msg--erro { background: var(--critico-bg); color: var(--critico); border-color: var(--critico-borda); }
.ast-msg--loading { background: var(--surface-2); color: var(--muted); border-color: var(--border); }