/* ==========================================================================
   GHR PULSE -- INFRAESTRUTURA / NETWORK OPERATIONS
   ==========================================================================

   OBJETIVO DE LAYOUT
   ------------------
   O dashboard principal cabe INTEIRO na área visível, sem rolagem
   vertical. Isso não é obtido diminuindo fonte: a página é um grid de
   altura 100% cujas linhas de conteúdo são `fr`. Quando a tela encolhe,
   os cards encolhem juntos e -- só se ainda faltar espaço -- a LISTA
   dentro do card rola, nunca a página.

   As medidas de respiro (`--n-*`) são clamp() amarrados a `vh`, então
   1920x1080, 1600x900 e 1366x768 recebem a mesma composição com
   densidade proporcional, em vez de três layouts diferentes.

   IDENTIDADE
   ----------
   Usa os tokens que já existem em style.css (--ghr-pulse-red, --bg,
   --card, --text, --muted, --border). Nenhuma paleta nova é criada.
   Vermelho só aparece em problema real; verde só em normalidade real;
   âmbar só em atenção real. O estado "sem dado" é CINZA, deliberadamente
   -- ausência de medição não é falha nem sucesso.
   ========================================================================== */

.infra-page {
    /* Neutraliza o override herdado da página antiga. */
    overflow: visible;
}

.noc {
    --n-gap: clamp(6px, .85vh, 11px);
    --n-pad: clamp(8px, 1.05vh, 14px);
    --n-radius: 10px;

    /* ESCALA TIPOGRÁFICA
       ------------------------------------------------------------------
       Os números principais (--n-fs-num / --n-fs-num-lg) NÃO mudaram:
       já estavam no ponto e aumentá-los empurraria a página para baixo.

       O que subiu ~1px foi só o texto de apoio -- rótulos, status,
       metadados das listas -- que estava no limite do legível a 1,5 m
       de distância, que é como um painel de NOC é lido.

       --n-fs-fonte é novo e PROPOSITALMENTE menor: carrega as linhas de
       proveniência ("Zabbix / SNMP", "pfSense / dpinger", referência da
       capacidade). É informação de auditoria, não de operação -- deve
       existir sem competir com o dado. */
    --n-fs-fonte: clamp(8.5px, .92vh, 10.5px);
    --n-fs-label: clamp(9.5px, 1vh, 11.5px);
    --n-fs-hint: clamp(10px, 1.05vh, 12px);
    --n-fs-body: clamp(11.5px, 1.25vh, 14px);
    --n-fs-num: clamp(15px, 2.05vh, 24px);
    --n-fs-num-lg: clamp(22px, 3.1vh, 38px);

    --n-ok: #15803d;
    --n-ok-soft: #eaf6ee;
    --n-warn: #b45309;
    --n-warn-soft: #fdf3e3;
    --n-bad: #b00035;
    --n-bad-soft: #fbebef;
    --n-off: #64748b;
    --n-off-soft: #f1f3f6;

    --n-ink: #111827;
    --n-line: #e7e8ec;
    --n-shadow: 0 1px 2px rgba(16, 24, 40, .04),
                0 6px 18px -12px rgba(16, 24, 40, .22);

    height: 100%;
    min-height: 0;
    display: grid;
    /* OBRIGATÓRIO declarar a coluna.
       Sem `grid-template-columns`, a coluna implícita é dimensionada por
       MAX-CONTENT: medido no navegador, ela resolvia para 1325px dentro
       de um container de 1284px e o `overflow:hidden` abaixo cortava
       41px do lado direito -- em silêncio. `minmax(0, 1fr)` prende a
       coluna à largura real do container e deixa o conteúdo interno
       encolher (o `0` é o que permite os `text-overflow: ellipsis`
       funcionarem em vez de empurrar a linha). */
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows:
        auto                 /* header       */
        auto                 /* health strip */
        /* A linha das operadoras é a MAIOR da tela: é ela que carrega
           os gráficos de tráfego vivo, que são o elemento central desta
           ferramenta. A de apartamentos vem logo abaixo, e o apoio
           operacional (alertas/capacidade/failover) fica na menor. */
        minmax(0, 1.45fr)    /* operadoras + gráficos */
        minmax(0, 1.1fr)     /* apartamentos + switches */
        minmax(0, .95fr)     /* apoio operacional */
        auto;                /* rodapé */
    gap: var(--n-gap);
    overflow: hidden;
    color: var(--n-ink);
    font-variant-numeric: tabular-nums;
}

/* Enquanto a primeira resposta não chega, o conteúdo fica levemente
   apagado -- sinaliza "ainda não é medição" sem piscar a tela. */
.noc[data-estado="carregando"] .noc-row,
.noc[data-estado="carregando"] .noc-strip {
    opacity: .55;
}

/* ==========================================================================
   HEADER
   ========================================================================== */

.noc-header {
    display: flex;
    align-items: center;
    gap: clamp(10px, 1.4vw, 22px);
    padding-bottom: calc(var(--n-gap) * .4);
    border-bottom: 1px solid var(--n-line);
}

.noc-header__id {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex: 0 0 auto;
}

.noc-header__id h1 {
    margin: 0;
    font-size: clamp(15px, 2.05vh, 22px);
    font-weight: 700;
    letter-spacing: -.2px;
    color: var(--n-ink);
}

.noc-header__kicker {
    font-size: var(--n-fs-label);
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--ghr-pulse-red, #9D002B);
    padding-left: 10px;
    border-left: 2px solid var(--n-line);
}

.noc-header__frase {
    flex: 1 1 auto;
    margin: 0;
    min-width: 0;
    font-size: var(--n-fs-hint);
    color: var(--muted, #6b7280);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.noc-header__right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

/* --- selo de estado geral ------------------------------------------------ */

.noc-state {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: clamp(22px, 3.1vh, 28px);
    padding: 0 11px;
    border-radius: 999px;
    font-size: var(--n-fs-hint);
    font-weight: 700;
    letter-spacing: .6px;
    border: 1px solid transparent;
}

.noc-state__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    flex: 0 0 auto;
}

.noc-state--operacional {
    color: var(--n-ok);
    background: var(--n-ok-soft);
    border-color: #cfe7d8;
}

.noc-state--operacional .noc-state__dot {
    animation: noc-pulso 2.4s ease-in-out infinite;
}

.noc-state--atencao {
    color: var(--n-warn);
    background: var(--n-warn-soft);
    border-color: #f0dfc0;
}

.noc-state--critico {
    color: var(--n-bad);
    background: var(--n-bad-soft);
    border-color: #f0ccd6;
}

.noc-state--desconhecido {
    color: var(--n-off);
    background: var(--n-off-soft);
    border-color: var(--n-line);
}

@keyframes noc-pulso {
    0%, 100% { opacity: 1; }
    50%      { opacity: .35; }
}

.noc-updated {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    text-align: right;
}

.noc-updated__label {
    font-size: var(--n-fs-label);
    text-transform: uppercase;
    letter-spacing: .7px;
    color: var(--muted, #6b7280);
}

.noc-updated strong {
    font-size: var(--n-fs-hint);
    font-weight: 700;
}

/* INDICADOR DE FRESCOR
   --------------------------------------------------------------------
   Escalona com a idade REAL da coleta (ver atualizarRelogio em
   infra.js). Enquanto o dado é recente fica discreto; ao envelhecer,
   ganha cor e um símbolo -- porque numa tela de NOC o pior estado
   possível é um número velho que parece atual. */

.noc-updated[data-frescor="atencao"] .noc-updated__label,
.noc-updated[data-frescor="atencao"] strong {
    color: var(--n-warn);
}

.noc-updated[data-frescor="critico"] .noc-updated__label,
.noc-updated[data-frescor="critico"] strong {
    color: var(--n-bad);
}

.noc-updated[data-frescor="atencao"] strong::before,
.noc-updated[data-frescor="critico"] strong::before {
    content: "⚠ ";
}

/* Card de WAN servindo a última leitura conhecida do pfSense. */
.noc-wan[data-qualidade-velha="1"] .noc-wan__qualidade {
    border-color: var(--n-warn);
    background: var(--n-warn-soft);
}

.noc-wan[data-qualidade-velha="1"] .noc-card__fonte {
    color: var(--n-warn);
    font-weight: 600;
}

.noc-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: clamp(22px, 3.1vh, 28px);
    padding: 0 10px;
    border-radius: 7px;
    border: 1px solid var(--n-line);
    background: var(--card, #fff);
    color: var(--n-ink);
    font-size: var(--n-fs-hint);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: border-color .15s, color .15s, background .15s;
}

.noc-link:hover {
    border-color: var(--ghr-pulse-red, #9D002B);
    color: var(--ghr-pulse-red, #9D002B);
}

/* ==========================================================================
   HEALTH STRIP
   ========================================================================== */

.noc-strip {
    display: grid;
    /* A célula de saúde é mais larga porque carrega a decomposição
       ("WAN 40/40 · Switches 26/30 · Wi-Fi 3/10 · Incidentes 5/20"),
       que truncava em "Switches 28/3…" com 1.35fr. */
    grid-template-columns: 1.85fr repeat(5, 1fr);
    gap: var(--n-gap);
}

.noc-strip__cell {
    position: relative;
    background: var(--card, #fff);
    border: 1px solid var(--n-line);
    border-radius: var(--n-radius);
    box-shadow: var(--n-shadow);
    padding: calc(var(--n-pad) * .72) var(--n-pad);
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    overflow: hidden;
}

/* A faixa de estado à esquerda é o que dá leitura periférica: dá para
   ler a linha inteira sem ler texto nenhum. */
.noc-strip__cell::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--n-off);
}

.noc-strip__cell[data-nivel="OPERACIONAL"]::before { background: var(--n-ok); }
.noc-strip__cell[data-nivel="ATENCAO"]::before     { background: var(--n-warn); }
.noc-strip__cell[data-nivel="CRITICO"]::before     { background: var(--n-bad); }

.noc-strip__label {
    font-size: var(--n-fs-label);
    font-weight: 700;
    letter-spacing: .9px;
    text-transform: uppercase;
    color: var(--muted, #6b7280);
}

.noc-strip__valor {
    font-size: clamp(12px, 1.6vh, 17px);
    font-weight: 700;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.noc-strip__cell[data-nivel="OPERACIONAL"] .noc-strip__valor { color: var(--n-ok); }
.noc-strip__cell[data-nivel="ATENCAO"]     .noc-strip__valor { color: var(--n-warn); }
.noc-strip__cell[data-nivel="CRITICO"]     .noc-strip__valor { color: var(--n-bad); }
.noc-strip__cell[data-nivel="DESCONHECIDO"] .noc-strip__valor { color: var(--n-off); }

.noc-strip__hint {
    font-size: var(--n-fs-hint);
    color: var(--muted, #6b7280);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Rótulo em cima ocupando a linha; número e barra lado a lado; e a
   decomposição embaixo, ATRAVESSANDO as duas colunas -- antes ela ficava
   presa na coluna estreita ao lado do número e era cortada. */
.noc-strip__cell--saude {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    align-items: center;
    column-gap: 12px;
    row-gap: 3px;
}

.noc-strip__cell--saude .noc-strip__label {
    grid-column: 1 / -1;
    grid-row: 1;
}

.noc-saude {
    display: flex;
    align-items: baseline;
    gap: 2px;
    grid-column: 1;
    grid-row: 2;
}

.noc-saude strong {
    font-size: var(--n-fs-num-lg);
    font-weight: 800;
    /* 1 exato cortava 2px do dígito; 1.1 dá o respiro sem mexer no
       tamanho, que já estava certo. */
    line-height: 1.1;
    letter-spacing: -1px;
}

.noc-saude__max {
    font-size: var(--n-fs-hint);
    color: var(--muted, #6b7280);
    font-weight: 600;
}

.noc-saude__barra {
    height: 5px;
    border-radius: 999px;
    background: #eef0f3;
    overflow: hidden;
    grid-column: 2;
    grid-row: 2;
    align-self: center;
}

.noc-saude__barra span {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: var(--n-off);
    transition: width .5s ease, background .3s ease;
}

.noc-strip__cell--saude[data-nivel="OPERACIONAL"] .noc-saude strong        { color: var(--n-ok); }
.noc-strip__cell--saude[data-nivel="OPERACIONAL"] .noc-saude__barra span  { background: var(--n-ok); }
.noc-strip__cell--saude[data-nivel="ATENCAO"]     .noc-saude strong       { color: var(--n-warn); }
.noc-strip__cell--saude[data-nivel="ATENCAO"]     .noc-saude__barra span  { background: var(--n-warn); }
.noc-strip__cell--saude[data-nivel="CRITICO"]     .noc-saude strong       { color: var(--n-bad); }
.noc-strip__cell--saude[data-nivel="CRITICO"]     .noc-saude__barra span  { background: var(--n-bad); }

/* A decomposição precisava de 310px e tinha 307 -- faltavam 3px.
   Resolver alargando a célula roubaria largura das outras cinco (a de
   Wi-Fi já é a mais apertada), então o ajuste é na fonte: é texto
   explicativo do índice, não um valor operacional, e no tamanho de
   proveniência ela cabe com folga sem encolher mais nada. */
.noc-strip__cell--saude .noc-strip__hint {
    grid-column: 1 / -1;
    grid-row: 3;
    align-self: start;
    font-size: var(--n-fs-fonte);
}

/* ==========================================================================
   LINHAS / CARDS
   ========================================================================== */

.noc-row {
    display: grid;
    gap: var(--n-gap);
    min-height: 0;
}

.noc-row--wan   { grid-template-columns: 1fr 1fr; }
.noc-row--aptos { grid-template-columns: 1.35fr 1fr; }
.noc-row--apoio { grid-template-columns: 1.15fr 1fr .85fr; }

.noc-card {
    background: var(--card, #fff);
    border: 1px solid var(--n-line);
    border-radius: var(--n-radius);
    box-shadow: var(--n-shadow);
    padding: var(--n-pad);
    display: flex;
    flex-direction: column;
    gap: calc(var(--n-gap) * .7);
    min-height: 0;
    min-width: 0;
    /* Rolagem INTERNA, não `hidden`: se numa tela muito baixa um card
       não couber, ele rola sozinho. `hidden` cortaria a última linha
       sem aviso -- num painel de NOC, esconder um número é pior do que
       mostrar uma barra de rolagem. A PÁGINA continua sem rolar. */
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
}

.noc-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex: 0 0 auto;
}

.noc-card__head h2 {
    margin: 0;
    font-size: var(--n-fs-label);
    font-weight: 700;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    color: var(--muted, #6b7280);
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.noc-card__head h2 i { font-size: 1.15em; opacity: .85; }

.noc-card__acao {
    background: none;
    border: 0;
    padding: 0;
    font-size: var(--n-fs-hint);
    font-weight: 600;
    color: var(--ghr-pulse-red, #9D002B);
    text-decoration: none;
    cursor: pointer;
}

.noc-card__acao:hover { text-decoration: underline; }

.noc-card__fonte {
    margin-top: auto;
    padding-top: 3px;
    font-size: var(--n-fs-fonte);
    color: #9aa1ab;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 0 0 auto;
}

.noc-card__rodape {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: var(--n-fs-fonte);
    color: #9aa1ab;
    flex: 0 0 auto;
}

/* O resumo "N recentes · N crônicos · N ativos" trunca antes de
   empurrar o botão "ver todos" para fora do card. O texto completo
   continua no `title` e no drawer. */
.noc-card__rodape > span:first-child {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.noc-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
    border-radius: 999px;
    flex: 0 0 auto;
    font-size: var(--n-fs-fonte);
    font-weight: 700;
    letter-spacing: .6px;
    white-space: nowrap;
    background: var(--n-off-soft);
    color: var(--n-off);
    border: 1px solid var(--n-line);
}

.noc-badge[data-nivel="OPERACIONAL"] { background: var(--n-ok-soft);   color: var(--n-ok);   border-color: #cfe7d8; }
.noc-badge[data-nivel="ATENCAO"]     { background: var(--n-warn-soft); color: var(--n-warn); border-color: #f0dfc0; }
.noc-badge[data-nivel="CRITICO"]     { background: var(--n-bad-soft);  color: var(--n-bad);  border-color: #f0ccd6; }

/* ==========================================================================
   CARDS DE WAN
   ========================================================================== */

.noc-wan { position: relative; }

/* Link que está roteando agora recebe um filete na borda superior. */
.noc-wan[data-ativo="1"]::after {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    border-radius: var(--n-radius) var(--n-radius) 0 0;
    background: linear-gradient(90deg,
                var(--ghr-pulse-red, #9D002B), #d4a15f);
}

.noc-wan .noc-card__head h2 {
    font-size: clamp(12px, 1.55vh, 16px);
    letter-spacing: .2px;
    text-transform: none;
    color: var(--n-ink);
}

/* --- as três camadas: interface / gateway / internet --------------------- */

/* As três camadas migraram para DENTRO do cabeçalho: elas são o
   estado, não uma seção -- e o espaço que ocupavam embaixo agora é do
   gráfico. */
.noc-wan__camadas {
    display: flex;
    gap: 4px;
    flex: 1 1 auto;
    justify-content: center;
    min-width: 0;
}

.noc-wan__camadas span {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 3px 7px;
    border-radius: 6px;
    background: var(--n-off-soft);
    font-size: var(--n-fs-label);
    font-weight: 600;
    color: var(--n-off);
    white-space: nowrap;
    overflow: hidden;
}

.noc-wan__camadas span i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--n-off);
    flex: 0 0 auto;
}

.noc-wan__camadas span[data-ok="1"] { background: var(--n-ok-soft);  color: var(--n-ok); }
.noc-wan__camadas span[data-ok="1"] i { background: var(--n-ok); }
.noc-wan__camadas span[data-ok="0"] { background: var(--n-bad-soft); color: var(--n-bad); }
.noc-wan__camadas span[data-ok="0"] i { background: var(--n-bad); }

/* --- números principais -------------------------------------------------- */

/* Faixa de números: download e upload grandes à esquerda (é o que se
   olha primeiro) e latência/jitter/perda compactos à direita. */
.noc-wan__taxas {
    display: grid;
    grid-template-columns: auto auto 1fr;
    align-items: center;
    gap: clamp(8px, 1.2vw, 20px);
    flex: 0 0 auto;
}

.noc-taxa {
    display: flex;
    align-items: baseline;
    gap: 3px;
    white-space: nowrap;
}

.noc-taxa__seta {
    font-size: var(--n-fs-body);
    font-weight: 800;
    line-height: 1;
}

.noc-taxa--down .noc-taxa__seta { color: #0f766e; }
.noc-taxa--up   .noc-taxa__seta { color: var(--ghr-pulse-red, #9D002B); }

.noc-taxa strong {
    font-size: var(--n-fs-num);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.6px;
}

.noc-taxa__un {
    font-size: var(--n-fs-fonte);
    color: var(--muted, #6b7280);
    font-weight: 600;
}

.noc-wan__principal > div {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px;
}

/* ATENÇÃO AO EIXO.
   Este rótulo aparece em três blocos com direções de flex diferentes:

     .noc-wan__principal > div   flex ROW + wrap  -> `100%` = largura
     .noc-wan__qualidade > div   flex COLUMN      -> `100%` = ALTURA
     .noc-failover__ativo        flex COLUMN      -> `100%` = ALTURA

   Com `flex: 1 0 100%` global, nos dois últimos o rótulo reivindicava a
   altura inteira do bloco e empurrava o número para fora da caixa --
   medido: 61px de conteúdo espremidos em 39px, com o valor vazando por
   cima do elemento seguinte. O padrão passa a ser neutro e a quebra de
   linha é pedida só onde o eixo é horizontal. */
.noc-metric__label {
    flex: 0 0 auto;
    font-size: var(--n-fs-label);
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: var(--muted, #6b7280);
}

/* Só aqui o eixo é horizontal: o rótulo ocupa a linha toda para o
   número cair embaixo dele. */
.noc-wan__principal .noc-metric__label {
    flex: 1 0 100%;
}

.noc-wan__principal strong {
    font-size: var(--n-fs-num);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.5px;
}

.noc-metric__unidade {
    font-size: var(--n-fs-hint);
    color: var(--muted, #6b7280);
    font-weight: 600;
}

.noc-wan__qualidade {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    padding: 3px 0 3px clamp(8px, 1vw, 16px);
    border-left: 1px solid var(--n-line);
    min-width: 0;
}

.noc-wan__qualidade > div { display: flex; flex-direction: column; gap: 1px; }

.noc-wan__qualidade strong {
    font-size: var(--n-fs-body);
    font-weight: 700;
}

.noc-wan__qualidade strong[data-indisponivel="1"] {
    font-size: var(--n-fs-hint);
    font-weight: 600;
    color: var(--n-off);
    font-style: italic;
}

/* ==========================================================================
   GRÁFICO DE TRÁFEGO VIVO
   --------------------------------------------------------------------------
   Ocupa toda a altura que sobra do card (`flex: 1 1 auto`), então cresce
   junto com a tela em vez de ter altura fixa. O canvas é dimensionado em
   pixels pelo JS a cada desenho, acompanhando devicePixelRatio.
   ========================================================================== */

.noc-grafico {
    position: relative;
    flex: 1 1 auto;
    min-height: clamp(52px, 9vh, 130px);
    border-radius: 6px;
    background:
        linear-gradient(180deg, rgba(15,118,110,.03), rgba(15,118,110,0));
    border: 1px solid var(--n-line);
    overflow: hidden;
}

.noc-grafico canvas {
    display: block;
    width: 100%;
    height: 100%;
}

.noc-grafico__vazio {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--n-fs-fonte);
    font-style: italic;
    color: var(--n-off);
    pointer-events: none;
}

.noc-grafico__vazio[hidden] { display: none; }

.noc-grafico__janela {
    position: absolute;
    right: 5px;
    top: 3px;
    font-size: var(--n-fs-fonte);
    color: #9aa1ab;
    pointer-events: none;
}

.noc-wan__rodape {
    display: flex;
    justify-content: space-between;
    gap: 6px;
    font-size: var(--n-fs-hint);
    color: var(--muted, #6b7280);
    flex: 0 0 auto;
}

.noc-wan__rodape b { color: var(--n-ink); font-weight: 700; }

/* ==========================================================================
   COLUNA FAILOVER + TOPOLOGIA
   ========================================================================== */

.noc-stack {
    display: grid;
    /* Failover carrega 4 blocos de texto; Caminho é só uma fileira de
       pontos com rótulo. Dividir a coluna ao meio fazia o Failover
       rolar 8px em 1600x900 enquanto o Caminho sobrava espaço. */
    grid-template-rows: minmax(0, 1.4fr) minmax(0, 1fr);
    grid-template-columns: minmax(0, 1fr);
    gap: var(--n-gap);
    /* Mesma armadilha do `.noc`: como item de grid, o padrão é
       min-width/min-height AUTO, e o conteúdo do caminho da rede
       (6 rótulos que não quebram) empurrava a coluna. */
    min-height: 0;
    min-width: 0;
}

.noc-card--mini { gap: calc(var(--n-gap) * .5); }

/* Os cards mini da coluna de apoio não têm altura para a linha de
   proveniência: medido, ela sozinha fazia o card de Failover estourar
   ~20px em 1920x1080, 1600x900 e 1366x768. O texto continua acessível
   no `title` do card (posto pelo JS) e os grupos de failover completos
   seguem no drawer. */
.noc-card--mini .noc-card__fonte { display: none; }

/* Guarda de altura: item de flex encolhe abaixo do próprio conteúdo por
   padrão. Este bloco é curto e obrigatório (rótulo + nome do link que
   está roteando) -- não deve ceder altura para ninguém. A sobreposição
   que aparecia aqui tinha outra origem, corrigida em
   `.noc-metric__label`. */
.noc-failover__ativo {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 0 0 auto;
}

.noc-failover__ativo strong {
    font-size: clamp(14px, 1.9vh, 20px);
    font-weight: 800;
    line-height: 1.1;
}

/* Este, sim, pode ceder -- mas cortando LINHA INTEIRA com reticências,
   não fatiando a última linha ao meio como acontecia. */
.noc-failover__ultimo {
    margin: 0;
    font-size: var(--n-fs-hint);
    color: var(--muted, #6b7280);
    line-height: 1.35;
    flex: 1 1 auto;
    min-height: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --- caminho compacto ---------------------------------------------------- */

.noc-topo__grafo {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    align-items: center;
    gap: 3px;
    overflow: hidden;
}

.noc-topo__no {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    text-align: center;
}

/* "SWITCHES 11/11" virava "SWITC…" na coluna estreita. Quebrar em duas
   linhas mostra o rótulo inteiro e custa menos que abreviar o texto --
   que é dado vindo do backend e não deve ser mexido aqui. */
.noc-topo__no b {
    font-size: var(--n-fs-label);
    font-weight: 700;
    letter-spacing: .2px;
    line-height: 1.2;
    color: var(--n-ink);
    max-width: 100%;
    overflow-wrap: anywhere;
}

.noc-topo__dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--n-off);
    box-shadow: 0 0 0 3px var(--n-off-soft);
}

.noc-topo__no[data-nivel="OPERACIONAL"] .noc-topo__dot { background: var(--n-ok);   box-shadow: 0 0 0 3px var(--n-ok-soft); }
.noc-topo__no[data-nivel="ATENCAO"]     .noc-topo__dot { background: var(--n-warn); box-shadow: 0 0 0 3px var(--n-warn-soft); }
.noc-topo__no[data-nivel="CRITICO"]     .noc-topo__dot { background: var(--n-bad);  box-shadow: 0 0 0 3px var(--n-bad-soft); }

.noc-topo__linha {
    flex: 0 0 auto;
    width: 12px;
    height: 1px;
    background: var(--n-line);
    margin-bottom: 12px;
}

/* --- as duas WANs entram juntas no primeiro degrau ----------------------- */

.noc-topo__par {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* ==========================================================================
   TOP CONSUMO
   ========================================================================== */

/* ==========================================================================
   TRÁFEGO DOS APARTAMENTOS
   ========================================================================== */

.noc-aptos__painel {
    display: flex;
    flex-direction: column;
    gap: calc(var(--n-gap) * .5);
    flex: 1 1 auto;
    min-height: 0;
}

.noc-aptos__painel[hidden] { display: none; }

/* Abas -- a distinção AGORA x ACUMULADO precisa ser óbvia, porque são
   duas perguntas diferentes: "quem está usando" e "quem mais usou". */
.noc-abas {
    display: inline-flex;
    gap: 2px;
    padding: 2px;
    border-radius: 8px;
    background: #eef0f3;
    flex: 0 0 auto;
}

.noc-abas button {
    border: 0;
    background: transparent;
    padding: 3px 12px;
    border-radius: 6px;
    font-size: var(--n-fs-label);
    font-weight: 700;
    letter-spacing: .4px;
    color: var(--muted, #6b7280);
    cursor: pointer;
    transition: background .15s, color .15s;
}

.noc-abas button.ativo {
    background: var(--card, #fff);
    color: var(--ghr-pulse-red, #9D002B);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .1);
}

/* --- lista AGORA ------------------------------------------------- */

.noc-fluxo {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
}

.noc-fluxo li {
    display: grid;
    grid-template-columns: minmax(84px, auto) 1fr auto;
    align-items: center;
    gap: 9px;
    padding: calc(var(--n-pad) * .26) 0;
    border-bottom: 1px dashed var(--n-line);
}

.noc-fluxo li:last-child { border-bottom: 0; }

.noc-fluxo__quem { min-width: 0; line-height: 1.15; }

.noc-fluxo__quem b {
    display: block;
    font-size: var(--n-fs-body);
    font-weight: 700;
    white-space: nowrap;
}

.noc-fluxo__ip {
    display: block;
    font-size: var(--n-fs-fonte);
    color: var(--muted, #6b7280);
}

/* Barra proporcional ao maior consumidor do momento: dá a leitura de
   quem domina a banda sem precisar comparar números. */
.noc-fluxo__barra {
    height: 8px;
    border-radius: 999px;
    background: #eef0f3;
    overflow: hidden;
    min-width: 0;
}

.noc-fluxo__barra span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #0f766e, #14a08f);
    transition: width .45s ease;
}

.noc-fluxo li:first-child .noc-fluxo__barra span {
    background: linear-gradient(90deg,
                var(--ghr-pulse-red, #9D002B), #d4a15f);
}

.noc-fluxo__num {
    text-align: right;
    white-space: nowrap;
    line-height: 1.15;
}

.noc-fluxo__num b {
    font-size: clamp(12px, 1.6vh, 16px);
    font-weight: 800;
}

.noc-fluxo__dir {
    display: block;
    font-size: var(--n-fs-fonte);
    color: var(--muted, #6b7280);
}

.noc-fluxo__dir--vazio { font-style: italic; color: var(--n-off); }

.noc-periodos {
    display: inline-flex;
    border: 1px solid var(--n-line);
    border-radius: 7px;
    overflow: hidden;
    flex: 0 0 auto;
}

.noc-periodos button {
    border: 0;
    background: var(--card, #fff);
    padding: 2px 8px;
    font-size: var(--n-fs-label);
    font-weight: 700;
    color: var(--muted, #6b7280);
    cursor: pointer;
    border-right: 1px solid var(--n-line);
    transition: background .15s, color .15s;
}

.noc-periodos button:last-child { border-right: 0; }
.noc-periodos button:hover { background: #f6f7f9; }

.noc-periodos button.ativo {
    background: var(--ghr-pulse-red, #9D002B);
    color: #fff;
}

.noc-podio {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: calc(var(--n-gap) * .45);
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
}

.noc-podio li {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 9px;
    padding: calc(var(--n-pad) * .38) calc(var(--n-pad) * .55);
    border-radius: 8px;
    background: #fafbfc;
    border: 1px solid var(--n-line);
}

.noc-podio__medalha {
    font-size: clamp(13px, 1.75vh, 18px);
    line-height: 1;
}

.noc-podio__quem { min-width: 0; }

.noc-podio__apto {
    display: block;
    font-size: clamp(12px, 1.55vh, 16px);
    font-weight: 800;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.noc-podio__ip {
    display: block;
    font-size: var(--n-fs-label);
    color: var(--muted, #6b7280);
}

.noc-podio__numeros { text-align: right; white-space: nowrap; }

.noc-podio__total {
    display: block;
    font-size: clamp(12px, 1.6vh, 16px);
    font-weight: 800;
    line-height: 1.1;
}

.noc-podio__parcial {
    display: block;
    font-size: var(--n-fs-label);
    color: var(--muted, #6b7280);
}

/* ==========================================================================
   SWITCHES
   ========================================================================== */

.noc-contadores {
    display: flex;
    gap: 6px;
    flex: 0 0 auto;
    flex-wrap: wrap;
}

.noc-contador {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 7px;
    font-size: var(--n-fs-hint);
    font-weight: 600;
    background: var(--n-off-soft);
    color: var(--n-off);
}

.noc-contador b { font-size: var(--n-fs-body); font-weight: 800; }

.noc-contador--ok      { background: var(--n-ok-soft);   color: var(--n-ok); }
.noc-contador--atencao { background: var(--n-warn-soft); color: var(--n-warn); }
.noc-contador--critico { background: var(--n-bad-soft);  color: var(--n-bad); }
.noc-contador--critico[data-zero="1"] { background: var(--n-off-soft); color: var(--n-off); }
.noc-contador--atencao[data-zero="1"] { background: var(--n-off-soft); color: var(--n-off); }

.noc-lista {
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.noc-lista li {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: 8px;
    padding: calc(var(--n-pad) * .3) 0;
    border-bottom: 1px dashed var(--n-line);
    font-size: var(--n-fs-body);
}

.noc-lista li:last-child { border-bottom: 0; }

.noc-lista__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--n-off);
    flex: 0 0 auto;
}

.noc-lista li[data-nivel="OPERACIONAL"] .noc-lista__dot { background: var(--n-ok); }
.noc-lista li[data-nivel="ATENCAO"]     .noc-lista__dot { background: var(--n-warn); }
.noc-lista li[data-nivel="CRITICO"]     .noc-lista__dot { background: var(--n-bad); }
.noc-lista li[data-nivel="OFFLINE"]     .noc-lista__dot { background: var(--n-bad); }

.noc-lista__nome {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.noc-lista__nome small {
    display: block;
    font-size: var(--n-fs-label);
    font-weight: 500;
    color: var(--muted, #6b7280);
}

.noc-lista__uso {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.noc-lista__mini {
    width: clamp(26px, 3.4vw, 54px);
    height: 4px;
    border-radius: 999px;
    background: #eef0f3;
    overflow: hidden;
}

.noc-lista__mini span {
    display: block;
    height: 100%;
    background: var(--n-ok);
    border-radius: 999px;
}

.noc-lista li[data-nivel="ATENCAO"] .noc-lista__mini span { background: var(--n-warn); }
.noc-lista li[data-nivel="OFFLINE"] .noc-lista__mini span { background: var(--n-bad); }

.noc-lista__valor { font-weight: 700; font-size: var(--n-fs-hint); }
.noc-lista__valor[data-indisponivel="1"] { color: var(--n-off); font-weight: 500; font-style: italic; }

/* ==========================================================================
   ALERTAS
   ========================================================================== */

.noc-lista--alertas li {
    grid-template-columns: auto 1fr auto;
    align-items: start;
    padding: calc(var(--n-pad) * .38) 0;
}

.noc-alerta__texto { min-width: 0; }

.noc-alerta__titulo {
    display: block;
    font-weight: 600;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.noc-alerta__meta {
    display: block;
    font-size: var(--n-fs-label);
    color: var(--muted, #6b7280);
}

.noc-alerta__idade {
    font-size: var(--n-fs-label);
    font-weight: 700;
    color: var(--muted, #6b7280);
    white-space: nowrap;
}

.noc-alerta__tag {
    display: inline-block;
    margin-left: 5px;
    padding: 0 5px;
    border-radius: 4px;
    font-size: var(--n-fs-fonte);
    font-weight: 700;
    letter-spacing: .3px;
    background: var(--n-off-soft);
    color: var(--n-off);
}

/* RECENTE x CRÔNICO
   --------------------------------------------------------------------
   As duas naturezas convivem na mesma lista -- nenhum incidente é
   escondido. O que muda é o PESO VISUAL:

   * recente  -> fundo tingido pela severidade + etiqueta na mesma cor.
                 É o que exige ação agora, e salta primeiro.
   * crônico  -> fundo neutro, etiqueta cinza, título em peso normal.
                 Continua aberto no Zabbix e continua legível; só não
                 disputa a atenção com o que acabou de acontecer.

   A lista já chega ordenada com os recentes no topo (backend), então a
   faixa tingida forma um agrupamento visual sem precisar de cabeçalho
   nem de espaço extra. */

.noc-lista--alertas li[data-recente="1"] {
    background: var(--n-off-soft);
    border-left: 2px solid var(--n-off);
    border-radius: 0 5px 5px 0;
    padding-left: 6px;
    margin-bottom: 2px;
}

.noc-lista--alertas li[data-recente="1"][data-nivel="CRITICO"] {
    background: var(--n-bad-soft);
    border-left-color: var(--n-bad);
}

.noc-lista--alertas li[data-recente="1"][data-nivel="ATENCAO"] {
    background: var(--n-warn-soft);
    border-left-color: var(--n-warn);
}

.noc-alerta__tag--recente {
    background: #fff;
    color: var(--n-off);
    border: 1px solid currentColor;
}

.noc-lista--alertas li[data-nivel="CRITICO"] .noc-alerta__tag--recente {
    color: var(--n-bad);
}

.noc-lista--alertas li[data-nivel="ATENCAO"] .noc-alerta__tag--recente {
    color: var(--n-warn);
}

.noc-lista--alertas li[data-recente="0"] .noc-alerta__titulo {
    font-weight: 500;
}

.noc-lista--alertas li[data-recente="1"] .noc-alerta__idade,
.noc-lista--alertas li[data-recente="1"] .noc-alerta__meta {
    color: inherit;
    opacity: .78;
}

/* ==========================================================================
   CAPACIDADE
   ========================================================================== */

.noc-barras {
    display: flex;
    flex-direction: column;
    gap: calc(var(--n-gap) * .75);
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    /* `center` puro corta o TOPO quando o conteúdo não cabe, e o
       trecho cortado fica inalcançável pela rolagem (medido: a
       primeira barra nascia 11px acima do container, com scrollTop
       travado em 0). `safe center` centraliza quando sobra espaço e
       volta a alinhar pelo início quando falta -- o flex-start abaixo
       é o fallback para quem não entende a palavra-chave. */
    justify-content: flex-start;
    justify-content: safe center;
}

.noc-barra__topo {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    font-size: var(--n-fs-body);
}

.noc-barra__nome { font-weight: 700; }

.noc-barra__valor { font-weight: 800; white-space: nowrap; }
.noc-barra__valor[data-indisponivel="1"] {
    font-weight: 500;
    font-style: italic;
    color: var(--n-off);
}

.noc-barra__trilho {
    height: 7px;
    border-radius: 999px;
    background: #eef0f3;
    overflow: hidden;
    margin-top: 3px;
}

.noc-barra__trilho span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--n-ok);
    transition: width .5s ease;
}

.noc-barra[data-nivel="ATENCAO"] .noc-barra__trilho span { background: var(--n-warn); }
.noc-barra[data-nivel="CRITICO"] .noc-barra__trilho span { background: var(--n-bad); }

.noc-barra__ref {
    display: block;
    margin-top: 2px;
    font-size: var(--n-fs-fonte);
    color: #9aa1ab;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ==========================================================================
   RODAPÉ
   ========================================================================== */

.noc-footer {
    display: flex;
    align-items: center;
    gap: clamp(10px, 1.6vw, 26px);
    padding-top: calc(var(--n-gap) * .35);
    border-top: 1px solid var(--n-line);
    font-size: var(--n-fs-hint);
    color: var(--muted, #6b7280);
    white-space: nowrap;
    overflow: hidden;
}

.noc-footer b { color: var(--n-ink); font-weight: 800; }

.noc-footer__fontes {
    margin-left: auto;
    font-size: var(--n-fs-fonte);
    color: #9aa1ab;
}

.noc-footer__fonte--ok  { color: var(--n-ok); }
.noc-footer__fonte--off { color: var(--n-bad); }

/* ==========================================================================
   ESTADOS VAZIOS / INDISPONÍVEIS
   ========================================================================== */

.noc-vazio {
    margin: auto 0;
    padding: 6px 0;
    font-size: var(--n-fs-hint);
    color: var(--n-off);
    font-style: italic;
    list-style: none;
    text-align: center;
}

/* ==========================================================================
   SEGUNDA CAMADA (drawer de detalhes)
   ========================================================================== */

.noc-drawer { position: fixed; inset: 0; z-index: 1080; }
.noc-drawer[hidden] { display: none; }

.noc-drawer__fundo {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, .42);
    backdrop-filter: blur(1.5px);
}

.noc-drawer__painel {
    position: absolute;
    inset: 0 0 0 auto;
    width: min(560px, 92vw);
    background: var(--card, #fff);
    box-shadow: -18px 0 44px -24px rgba(16, 24, 40, .5);
    display: flex;
    flex-direction: column;
    animation: noc-entra .22s ease;
}

@keyframes noc-entra {
    from { transform: translateX(22px); opacity: .4; }
    to   { transform: none; opacity: 1; }
}

.noc-drawer__painel > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--n-line);
}

.noc-drawer__painel h2 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
}

.noc-drawer__x {
    border: 0;
    background: none;
    font-size: 24px;
    line-height: 1;
    color: var(--muted, #6b7280);
    cursor: pointer;
}

.noc-drawer__corpo {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 14px 18px 24px;
    font-size: 12.5px;
}

.noc-drawer__corpo h3 {
    margin: 16px 0 7px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    color: var(--muted, #6b7280);
}

.noc-drawer__corpo h3:first-child { margin-top: 0; }

.noc-drawer__corpo ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.noc-drawer__corpo li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 5px 0;
    border-bottom: 1px dashed var(--n-line);
}

.noc-drawer__corpo li span:last-child {
    color: var(--muted, #6b7280);
    white-space: nowrap;
}

.noc-drawer__atalhos {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 4px;
}

.noc-drawer__atalhos a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 11px;
    border-radius: 8px;
    border: 1px solid var(--n-line);
    font-size: 12px;
    font-weight: 600;
    color: var(--n-ink);
    text-decoration: none;
}

.noc-drawer__atalhos a:hover {
    border-color: var(--ghr-pulse-red, #9D002B);
    color: var(--ghr-pulse-red, #9D002B);
}

/* ==========================================================================
   ADAPTAÇÕES DE LARGURA
   --------------------------------------------------------------------------
   Prioridade é desktop. Abaixo de 1280px a coluna lateral de
   failover/topologia desce para baixo dos cards de WAN; abaixo de
   1024px a tela deixa de ser "uma tela só" e passa a rolar -- o que é
   correto para tablet/celular, onde caber tudo significaria ilegível.
   ========================================================================== */

@media (max-width: 1480px) {
    /* Mantém a proporção da célula de saúde: com 1.3fr a decomposição
       voltava a truncar em 1366px (medido em iframe de viewport real). */
    .noc-strip { grid-template-columns: 1.75fr repeat(5, 1fr); }
    .noc-row--aptos { grid-template-columns: 1.25fr 1fr; }
}

@media (max-width: 1280px) {

    .noc-row--apoio {
        grid-template-columns: 1fr 1fr;
    }

    .noc-stack {
        grid-column: 1 / -1;
        grid-template-rows: none;
        grid-template-columns: 1fr 1fr;
    }

    .noc-strip {
        grid-template-columns: 1.2fr repeat(3, 1fr);
    }

    #noc-pill-ativo { display: none; }
}

@media (max-width: 1024px) {

    .noc {
        height: auto;
        overflow: visible;
        grid-template-rows: none;
    }

    .noc-row--wan,
    .noc-row--aptos,
    .noc-row--apoio {
        grid-template-columns: 1fr;
    }

    .noc-grafico { min-height: 120px; }

    .noc-stack { grid-template-columns: 1fr; }

    .noc-strip { grid-template-columns: 1fr 1fr; }

    .noc-header { flex-wrap: wrap; }
    .noc-header__frase { flex: 1 0 100%; order: 3; white-space: normal; }

    .noc-footer { flex-wrap: wrap; white-space: normal; }
}


/* ==========================================================================
   ADAPTAÇÕES DE ALTURA
   --------------------------------------------------------------------------
   Orçamento de altura medido para a área útil (100vh - 118px do topbar
   hero - 24px de padding do .content):

       1920x1080 em tela cheia   ->  938 px   folga confortável
       1600x900  em tela cheia   ->  758 px   cabe
       1366x768  em tela cheia   ->  626 px   cabe, denso
       janelas mais baixas       ->  as linhas de PROVENIÊNCIA saem
                                     primeiro; nenhum NÚMERO é escondido

   A ordem de sacrifício é deliberada: some primeiro o texto que explica
   de onde veio o dado (continua no `title` e no drawer), depois os
   agregados de 24h -- nunca o estado dos links, a latência, a perda ou
   os contadores de switches/alertas.
   ========================================================================== */

@media (max-height: 840px) {

    .noc-card__fonte { display: none; }

    .noc-strip__cell {
        padding: calc(var(--n-pad) * .55) calc(var(--n-pad) * .8);
    }

    .noc-card { padding: calc(var(--n-pad) * .8); }
}

/* Abaixo de 900px de altura a linha de apoio fica apertada: a última
   transição do failover passa a uma linha só (o texto completo continua
   no card, com reticências, e inteiro no drawer). Medido: sem isso o
   card rolava 24px internamente num viewport de 854px. */
@media (max-height: 900px) {
    .noc-failover__ultimo { -webkit-line-clamp: 1; }
}

@media (max-height: 700px) {

    .noc-wan__rodape { display: none; }

    .noc-strip__cell:not(.noc-strip__cell--saude) .noc-strip__hint {
        display: none;
    }

    .noc-topo__no b { font-size: 8.5px; }
}