/* Composição do painel: leitura compacta, menu lateral e o mesmo conteúdo em telas estreitas. */
:root {
  --fundo: #0b0f0e;
  --fundo-elevado: #121816;
  --fundo-cartao: #171f1c;
  --linha: #283730;
  --linha-forte: #43574c;
  --texto: #e9efec;
  --texto-suave: #a4b4ab;
  --texto-fraco: #91a198;
  --menta: #3ecf8e;
  --menta-forte: #3ecf8e;
  --ambar: #e7c35a;
  --coral: #f0786a;
  --raio: 10px;
  --raio-grande: 12px;
  --sombra: none;
}
body { background: var(--fundo); font-size: 14px; line-height: 1.45; }
.cabecalho { min-height: 88px; gap: 16px; padding: 12px 24px; background: var(--fundo-elevado); backdrop-filter: none; }
.marca { letter-spacing: 0; }
.marca-sinal { width: 7px; height: 24px; border-radius: 4px; box-shadow: none; }
.contexto-rotulo, .sobretitulo { font-size: 12px; letter-spacing: 0.07em; font-weight: 600; }
.sobretitulo { margin: 0 0 5px; color: var(--texto-suave); }
.controles-cabecalho { gap: 8px; }
.visao-explicacao { font-size: 12px; margin: 0; }
.pagina { width: 100%; max-width: 1600px; padding: 26px 28px 64px; min-width: 0; }
.abertura { gap: 12px; align-items: start; margin-bottom: 22px; }
.abertura > div:first-child { flex-basis: 340px; }
.abertura h1 { font-family: inherit; font-size: 26px; font-weight: 650; line-height: 1.25; letter-spacing: -0.02em; margin: 0 0 6px; }
.subtitulo { font-size: 14px; line-height: 1.5; }
.abertura-sinais { flex-basis: 320px; }
.sinal-operacional { padding: 7px 10px; border-radius: 8px; min-width: 0; }
.pilha-principal { gap: 16px; grid-template-columns: minmax(0, 1fr); }
.bloco { padding: 18px; background: var(--fundo-elevado); border-radius: 12px; }
.bloco::before { width: 2px; }
.bloco h2 { font-size: 17px; letter-spacing: -0.01em; }
.bloco-cabecalho { margin-bottom: 16px; gap: 12px; }
.bloco-descricao { font-size: 13px; margin-top: 4px; }
.bloco-hoje { border-style: dashed; }
.bloco-fechado { border-color: #29513d; }
.bloco-fontes > h2 { margin-bottom: 14px; }
.bloco-fontes .tabela-resultados th, .bloco-fontes .tabela-resultados td { padding: 10px 8px; }
.bloco-alertas .aviso, .bloco-alertas .vazio { padding: 12px; }
.grade-metricas { gap: 10px; grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); }
.metrica { background: var(--fundo-cartao); border-radius: 9px; min-height: 0; padding: 14px; }
.metrica-topo { flex-wrap: wrap; gap: 4px; }
.metrica-nome { font-size: 13px; }
.metrica-valor { font-size: 27px; letter-spacing: -0.03em; }
.metrica-unidade { font-size: 12px; letter-spacing: 0; }
.metrica .evidencia-resumo { font-size: 12px; }
.tela-dinamica, .conteudo-aba { min-width: 0; display: grid; gap: 16px; }
.conteudo-aba > .bloco, .tela-dinamica > .bloco { margin: 0; }
.lista-registros { min-width: 0; }
.registro-card { border-radius: 10px; background: var(--fundo-elevado); }
.comando-formulario, .filtros { border-radius: 10px; padding: 16px; }
.comando-cabecalho h2, .filtros h2 { font-size: 17px; }
.comando-recolhido { border-style: solid; background: var(--fundo-elevado); }
.comando-recolhido > summary.comando-abrir { min-height: 44px; padding: 12px 16px; }
.filtros-grade { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.trilha-resultados { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; min-width: 0; font-size: 13px; }
.trilha-resultados a { color: var(--texto-suave); text-decoration: none; padding: 6px 0; overflow-wrap: anywhere; }
.trilha-resultados a:hover { color: var(--menta); text-decoration: underline; }
.trilha-separador { color: var(--texto-fraco); }
.linha-descer { color: var(--texto); text-decoration: none; font-weight: 600; display: inline-block; padding: 7px 0; }
.linha-descer:hover { color: var(--menta); text-decoration: underline; }
.linha-descer + .linha-abrir { display: inline-block; margin-left: 12px; font-size: 12px; color: var(--texto-suave); }
.tabela-resultados th { font-size: 12px; text-transform: none; letter-spacing: 0; font-weight: 500; }
.tabela-resultados td { font-size: 14px; }
.tabela-resultados th, .tabela-resultados td { padding: 10px; }
.tabela-resultados .coluna-nome { white-space: normal; min-width: 180px; }
.tabela-resultados tbody > .linha-resultado:hover { background: var(--fundo-cartao); }
.abas-secao { margin-bottom: 0; }
.tela-sem-operacao { background: var(--fundo-elevado); border: 1px solid var(--linha); border-radius: 12px; padding: 28px; }
.navegacao { background: var(--fundo-elevado); padding: 8px 20px; overflow: visible; }
.navegacao a, .navegacao-menu > summary { border-radius: 8px; font-size: 13px; min-height: 36px; }
.navegacao-menu-itens { border-radius: 10px; gap: 3px; }
@media (min-width: 1180px) {
  body[data-com-operacao="true"] { display: grid; grid-template-columns: 218px minmax(0, 1fr); grid-template-rows: auto 1fr; align-items: start; }
  .cabecalho { grid-column: 1 / -1; }
  body[data-com-operacao="true"] > .navegacao { grid-column: 1; grid-row: 2; position: relative; top: auto; align-self: stretch; min-height: calc(100vh - 120px); border-right: 1px solid var(--linha); border-bottom: 0; padding: 16px 10px; }
  body[data-com-operacao="true"] > .pagina { grid-column: 2; grid-row: 2; }
  .navegacao-grupo { width: 100%; flex-direction: column; align-items: stretch; gap: 4px; }
  .navegacao-grupo > a { width: 100%; }
  .navegacao-menu { width: 100%; }
  .navegacao-menu > summary { display: flex; justify-content: space-between; align-items: center; padding: 9px 10px; }
  .navegacao-menu-itens { position: static; display: flex; flex-direction: column; max-width: 100%; box-shadow: none; border: 0; border-radius: 0; border-left: 1px solid var(--linha); margin: 3px 0 8px 14px; padding: 2px 0 2px 5px; }
  .navegacao-menu-itens a { white-space: normal; font-size: 13px; }
  body:has(> .navegacao[hidden]) > .pagina { grid-column: 1 / -1; max-width: 1050px; }
  .pilha-principal { grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); grid-template-areas: "periodo periodo" "fontes alertas" "campanhas campanhas" "hoje hoje" "meta meta"; align-items: start; }
  .bloco-fechado { grid-area: periodo; }
  .bloco-fontes { grid-area: fontes; }
  .bloco-campanhas { grid-area: campanhas; }
  body[data-com-operacao="true"] > .navegacao .navegacao-grupo { position: sticky; top: 140px; }
  .bloco-alertas { grid-area: alertas; }
  .bloco-hoje { grid-area: hoje; }
  .bloco-meta { grid-area: meta; }
}
@media (max-width: 1179px) {
  .navegacao-menu-itens { position: absolute; width: 260px; max-width: calc(100vw - 30px); }
  .pagina { padding: 24px 20px 56px; }
}
@media (max-width: 620px) {
  .cabecalho { gap: 10px; padding: 14px; }
  .contexto-periodo { align-items: flex-start; }
  .controles-cabecalho { width: 100%; }
  .pagina { padding: 20px 14px 48px; }
  .abertura { gap: 12px; margin-bottom: 18px; }
  .abertura h1 { font-size: 24px; }
  .abertura > div:first-child, .abertura-sinais { flex-basis: auto; }
  .navegacao { padding: 8px 10px; overflow: visible; }
  .navegacao-grupo { gap: 3px; flex-wrap: wrap; }
  .navegacao-menu-itens { position: fixed; left: 12px; right: 12px; top: auto; width: auto; max-width: none; max-height: 65vh; overflow-y: auto; }
  .navegacao a, .navegacao-menu > summary { min-height: 44px; display: inline-flex; align-items: center; }
  .bloco { padding: 14px; }
  .bloco-cabecalho { flex-direction: column; gap: 5px; }
  .grade-metricas { grid-template-columns: 1fr; }
  .metrica-valor { font-size: 28px; }
  .comando-grade, .filtros-grade { grid-template-columns: 1fr; }
  .trilha-resultados a { min-height: 44px; display: inline-flex; align-items: center; }
  .linha-descer, .linha-abrir { min-height: 44px; }
}

/* A primeira resposta pode demorar. A página informa isso desde o HTML inicial. */
body[data-carregando="true"] > :is(header, nav, main) { display: none; }
.carregamento-inicial { margin: 15vh auto; width: fit-content; padding: 1.5rem 2rem; color: var(--texto, #e6f0ec); }
.pedido-carregando, .sem-operacao-estado { padding-block: .5rem; }

/* Densidade do modelo aprovado, mantendo os detalhes de cada número acessíveis. */
.bloco { padding: 16px; }
.bloco h2 { font-size: 15px; }
.bloco-cabecalho { margin-bottom: 12px; }
.metrica { padding: 12px; gap: 8px; }
.metrica-valor { font-size: 24px; }
.metrica .evidencia-resumo-titulo { font-size: 12px; font-weight: 500; }
.metrica .evidencia-resumo { padding-top: 6px; }
.metrica .evidencia[open] .barra-ausente { margin-top: 10px; }
.bloco > .amostra { padding: 7px 10px; margin-top: 10px; font-size: 12px; }
.fase-resumo, .selos-resumo { color: var(--texto-suave); font-size: 12px; margin: 10px 0; }
.campanhas-inicio { margin-top: 12px; }
.campanhas-inicio .selo-roas { margin: 0; }
.campanhas-inicio .selo-roas-base { display: none; }
.campanhas-inicio .pill, .fase-etiqueta { font-size: 12px; padding: 2px 8px; min-height: 0; white-space: nowrap; }
.fase-etiqueta { display: inline-block; border: 1px solid var(--linha-forte); border-radius: 20px; }
.fase-teste { color: var(--texto-suave); }
.fase-pre_escala { color: var(--ambar); }
.fase-escala { color: var(--menta); }
.selo-ausente { color: var(--texto-fraco); font-size: 12px; }
@media (max-width: 620px) {
  #tela-inicial .grade-metricas { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  #tela-inicial .metrica-valor { font-size: 23px; }
  #tela-inicial .metrica-unidade { font-size: 12px; }
}