/*
 * O que este arquivo faz e o que ele NAO faz.
 *
 * Ele NAO define cor, raio, sombra nem fonte proprias: tudo sai das variaveis do
 * `custom.css` do Sonar (--brand-main, --vcx-blue, --radius-lg, --danger...). O que ele
 * define sao as pecas que o painel tem e o Sonar nao: o topo com abas, o cartao de
 * indicador, a barra de preenchimento de campo e a grade operadora x leitor.
 *
 * As cores de GRAFICO nao estao aqui -- estao em `painel/paleta.py`, porque elas tem
 * medicao junto (contraste, separacao sob daltonismo) e precisam ser as mesmas no
 * servidor e no cliente.
 */

/* ── Os tokens do painel ────────────────────────────────────────────────────── */

/*
 * ESPACO, TIPO E RAIO NUM LUGAR SO, E DE ONDE VEM CADA ESCALA.
 *
 * Antes deste bloco o arquivo tinha ~20 valores distintos de padding, varios fora de
 * qualquer grade: 0.4375rem (7px), 0.3125rem (5px), 0.1875rem (3px), 3px, 6px, 22px.
 * Cada um foi escolhido para um caso, e juntos eles sao o motivo de os cartoes nao se
 * alinharem: duas caixas vizinhas com 7px e 5px de respiro leem como desalinhadas
 * mesmo quando a grade externa esta correta.
 *
 * ESPACO -- base 4, nove degraus. E a intersecao das escalas publicadas por IBM
 * Carbon (2,4,8,12,16,24,32,40,48,64...), Atlassian (2,4,6,8,12,16,20,24,32,40,48),
 * Microsoft Fluent 2 (0,2,4,6,8,10,12,16,20,24...), Shopify Polaris (base 4) e
 * Salesforce (0,2,4,8,12,16,24,32,48). O Carbon e explicito sobre o desvio:
 * "deviating from the spacing scales should be avoided whenever possible".
 *
 * Faixa de uso, na regra do Atlassian: ate 8px dentro de uma peca (selo, celula,
 * icone+rotulo); 12 a 24px em padding de cartao e espaco entre campos; 32px ou mais
 * entre secoes.
 *
 * TIPO -- 14/20 como corpo produtivo. Carbon ("The productive type set uses a base
 * type size of 14px"), Fluent 2, Atlassian e Material 3 usam 14; so o Polaris usa 13.
 *
 * RAIO -- a regra do Fluent 2: "For shapes smaller than 32 pixels, the corner angle is
 * reduced to 2 pixels... For large and extra-large components, 8 pixel and 12 pixel
 * angles are used."
 *
 * ELEVACAO -- nao ha. Cartao de painel e PLANO, com borda. Carbon, sobre tiles: "Tiles
 * reside on the same plane as the page background layer and do not have elevation...
 * Do not add a drop shadow to tiles". Atlassian: "To create flat cards, pair with a
 * border" e "Raised elevations can create visual noise". Sombra fica para overlay
 * (dropdown, modal), que este painel nao tem.
 */
:root {
    --p-espaco-1: 0.125rem;   /*  2px  dentro de um selo */
    --p-espaco-2: 0.25rem;    /*  4px  icone e rotulo */
    --p-espaco-3: 0.5rem;     /*  8px  entre itens de uma peca */
    --p-espaco-4: 0.75rem;    /* 12px  celula de tabela, respiro interno */
    --p-espaco-5: 1rem;       /* 16px  padding de cartao */
    --p-espaco-6: 1.5rem;     /* 24px  gutter da grade, entre cartoes */
    --p-espaco-7: 2rem;       /* 32px  entre secoes */
    --p-espaco-8: 3rem;       /* 48px */
    --p-espaco-9: 4rem;       /* 64px */

    --p-tipo-rotulo: 0.75rem;     /* 12/16  rotulo, selo, unidade de eixo */
    --p-tipo-corpo: 0.875rem;     /* 14/20  corpo, linha de tabela, cabecalho */
    --p-tipo-titulo: 1rem;        /* 16/24  titulo de cartao */
    --p-tipo-secao: 1.25rem;      /* 20/28  titulo de secao */
    --p-tipo-numero: 1.75rem;     /* 28/32  numero grande do indicador */

    --p-lh-rotulo: 1.3333;
    --p-lh-corpo: 1.4286;
    --p-lh-titulo: 1.5;

    --p-raio-selo: 2px;
    --p-raio-controle: 4px;
    --p-raio-cartao: 8px;
    --p-raio-tabela: 12px;
}

/* ── Topo ───────────────────────────────────────────────────────────────────── */

.painel-topo {
    background: var(--gradient-dark);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    padding: 0.625rem 0;
    position: sticky;
    top: 0;
    z-index: 1030;
}

.painel-container {
    margin: 0 auto;
    max-width: 1440px;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    width: 100%;
}

/* Sem isto o topo nao quebra: as abas continuam na mesma linha e empurram a pagina
   inteira para fora da janela, levando junto os numeros do funil e as notas dos
   cartoes. Medido a 414px. */
.painel-topo .painel-container {
    flex-wrap: wrap;
    row-gap: 0.5rem;
}

.painel-marca { flex-shrink: 0; }

.painel-marca { color: #fff; text-decoration: none; }
.painel-marca:hover { color: #fff; }

.painel-marca-divisor {
    background: rgba(255, 255, 255, 0.22);
    display: inline-block;
    height: 18px;
    width: 1px;
}

.painel-marca-nome {
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.82);
}

.painel-abas { display: flex; flex-wrap: wrap; gap: 0.25rem; }

.painel-aba {
    border-radius: var(--radius-pill);
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.8125rem;
    font-weight: 500;
    padding: 0.375rem 0.875rem;
    text-decoration: none;
    transition: background var(--transition-fast, 0.15s), color var(--transition-fast, 0.15s);
    white-space: nowrap;
}

.painel-aba i { font-size: 0.75rem; margin-right: 0.25rem; opacity: 0.75; }
.painel-aba:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.painel-aba.ativa { background: var(--brand-secondary-green); color: var(--darkest-blue); font-weight: 600; }
.painel-aba.ativa i { opacity: 1; }

/* ── As sub-abas da tela única ──────────────────────────────────────────────── */

/*
 * A IN-765. São IRMÃS das abas do topo, não iguais a elas: as de cima trocam de TELA e
 * vivem sobre o gradiente escuro; estas trocam de SEÇÃO dentro da mesma tela e vivem
 * sobre o fundo claro do conteúdo. Repetir a pílula verde faria duas coisas diferentes
 * parecerem a mesma, e a pessoa não saberia qual delas a tirou da página.
 *
 * A forma é a de aba sublinhada, que é a convenção para "seções do mesmo documento" --
 * Carbon, Fluent 2 e Polaris desenham a navegação interna assim, e nenhum deles usa
 * pílula preenchida para isso.
 */
.painel-subabas {
    border-bottom: 1px solid var(--light-gray-2);
    display: flex;
    flex-wrap: wrap;
    gap: var(--p-espaco-2);
    margin-bottom: var(--p-espaco-6);
}

.painel-subaba {
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    color: var(--medium-gray-2);
    cursor: pointer;
    font-size: var(--p-tipo-corpo);
    font-weight: 500;
    line-height: var(--p-lh-corpo);
    margin-bottom: -1px;
    padding: var(--p-espaco-3) var(--p-espaco-4);
    white-space: nowrap;
}

.painel-subaba i { font-size: 0.8125rem; margin-right: var(--p-espaco-2); opacity: 0.7; }
.painel-subaba:hover { color: var(--brand-main); }

.painel-subaba.ativa {
    border-bottom-color: var(--brand-main);
    color: var(--brand-main);
    font-weight: 600;
}

.painel-subaba.ativa i { opacity: 1; }

/* O foco de teclado precisa aparecer: a aba é um `<button>`, e quem navega por Tab
   depende dele para saber onde está. */
.painel-subaba:focus-visible {
    border-radius: var(--p-raio-controle) var(--p-raio-controle) 0 0;
    outline: 2px solid var(--brand-main);
    outline-offset: -2px;
}

.painel-usuario-nome { color: rgba(255, 255, 255, 0.62); font-size: 0.8125rem; }

.painel-sair {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--radius-sm);
    color: rgba(255, 255, 255, 0.72);
    line-height: 1;
    padding: 0.375rem 0.5rem;
}

.painel-sair:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }

/* ── Filtro de período ──────────────────────────────────────────────────────── */

.painel-periodo {
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-pill);
    display: inline-flex;
    gap: 2px;
    padding: 3px;
}

.painel-periodo-opcao {
    border-radius: var(--radius-pill);
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.25rem 0.75rem;
    text-decoration: none;
    white-space: nowrap;
}

.painel-periodo-opcao:hover { color: #fff; }
.painel-periodo-opcao.ativa { background: #fff; color: var(--brand-main); font-weight: 600; }

/* ── O scroll horizontal da página ──────────────────────────────────────────── */

/*
 * O `.flow-page-header` do Sonar tem `overflow: visible` e um `::after` decorativo em
 * `right: -3%` — um círculo de 300px que vaza para fora da faixa. Medido a 1440px:
 * o header tem 1377px de largura e 1418 de conteúdo, e esses 41px viram rolagem
 * horizontal da PÁGINA inteira.
 *
 * No Sonar isso não aparece porque a barra lateral estreita o conteúdo. Aqui o painel
 * ocupa a largura toda. O círculo é decoração: recortá-lo não tira nada.
 */
.flow-page-header {
    overflow: hidden;
}

/* ── Cartões de indicador ───────────────────────────────────────────────────── */

/*
 * TRES LINHAS INTERNAS, E ELAS SE ALINHAM ENTRE OS CARTOES.
 *
 * `auto-fit` com `minmax` deixava a ultima fila com uma quantidade diferente de
 * cartoes das anteriores -- seis indicadores davam 4+2 numa largura e 3+3 noutra, e
 * a fila curta esticava para preencher. Contagem declarada por faixa resolve isso.
 *
 * O `subgrid` resolve o outro desalinhamento, o de dentro: quando um rotulo quebra em
 * duas linhas, o numero daquele cartao desce e a fila inteira fica torta. Com as tres
 * faixas herdadas do pai (rotulo / numero / apoio), os numeros ficam na mesma altura
 * em todos. Disponivel em todos os navegadores desde 09/2023.
 */
.painel-indicadores {
    display: grid;
    gap: var(--p-espaco-6);
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: auto auto auto;
    margin-bottom: var(--p-espaco-6);
}

@media (min-width: 1200px) {
    .painel-indicadores { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

.painel-indicador {
    background: var(--white);
    border: 1px solid var(--light-gray-2);
    border-radius: var(--p-raio-cartao);
    display: grid;
    gap: var(--p-espaco-2);
    grid-row: span 3;
    grid-template-rows: subgrid;
    padding: var(--p-espaco-5);
}

.painel-indicador-rotulo {
    color: var(--medium-gray-2);
    display: block;
    font-size: var(--p-tipo-rotulo);
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: var(--p-lh-rotulo);
    text-transform: uppercase;
}

/* `tabular-nums` porque estes numeros ficam empilhados em coluna e precisam alinhar. */
.painel-indicador-valor {
    color: var(--darker-gray);
    display: block;
    font-feature-settings: "tnum";
    font-size: var(--p-tipo-numero);
    font-variant-numeric: tabular-nums lining-nums;
    font-weight: 700;
    line-height: 1.15;
}

.painel-indicador-unidade { font-size: 1rem; font-weight: 600; color: var(--medium-gray); }

.painel-indicador-apoio {
    align-self: end;
    color: var(--medium-gray-2);
    display: block;
    font-size: var(--p-tipo-rotulo);
    line-height: var(--p-lh-rotulo);
}

.painel-indicador.boa .painel-indicador-valor { color: #14795f; }
.painel-indicador.ruim .painel-indicador-valor { color: var(--danger); }
.painel-indicador.atencao .painel-indicador-valor { color: var(--warning-darker); }

/* ── Cartão de gráfico ──────────────────────────────────────────────────────── */

/*
 * PLANO, COM BORDA. Sem sombra -- ver a nota de elevacao nos tokens.
 *
 * `flex column` com o corpo em `flex: 1` e o que faz dois cartoes vizinhos de conteudo
 * diferente terminarem na mesma linha: o corpo estica, o cabecalho nao.
 */
.painel-cartao {
    background: var(--white);
    border: 1px solid var(--light-gray-2);
    border-radius: var(--p-raio-cartao);
    display: flex;
    flex-direction: column;
    margin-bottom: var(--p-espaco-6);
}

.painel-cartao-cabecalho {
    align-items: flex-start;
    border-bottom: 1px solid var(--light-gray-2);
    display: flex;
    gap: var(--p-espaco-5);
    justify-content: space-between;
    padding: var(--p-espaco-4) var(--p-espaco-5);
}

/* O bloco de título+nota toma a largura que sobrar; só as ações ficam no tamanho delas. */
.painel-cartao-cabecalho > div:first-child { flex: 1 1 auto; min-width: 0; }

.painel-cartao-titulo {
    color: var(--darker-gray);
    font-size: var(--p-tipo-titulo);
    font-weight: 600;
    line-height: var(--p-lh-titulo);
    margin: 0;
}

/*
 * Sem `max-width`: a nota corre até o limite do cartão. Com 68ch ela quebrava em cinco
 * ou seis linhas e empurrava o gráfico para baixo — a página crescia na vertical para
 * acomodar texto que cabia na horizontal.
 */
.painel-cartao-nota {
    color: var(--medium-gray-2);
    font-size: var(--p-tipo-rotulo);
    line-height: 1.5;
    margin: var(--p-espaco-2) 0 0;
}

.painel-cartao-corpo { flex: 1 1 auto; min-height: 0; padding: var(--p-espaco-5); }

/* ── Funil ──────────────────────────────────────────────────────────────────── */

.painel-funil { display: flex; flex-direction: column; gap: 0.75rem; }

.painel-funil-etapa { display: grid; gap: 0.25rem; }

.painel-funil-topo {
    align-items: baseline;
    display: flex;
    gap: 0.5rem;
    justify-content: space-between;
}

.painel-funil-nome { font-size: 0.8125rem; font-weight: 600; color: var(--darker-gray); }
.painel-funil-detalhe { color: var(--medium-gray-2); font-size: 0.75rem; font-weight: 400; }

.painel-funil-numero {
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: var(--darker-gray);
}

.painel-funil-pct { color: var(--medium-gray-2); font-size: 0.8125rem; font-weight: 600; }

.painel-funil-trilho { background: var(--light-gray-2); border-radius: 4px; height: 14px; overflow: hidden; }

/* Canto arredondado so na PONTA do dado, ancorado na linha de base. */
.painel-funil-barra { border-radius: 0 4px 4px 0; height: 100%; min-width: 2px; }

/* ── Barras de preenchimento de campo ───────────────────────────────────────── */

.painel-campos { display: grid; gap: 0.625rem; }

.painel-campo { align-items: center; display: grid; gap: 0.75rem; grid-template-columns: 9.5rem 1fr 5.5rem; }

.painel-campo-nome { color: var(--darker-gray); font-size: 0.8125rem; font-weight: 500; }

/* `display: block` nos dois nao e enfeite: o trilho e o preenchimento sao <span>, e
   elemento inline ignora largura e altura -- as barras sumiam. O trilho e item de grid
   (portanto ja blocado), mas o preenchimento nao e, entao ele precisa da declaracao. */
.painel-campo-trilho {
    background: var(--light-gray-2);
    border-radius: 4px;
    display: block;
    height: 10px;
    overflow: hidden;
}

.painel-campo-barra {
    border-radius: 0 4px 4px 0;
    display: block;
    height: 100%;
    min-width: 2px;
}

.painel-campo-valor {
    color: var(--medium-gray);
    font-feature-settings: "tnum";
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.painel-campo-valor strong { color: var(--darker-gray); }

/* ── Tabelas ────────────────────────────────────────────────────────────────── */

/*
 * A TABELA, E AS REGRAS QUE ELA SEGUE.
 *
 * - Texto a esquerda, numero a direita. Adobe Spectrum: "Numerical data should
 *   generally be right-aligned for the ease of scanning and comparing" e "Never use
 *   center alignment". Polaris diz o mesmo. A excecao, tambem do Spectrum, sao os
 *   numeros que sao IDENTIFICADORES (CEP, telefone) -- esses vao a esquerda.
 * - `tabular-nums lining-nums` em toda coluna numerica: sem isso os algarismos tem
 *   larguras diferentes e a coluna nao alinha, que e a razao de alinhar a direita.
 * - Cabecalho segue o alinhamento do dado (Spectrum, Polaris).
 * - Linha de 32px: o degrau `sm` do Carbon, que e a densidade de tabela de dados.
 * - REGUA de 1px entre linhas, e nao zebra. Carbon, Polaris, Spectrum e Material
 *   usam regua; a zebra tem estudo a favor (Enders, ~1.200 participantes) mas so no
 *   caso de tabela larga varrida da esquerda para a direita, que nao e o caso aqui.
 * - Cabecalho fixo na rolagem (NN/g: "Freeze header rows and header columns"). O
 *   `background` e obrigatorio, senao as linhas atravessam o cabecalho.
 */
.painel-tabela-rolagem {
    border-radius: var(--p-raio-tabela);
    max-height: 32rem;
    overflow: auto;
}

.painel-tabela {
    font-size: var(--p-tipo-corpo);
    line-height: var(--p-lh-corpo);
    margin: 0;
    width: 100%;
}

.painel-tabela th {
    background: var(--white);
    border-bottom: 1px solid var(--light-gray-2);
    color: var(--medium-gray-2);
    font-size: var(--p-tipo-rotulo);
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: var(--p-espaco-3) var(--p-espaco-4);
    position: sticky;
    text-align: left;
    text-transform: uppercase;
    top: 0;
    white-space: nowrap;
    z-index: 2;
}

/*
 * O CABECALHO DE LINHA NAO E CAIXA ALTA.
 *
 * `.painel-tabela th` veste caixa alta porque ele e, em quase toda tabela daqui, o
 * cabecalho de COLUNA -- rotulo curto, repetido, que pede destaque tipografico.
 *
 * `th[scope="row"]` e outra coisa: e o rotulo da LINHA, e o conteudo dele e dado. Na
 * tabela de motivos esse dado e o nome da excecao, e caixa alta o destroi -- a
 * camelCase de `InvoiceIsEmpty` carrega as fronteiras das palavras, e `INVOICEISEMPTY`
 * nao se le. Visto na tela renderizada em 13/10/2026, nao no HTML: o texto estava certo
 * na fonte e ilegivel no navegador.
 */
.painel-tabela tbody th[scope="row"] {
    color: var(--darker-gray);
    font-weight: 500;
    letter-spacing: 0;
    position: static;
    text-transform: none;
    z-index: auto;
}

.painel-tabela td {
    border-bottom: 1px solid var(--light-gray);
    color: var(--darker-gray);
    height: 2rem;
    padding: var(--p-espaco-2) var(--p-espaco-4);
    vertical-align: middle;
}

.painel-tabela tbody tr:last-child td { border-bottom: 0; }
.painel-tabela tbody tr:hover { background: var(--light-gray); }

/*
 * LARGURA DE COLUNA: uma coluna nao pode engolir a linha.
 *
 * A estrategia e a do Primer: as colunas curtas tem largura declarada e nao crescem, e
 * a coluna larga fica com o que sobrar. Sem isso a ULTIMA coluna absorve todo o espaco
 * livre -- foi o que aconteceu com "Leitor proprio", que tem no maximo 12 caracteres de
 * conteudo e ocupava um terco da tabela.
 *
 * `table-layout: fixed` e o que faz o navegador respeitar as larguras em vez de
 * redistribuir pelo conteudo.
 */
.painel-tabela-larguras { table-layout: fixed; }

/*
 * `width: auto` E SO ISSO. Com `table-layout: fixed`, o espaco que sobra das colunas
 * declaradas vai para as colunas `auto` -- entao a coluna do nome fica com o resto.
 *
 * O QUE NAO SE FAZ AQUI, e que eu fiz e quebrou a tela: `max-width: 0`. Esse e o truque
 * de `text-overflow` para `table-layout: auto`, onde o navegador ignora o max-width da
 * celula. Com `fixed` ele NAO ignora: a coluna colapsa para um caractere por linha e o
 * resto da tabela fica com um vao vazio do lado.
 */
.painel-tabela-larguras .col-numero { width: 6.5rem; }
.painel-tabela-larguras .col-numero-largo { width: 8.5rem; }
.painel-tabela-larguras .col-selo { width: 7.5rem; }
.painel-tabela-larguras .col-modalidade { width: 7rem; }

/*
 * Nome comprido QUEBRA, e o `title` leva o texto inteiro. Polaris: "Wrap instead of
 * truncate content... if row titles start with the same word, they'll all appear the
 * same when truncated".
 *
 * Sem `display: -webkit-box` para limitar as linhas: trocar o `display` de um `td`
 * tira a celula da tabela, e a linha inteira se desmonta. O limite de duas linhas, se
 * um dia for preciso, vai num `<span>` dentro da celula -- nao na celula.
 */
.painel-tabela-larguras .col-nome { overflow-wrap: anywhere; width: auto; }

/*
 * A MODALIDADE E ROTULO, NAO MEDIDA -- entao ela nao ganha cor de status.
 *
 * `fixo` e `movel` nao sao bom e ruim, sao duas operacoes. Pintar uma de verde e outra
 * de vermelho diria uma coisa que o dado nao diz. O que a pilula faz e separar o rotulo
 * do nome da operadora ao lado, para a linha ser lida como "Vivo / fixo" e nao como um
 * nome so.
 */
.painel-modalidade {
    background: var(--light-gray-2);
    border-radius: var(--radius-pill);
    color: var(--medium-gray);
    display: inline-block;
    font-size: var(--p-tipo-rotulo);
    font-weight: 600;
    line-height: var(--p-lh-rotulo);
    padding: var(--p-espaco-1) var(--p-espaco-3);
    white-space: nowrap;
}

/* A que nao resolveu fica apagada e em italico: e ausencia, e nao uma modalidade. */
.painel-modalidade-modalidade-nao-resolvida {
    background: none;
    font-style: italic;
    font-weight: 400;
    padding-left: 0;
}

.painel-tabela .numero, .painel-tabela th.numero {
    font-variant-numeric: tabular-nums lining-nums;
    text-align: right;
}

.painel-tabela .numero {
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}

.painel-marca-serie {
    border-radius: 2px;
    display: inline-block;
    height: 10px;
    margin-right: 0.5rem;
    vertical-align: -1px;
    width: 10px;
}

/* ── Selos ──────────────────────────────────────────────────────────────────── */

.painel-selo {
    border-radius: var(--radius-pill);
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 0.125rem 0.5rem;
    white-space: nowrap;
}

.painel-selo-boa { background: var(--vcx-aqua-light); color: #14795f; }
.painel-selo-atencao { background: var(--light-orange); color: var(--warning-darker); }
.painel-selo-ruim { background: var(--light-red); color: #a32b31; }
.painel-selo-neutro { background: var(--light-gray-2); color: var(--medium-gray); }

/* ── Avisos e ressalvas ─────────────────────────────────────────────────────── */

.painel-ressalva {
    background: var(--light-orange);
    border-left: 3px solid var(--warning);
    border-radius: var(--radius-sm);
    color: var(--warning-darker);
    font-size: 0.8125rem;
    margin-bottom: 1.25rem;
    padding: 0.75rem 1rem;
}

.painel-ressalva strong { color: #6b4823; }

.painel-rodape-medicao { color: var(--medium-gray-2); font-size: 0.75rem; }

.painel-link {
    background: none;
    border: 0;
    color: var(--link-blue);
    font-size: 0.75rem;
    padding: 0;
    text-decoration: underline;
}

.painel-vazio-icone { color: var(--lighter-blue-2); font-size: 2.5rem; }

.painel-rodape { color: var(--medium-gray-2); padding: 1.25rem 0 2rem; text-align: center; }

/* ── Grade operadora × leitor ───────────────────────────────────────────────── */

.painel-grade { border-collapse: separate; border-spacing: 2px; font-size: 0.75rem; }

.painel-grade td.celula {
    border-radius: 3px;
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
    min-width: 3.25rem;
    padding: 0.375rem 0.5rem;
    text-align: right;
}

.painel-grade td.vazia { color: var(--light-gray-3); }

/* ── Documentação da API ────────────────────────────────────────────────────── */

.painel-rota { border-bottom: 1px solid var(--light-gray-2); padding: 1rem 0; }
.painel-rota:last-child { border-bottom: 0; padding-bottom: 0; }

.painel-rota-linha { align-items: center; display: flex; flex-wrap: wrap; gap: 0.5rem; }

.painel-metodo {
    border-radius: var(--radius-sm);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 0.1875rem 0.4375rem;
}

.painel-metodo-get { background: var(--lighter-blue); color: var(--brand-main); }
.painel-metodo-post { background: var(--vcx-aqua-light); color: #14795f; }
.painel-metodo-put,
.painel-metodo-patch { background: var(--light-orange); color: var(--warning-darker); }
.painel-metodo-delete { background: var(--light-red); color: #a32b31; }

.painel-caminho {
    color: var(--darkest-blue);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.8125rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.painel-rota-resumo { color: var(--medium-gray); font-size: 0.8125rem; margin: 0.375rem 0 0; }
.painel-rota-descricao { color: var(--medium-gray); font-size: 0.8125rem; margin: 0.5rem 0 0; max-width: 78ch; }

.painel-rota-detalhe { margin-top: 0.75rem; }

.painel-indice { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-bottom: 1.25rem; }

.painel-indice a {
    background: var(--white);
    border: 1px solid var(--light-gray-2);
    border-radius: var(--radius-pill);
    color: var(--medium-gray);
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.3125rem 0.75rem;
    text-decoration: none;
}

.painel-indice a:hover { border-color: var(--lighter-blue-2); color: var(--brand-main); }

/* ── Entrar ─────────────────────────────────────────────────────────────────── */

.painel-entrar { background: var(--gradient-dark); min-height: 100vh; }

.painel-entrar-caixa {
    background: var(--white);
    border-radius: var(--radius-xl);
    box-shadow: 0 24px 48px rgba(17, 18, 34, 0.28);
    max-width: 400px;
    padding: 2.25rem;
    width: 100%;
}

/* ── Telas estreitas ────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
    .painel-container { padding-left: 1rem; padding-right: 1rem; }

    .painel-topo .painel-container { gap: 0.75rem !important; }

    /* As abas passam a rolar na horizontal em vez de quebrar em varias linhas: com
       quatro delas, quebrar empurra o conteudo e come a altura util da tela. */
    .painel-abas {
        flex-wrap: nowrap;
        margin-left: 0 !important;
        order: 3;
        overflow-x: auto;
        scrollbar-width: none;
        width: 100%;
    }

    .painel-abas::-webkit-scrollbar { display: none; }

    .painel-usuario { margin-left: auto; }
    .painel-campo { grid-template-columns: 6.5rem 1fr 4.5rem; }
    .painel-indicador-valor { font-size: 1.5rem; }
    .painel-indicadores { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

    .painel-funil-topo { flex-wrap: wrap; }
    .painel-funil-detalhe { display: block; }
}

@media (max-width: 480px) {
    /* O nome ao lado da marca vira tres linhas antes de caber; o cabecalho da pagina
       ja diz onde se esta. */
    .painel-marca-divisor,
    .painel-marca-nome { display: none; }

    .painel-indicadores { grid-template-columns: 1fr; }
}

/* ── Tela de entrar em janela baixa ─────────────────────────────────────────── */

/*
 * O `auth.css` posiciona o logo com `position: absolute; top: 2.5rem` e centra o
 * conteúdo do painel esquerdo no eixo vertical. Em janela alta os dois convivem; abaixo
 * de ~760px de altura — um notebook de 1440x800 com a barra do navegador — o texto sobe
 * e passa POR BAIXO do logo.
 *
 * A guarda vale só nessa faixa, e só quando a divisão em duas colunas está ativa (abaixo
 * de 992px o próprio auth.css torna o logo relativo e o problema não existe). Ancorar o
 * conteúdo no topo e reservar a faixa do logo resolve sem tocar no design system.
 */
@media (min-width: 992px) and (max-height: 760px) {
    #base-auth .auth-left-panel {
        justify-content: flex-start;
        padding-top: 7.5rem;
    }
}

/* ── Barra de filtros ───────────────────────────────────────────────────────── */

.painel-filtros {
    align-items: center;
    background: var(--white);
    border: 1px solid var(--light-gray-2);
    border-radius: var(--radius-lg);
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.25rem;
    margin-bottom: 1.25rem;
    padding: 0.75rem 1rem;
}

.painel-filtro { align-items: center; display: flex; flex-wrap: wrap; gap: 0.375rem; }

.painel-filtro-rotulo {
    color: var(--medium-gray-2);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    margin-right: 0.125rem;
    text-transform: uppercase;
}

.painel-chip {
    background: var(--light-gray);
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    color: var(--medium-gray);
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.25rem 0.75rem;
    text-decoration: none;
    white-space: nowrap;
}

.painel-chip:hover { background: var(--lighter-blue); color: var(--brand-main); }

.painel-chip.ativo {
    background: var(--brand-main);
    border-color: var(--brand-main);
    color: #fff;
    font-weight: 600;
}

.painel-filtro select,
.painel-filtro input[type="month"] {
    background: var(--light-gray);
    border: 1px solid var(--light-gray-2);
    border-radius: var(--radius-sm);
    color: var(--darker-gray);
    font-size: 0.75rem;
    max-width: 14rem;
    padding: 0.25rem 0.5rem;
}

.painel-filtro-limpar { color: var(--medium-gray-2); font-size: 0.75rem; text-decoration: underline; }

/* ── Delta de um indicador ──────────────────────────────────────────────────── */

/*
 * `nowrap` E `flex-shrink: 0`, e os dois sao necessarios.
 *
 * O selo e UM texto so -- `↑ 109,9%` --, entao ele quebra no espaco entre a seta e o
 * numero quando a caixa aperta. Numa pilula, quebrar em duas linhas nao parece uma
 * quebra de texto: parece um componente defeituoso.
 *
 * E ele nao pode encolher: no `.painel-indicador-topo`, que e um flex, o selo e o
 * rotulo disputam a largura. Quem cede tem de ser o rotulo, que quebra em duas linhas
 * sem parecer quebrado -- e as tres faixas do `subgrid` mantem os numeros alinhados
 * entre os cartoes mesmo com rotulos de alturas diferentes.
 */
.painel-delta {
    align-items: center;
    border-radius: var(--radius-pill);
    display: inline-flex;
    flex-shrink: 0;
    font-feature-settings: "tnum";
    font-size: var(--p-tipo-rotulo);
    font-variant-numeric: tabular-nums lining-nums;
    font-weight: 700;
    gap: var(--p-espaco-1);
    padding: var(--p-espaco-1) var(--p-espaco-3);
    white-space: nowrap;
}

.painel-delta.subiu { background: var(--vcx-aqua-light); color: #14795f; }
.painel-delta.caiu { background: var(--light-red); color: #a32b31; }
.painel-delta.parado { background: var(--light-gray-2); color: var(--medium-gray-2); }

/*
 * `flex-start`, e nao `baseline`: com o rotulo em duas linhas, alinhar pela linha de
 * base joga o selo para a altura da PRIMEIRA linha do rotulo em um cartao e da segunda
 * em outro, e os selos da fila deixam de se alinhar entre si.
 */
.painel-indicador-topo {
    align-items: flex-start;
    display: flex;
    gap: var(--p-espaco-3);
    justify-content: space-between;
}

/* O rotulo cede a largura ao selo. `min-width: 0` e o que permite ele quebrar. */
.painel-indicador-topo .painel-indicador-rotulo { min-width: 0; }

/* ── Barra dentro da célula da tabela ───────────────────────────────────────── */

/*
 * Comparar números em coluna exige que o olho leia cada um; uma barra atrás deles deixa
 * a comparação acontecer sem leitura. É a mesma informação, num canal que custa menos.
 */
.painel-celula-barra { position: relative; }

.painel-celula-barra .preenchimento {
    background: var(--lighter-blue);
    border-radius: 2px;
    bottom: 0.3125rem;
    left: 0.25rem;
    position: absolute;
    top: 0.3125rem;
    z-index: 0;
}

.painel-celula-barra .numero-sobre { position: relative; z-index: 1; }

/*
 * O SELO DE COR LIGA A LINHA AO QUE ELA SIGNIFICA.
 *
 * Na tabela de motivos a cor nao e enfeite: ela separa diagnostico (categorica) de
 * ausencia de diagnostico (cinza e ambar). Sem o selo essa distincao so existe na
 * barra da coluna de percentual, que e fraca demais para carrega-la sozinha.
 *
 * 8px e o minimo que ainda se ve como cor, e nao como ponto preto, nas duas rampas.
 */
/*
 * A LINHA QUE PEDE ACAO GANHA UMA FAIXA, E NAO UM FUNDO.
 *
 * Fundo colorido na linha inteira compete com a barra da celula de cobertura e com o
 * numero em ambar da coluna de vazio -- tres sinais para o mesmo fato. A faixa na borda
 * esquerda marca a linha sem disputar com nada: e o padrao que o Primer usa para
 * `flash`, e o mesmo que a ressalva do topo desta tela ja usa.
 *
 * O ambar, e nao o vermelho: relatorio vazio e um achado para investigar, nao um erro
 * que ja quebrou. O vermelho desta paleta esta reservado para falha.
 */
.painel-tabela tbody tr.painel-linha-alarme th[scope="row"] {
    box-shadow: inset 3px 0 0 var(--warning);
    padding-left: calc(var(--p-espaco-4) + 3px);
}

.painel-selo-cor {
    border-radius: 2px;
    display: inline-block;
    height: 8px;
    margin-right: 0.5rem;
    vertical-align: baseline;
    width: 8px;
}

/* ── Grade leitor × campo ───────────────────────────────────────────────────── */

.painel-heatmap { border-collapse: separate; border-spacing: 3px; font-size: 0.75rem; }

.painel-heatmap th {
    color: var(--medium-gray-2);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 0 0.25rem 0.375rem;
    text-transform: uppercase;
    vertical-align: bottom;
    white-space: nowrap;
}

.painel-heatmap th.leitor { text-align: left; text-transform: none; font-size: 0.75rem; }

.painel-heatmap td.rotulo {
    color: var(--darker-gray);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.75rem;
    padding-right: 0.625rem;
    white-space: nowrap;
}

.painel-heatmap td.celula {
    border-radius: 4px;
    color: #fff;
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    min-width: 3.5rem;
    padding: 0.4375rem 0.375rem;
    text-align: center;
}

/* Degrau claro pede tinta escura; o contraste do rótulo é sobre a célula, não sobre a
   página. Só o primeiro degrau da rampa cai nesse caso. */
.painel-heatmap td.celula.clara { color: var(--darkest-blue); }
.painel-heatmap td.celula.vazia { background: var(--light-gray-2); color: var(--medium-gray-2); }

.painel-legenda-rampa { align-items: center; display: flex; gap: 0.375rem; font-size: 0.6875rem; color: var(--medium-gray-2); }
.painel-legenda-rampa span.degrau { border-radius: 2px; display: inline-block; height: 10px; width: 22px; }

/* ── Duas colunas ───────────────────────────────────────────────────────────── */

/*
 * AS FILAS DE CARTAO.
 *
 * `painel-duas-colunas` e `2fr 1fr`, e a tela punha TRES cartoes dentro dela: o
 * terceiro caia sozinho numa segunda fila, com o dobro da largura dos de cima. Era a
 * assimetria mais visivel da pagina.
 *
 * Agora cada fila declara quantos cartoes tem, e todos os cartoes de uma fila terminam
 * na mesma linha -- `align-items: stretch` com o corpo do cartao em `flex: 1`. Bootstrap
 * resolve o mesmo com `.h-100`; aqui e grade, entao e o `stretch` que vale.
 *
 * O gutter e 24px, o degrau 6 da escala -- o mesmo do `.row` do Bootstrap 5.3
 * (`1.5rem`) e o gutter de desktop do Atlassian arredondado para cima.
 */
.painel-fila {
    align-items: stretch;
    display: grid;
    gap: var(--p-espaco-6);
    margin-bottom: var(--p-espaco-6);
}

.painel-fila > * { margin-bottom: 0; min-width: 0; }

.painel-fila-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.painel-fila-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Duas colunas com pesos diferentes: o grafico manda, a lateral acompanha. */
.painel-fila-principal { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }

@media (max-width: 991.98px) {
    .painel-fila-2,
    .painel-fila-3,
    .painel-fila-principal { grid-template-columns: minmax(0, 1fr); }
}

/* Nome antigo, mantido enquanto as outras telas ainda o usam. */
.painel-duas-colunas {
    align-items: stretch;
    display: grid;
    gap: var(--p-espaco-6);
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    margin-bottom: var(--p-espaco-6);
}

.painel-duas-colunas > * { margin-bottom: 0; min-width: 0; }

@media (max-width: 991.98px) {
    .painel-duas-colunas { grid-template-columns: minmax(0, 1fr); }
}
}

/* ── Tabela ordenável e filtrável ───────────────────────────────────────────── */

.painel-tabela th.ordenavel { cursor: pointer; padding-right: 1.125rem; position: relative; user-select: none; }
.painel-tabela th.ordenavel:hover { color: var(--brand-main); }

.painel-tabela th.ordenavel::after {
    content: '⇅';
    font-size: 0.6875rem;
    opacity: 0.35;
    position: absolute;
    right: 0.375rem;
}

.painel-tabela th.crescente::after { content: '↑'; color: var(--brand-main); opacity: 1; }
.painel-tabela th.decrescente::after { content: '↓'; color: var(--brand-main); opacity: 1; }

.painel-tabela th.ordenavel:focus-visible { outline: 2px solid var(--brand-main); outline-offset: -2px; }

.painel-busca {
    background: var(--light-gray);
    border: 1px solid var(--light-gray-2);
    border-radius: var(--radius-sm);
    color: var(--darker-gray);
    font-size: 0.75rem;
    padding: 0.3125rem 0.625rem;
    width: 12rem;
}

.painel-busca:focus { border-color: var(--lighter-blue-2); outline: none; }

.painel-contador { color: var(--medium-gray-2); font-size: 0.6875rem; white-space: nowrap; }

/* ── Cor na célula ──────────────────────────────────────────────────────────── */

/*
 * A cor entra onde ela substitui leitura: uma taxa colorida se lê sem processar o número.
 * Os cortes são os mesmos do selo de situação, então tabela e selo nunca discordam.
 */
.painel-tabela td.taxa { font-weight: 600; }
.painel-tabela td.taxa.boa { color: #14795f; }
.painel-tabela td.taxa.atencao { color: var(--warning-darker); }
.painel-tabela td.taxa.ruim { color: #a32b31; }

/* Taxa sobre denominador pequeno não é qualidade, é sorte — e a tela diz isso em vez de
   escondê-la. */
.painel-tabela td.taxa.incerta { color: var(--medium-gray-2); font-weight: 400; }
.painel-tabela td.taxa.incerta::after { content: ' ·'; opacity: 0.5; }

.painel-tabela td.zero { color: var(--light-gray-3); }

/* ── Gráficos: a dica de foco e o estado vazio ──────────────────────────────── */

/*
 * A dica de foco do ApexCharts vem com caixa, borda e tipografia próprias — e é a peça
 * que o usuário mais encosta no painel inteiro. Ela é desenhada aqui para usar a mesma
 * superfície, o mesmo raio e a mesma sombra dos cartões. `!important` porque a
 * biblioteca escreve estilo inline no elemento que envolve esta marcação.
 */
.apexcharts-tooltip.apexcharts-theme-light {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.apexcharts-tooltip-title { display: none !important; }

.painel-dica {
    background: var(--white);
    border: 1px solid var(--light-gray-2);
    border-radius: var(--radius-md, 0.5rem);
    box-shadow: 0 6px 20px rgba(17, 18, 34, 0.12);
    min-width: 9rem;
    padding: 0.5rem 0.625rem;
}

.painel-dica-titulo {
    border-bottom: 1px solid var(--light-gray-2);
    color: var(--medium-gray-2);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    margin-bottom: 0.375rem;
    padding-bottom: 0.3125rem;
    text-transform: uppercase;
}

.painel-dica-linha {
    align-items: center;
    display: flex;
    gap: 0.5rem;
    line-height: 1.7;
}

.painel-dica-ponto {
    border-radius: 2px;
    flex-shrink: 0;
    height: 0.5rem;
    width: 0.5rem;
}

.painel-dica-nome { color: var(--medium-gray); font-size: 0.75rem; }

/* O valor encosta na borda direita para que os números de várias séries alinhem. */
.painel-dica-valor {
    color: var(--darker-gray);
    font-feature-settings: "tnum";
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    margin-left: auto;
}

/* Retângulo em branco e gráfico quebrado são indistinguíveis. Isto separa os dois. */
.painel-grafico-vazio {
    align-items: center;
    background: repeating-linear-gradient(
        45deg, transparent, transparent 6px,
        rgba(17, 18, 34, 0.02) 6px, rgba(17, 18, 34, 0.02) 12px);
    border: 1px dashed var(--light-gray-2);
    border-radius: var(--radius-md, 0.5rem);
    color: var(--medium-gray-2);
    display: flex;
    font-size: 0.8125rem;
    justify-content: center;
    text-align: center;
    padding: 1rem;
}

/* ── Indicador dentro do cartão de gráfico ──────────────────────────────────── */

/*
 * Para o número que NÃO pertence ao gráfico ao lado. O caso que existe: as falhas que
 * chegaram sem operadora informada. Elas não são uma operadora — são contexto que o
 * chamador não mandou —, e enquanto ficavam no ranking gastavam a maior barra e a
 * primeira leitura com uma linha em que ninguém pode trabalhar.
 */
.painel-cartao-corpo-com-lado {
    align-items: start;
    display: grid;
    gap: 1.25rem;
    grid-template-columns: minmax(0, 1fr) minmax(11rem, 14rem);
}

.painel-nota-lateral {
    background: var(--light-gray-1, #f7f8fa);
    border: 1px solid var(--light-gray-2);
    border-radius: var(--radius-md, 0.5rem);
    padding: 0.875rem 1rem;
}

.painel-nota-lateral .painel-indicador-valor { font-size: 1.5rem; }

.painel-nota-lateral-texto {
    border-top: 1px solid var(--light-gray-2);
    color: var(--medium-gray-2);
    display: block;
    font-size: 0.75rem;
    line-height: 1.5;
    margin-top: 0.625rem;
    padding-top: 0.625rem;
}

@media (max-width: 991.98px) {
    .painel-cartao-corpo-com-lado { grid-template-columns: 1fr; }
}

/* ── Instrumentação, cobertura e vazio ──────────────────────────────────────── */

/*
 * O QUE FICA FORA DA CONTA, DITO NO LUGAR ONDE A CONTA ESTA.
 *
 * O padrao vem da convergencia entre quem publica sobre dado esparso: Google Analytics
 * nomeia o balde (`(not set)`) em vez de escondê-lo, Tableau poe um indicador no canto
 * do grafico contando o que ficou de fora, Datawrapper trata nota de rodape como
 * "footnotes, with which you can clarify any abnormalities about your data", e o
 * Carbon manda "label both the start and end point during which data is not available".
 *
 * A alternativa -- somer com o balde -- produz um numero que parece certo e esta
 * errado, e quem le o painel nao e quem instrumentou o campo.
 */
/*
 * `display: block`, e NAO flex.
 *
 * Num flex todo filho vira item -- inclusive cada `<strong>` e cada pedaco de texto
 * solto entre eles. A nota, que e uma frase com quatro `<strong>`, saiu quebrada em
 * seis colunas estreitas, uma por trecho. Aqui o texto e texto: o icone fica inline
 * e o recuo da segunda linha vem do `text-indent` negativo com padding.
 */
.painel-instrumentacao {
    border-top: 1px solid var(--light-gray);
    color: var(--medium-gray-2);
    display: block;
    font-size: var(--p-tipo-rotulo);
    line-height: 1.5;
    margin: var(--p-espaco-5) 0 0;
    padding: var(--p-espaco-4) 0 0 var(--p-espaco-6);
    text-indent: calc(-1 * var(--p-espaco-6));
}

.painel-instrumentacao i {
    display: inline-block;
    opacity: 0.7;
    text-indent: 0;
    width: var(--p-espaco-6);
}

/* A cobertura mora no cabecalho do cartao: e ela que diz o quanto a tabela responde. */
.painel-cobertura {
    align-items: baseline;
    display: flex;
    flex-shrink: 0;
    gap: var(--p-espaco-2);
}

.painel-cobertura-valor {
    color: var(--darker-gray);
    font-size: var(--p-tipo-titulo);
    font-variant-numeric: tabular-nums lining-nums;
    font-weight: 700;
}

.painel-cobertura-rotulo {
    color: var(--medium-gray-2);
    font-size: var(--p-tipo-rotulo);
}

/*
 * Celula sem valor leva travessao, e nao branco. Adobe Spectrum: "Use an en dash (-)
 * for missing values". Branco nao distingue "nao se aplica" de "esqueci de preencher".
 */
.painel-vazio { color: var(--medium-gray-2); }

/*
 * Estado vazio no lugar da tabela, e nao uma tabela vazia. Carbon: "Empty states should
 * replace the element that would ordinarily show... the column headers and footer should
 * not be present", e o texto diz POR QUE nao ha dado.
 */
.painel-vazio-estado {
    color: var(--medium-gray-2);
    font-size: var(--p-tipo-corpo);
    line-height: var(--p-lh-corpo);
    margin: 0;
    padding: var(--p-espaco-7) var(--p-espaco-5);
    text-align: center;
}

/* O selo do leitor proprio: compacto, largura fixa, os demais no `title`. */
.painel-tabela .painel-selo {
    background: var(--light-gray);
    border-radius: var(--p-raio-selo);
    color: var(--darker-gray);
    display: inline-flex;
    font-size: var(--p-tipo-rotulo);
    gap: var(--p-espaco-2);
    max-width: 100%;
    overflow: hidden;
    padding: var(--p-espaco-1) var(--p-espaco-3);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.painel-tabela .painel-selo i { color: #14795f; font-size: 0.7em; }

/*
 * Proporcao sobre poucos registros: a mesma regra de `taxa_confiavel`. Com 60 registros
 * de 6.073 faturas, "100% do Invoice" le como noticia boa e e amostra pequena. A barra
 * fica apagada em vez de sumir -- o numero continua la, so nao disputa a atencao.
 */
.painel-tabela .painel-pouco-dado .preenchimento { opacity: 0.35; }
.painel-tabela .painel-pouco-dado .numero-sobre { color: var(--medium-gray-2); }

/* ── Documentação ───────────────────────────────────────────────────────────── */

/* As seções da documentação reusam o `painel-indice`; o que muda é que uma delas
   está aberta, e isso precisa se ver. */
.painel-doc-secoes a.ativa {
    background: var(--brand-main);
    border-color: var(--brand-main);
    color: var(--white);
}

.painel-doc-secoes a.ativa:hover { color: var(--white); }

.painel-doc-bloco {
    background: var(--light-gray);
    border-radius: var(--radius-md);
    font-size: 0.8125rem;
    line-height: 1.6;
    margin-bottom: 1rem;
    overflow-x: auto;
    padding: 0.875rem 1rem;
}

.painel-doc-lista { margin-bottom: 1rem; padding-left: 1.25rem; }
.painel-doc-lista li { margin-bottom: 0.5rem; }
.painel-doc-lista li:last-child { margin-bottom: 0; }

/* ── Aba do agente ──────────────────────────────────────────────────────────── */

/*
 * STATE IS ICON + LABEL, NEVER COLOR ALONE. `.painel-estado` is the pill every band of
 * the agent tab uses for a state (ok, failed, late, violated...). It is a separate class
 * from `.painel-selo` on purpose: inside a table `.painel-tabela .painel-selo` turns the
 * selo grey (the reader-badge style of the readers tab), and a grey "violada" would read
 * like a neutral tag.
 */
.painel-estado {
    align-items: center;
    border-radius: var(--radius-pill);
    display: inline-flex;
    font-size: var(--p-tipo-rotulo);
    font-weight: 600;
    gap: var(--p-espaco-2);
    line-height: var(--p-lh-rotulo);
    padding: var(--p-espaco-1) var(--p-espaco-3);
    white-space: nowrap;
}

.painel-estado-boa { background: var(--vcx-aqua-light); color: #14795f; }
.painel-estado-atencao { background: var(--light-orange); color: var(--warning-darker); }
.painel-estado-ruim { background: var(--light-red); color: #a32b31; }
.painel-estado-neutro { background: var(--light-gray-2); color: var(--medium-gray); }
.painel-estado-info { background: var(--lighter-blue); color: var(--brand-main); }

/* The alert chips wrap; a long one ("agente-scan falhou em agente.portao") must not
   push the page sideways on a phone, so it may break inside. */
.painel-alertas { display: flex; flex-wrap: wrap; gap: var(--p-espaco-3); margin-bottom: var(--p-espaco-5); }
.painel-alertas .painel-estado { white-space: normal; }

.painel-servicos {
    display: grid;
    gap: var(--p-espaco-5);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.painel-servico {
    border: 1px solid var(--light-gray-2);
    border-radius: var(--p-raio-cartao);
    min-width: 0;
    padding: var(--p-espaco-5);
}

.painel-servico-topo {
    align-items: center;
    display: flex;
    gap: var(--p-espaco-3);
    justify-content: space-between;
    margin-bottom: var(--p-espaco-4);
}

.painel-servico-nome { font-size: var(--p-tipo-titulo); font-weight: 600; margin: 0; }

/* Four facts in a row on desktop, two on a phone. Grid, not flex: the labels align. */
.painel-servico-fatos {
    display: grid;
    gap: var(--p-espaco-3) var(--p-espaco-5);
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0 0 var(--p-espaco-4);
}

.painel-servico-fatos dt {
    color: var(--medium-gray-2);
    font-size: var(--p-tipo-rotulo);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.painel-servico-fatos dd {
    color: var(--darker-gray);
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    margin: 0;
}

.painel-servico-aviso { color: var(--warning-darker); font-weight: 400; }

/* The error is a raw message (`gh: not a git repository`); it breaks anywhere so a long
   path does not overflow the tile. */
.painel-servico-erro {
    background: var(--light-red);
    border-radius: var(--p-raio-controle);
    color: #a32b31;
    font-size: var(--p-tipo-rotulo);
    margin: 0 0 var(--p-espaco-3);
    overflow-wrap: anywhere;
    padding: var(--p-espaco-3) var(--p-espaco-4);
}

.painel-servico-erro code { color: inherit; }

.painel-servico-linhas {
    color: var(--medium-gray);
    font-size: var(--p-tipo-rotulo);
    margin: 0;
    padding-left: 1.125rem;
}

.painel-servico-vazio { color: var(--medium-gray-2); font-size: var(--p-tipo-rotulo); margin: 0; }

.painel-subtitulo {
    color: var(--darker-gray);
    font-size: var(--p-tipo-corpo);
    font-weight: 600;
    margin: 0 0 var(--p-espaco-3);
}

.painel-rodape-nota { color: var(--medium-gray-2); font-size: var(--p-tipo-rotulo); }

.painel-cartao-corpo-extra { border-top: 1px solid var(--light-gray-2); }

/* Long free text in a table cell (a gate reason, a group key) wraps instead of
   stretching the table past the card. The floor keeps it readable on a phone: seen
   at 420px, without it the column shrank to a word per line and each row grew to
   130px -- the table now scrolls sideways inside the card instead. */
.painel-tabela .painel-quebra { min-width: 12rem; overflow-wrap: anywhere; white-space: normal; }

.painel-funil-barra-agente { background: var(--vcx-blue); }

.painel-mais { color: #14795f; }
.painel-menos { color: #a32b31; }

/* Three indicators, not the six of the overview grid. */
.painel-indicadores.painel-indicadores-agente { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/*
 * THE DAILY BARS OF BAND E. 28 bars of 4px: fourteen days before the fix in grey,
 * fourteen after in the brand blue, and a gap at the day the fix reached main. A zero
 * day still shows a 1px stub, so "no failure" reads differently from "no data".
 */
.painel-barras-dia {
    align-items: flex-end;
    display: inline-flex;
    gap: 1px;
    height: 1.5rem;
    vertical-align: middle;
}

.painel-barra-dia { display: inline-block; min-height: 1px; width: 4px; }
.painel-barra-antes { background: var(--medium-gray-2); }
.painel-barra-depois { background: var(--vcx-blue); }
.painel-barra-marco { margin-left: 3px; }

@media (max-width: 768px) {
    .painel-servicos { grid-template-columns: minmax(0, 1fr); }
    .painel-servico-fatos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .painel-indicadores.painel-indicadores-agente { grid-template-columns: minmax(0, 1fr); }
}

/* ── Aba do agente: panorama no tempo (23/10/2026) ─────────────────────────── */

/*
 * A faixa de estado: o "ao vivo", os dois serviços e o que pede atenção, numa linha só
 * que quebra no celular. Ela substitui os dois cartões grandes de "Agora" e "Guardas":
 * o estado é contexto da tela, não o assunto dela.
 */
.painel-agente-estado {
    align-items: center;
    background: var(--white);
    border: 1px solid var(--light-gray-2);
    border-radius: var(--p-raio-cartao);
    display: flex;
    flex-wrap: wrap;
    gap: var(--p-espaco-4) var(--p-espaco-6);
    margin-bottom: var(--p-espaco-6);
    padding: var(--p-espaco-4) var(--p-espaco-5);
}

.painel-ao-vivo {
    align-items: center;
    color: var(--medium-gray-2);
    display: inline-flex;
    font-size: var(--p-tipo-rotulo);
    font-weight: 600;
    gap: var(--p-espaco-2);
    white-space: nowrap;
}

.painel-ao-vivo-ponto {
    animation: painel-pulso 2s ease-out infinite;
    background: #14795f;
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(20, 121, 95, 0.45);
    display: inline-block;
    height: 8px;
    width: 8px;
}

/* A pergunta ao servidor falhou: o ponto para e fica cinza. O número que está na tela
   continua sendo o da última medição, e a idade continua contando. */
.painel-ao-vivo-erro .painel-ao-vivo-ponto { animation: none; background: var(--medium-gray-2); box-shadow: none; }

@keyframes painel-pulso {
    0% { box-shadow: 0 0 0 0 rgba(20, 121, 95, 0.45); }
    70% { box-shadow: 0 0 0 7px rgba(20, 121, 95, 0); }
    100% { box-shadow: 0 0 0 0 rgba(20, 121, 95, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .painel-ao-vivo-ponto { animation: none; }
}

.painel-agente-servicos { display: flex; flex-wrap: wrap; gap: var(--p-espaco-3) var(--p-espaco-6); }

.painel-agente-servico {
    align-items: center;
    display: inline-flex;
    flex-wrap: wrap;
    font-size: var(--p-tipo-rotulo);
    gap: var(--p-espaco-2);
}

.painel-agente-servico-fato { color: var(--medium-gray-2); }

.painel-agente-estado .painel-alertas { margin-left: auto; }

/* O número que o cartão de efeito existe para dizer. Sem `tabular-nums`: é um número
   sozinho, e dígito de largura fixa só serve a coluna. */
.painel-agente-destaque {
    align-content: center;
    border-left: 1px solid var(--light-gray-2);
    display: grid;
    gap: var(--p-espaco-2);
    height: 100%;
    padding-left: var(--p-espaco-5);
}

.painel-agente-destaque-valor { color: #14795f; font-size: 3rem; font-weight: 700; line-height: 1; }
.painel-agente-destaque-rotulo { color: var(--darker-gray); font-size: var(--p-tipo-corpo); font-weight: 600; }
.painel-agente-destaque-apoio { color: var(--medium-gray-2); font-size: var(--p-tipo-rotulo); line-height: 1.5; }

@media (max-width: 991.98px) {
    .painel-agente-destaque { border-left: 0; border-top: 1px solid var(--light-gray-2); padding: var(--p-espaco-4) 0 0; }
    .painel-agente-estado .painel-alertas { margin-left: 0; }
}

.painel-agente-sutil { color: var(--medium-gray-2); font-size: var(--p-tipo-rotulo); }

/* Turnos da sessão como barra: comparar 7 com 97 lendo os dois números é mais lento
   que ver o comprimento. O número fica ao lado, porque a barra sozinha não diz quanto. */
.painel-agente-turnos {
    background: rgba(17, 18, 34, 0.045);
    border-radius: 4px;
    display: inline-block;
    height: 6px;
    margin-right: var(--p-espaco-2);
    vertical-align: middle;
    width: 5rem;
}

.painel-agente-turnos span { background: var(--brand-main, #034ab0); border-radius: 4px; display: block; height: 100%; }

/* A fonte que não respondeu: um selo na faixa de estado que abre a lista por cima do
   conteúdo, em vez de uma faixa da largura da tela (23/10/2026). */
.painel-agente-fontes { position: relative; }
.painel-agente-fontes > summary { cursor: pointer; list-style: none; }
.painel-agente-fontes > summary::-webkit-details-marker { display: none; }
.painel-agente-fontes > summary::after { content: "▾"; font-size: 0.7em; margin-left: var(--p-espaco-1); }
.painel-agente-fontes[open] > summary::after { content: "▴"; }

.painel-agente-fontes-painel {
    background: var(--white);
    border: 1px solid var(--light-gray-2);
    border-radius: var(--p-raio-cartao);
    box-shadow: 0 8px 24px rgba(17, 18, 34, 0.12);
    color: var(--darker-gray);
    font-size: var(--p-tipo-rotulo);
    line-height: 1.5;
    margin-top: var(--p-espaco-2);
    max-width: min(36rem, calc(100vw - 2rem));
    padding: var(--p-espaco-4);
    position: absolute;
    right: 0;
    top: 100%;
    width: max-content;
    z-index: 20;
}

.painel-agente-fontes-painel code { overflow-wrap: anywhere; white-space: normal; }