/*
 * Folha unica da aplicacao.
 *
 * Duas peles convivem aqui, e o :root e a escura:
 *
 *   .corpo--login   design final da tela de login (Fase 4.1), sobre o Login.png
 *   .corpo--painel  design final do dashboard (Fase 4.2), sobre o Dashboard.png
 *
 * O painel e o unico fundo claro do projeto — e o mock que manda. Por isso todo
 * o tema claro esta escopado em .corpo--painel: sem o escopo, o /status e as
 * telas de erro, que nao entram no design, iriam junto.
 *
 * O bloco Faturamento (Fase 4.3) nao trouxe componente novo: reusa a grade e os
 * cards de KPI da 4.2, incluindo o ciclo de 6 cores.
 */

:root {
    --cor-fundo: #000000;
    --cor-superficie: #121212;
    --cor-borda: #262626;
    --cor-texto: #f2f2f2;
    --cor-texto-fraco: #9a9a9a;
    /* Amarelo real do logo, medido no proprio arquivo. */
    --cor-acento: #ffe400;
    --cor-placeholder: #818283;
    --cor-ok: #4ade80;
    --cor-erro: #f87171;
    --cor-atencao: #df961f;
    --raio: 8px;
    /* Pilula: qualquer valor grande arredonda ate a metade da altura. */
    --raio-pilula: 999px;
    --fonte: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--cor-fundo);
    color: var(--cor-texto);
    font-family: var(--fonte);
    line-height: 1.5;
}

.conteudo {
    flex: 1;
    width: 100%;
    max-width: 820px;
    margin: 0 auto;
    padding: 2.5rem 1.25rem 3rem;
}

/* Centraliza verticalmente o conteudo (usado pela tela de login). */
.corpo--centrado .conteudo {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Some da tela sem sumir do leitor de tela. Usado nos rotulos do login, que
   no design viram placeholder — e placeholder nao substitui <label>. */
.visualmente-oculto {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.cabecalho h1 {
    margin: 0;
    font-size: 1.75rem;
    color: var(--cor-acento);
}

.subtitulo {
    margin: 0.25rem 0 1.75rem;
    color: var(--cor-texto-fraco);
    font-size: 0.9rem;
}

.alerta {
    padding: 0.85rem 1rem;
    border-radius: var(--raio);
    border-left: 4px solid;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
}

.alerta--ok {
    border-color: var(--cor-ok);
    background: rgba(74, 222, 128, 0.08);
}

.alerta--erro {
    border-color: var(--cor-erro);
    background: rgba(248, 113, 113, 0.08);
}

/* Existia so na pele clara ate a Fase 5. Fica na base porque a familia .alerta
   inteira vive aqui — sem ela, a variante ficaria sem estilo nenhum fora do
   dashboard. */
.alerta--atencao {
    border-color: var(--cor-atencao);
    background: rgba(223, 150, 31, 0.08);
}

.cartao {
    background: var(--cor-superficie);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio);
    padding: 1.25rem;
    margin-bottom: 1rem;
}

.cartao h2 {
    margin: 0 0 0.9rem;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--cor-acento);
}

.lista-dados {
    display: grid;
    grid-template-columns: minmax(120px, auto) 1fr;
    gap: 0.35rem 1rem;
    margin: 0;
    font-size: 0.9rem;
}

.lista-dados dt {
    color: var(--cor-texto-fraco);
}

.lista-dados dd {
    margin: 0;
}

.lista-itens {
    list-style: none;
    margin: 0;
    padding: 0;
}

.item {
    display: grid;
    grid-template-columns: 1.25rem minmax(140px, auto) 1fr;
    gap: 0.6rem;
    align-items: baseline;
    padding: 0.3rem 0;
    margin: 0;
    font-size: 0.9rem;
}

.item__marca {
    font-weight: 700;
}

.item--ok .item__marca {
    color: var(--cor-ok);
}

.item--erro .item__marca {
    color: var(--cor-erro);
}

.item--pendente .item__marca {
    color: var(--cor-acento);
}

.item__nome {
    font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
}

.item__nota {
    color: var(--cor-texto-fraco);
    font-size: 0.85rem;
}

.nota {
    margin: 0.9rem 0 0;
    color: var(--cor-texto-fraco);
    font-size: 0.85rem;
}

/* A nota tambem serve de lista quando sao varios casos a explicar — foi o que a
   conferencia contra o relatorio do ERP trouxe para o bloco de faturamento. Um
   paragrafo unico com tres regras dentro nao se le. */
ul.nota {
    padding-left: 1.2rem;
}

ul.nota li + li {
    margin-top: 0.4rem;
}

code {
    font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
    background: rgba(255, 255, 255, 0.06);
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
}

a {
    color: var(--cor-acento);
}

/* --- Formularios ------------------------------------------------------- */

.caixa-login {
    width: 100%;
    /* Largura dos campos no Login.png. */
    max-width: 400px;
}

/* <h1> da tela de login: o titulo da pagina e o proprio logo, e o texto dele
   vive no alt da imagem — o mock nao tem texto nenhum fora dos campos. */
.marca {
    margin: 0;
    line-height: 0;
}

.marca img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    height: auto;
}

.formulario {
    display: flex;
    flex-direction: column;
    gap: 1.3rem;
    margin-top: 1.5rem;
}

.campo {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.campo__entrada {
    width: 100%;
    padding: 0.65rem 0.8rem;
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio);
    background: var(--cor-superficie);
    color: var(--cor-texto);
    font-family: inherit;
    font-size: 0.95rem;
}

.campo__entrada:focus {
    outline: 2px solid var(--cor-acento);
    outline-offset: 1px;
    border-color: transparent;
}

/* A pilula vale para todas as telas: e identidade de marca, nao estilo de
   uma tela so. */
.botao {
    padding: 0.7rem 1.4rem;
    border: none;
    border-radius: var(--raio-pilula);
    background: var(--cor-acento);
    color: #000;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
}

/* Botao que ocupa a largura do bloco — o "Acessar" do login. */
.botao--bloco {
    width: 100%;
    height: 51px;
    font-size: 1rem;
    font-weight: 700;
}

/* Botao de acao secundaria: "Aplicar", "Sincronizar". O amarelo sobre preto e o
   mesmo do login, so que menor. */
.botao--compacto {
    padding: 0.5rem 1.2rem;
    font-size: 0.875rem;
}

.botao:hover {
    filter: brightness(1.08);
}

.botao:focus-visible {
    outline: 2px solid var(--cor-texto);
    outline-offset: 2px;
}

.botao--discreto {
    background: transparent;
    border: 1px solid var(--cor-borda);
    color: var(--cor-texto-fraco);
    font-weight: 400;
    padding: 0.45rem 0.9rem;
    font-size: 0.85rem;
}

.botao--discreto:hover {
    color: var(--cor-texto);
    border-color: var(--cor-texto-fraco);
    filter: none;
}

.mensagem {
    margin: 1.25rem 0 0;
    padding: 0.7rem 0.85rem;
    border-radius: var(--raio);
    border-left: 3px solid;
    font-size: 0.85rem;
}

.mensagem--erro {
    border-color: var(--cor-erro);
    background: rgba(248, 113, 113, 0.1);
    color: var(--cor-erro);
}

/* --- Tela de login (Fase 4.1) ------------------------------------------ */
/* Escopado em .corpo--login de proposito: os campos de data e o seletor de
   campanha do dashboard continuam escuros ate a Fase 4.2, e sem o escopo esta
   pilula branca apareceria solta dentro dos cartoes escuros de la.
   As medidas vem do Login.png. */

.corpo--login .marca {
    /* 50px do logo ate o primeiro campo. */
    margin-bottom: 3.125rem;
}

.corpo--login .mensagem {
    margin-bottom: 1.25rem;
}

.corpo--login .formulario {
    /* O espaco acima ja vem da margem do logo. */
    margin-top: 0;
}

.corpo--login .campo__entrada {
    height: 50px;
    padding: 0 1.75rem;
    border: none;
    border-radius: var(--raio-pilula);
    background: #fff;
    color: #111;
    font-size: 1rem;
}

.corpo--login .campo__entrada::placeholder {
    color: var(--cor-placeholder);
    /* O Firefox baixa a opacidade do placeholder por conta propria. */
    opacity: 1;
}

/* Sem isto o preenchimento automatico pinta a pilula de azul claro — e a tela
   pede autocomplete de propria vontade (autocomplete="username"). */
.corpo--login .campo__entrada:-webkit-autofill {
    box-shadow: 0 0 0 100px #fff inset;
    -webkit-text-fill-color: #111;
}

.rodape {
    padding: 1.25rem;
    text-align: center;
    border-top: 1px solid var(--cor-borda);
    color: var(--cor-texto-fraco);
    font-size: 0.8rem;
}

/* O Login.png nao tem linha separando o rodape: so o texto cinza. */
.corpo--login .rodape {
    border-top: none;
}

/* --- Compartilhado: tabelas e diagnostico ------------------------------ */

/* A rolagem fica no container, nunca no <body>: a pagina inteira nao pode
   rolar de lado por causa de uma tabela larga. */
.rolagem {
    overflow-x: auto;
}

.tabela {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    white-space: nowrap;
}

.tabela th,
.tabela td {
    padding: 0.55rem 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--cor-borda);
}

.tabela th {
    color: var(--cor-texto-fraco);
    font-weight: 500;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.tabela tbody tr:last-child td {
    border-bottom: none;
}

/* Cabecalho ordenavel (tabelas de conjuntos e de anuncios).

   O botao e criado pelo assets/js/app.js, nunca pelo PHP: sem JavaScript o <th>
   continua sendo o texto que sempre foi e nenhuma destas regras encontra alvo.

   Sao regras ESTRUTURAIS de proposito — o `color: inherit` faz o botao herdar o
   --painel-texto no dashboard e a cor do :root nas outras telas, entao elas nao
   precisam ser escopadas em .corpo--painel como as de cor. */
.tabela__ordenar {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    color: inherit;
    cursor: pointer;
}

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

.tabela__ordenar:focus-visible {
    outline: 2px solid var(--cor-acento);
    outline-offset: 3px;
}

/* A seta: espaco reservado desde sempre (o "\2195" da coluna em repouso), senao
   o cabecalho inteiro pularia de largura ao primeiro clique. */
.tabela__ordenar::after {
    content: "\2195";
    opacity: 0.35;
    font-size: 0.85em;
}

.tabela th[aria-sort="ascending"] .tabela__ordenar::after {
    content: "\25B2";
    opacity: 1;
}

.tabela th[aria-sort="descending"] .tabela__ordenar::after {
    content: "\25BC";
    opacity: 1;
}

/* Blocos de diagnostico ("Acoes disponiveis" e "Cache e consumo da API").
   Ficam no HTML sempre; em producao apenas somem da tela, para continuarem
   inspecionaveis no devtools. Sobreviveram ao redesenho da Fase 4.2 sem
   nenhuma mudanca nesta regra — era exatamente o ponto. */
.cartao--validacao {
    border-style: dashed;
}

body[data-ambiente="production"] .cartao--validacao {
    display: none;
}

.formulario-linha {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1rem;
}

/* --- Painel do Meta (Fases 4.2 e 4.3) ---------------------------------- */
/* Tudo daqui para baixo escopado em .corpo--painel. As medidas e as cores
   foram amostradas pixel a pixel no Dashboard.png (1280x2691), nao estimadas.
   O bloco Faturamento da 4.3 acrescentou duas regras so, la embaixo: ele reusa
   a grade e os cards desta secao inteiros. */

.corpo--painel {
    --painel-fundo: #f7f7f7;
    --painel-texto: #111111;
    --painel-texto-fraco: #606060;
    --painel-linha: #818283;
    --painel-trilho: #bdbdbb;
    --painel-pilula-fundo: #f5f5f5;
    --painel-pilula-borda: #888888;
    /* A seta do <select> e do <details>. SVG embutido: virar arquivo por causa
       de 12x8 pixels custaria uma requisicao a mais do que o desenho vale. */
    --painel-seta: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.6 6 6.4 11 1.6' fill='none' stroke='%23222222' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

    background: var(--painel-fundo);
    color: var(--painel-texto);
}

/* A barra preta vai de ponta a ponta, entao o container perde a largura
   maxima e o respiro; cada bloco traz a sua propria faixa centrada. */
.corpo--painel .conteudo {
    max-width: none;
    padding: 0 0 4rem;
}

.corpo--painel .faixa {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 1.25rem;
}

/* Barra superior ---------------------------------------------------------- */

.corpo--painel .barra-topo {
    background: #000;
}

.corpo--painel .barra-topo__faixa {
    display: grid;
    /* 1fr auto 1fr deixa o titulo no centro exato da faixa. Com flex ele cairia
       no meio da sobra entre o logo e os controles, que tem larguras
       diferentes — e o mock centra na pagina. */
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1.25rem;
    min-height: 120px;
}

.corpo--painel .barra-topo__marca {
    display: block;
    line-height: 0;
}

.corpo--painel .barra-topo__marca img {
    display: block;
    max-width: 100%;
    height: auto;
}

.corpo--painel .barra-topo__titulo {
    margin: 0;
    color: var(--cor-acento);
    font-size: 1.3125rem;
    font-weight: 500;
    white-space: nowrap;
}

.corpo--painel .barra-topo__controles {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1.25rem;
}

/* Acao solta na barra preta: hoje so o "Sair", que e <button> porque o logout e
   POST — a regra existe para ele nao parecer botao, e sim texto solto, que e o
   que o Dashboard.png mostra. Ate o ajuste da Fase 5 o link da conexao do Meta
   dividia esta classe; ele virou o cartao "Conexão do Meta" da area branca. */
.corpo--painel .barra-topo__acao {
    padding: 0;
    border: none;
    background: none;
    color: #fff;
    font-family: inherit;
    font-size: 1rem;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.corpo--painel .barra-topo__acao:hover {
    color: var(--cor-acento);
}

.corpo--painel .barra-topo__acao:focus-visible {
    outline: 2px solid var(--cor-acento);
    outline-offset: 3px;
    border-radius: 4px;
}

/* Pilulas: o seletor de campanha e o resumo do periodo ------------------- */

.corpo--painel .pilula {
    display: flex;
    align-items: center;
    min-height: 35px;
    padding: 0 1.125rem;
    border: 1px solid var(--painel-pilula-borda);
    border-radius: var(--raio-pilula);
    background: var(--painel-pilula-fundo);
    color: var(--painel-texto);
    font-size: 0.875rem;
    cursor: pointer;
}

.corpo--painel .pilula--select {
    width: 300px;
    max-width: 100%;
    padding: 0;
}

.corpo--painel .pilula__campo {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    height: 33px;
    padding: 0 2.4rem 0 1.125rem;
    border: none;
    border-radius: inherit;
    background: transparent var(--painel-seta) no-repeat right 1.125rem center / 12px 8px;
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    cursor: pointer;
    /* Nome de campanha e longo: cortar e melhor do que esticar a pilula. */
    text-overflow: ellipsis;
}

.corpo--painel .pilula__campo:focus-visible,
.corpo--painel .periodo__resumo:focus-visible {
    outline: 2px solid var(--cor-acento);
    outline-offset: 2px;
}

/* Linha da campanha e seletor de periodo --------------------------------- */

.corpo--painel .linha-campanha {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    /* 46px da barra preta ate o rotulo "Campanha". */
    padding-top: 2.875rem;
}

.corpo--painel .linha-campanha__rotulo {
    margin: 0 0 0.5rem;
    font-size: 0.875rem;
}

.corpo--painel .linha-campanha__nome {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
}

.corpo--painel .periodo {
    position: relative;
}

/* Linha "Dados atualizados há ... · [Atualizar agora]", logo abaixo da linha da
   campanha. E PRODUTO, e nao diagnostico: fica na tela em production tambem.
   Discreta de proposito — ela data o painel, nao compete com ele. */
.corpo--painel .atualizacao {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    margin-top: 1rem;
}

.corpo--painel .atualizacao__texto {
    margin: 0;
    color: var(--painel-texto-fraco);
    font-size: 0.875rem;
}

/* O trecho relativo e o unico destaque, porque e o que se le de relance.
   O `title` com a hora exata mora nele. */
.corpo--painel .atualizacao__texto strong {
    color: var(--painel-texto);
    font-weight: 700;
}

.corpo--painel .atualizacao__acao {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.corpo--painel .periodo__resumo {
    /* Sem isto o <summary> desenha o proprio triangulo e a pilula fica com
       duas setas. */
    list-style: none;
    gap: 1.125rem;
    white-space: nowrap;
}

.corpo--painel .periodo__resumo::-webkit-details-marker {
    display: none;
}

.corpo--painel .periodo__resumo::after {
    content: '';
    width: 12px;
    height: 8px;
    margin-left: auto;
    background: var(--painel-seta) no-repeat center / 12px 8px;
}

.corpo--painel .periodo[open] .periodo__resumo::after {
    transform: rotate(180deg);
}

/* Flutuante: aberto, o painel nao pode empurrar a grade de KPIs para baixo. */
.corpo--painel .periodo__painel {
    position: absolute;
    right: 0;
    /* Acima do 2 do card sob o mouse (.kpi:hover). Este painel cai justamente
       por cima do topo da grade de KPIs; empatados em 2, venceria o card, por
       vir depois no HTML — e o balao de dica dele passaria por cima de um menu
       aberto. Menu aberto manda em dica flutuante. */
    z-index: 3;
    min-width: 100%;
    margin-top: 0.5rem;
    padding: 1rem;
    border: 1px solid var(--painel-pilula-borda);
    border-radius: var(--raio);
    background: #fff;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}

.corpo--painel .periodo__campos {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 0.9rem;
}

.corpo--painel .campo-claro {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.corpo--painel .campo-claro__rotulo {
    font-size: 0.8rem;
    color: var(--painel-texto-fraco);
}

.corpo--painel .campo-claro__entrada {
    height: 38px;
    padding: 0 0.9rem;
    border: 1px solid var(--painel-pilula-borda);
    border-radius: var(--raio-pilula);
    background: #fff;
    color: var(--painel-texto);
    font-family: inherit;
    font-size: 0.9rem;
}

/* Cartao da conexao do Meta (Fases 5 a 5.2) ------------------------------ */
/* O Dashboard.png nao tem este bloco: ele nasceu do ajuste que tirou a conexao
   da tela propria e a trouxe para a area branca. Por isso ele nao inventa
   linguagem visual nenhuma — reusa o cartao branco com sombra discreta dos
   alertas, os campos claros do seletor de periodo e as pilulas dos botoes. */

.corpo--painel .conexao {
    margin-top: 1.75rem;
    padding: 1.25rem;
    border-radius: var(--raio);
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* O cabecalho e o <summary> do cartao recolhivel (Fase 5.3): em repouso ele e o
   cartao inteiro. Sem o list-style o navegador desenha o proprio triangulo a
   esquerda, e o display:flex ja o desalinharia — mesmo par de regras do seletor
   de periodo. */
.corpo--painel .conexao__topo {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 1.25rem;
    list-style: none;
    cursor: pointer;
}

.corpo--painel .conexao__topo::-webkit-details-marker {
    display: none;
}

.corpo--painel .conexao__topo:focus-visible {
    outline: 2px solid var(--painel-texto);
    outline-offset: 3px;
}

/* Rotulo da acao, empurrado para a direita do cabecalho. Os dois textos moram no
   HTML e o [open] do <details> esconde um por vez — trocar palavra sem JS. */
.corpo--painel .conexao__alternar {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
    font-size: 0.875rem;
    font-weight: 700;
}

.corpo--painel .conexao__alternar::after {
    content: '';
    width: 12px;
    height: 8px;
    background: var(--painel-seta) no-repeat center / 12px 8px;
}

.corpo--painel .conexao__caixa[open] .conexao__alternar::after {
    transform: rotate(180deg);
}

.corpo--painel .conexao__caixa[open] .conexao__alternar--fechado,
.corpo--painel .conexao__caixa:not([open]) .conexao__alternar--aberto {
    display: none;
}

.corpo--painel .conexao__titulo {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
}

.corpo--painel .conexao__estado {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    /* Sem isto o resumo longo empurra o rotulo "Editar conexão" para fora em vez
       de quebrar a linha. */
    min-width: 0;
    margin: 0;
    color: var(--painel-texto-fraco);
    font-size: 0.875rem;
}

/* Bolinha de estado. Cor sozinha nao informa nada a quem nao a distingue, entao
   o mesmo estado vai escrito ao lado — a bolinha e reforco, e por isso sai do
   leitor de tela no HTML. */
.corpo--painel .conexao__marca {
    flex: none;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--painel-trilho);
}

.corpo--painel .conexao__marca--ok { background: #10bc98; }
.corpo--painel .conexao__marca--atencao { background: #df961f; }
.corpo--painel .conexao__marca--erro { background: #e9464d; }

/* Dentro do cartao o alerta e mensagem da acao, nao faixa da pagina: perde a
   sombra (ja esta sobre branco) e a margem de bloco. */
.corpo--painel .conexao .alerta {
    margin: 1rem 0 0;
    background: rgba(0, 0, 0, 0.02);
    box-shadow: none;
}

/* A confirmacao da ultima acao e o unico alerta acima do cabecalho — e o que faz
   "conta salva" aparecer com o cartao ja recolhido. Logo, margem embaixo. */
.corpo--painel .conexao > .alerta:first-child {
    margin: 0 0 1rem;
}

.corpo--painel .conexao__selecoes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem 2rem;
    margin-top: 1.25rem;
}

.corpo--painel .conexao__linha {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem;
}

/* Nome de portfolio e de conta sao longos: o campo tem largura fixa e corta,
   em vez de esticar a linha inteira. */
.corpo--painel .conexao__linha .campo-claro__entrada {
    width: 320px;
    max-width: 100%;
}

/* Sem isto o <select> desenha a seta do sistema, diferente da que o seletor de
   campanha e o de periodo usam. */
.corpo--painel .conexao__linha select.campo-claro__entrada {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 2.4rem;
    background: #fff var(--painel-seta) no-repeat right 1.125rem center / 12px 8px;
    cursor: pointer;
    text-overflow: ellipsis;
}

/* Enquanto nada foi escolhido, o campo se le como pendente e nao como um valor
   ja definido — que e o engano que a opcao neutra existe para desfazer. Vale so
   para os obrigatorios do cartao: `:invalid` casa com o <option value="">, e
   <select disabled> nao e validado, entao a lista vazia continua so apagada. */
.corpo--painel .conexao__linha select.campo-claro__entrada:invalid {
    color: var(--painel-texto-fraco);
}

.corpo--painel .conexao__acoes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.25rem;
    margin-top: 1.25rem;
}

.corpo--painel .conexao [disabled] {
    opacity: 0.55;
    cursor: not-allowed;
}

/* Bloco de configuracao: some quando APP_ENV=production, pela regra base de
   .cartao--validacao. Aqui ele so ganha a separacao do resto do cartao. */
.corpo--painel .conexao__config {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px dashed var(--painel-trilho);
}

/* O :root pinta o botao discreto com cinza-claro sobre fundo escuro; no cartao
   branco isso fica ilegivel. */
.corpo--painel .botao--discreto {
    border-color: var(--painel-pilula-borda);
    color: var(--painel-texto-fraco);
}

.corpo--painel .botao--discreto:hover {
    border-color: var(--painel-texto);
    color: var(--painel-texto);
}

/* Grade de KPIs ---------------------------------------------------------- */

.corpo--painel .kpis {
    display: grid;
    /* Em 1180px o auto-fit fecha exatamente as 4 colunas do mock, e sozinho
       cai para 3, 2 e 1 conforme a tela estreita. */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 10px;
    margin-top: 3rem;
}

.corpo--painel .kpi {
    /* Ancora do balao de dica (.kpi__dica) dos cards de faturamento. */
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 81px;
    padding: 0 20px;
    border-radius: 10px;
    color: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.corpo--painel .kpi__icone {
    flex: none;
    width: 35px;
    height: 35px;
}

.corpo--painel .kpi__texto {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.corpo--painel .kpi__rotulo {
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1.15;
    /* O rotulo dos cards de faturamento carrega o `nome_emp` da loja, que vem
       do cadastro do Microvix e e longo. Ele quebra dentro do card — o min-height
       de 81px so cresce. Truncar com reticencias esta fora de questao: os dois
       nomes desta instalacao so divergem no fim, e os cards leriam identicos. */
    overflow-wrap: anywhere;
}

.corpo--painel .kpi__valor {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.05;
}

/* Dica dos cards de faturamento ------------------------------------------

   Balao que explica de onde vem o numero, para quem usa o painel e nao conhece
   os termos. So aparece onde o template escreve .kpi__dica: os 8 cards da grade
   do Meta compartilham o componente e nao ganham dica nenhuma por tabela.

   O texto fica SEMPRE no DOM: escondido por opacidade, e nao por display ou
   visibility, que o tirariam tambem de quem depende do leitor de tela — e e
   justamente para quem tem dificuldade com a tela que a explicacao existe. */
.corpo--painel .kpi__dica {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    z-index: 1;
    width: max-content;
    /* Sem o teto, a frase esticaria numa tira mais larga que a tela. */
    max-width: min(300px, 90vw);
    padding: 0.7rem 0.85rem;
    border-radius: var(--raio);
    background: #fff;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
    color: var(--painel-texto);
    font-size: 0.8125rem;
    font-weight: 400;
    /* O 1.05 do .kpi__valor e medida de numero, nao de frase. */
    line-height: 1.4;
    opacity: 0;
    transform: translateX(-50%);
    transition: opacity 0.12s ease-out;
    pointer-events: none;
}

/* Bico do balao, apontando para o card. */
.corpo--painel .kpi__dica::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -6px;
    border: 6px solid transparent;
    border-top-color: #fff;
}

/* Em tela de toque nao ha mouse: sem esta guarda o balao ficaria preso depois
   de um toque no card, sem jeito obvio de fecha-lo. */
@media (hover: hover) {
    .corpo--painel .kpi:hover .kpi__dica {
        opacity: 1;
    }

    /* O card sobe junto, senao o balao de um card da primeira linha sairia por
       baixo do card seguinte, que vem depois dele no HTML. */
    .corpo--painel .kpi:hover {
        z-index: 2;
    }
}

/* Ciclo de 6 cores, amostrado no mock: do setimo card em diante ele recomeca.
   E o que faz os 8 cards daqui e os 7 do Faturamento (Fase 4.3) usarem o mesmo
   conjunto — por isso sao classes, e nao cor inline no template. */
.corpo--painel .kpi--c1 { background: #10bc98; }
.corpo--painel .kpi--c2 { background: #bfbb31; }
.corpo--painel .kpi--c3 { background: #3d71d1; }
.corpo--painel .kpi--c4 { background: #9c5291; }
.corpo--painel .kpi--c5 { background: #31c3e3; }
.corpo--painel .kpi--c6 { background: #ed5926; }

/* Funil, genero e faixa etaria ------------------------------------------- */

.corpo--painel .titulo-secao {
    margin: 0 0 1.5rem;
    font-size: 1.3125rem;
    font-weight: 700;
    color: var(--painel-texto);
}

.corpo--painel .painel-duplo {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 470px);
    gap: 70px;
    align-items: start;
    margin-top: 3.3rem;
}

/* O cone ocupa 70,3% da largura do desenho e comeca na borda esquerda. Centrar
   o titulo nessa fatia o poe em cima do eixo do cone, como no mock, sem
   posicionamento absoluto. */
.corpo--painel .funil__titulo {
    max-width: 70.3%;
    text-align: center;
}

.corpo--painel .funil__desenho {
    display: block;
    width: 100%;
    height: auto;
    /* Numero de sete digitos passa da viewBox; vazar e melhor do que cortar o
       valor pela metade. */
    overflow: visible;
}

.corpo--painel .funil__guia {
    stroke: #000;
    stroke-opacity: 0.5;
    stroke-width: 1;
}

.corpo--painel .funil__ponto {
    fill: #000;
}

.corpo--painel .funil__rotulo {
    font-size: 18px;
    fill: var(--painel-texto);
}

.corpo--painel .funil__numero {
    font-size: 36px;
    font-weight: 700;
    fill: var(--painel-texto);
}

.corpo--painel .quebras {
    display: flex;
    flex-direction: column;
    gap: 2.9rem;
}

.corpo--painel .proporcoes {
    list-style: none;
    margin: 0;
    padding: 0;
}

.corpo--painel .proporcao + .proporcao {
    margin-top: 1.4rem;
}

.corpo--painel .proporcao__rotulo {
    display: block;
    margin-bottom: 0.875rem;
    font-size: 0.875rem;
}

.corpo--painel .proporcao__linha {
    display: flex;
    align-items: center;
    gap: 1.375rem;
}

.corpo--painel .barra {
    flex: 1;
    height: 20px;
    border-radius: var(--raio-pilula);
    background: var(--painel-trilho);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
    overflow: hidden;
}

.corpo--painel .barra span {
    display: block;
    height: 100%;
    border-radius: inherit;
}

.corpo--painel .proporcao__valor {
    min-width: 3.4rem;
    font-size: 0.875rem;
    font-variant-numeric: tabular-nums;
}

/* Tabelas ---------------------------------------------------------------- */

.corpo--painel .secao,
.corpo--painel .vazio {
    margin-top: 3.5rem;
}

.corpo--painel .rolagem {
    /* O padding entra no conteudo rolavel e a barra fica na borda de baixo da
       caixa: e assim que nasce o espaco entre a ultima linha e a barra. */
    padding-bottom: 1.5rem;
    scrollbar-color: var(--painel-linha) var(--painel-trilho);
}

.corpo--painel .rolagem::-webkit-scrollbar {
    height: 16px;
}

.corpo--painel .rolagem::-webkit-scrollbar-track {
    border-radius: var(--raio-pilula);
    background: var(--painel-trilho);
}

.corpo--painel .rolagem::-webkit-scrollbar-thumb {
    border-radius: var(--raio-pilula);
    background: var(--painel-linha);
}

.corpo--painel .tabela {
    font-size: 0.875rem;
}

.corpo--painel .tabela th,
.corpo--painel .tabela td {
    padding: 1.45rem 1.25rem;
    border-bottom: 1px solid var(--painel-linha);
}

.corpo--painel .tabela th {
    padding-top: 0;
    color: var(--painel-texto);
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
}

.corpo--painel .tabela th:first-child,
.corpo--painel .tabela td:first-child {
    padding-left: 0;
}

/* O mock fecha a tabela com linha, e nao no ar. */
.corpo--painel .tabela tbody tr:last-child td {
    border-bottom: 1px solid var(--painel-linha);
}

.corpo--painel .tabela__nome {
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.corpo--painel .tabela__mono {
    font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
}

/*
 * Selo de situacao — o icone antes do nome da campanha, do conjunto e do
 * anuncio. O desenho vem em SVG da View; aqui ficam so o tamanho e a cor.
 *
 * A dimensao e em `em`, e nao em rem: o mesmo componente acompanha o 1.5rem
 * bold do titulo da campanha e o 0.875rem das celulas da tabela, sem variante.
 *
 * A ESTRUTURA nao e escopada, mas as CORES sao: sem o .corpo--painel elas
 * vazariam para o /status e as telas de erro, que ficam com o :root escuro. Sao
 * as mesmas tres cores dos alertas do tema claro — verde, ambar e vermelho ja
 * significam a mesma coisa nesta tela.
 */
.selo {
    display: inline-block;
    width: 0.72em;
    height: 0.72em;
    margin-right: 0.45em;
    vertical-align: -0.03em;
    flex: none;
}

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

.corpo--painel .selo--ativo {
    color: #10bc98;
}

.corpo--painel .selo--pausado {
    color: #df961f;
}

.corpo--painel .selo--problema {
    color: #e9464d;
}

.corpo--painel .selo--desconhecido {
    color: var(--painel-texto-fraco);
}

/*
 * Duas marcacoes de linha das tabelas de conferencia do faturamento.
 *
 * .linha--detalhe: recorte de DENTRO da linha acima, e nao o proximo degrau do
 * afunilamento. Sem o recuo, "devolucoes de venda" seria lido como mais uma
 * queda do total, quando ela ja esta descontada no degrau seguinte.
 *
 * .linha--alerta: operacao que o ERP conta no relatorio e que a lista branca do
 * filtro nao conhece — o unico caso destas tabelas em que a tela precisa
 * chamar atencao, e nao so informar.
 */
.corpo--painel .tabela .linha--detalhe td {
    color: var(--painel-texto-fraco);
}

.corpo--painel .tabela .linha--detalhe td:first-child {
    padding-left: 1.25rem;
}

.corpo--painel .tabela .linha--alerta td {
    background: rgba(223, 150, 31, 0.12);
}

/* A primeira celula da tabela tem padding-left 0; sem o recuo aqui o texto
   encostaria na propria marca. */
.corpo--painel .tabela .linha--alerta td:first-child {
    padding-left: 0.6rem;
    box-shadow: inset 3px 0 0 #df961f;
}

/* Avisos, notas e diagnostico no fundo claro ----------------------------- */

.corpo--painel .alerta {
    margin: 1.5rem 0 0;
    background: #fff;
    color: var(--painel-texto);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.corpo--painel .alerta--ok { border-color: #10bc98; }
.corpo--painel .alerta--erro { border-color: #e9464d; }
.corpo--painel .alerta--atencao { border-color: #df961f; }

.corpo--painel .nota,
.corpo--painel .item__nota,
.corpo--painel .lista-dados dt {
    color: var(--painel-texto-fraco);
}

.corpo--painel .nota--rodape {
    margin-top: 2.5rem;
}

.corpo--painel code {
    background: rgba(0, 0, 0, 0.06);
}

.corpo--painel a {
    color: #3d71d1;
}

/* Bloco Faturamento (Fase 4.3) -------------------------------------------

   A distancia ate a tabela de anuncios ja vem do `.secao` acima: no mock o
   intervalo entre um bloco e o seguinte e o mesmo que separa as duas tabelas,
   e e esse mesmo o que a regra generica produz.

   O que sobra e a grade: `.kpis` nasceu com margin-top proprio para a grade da
   Fase 4.2, que vem logo depois da linha da campanha e nao de um titulo. Aqui
   ela tem um <h2> em cima, cuja margem de baixo ja e o respiro do mock — as
   duas somadas (colapsadas em 3rem) afastariam demais. */
.corpo--painel .secao--faturamento .kpis {
    margin-top: 0;
}

/* Carga do faturamento (Fase 9) -------------------------------------------

   E PRODUTO: fica na tela em production tambem, e por isso nao pode parecer um
   bloco de diagnostico. A linguagem e a do resto do painel — texto fraco, o
   mesmo trilho das bordas, o botao discreto que ja existe no cartao de conexao.

   Escopado em .corpo--painel como toda regra de cor do dashboard: no :root o
   fundo e escuro, e sem o escopo isto vazaria para o login e as telas de erro.

   Fica ENTRE o <h2> e a grade, entao ele carrega a separacao dos dois lados: o
   .kpis desta secao tem margin-top zerado logo acima. */
.corpo--painel .carga {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
    margin-bottom: 1.5rem;
}

.corpo--painel .carga__estado {
    margin: 0;
    color: var(--painel-texto-fraco);
    font-size: 0.9375rem;
}

/* A barra so aparece com o laco rodando: parada, ela leria como defeito, e sem
   JavaScript ela nunca chega a se mexer. */
.corpo--painel .carga__barra {
    display: none;
}

.corpo--painel .carga--ativa .carga__barra {
    display: block;
    flex: 1 1 140px;
    /* Teto para a barra nao atravessar a largura toda numa tela larga: ela
       informa progresso, nao e o elemento principal do bloco. */
    max-width: 260px;
    height: 4px;
    border-radius: var(--raio-pilula);
    background: var(--painel-trilho);
    overflow: hidden;
}

.corpo--painel .carga--ativa .carga__barra span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: var(--raio-pilula);
    background: var(--cor-acento);
    transition: width 0.3s ease;
}

/* So as <section> de diagnostico viram cartao: o paragrafo final tambem carrega
   .cartao--validacao, mas so para sumir em production — nao para virar caixa. */
.corpo--painel .secao.cartao--validacao {
    padding: 1.25rem;
    border: 1px dashed var(--painel-trilho);
    border-radius: var(--raio);
    background: #fff;
}

.corpo--painel .rodape {
    border-top: none;
    color: var(--painel-texto-fraco);
}

/* Respostas a telas estreitas ------------------------------------------- */

@media (max-width: 980px) {
    .corpo--painel .painel-duplo {
        grid-template-columns: minmax(0, 1fr);
        gap: 2.75rem;
    }

    /* Numa coluna so o cone volta a ser o bloco inteiro. */
    .corpo--painel .funil__titulo {
        max-width: none;
        text-align: left;
    }
}

@media (max-width: 900px) {
    .corpo--painel .barra-topo__faixa {
        grid-template-columns: minmax(0, 1fr);
        justify-items: start;
        gap: 1rem;
        min-height: 0;
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
    }

    .corpo--painel .barra-topo__controles {
        width: 100%;
        justify-content: flex-start;
    }
}

@media (max-width: 560px) {
    .lista-dados,
    .item {
        grid-template-columns: 1fr;
    }

    .corpo--painel .periodo {
        width: 100%;
    }

    .corpo--painel .periodo__resumo {
        white-space: normal;
    }

    /* Numa coluna so, campo e botao ocupam a largura do cartao — meio campo com
       o botao pendurado ao lado fica pior do que empilhar. */
    .corpo--painel .conexao__linha,
    .corpo--painel .conexao__linha .campo-claro,
    .corpo--painel .conexao__linha .campo-claro__entrada {
        width: 100%;
    }

    .corpo--painel .tabela__nome {
        max-width: 180px;
    }

    /* Numa coluna so o botao desce para baixo da frase, alinhado a esquerda
       com ela, em vez de ficar espremido na ponta direita. */
    .corpo--painel .atualizacao {
        justify-content: flex-start;
    }
}