:root {
  color-scheme: dark;
  --fundo: #07100f;
  --fundo-elevado: #0d1816;
  --fundo-cartao: #111f1c;
  --linha: rgba(193, 220, 209, 0.14);
  --linha-forte: rgba(193, 220, 209, 0.28);
  --texto: #eff8f3;
  --texto-suave: #9eb2a9;
  --texto-fraco: #71867d;
  --menta: #79e6b7;
  --menta-forte: #26bd80;
  --ambar: #f1c876;
  --coral: #ff8f78;
  --azul: #82b7ff;
  --violeta: #b8a7ff;
  --raio-grande: 24px;
  --raio: 16px;
  --sombra: 0 20px 70px rgba(0, 0, 0, 0.28);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }

html {
  min-width: 280px;
  background: var(--fundo);
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  margin: 0;
  color: var(--texto);
  background:
    radial-gradient(circle at 12% 0%, rgba(38, 189, 128, 0.12), transparent 29rem),
    radial-gradient(circle at 90% 8%, rgba(130, 183, 255, 0.08), transparent 28rem),
    var(--fundo);
  overflow-x: hidden;
}

button, input, select { font: inherit; }
button { color: inherit; }

button:focus-visible, summary:focus-visible, a:focus-visible {
  outline: 3px solid var(--azul);
  outline-offset: 3px;
}

.pular-conteudo {
  position: fixed;
  z-index: 100;
  top: 10px;
  left: 10px;
  padding: 10px 14px;
  color: var(--fundo);
  background: var(--texto);
  border-radius: 10px;
  transform: translateY(-160%);
}

.pular-conteudo:focus { transform: translateY(0); }

.cabecalho {
  position: sticky;
  z-index: 20;
  top: 0;
  min-height: 72px;
  display: grid;
  grid-template-columns: auto minmax(150px, 1fr) minmax(190px, auto) auto;
  align-items: center;
  gap: 24px;
  padding: 12px clamp(18px, 4vw, 64px);
  border-bottom: 1px solid var(--linha);
  background: rgba(7, 16, 15, 0.86);
  backdrop-filter: blur(18px);
}

.marca { display: flex; align-items: center; gap: 10px; letter-spacing: 0.14em; }
.marca-sinal {
  width: 11px;
  height: 32px;
  display: block;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--menta), var(--menta-forte));
  box-shadow: 0 0 28px rgba(121, 230, 183, 0.42);
}

.contexto-operacao, .contexto-periodo { min-width: 0; display: flex; flex-direction: column; }
.contexto-rotulo, .sobretitulo {
  color: var(--menta);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.contexto-operacao strong, .contexto-periodo strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.contexto-periodo strong { color: var(--texto-suave); font-size: 0.76rem; }
.contexto-periodo .pill { margin-top: 4px; }

.controles-cabecalho { display: flex; align-items: center; gap: 10px; }
.controle-segmentado {
  display: flex;
  padding: 3px;
  border: 1px solid var(--linha);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.025);
}
.controle-segmentado button, .botao-atualizar, .botao-sair {
  min-height: 36px;
  padding: 7px 11px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--texto-suave);
  cursor: pointer;
}
.controle-segmentado button.ativo {
  color: var(--texto);
  background: rgba(121, 230, 183, 0.13);
  box-shadow: inset 0 0 0 1px rgba(121, 230, 183, 0.18);
}
.botao-atualizar { border: 1px solid var(--linha-forte); color: var(--texto); }
.botao-atualizar:hover { border-color: var(--menta); }
/* Sair: mesmo formato do Atualizar, texto mais discreto (não é ação do dia). */
.botao-sair { border: 1px solid var(--linha); color: var(--texto-suave); font: inherit; }
.botao-sair:hover { border-color: var(--linha-forte); color: var(--texto); }

/*
 * O puxador do dia corrente. O estado fica ao LADO do botão, não dentro dele:
 * texto que troca dentro de um botão muda a largura do botão a cada clique, e
 * a pessoa perde o alvo entre uma tentativa e outra.
 *
 * `font-size` declarado, e não herdado: `.puxador-estado` é parágrafo pequeno,
 * e o verificador do painel só enxerga declaração escrita — herdar 0.8em já
 * derrubou um texto para ~10,7px nesta base.
 */
.puxador-dia-corrente {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 10px 0 2px;
}
.botao-recalcular {
  min-height: 36px;
  padding: 7px 11px;
  border: 1px solid var(--linha-forte);
  border-radius: 9px;
  background: transparent;
  color: var(--texto);
  cursor: pointer;
}
.botao-recalcular:hover:not(:disabled) { border-color: var(--menta); }
.botao-recalcular:disabled { opacity: 0.55; cursor: progress; }
.puxador-estado {
  margin: 0;
  font-size: 13px;
  color: var(--texto-suave);
}

.pagina {
  width: min(1480px, 100%);
  margin-inline: auto;
  padding: clamp(30px, 5vw, 76px) clamp(18px, 4vw, 64px) 96px;
}

.abertura {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 30px;
  margin-bottom: 34px;
}
.abertura h1 {
  max-width: 760px;
  margin: 8px 0 10px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.15rem, 5vw, 4.9rem);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.045em;
}
.subtitulo { max-width: 720px; margin: 0; color: var(--texto-suave); line-height: 1.6; }

.sinal-operacional {
  min-width: 230px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 14px;
  border: 1px solid var(--linha);
  border-radius: 999px;
  background: var(--fundo-elevado);
}
.sinal-ponto { width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.sinal-texto { color: var(--texto-suave); font-size: 0.82rem; }
.sinal-operacional .pill { margin-left: auto; }
.fuso-do-dia { margin: 6px 0 0; color: var(--texto-suave); font-size: 0.78rem; }
/* O título não divide a linha com os sinais: eles empilham numa coluna ao lado
   (antes, fuso e frescor do gasto espremiam o título em quatro linhas). */
.abertura { flex-wrap: wrap; }
.abertura > div:first-child { flex: 1 1 520px; min-width: 0; }
.abertura-sinais { flex: 0 1 380px; display: grid; gap: 6px; justify-items: end; text-align: right; }
.abertura-sinais > [hidden], .abertura-sinais[hidden] { display: none; }
.frescor-gasto { margin: 0; color: var(--texto-suave); font-size: 0.78rem; }
.aviso-segundo-fator { flex-basis: 100%; }

.pilha-principal { display: grid; gap: 24px; }
.bloco {
  position: relative;
  min-width: 0;
  padding: clamp(20px, 3vw, 34px);
  border: 1px solid var(--linha);
  border-radius: var(--raio-grande);
  background: linear-gradient(145deg, rgba(17, 31, 28, 0.97), rgba(10, 21, 19, 0.97));
  box-shadow: var(--sombra);
  overflow: hidden;
}
.bloco::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--linha-forte);
}
.bloco-hoje::before { background: var(--ambar); }
.bloco-fechado::before { background: var(--menta); }
.bloco-meta::before { background: var(--violeta); }
.bloco-alertas::before { background: var(--coral); }
.bloco-hoje {
  background:
    repeating-linear-gradient(135deg, rgba(241, 200, 118, 0.025) 0 8px, transparent 8px 18px),
    linear-gradient(145deg, rgba(30, 32, 24, 0.98), rgba(12, 23, 20, 0.98));
}

.bloco-cabecalho {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
}
.bloco-titulo-linha { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.bloco h2 { margin: 0; font-size: clamp(1.3rem, 2.5vw, 2rem); letter-spacing: -0.025em; }
.bloco-descricao, .periodo-bloco { margin: 7px 0 0; color: var(--texto-suave); line-height: 1.5; }
.periodo-bloco { flex: 0 0 auto; font-size: 0.8rem; }
.marcador-periodo {
  padding: 5px 9px;
  border: 1px solid currentColor;
  border-radius: 999px;
  color: var(--ambar);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.bloco-fechado .marcador-periodo { color: var(--menta); }

.grade-metricas {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.metrica {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 18px;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: rgba(4, 12, 11, 0.38);
}
.metrica-topo { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.metrica-nome { margin: 0; color: var(--texto-suave); font-size: 0.84rem; font-weight: 650; }
.metrica-valor {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  font-size: clamp(1.75rem, 3vw, 2.75rem);
  font-weight: 720;
  letter-spacing: -0.04em;
}
.metrica-unidade { color: var(--texto-fraco); font-size: 0.75rem; font-weight: 600; letter-spacing: 0; }

.pill {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  min-height: 24px;
  padding: 4px 8px;
  border: 1px solid currentColor;
  border-radius: 999px;
  color: var(--texto-suave);
  font-size: 0.78rem;
  font-weight: 760;
  letter-spacing: 0.04em;
  line-height: 1.1;
}
.estado-confirmado, .estado-zero_confirmado, .estado-fechado { color: var(--menta); }
.estado-parcial, .estado-provisorio, .estado-em_conferencia, .estado-pendente { color: var(--ambar); }
.estado-estimado { color: var(--violeta); }
.estado-desatualizado, .estado-fallback { color: var(--azul); }
.estado-indisponivel, .estado-erro { color: var(--coral); }
.estado-ausente { color: var(--texto-fraco); }
.estado-sem_veredito {
  color: var(--texto-suave);
  border-style: dashed;
  background: repeating-linear-gradient(135deg, rgba(158, 178, 169, 0.08) 0 4px, transparent 4px 9px);
}

.evidencia { margin-top: auto; border-top: 1px solid var(--linha); }
.evidencia-resumo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 12px;
  color: var(--texto-suave);
  cursor: pointer;
  list-style: none;
}
.evidencia-resumo::-webkit-details-marker { display: none; }
.evidencia-resumo-titulo { font-size: 0.75rem; font-weight: 700; }
.evidencia-grade {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0 0;
}
.evidencia-item { min-width: 0; }
.evidencia-item dt { color: var(--texto-fraco); font-size: 0.75rem; }
.evidencia-item dd { margin: 3px 0 0; overflow-wrap: anywhere; font-size: 0.8rem; }

.amostra {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
  padding: 11px 14px;
  border: 1px solid var(--linha);
  border-radius: 12px;
  color: var(--texto-suave);
}
.amostra-rotulo { font-size: 0.78rem; }
.amostra-contagem { color: var(--texto); }

.barra-area { display: grid; gap: 8px; }
.barra-rotulo { color: var(--texto-suave); font-size: 0.75rem; }
.barra-trilho {
  position: relative;
  height: 13px;
  border: 1px solid var(--linha-forte);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  overflow: hidden;
}
.barra-preenchimento {
  width: var(--preenchimento, 0%);
  height: 100%;
  border-radius: inherit;
  background: var(--menta);
}
.barra-trilho.hachurada .barra-preenchimento {
  background: repeating-linear-gradient(135deg, var(--texto-suave) 0 3px, transparent 3px 7px);
}
.barra-trilho.com-lacuna .barra-lacuna {
  position: absolute;
  inset: 0 0 0 auto;
  width: calc(100% - var(--cobertura-sustentada, 0%));
  border-left: 1px dashed var(--ambar);
  background: repeating-linear-gradient(135deg, rgba(241, 200, 118, 0.11) 0 3px, transparent 3px 7px);
}
.barra-ausente {
  padding: 10px;
  border: 1px dashed var(--linha-forte);
  border-radius: 10px;
  color: var(--texto-fraco);
}
.barra-ausente p, .barra-nota { margin: 0; font-size: 0.78rem; line-height: 1.45; }

.aviso, .vazio {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-top: 18px;
  padding: 15px;
  border: 1px dashed var(--linha-forte);
  border-radius: var(--raio);
  background: rgba(0, 0, 0, 0.13);
}
.aviso p { margin: 0; color: var(--texto-suave); }
/* 216: quem entrou sem 2º fator vê este aviso em toda tela (o ícone é o marcador não-cromático). */
.aviso-segundo-fator { margin: 10px 0 0; }
.aviso-segundo-fator[hidden] { display: none; }
.aviso-segundo-fator::before { content: "⚠"; font-weight: 700; }
.aviso-segundo-fator a { font-weight: 600; }
.vazio { min-height: 190px; flex-direction: column; align-items: flex-start; justify-content: center; }
.vazio h3 { margin: 0; font-size: 1.1rem; }
.vazio p { max-width: 650px; margin: 0; color: var(--texto-suave); line-height: 1.55; }
.vazio .evidencia { width: 100%; margin-top: 8px; }
.vazio-detalhe { font-size: 0.82rem; }

.grade-metas, .lista-alertas { display: grid; gap: 14px; }
.cartao-meta, .alerta-item {
  padding: 18px;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: rgba(4, 12, 11, 0.38);
}
.cartao-meta h3, .alerta-item h3 { margin: 0; }
.meta-regra, .alerta-condicao, .nota-escopo { color: var(--texto-suave); }
.meta-condicoes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-block: 16px; }
.meta-condicao { display: grid; gap: 10px; }

.carregando { overflow: hidden; }
.esqueleto {
  min-height: 180px;
  border-radius: var(--raio);
  background: linear-gradient(100deg, rgba(255,255,255,0.03) 30%, rgba(255,255,255,0.08) 48%, rgba(255,255,255,0.03) 66%);
  background-size: 240% 100%;
  animation: pulso 1.6s ease-in-out infinite;
}
@keyframes pulso { to { background-position: -140% 0; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}

.anuncios { position: fixed; right: 18px; bottom: 18px; z-index: 30; }

.navegacao {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  padding: 11px clamp(18px, 4vw, 64px);
  border-bottom: 1px solid var(--linha);
  background: rgba(8, 18, 16, 0.96);
}
.navegacao-grupo { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.navegacao-grupo-rotulo {
  margin-right: 3px;
  color: var(--texto-fraco);
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.navegacao a {
  padding: 7px 10px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--texto-suave);
  font-size: 0.8rem;
  text-decoration: none;
  white-space: nowrap;
}
.navegacao a:hover, .navegacao a.ativo { color: var(--texto); border-color: var(--linha-forte); background: var(--fundo-cartao); }

/* Menu do que não se usa todo dia. <details> abre e fecha sem JavaScript e
   responde ao teclado; o painel continua sem framework e sem build. */
.navegacao-menu { position: relative; }
.navegacao-menu > summary {
  padding: 7px 10px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--texto-suave);
  font-size: 0.8rem;
  white-space: nowrap;
  cursor: pointer;
  list-style: none;
}
.navegacao-menu > summary::-webkit-details-marker { display: none; }
.navegacao-menu > summary::after { content: ' ▾'; opacity: 0.6; }
.navegacao-menu > summary:hover,
.navegacao-menu > summary.ativo {
  color: var(--texto);
  border-color: var(--linha-forte);
  background: var(--fundo-cartao);
}
.navegacao-menu > summary:focus-visible { outline: 2px solid var(--linha-forte); outline-offset: 2px; }
.navegacao-menu[open] > summary { border-color: var(--linha-forte); }
.navegacao-menu-itens {
  /* Flutua sobre a página em vez de empurrar a fileira: menu aberto não pode
     reorganizar a navegação inteira embaixo do cursor de quem clicou. */
  position: absolute;
  z-index: 20;
  top: calc(100% + 6px);
  left: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  max-width: min(78vw, 560px);
  padding: 8px;
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.45);
  border: 1px solid var(--linha);
  border-radius: 14px;
  background: var(--fundo-cartao);
}

/* Recorte do MESMO relatório — não é navegação, é um controle da tela. Fica
   numa fileira própria, abaixo, para não competir com os destinos. */
.navegacao-recorte {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  flex-basis: 100%;
  padding-top: 9px;
  margin-top: 2px;
  border-top: 1px solid var(--linha);
}
[hidden] { display: none !important; }
.tela-dinamica { display: grid; gap: 20px; min-width: 0; }
.bloco-secundario { display: grid; gap: 16px; }
.bloco-secundario > h2 { margin-bottom: 2px; }
.lista-registros { display: grid; gap: 16px; min-width: 0; }
.registro-card {
  min-width: 0;
  display: grid;
  gap: 16px;
  padding: 20px;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: linear-gradient(145deg, rgba(17, 31, 28, 0.9), rgba(8, 17, 15, 0.92));
}
.registro-card > h2, .registro-card > h3 { margin: 0; }
/*
 * DEMANDA ATRASADA (128, Iorran em 22/09: "Sim e sim").
 *
 * A borda mais forte é o sinal, e o traço à esquerda existe para quem não
 * distingue as duas cores: cor sozinha não é marcação acessível. Quem diz que
 * está atrasada é a API — o CSS só mostra o que o `data-atrasada` já afirma.
 */
.demanda-atrasada {
  border-color: var(--coral);
  border-left-width: 4px;
  border-left-style: solid;
}
.demanda-atrasada::before {
  content: "!";
  font-size: 13px;
  font-weight: 700;
  color: var(--coral);
}
.registro-titulo-linha { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.registro-titulo-linha h2, .registro-titulo-linha h3 { margin: 0; }
.subsecao-card {
  padding: 15px;
  border-radius: 13px;
  background: rgba(4, 12, 11, 0.28);
  box-shadow: none;
}
.subsecao-card::before { display: none; }
.subsecao-card > h2 { font-size: 1rem; }
.conquista-criterio { display: grid; gap: 12px; }
.conquista-criterio > h4 { margin: 0; font-size: 1rem; }
.despesa-item:has(.dominio-status_despesa-cancelada) { border-style: dashed; }
.fechamento-item:has(.estado-provisorio), .fechamento-item:has(.estado-parcial) { border-style: dashed; }
.versao-item { border-left: 4px solid var(--violeta); }
.gancho-item:has(.dominio-origem_gancho-ausente) { border-style: dashed; }
.campos-leitura {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 11px;
  margin: 0;
}
.campo-leitura { min-width: 0; padding: 11px; border: 1px solid var(--linha); border-radius: 11px; }
.campo-leitura dt { color: var(--texto-fraco); font-size: 0.75rem; }
.campo-leitura dd { margin: 4px 0 0; overflow-wrap: anywhere; color: var(--texto); font-size: 0.86rem; }
.grade-metricas-compacta { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

.filtros {
  display: grid;
  gap: 13px;
  padding: 18px;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--fundo-elevado);
}
.filtros h2 { margin: 0; font-size: 1rem; }
.filtros-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.filtro-campo { display: grid; gap: 6px; color: var(--texto-suave); font-size: 0.78rem; }
.filtro-campo input, .filtro-campo select {
  width: 100%; min-height: 42px; padding: 8px 10px; border: 1px solid var(--linha-forte);
  border-radius: 10px; color: var(--texto); background: var(--fundo);
}
.filtros-acoes, .paginador { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.botao-link {
  width: fit-content;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 13px;
  border: 1px solid var(--linha-forte);
  border-radius: 10px;
  color: var(--texto);
  background: rgba(121, 230, 183, 0.08);
  text-decoration: none;
  cursor: pointer;
}
.botao-link.secundario { background: transparent; color: var(--texto-suave); }
.botao-link:disabled { opacity: 0.55; cursor: wait; }
.paginador { justify-content: center; padding: 8px; }

.comando-formulario {
  display: grid;
  gap: 16px;
  padding: 20px;
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio);
  background: linear-gradient(145deg, rgba(21, 39, 34, 0.96), rgba(8, 17, 15, 0.96));
}
.comando-formulario[aria-busy="true"] { border-style: dashed; }
.comando-cabecalho { display: grid; gap: 6px; }
.comando-cabecalho h2, .comando-cabecalho p { margin: 0; }
.comando-cabecalho p, .comando-ajuda { color: var(--texto-suave); line-height: 1.5; font-size: 0.78rem; }
.comando-grade {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.comando-campo { min-width: 0; display: grid; align-content: start; gap: 7px; color: var(--texto-suave); font-size: 0.8rem; }
.comando-campo-largo { grid-column: 1 / -1; }
.comando-campo input:not([type="checkbox"]), .comando-campo select, .comando-campo textarea {
  width: 100%;
  min-height: 44px;
  padding: 9px 11px;
  border: 1px solid var(--linha-forte);
  border-radius: 10px;
  color: var(--texto);
  background: var(--fundo);
  font: inherit;
}
.comando-campo textarea { min-height: 86px; resize: vertical; }
.comando-confirmacao {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px;
  border: 1px dashed var(--ambar);
  border-radius: 11px;
  color: var(--texto);
  line-height: 1.5;
}
.comando-confirmacao input { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 1px; }
/*
 * SELO DE VIGÊNCIA (item 12) — a lista de parâmetros traz histórico, e o
 * cartão precisa dizer em qual estado está. O selo é PALAVRA com borda: cor
 * sozinha não serve (regra não-cromática do painel), e quem lê não deve ter de
 * comparar datas de cabeça para saber o que vale hoje.
 */
.selo {
  display: inline-block;
  margin: 0 0 8px;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.85rem;
  line-height: 1.6;
}
.selo-vigente { border: 1px solid var(--menta-forte); color: var(--menta); }
.selo-encerrado { border: 1px dashed var(--texto-suave); color: var(--texto-suave); }
.parametro-escopo { margin: 0 0 6px; color: var(--texto-suave); }

/*
 * GRUPO DE CAIXAS (item 13) — as ações da concessão. Em coluna de largura
 * mínima, para caber oito rótulos sem a linha ficar ilegível em tela estreita.
 */
.comando-caixas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 8px 14px;
  margin-top: 6px;
}
.comando-caixa { display: flex; align-items: center; gap: 8px; line-height: 1.5; }
.comando-caixa input { flex: 0 0 auto; width: 18px; height: 18px; }
.comando-retorno { margin: 0; padding: 12px; border-radius: 10px; line-height: 1.5; }
.comando-retorno-erro { border: 1px dashed var(--coral); color: var(--coral); }
/* A frase vermelha embaixo da caixa (116): cor E texto — o texto é o marcador. */
.campo-erro { color: var(--coral); font-size: 13px; margin: 4px 0 0; }
.campo-erro::before { content: '⚠ '; }
.convite-link { width: 100%; font-size: 13px; font-family: var(--mono, monospace); }
.convite-copiado { font-size: 13px; }
.anuncio-comando {
  max-width: min(440px, calc(100vw - 36px));
  padding: 14px 16px;
  border: 1px solid var(--menta);
  border-radius: 12px;
  color: var(--texto);
  background: var(--fundo-elevado);
  box-shadow: var(--sombra);
}

.colunas-criativo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.leitura-criativo { min-width: 0; display: grid; align-content: start; gap: 14px; padding: 16px; border: 1px solid var(--linha); border-radius: var(--raio); }
.leitura-criativo > h3, .eixo-criativo h4 { margin: 0; }
.painel-provisorio {
  border-style: dashed;
  background: repeating-linear-gradient(135deg, rgba(241, 200, 118, 0.035) 0 8px, transparent 8px 18px);
}
.painel-provisorio > h3 { color: var(--ambar); }
.painel-fechado > h3 { color: var(--menta); }
.eixo-criativo { display: grid; gap: 9px; }
.eixo-criativo h4 { color: var(--texto-suave); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; }
.funil-trilha { display: grid; gap: 14px; }
.funil-etapa { position: relative; }
.funil-etapa:not(:last-child)::after { content: "↓"; position: absolute; left: 50%; bottom: -22px; z-index: 2; color: var(--menta); }
.pares-criativo { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.fontes-evidencia { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.texto-criativo { margin: 0; color: var(--texto-suave); line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.evidencia-sem-selo { border-style: dashed; }
.percurso-criativo { display: grid; gap: 10px; }
.par-criativo, .midia-ausente { margin: 0; padding: 13px; border: 1px dashed var(--linha-forte); border-radius: 11px; color: var(--texto-suave); }
.par-criativo h3, .par-criativo p { margin: 0; }
.par-criativo p { margin-top: 8px; line-height: 1.55; }
.bloco-critico { border-color: rgba(255, 143, 120, 0.5); }
.estado-criativo { width: fit-content; padding: 8px 11px; border: 2px solid currentColor; border-radius: 10px; font-size: 0.8rem; font-weight: 800; }
.estado-criativo-reprovado { color: var(--coral); border-style: solid; }
.estado-criativo-saturado { color: var(--ambar); border-style: dashed; }
.bloqueio-item { border-left: 4px solid var(--ambar); }
.grade-conexoes { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.conexao-com_erro { border-style: dashed; border-color: rgba(255, 143, 120, 0.55); }
.conexao-nunca_testada { border-style: dashed; }

/* ---- Grupos, membros, log de ações e segurança (itens 2 a–f; conferidos por foto em 29/09) ---- */
.grupo-item h3 { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 6px; }
.grupo-item .nota-escopo { margin: 4px 0 10px; }
.grupo-matriz-resumo { columns: 2 260px; column-gap: 28px; margin: 6px 0 10px; padding-left: 18px; font-size: 0.86rem; line-height: 1.55; }
.grupo-matriz-resumo li { break-inside: avoid; }
.grupo-arquivado { opacity: 0.72; }
.grupo-item details { margin-top: 4px; }
.grupo-item details > summary { cursor: pointer; color: var(--texto-suave); font-size: 0.85rem; padding: 3px 0; }
.grupo-item details > summary:hover { color: var(--texto); }
.log-acao-cabeca { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.log-acao-falha { border-left: 3px solid currentColor; }
.tabela-membros { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.tabela-membros th { text-align: left; padding: 8px 10px; color: var(--texto-fraco); font-size: 0.75rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em; border-bottom: 1px solid var(--linha-forte); }
.tabela-membros td { padding: 9px 10px; border-bottom: 1px solid var(--linha); vertical-align: top; }
.tabela-membros .membro-menu details > summary { cursor: pointer; color: var(--texto-suave); font-size: 0.82rem; }


@media (max-width: 960px) {
  .cabecalho { grid-template-columns: auto 1fr auto; gap: 10px 18px; }
  .contexto-periodo { align-items: flex-end; }
  .controles-cabecalho { grid-column: 1 / -1; flex-wrap: wrap; padding-bottom: 2px; }
  .grade-metricas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .abertura { align-items: start; flex-direction: column; }
  .abertura > div:first-child, .abertura-sinais { flex-basis: auto; width: 100%; }
  .abertura-sinais { justify-items: start; text-align: left; }
  .sinal-operacional { min-width: 0; }
  .campos-leitura { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .comando-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .cabecalho { position: relative; min-height: 0; padding: 14px 16px; }
  .marca strong { font-size: 0.85rem; }
  .contexto-operacao strong { font-size: 0.82rem; }
  .contexto-periodo { grid-column: 1 / -1; align-items: flex-start; }
  .controles-cabecalho { width: calc(100vw - 32px); }
  .controle-segmentado { flex: 0 0 auto; }
  .botao-atualizar { flex: 0 0 auto; }
  .pagina { padding: 34px 14px 70px; }
  .abertura { margin-bottom: 24px; }
  .abertura h1 { font-size: clamp(2.25rem, 13vw, 3.5rem); }
  .bloco { padding: 20px 16px; border-radius: 20px; }
  .bloco-cabecalho { flex-direction: column; gap: 6px; }
  .periodo-bloco { overflow-wrap: anywhere; }
  .grade-metricas, .meta-condicoes { grid-template-columns: 1fr; }
  .metrica { min-height: 0; }
  .metrica-valor { font-size: 2rem; }
  .evidencia-grade { grid-template-columns: 1fr; }
  .aviso { align-items: flex-start; flex-direction: column; }
  /* No celular o menu é uma faixa que rola de lado: em coluna ele ocupava a
     primeira tela inteira antes de qualquer número. */
  .navegacao { padding-inline: 14px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
  .navegacao-grupo { flex-wrap: nowrap; }
  .navegacao-menu-itens { position: fixed; top: auto; left: 14px; right: 14px; max-width: none; }
  .navegacao-grupo-rotulo { padding-inline: 10px; }
  .registro-card { padding: 16px; }
  .campos-leitura, .colunas-criativo, .grade-conexoes { grid-template-columns: 1fr; }
  .filtros-grade, .comando-grade { grid-template-columns: 1fr; }
  .comando-campo-largo { grid-column: auto; }
  .comando-formulario { padding: 16px; }
  .colunas-criativo { gap: 12px; }
  .tabela-responsiva, .tabela-responsiva tbody, .tabela-responsiva tr, .tabela-responsiva td {
    display: block;
    width: 100%;
  }
  .tabela-responsiva thead { display: none; }
  .tabela-responsiva tr { margin-bottom: 12px; padding: 12px; border: 1px solid var(--linha); border-radius: 11px; }
  .tabela-responsiva td { overflow-wrap: anywhere; }
  .tabela-membros, .tabela-membros tbody, .tabela-membros tr, .tabela-membros td { display: block; width: 100%; }
  .tabela-membros tr:first-child { display: none; }
  .tabela-membros tr { margin-bottom: 12px; padding: 10px 12px; border: 1px solid var(--linha); border-radius: 11px; }
  .tabela-membros td { border: 0; padding: 3px 0; overflow-wrap: anywhere; }
  .tabela-membros td[data-rotulo]::before { content: attr(data-rotulo) ": "; color: var(--texto-fraco); font-size: 0.78rem; }
}

/* Seletor de recorte. Existe desde que a régua passou a responder por qualquer
   intervalo — antes, escolher data devolveria tela vazia. */
.seletor-periodo { display: flex; align-items: center; gap: 6px; }
.seletor-data {
  padding: 4px 8px;
  border: 1px solid var(--linha);
  border-radius: 8px;
  background: var(--fundo-cartao);
  color: var(--texto);
  font: inherit;
  font-size: 0.8rem;
  color-scheme: dark;
}
.seletor-data:focus-visible { outline: 2px solid var(--linha-forte); outline-offset: 1px; }
.seletor-ate { color: var(--texto-fraco); font-size: 0.78rem; }
.contexto-nota { color: var(--texto-fraco); font-size: 0.75rem; }
/* A recusa fica ao lado do controle que a causou, não num canto da tela. */
.seletor-recusa {
  flex-basis: 100%;
  margin: 4px 0 0;
  color: var(--atencao, #e6b400);
  font-size: 0.75rem;
}

/*
 * Telas de acesso (#/entrar e #/segundo-fator).
 *
 * São as duas únicas telas que alguém vê SEM estar dentro: coluna estreita,
 * sem cabeçalho de operação, sem recorte. Largura limitada de propósito —
 * formulário de identidade esparramado na tela inteira faz a pessoa procurar
 * onde digitar.
 */
.tela-acesso { display: grid; gap: 18px; max-width: 540px; }
.acesso-explicacao { margin: 0; color: var(--texto-suave); line-height: 1.55; font-size: 0.9rem; }
.acesso-desafio, .acesso-concluido, .segundo-fator-cadastro,
.segundo-fator-confirmacao, .segundo-fator-recuperacao { display: grid; gap: 14px; }
.aviso-sem-provedor { display: grid; gap: 10px; padding: 18px; border: 1px dashed var(--linha); border-radius: 13px; }
.acesso-situacao { margin: 0; color: var(--texto-suave); font-size: 0.82rem; }

/*
 * O QR fica com o tamanho que couber na coluna, e o segredo em texto ao lado
 * dele SEMPRE — não como alternativa escondida. Aplicativo autenticador que
 * não lê câmera (ou pessoa em outro computador) depende do texto, e um segredo
 * que não se consegue copiar é um cadastro que não termina.
 */
.segundo-fator-qr { width: 100%; max-width: 232px; image-rendering: pixelated; border-radius: 9px; background: #fff; padding: 9px; }
.segundo-fator-segredo { grid-template-columns: 1fr; gap: 6px; padding: 13px; border: 1px solid var(--linha); border-radius: 11px; }
.segundo-fator-segredo dt { color: var(--texto-fraco); font-size: 0.78rem; }
.segredo-valor { margin: 0; font-family: var(--fonte-mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: 0.95rem; letter-spacing: 0.06em; overflow-wrap: anywhere; color: var(--texto); }

/*
 * Os códigos de recuperação aparecem UMA vez. Mesmo tratamento de monoespaço
 * do segredo, porque a pessoa vai copiar caractere a caractere.
 */
.lista-codigos-recuperacao { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 9px; margin: 0; padding: 0; list-style: none; }
.codigo-recuperacao { padding: 9px 11px; border: 1px solid var(--linha); border-radius: 9px; font-family: var(--fonte-mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: 0.92rem; letter-spacing: 0.06em; color: var(--texto); }

/* 204 (Iorran 28/09): etiqueta de CPIC ao lado do nome da campanha. */
.etiqueta-cpic { margin-left: 6px; vertical-align: middle; }
.cpic-verde { color: var(--menta); }
.cpic-amarelo { color: var(--ambar); }
.cpic-vermelho { color: var(--coral); }
.cpic-sem_ic, .cpic-sem_contagem, .cpic-sem_gasto, .cpic-outra_moeda { color: var(--texto-fraco); border-style: dashed; }
.campanha-cabecalho h1 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* Tabela larga: rola de lado dentro da caixa, a página não estoura (29/09). */
.tabela-rolavel { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tabela-rolavel > table { min-width: max-content; }

/*
 * REVISÃO DE DESIGN (29/09/2026). Só aparência: nenhuma regra, número ou
 * permissão muda aqui.
 */
/* G1 — verde/amarelo/vermelho só para bom/atenção/ruim. O ESTADO do dado já
   está na etiqueta do canto; o número fica na cor do texto. Antes um gasto
   "confirmado" saía verde e um "parcial" saía amarelo, e isso se lia como
   bom e atenção. */
.metrica .metrica-valor { color: var(--texto); }
.metrica.estado-ausente .metrica-valor, .metrica.estado-indisponivel .metrica-valor { color: var(--texto-fraco); }
/* G2 — texto no lugar do número ("Sem dado", "Parcial, sem valor observado")
   não usa a fonte de número: não pode ser maior que os números de verdade. */
.metrica .metrica-valor-texto { font-size: 1.05rem; font-weight: 650; letter-spacing: 0; color: var(--texto-suave); }
/* G3 — a etiqueta de estado já está no topo do cartão; no resumo da evidência
   ela se repetia (12 etiquetas iguais no Início). Continua dentro, ao abrir. */
.metrica .evidencia-resumo .pill { display: none; }
.metrica .evidencia-resumo { padding-top: 8px; font-size: 0.8rem; }
.metrica { gap: 10px; padding: 16px; }

/* G5 — o nome primeiro e grande; o ID canônico pequeno, no fim. */
.campo-leitura.campo-nome { grid-column: span 2; }
.campo-leitura.campo-nome dd { font-size: 1.05rem; font-weight: 650; }
.campo-leitura.campo-id { border-style: dashed; }
.campo-leitura.campo-id dd { color: var(--texto-fraco); font-size: 0.75rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* G6 — seis métricas em 3 colunas (2 linhas cheias), não 5 + ROAS sozinho. */
.registro-card .grade-metricas { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* G7 — formulário de escrita no meio da leitura: fechado atrás do título. */
.comando-recolhido { border: 1px dashed var(--linha-forte); border-radius: 12px; }
.comando-recolhido > summary.comando-abrir {
  display: flex; align-items: center; min-height: 44px; padding: 0 14px;
  color: var(--texto-suave); font-size: 0.88rem; font-weight: 650; cursor: pointer; list-style: none;
}
.comando-recolhido > summary.comando-abrir::-webkit-details-marker { display: none; }
.comando-recolhido > summary.comando-abrir::before { content: "+"; margin-right: 10px; font-size: 1.1rem; color: var(--menta); }
.comando-recolhido[open] > summary.comando-abrir::before { content: "−"; }
.comando-recolhido[open] > summary.comando-abrir { color: var(--texto); }
.comando-recolhido > .comando-formulario { border: 0; border-top: 1px solid var(--linha); border-radius: 0 0 12px 12px; }
.comando-recolhido > .comando-formulario .comando-cabecalho h2 { display: none; }

/* G4 — o botão que grava é o principal do formulário: cheio, não contorno. */
.comando-enviar { background: var(--menta-forte); border-color: var(--menta-forte); color: #04110c; font-weight: 700; }
.comando-enviar:hover { background: var(--menta); }

/* Ações que tiram ou apagam (arquivar, remover, suspender) ficam separadas e
   discretas: por último, afastadas, em coral só no texto. */
.menu-acao.acao-destrutiva { margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--linha); }
.menu-acao.acao-destrutiva > summary { color: var(--coral) !important; }

/* G9 — tabelas: número à direita, cabeçalho fixo, linhas densas. */
.tabela-funil-cinco, .gasto-hora-tabela, .fase-tabela { border-collapse: collapse; font-size: 0.86rem; font-variant-numeric: tabular-nums; }
.tabela-funil-cinco th, .gasto-hora-tabela th, .fase-tabela th {
  position: sticky; top: 0; z-index: 1; padding: 8px 10px; background: var(--fundo-elevado);
  color: var(--texto-fraco); font-size: 0.75rem; font-weight: 700; text-align: right; white-space: nowrap;
  border-bottom: 1px solid var(--linha-forte);
}
.tabela-funil-cinco td, .gasto-hora-tabela td, .fase-tabela td { padding: 8px 10px; text-align: right; white-space: nowrap; border-bottom: 1px solid var(--linha); }
.tabela-funil-cinco th:first-child, .tabela-funil-cinco td:first-child,
.gasto-hora-tabela th:nth-child(2), .gasto-hora-tabela td:nth-child(2),
.fase-tabela th:first-child, .fase-tabela td:first-child, .fase-tabela td.fase-etiqueta { text-align: left; }
.tabela-funil-cinco tr.funil-cinco-total td { font-weight: 700; border-top: 1px solid var(--linha-forte); }
.tabela-rolavel { max-height: 70vh; overflow-y: auto; }
.tabela-membros th { position: sticky; top: 0; background: var(--fundo-elevado); z-index: 1; }
@media (min-width: 621px) { .tabela-membros td.membro-menu { min-width: 180px; } }

/* Consistência — o código do lançamento é etiqueta, não título. */
.despesa-item .registro-titulo-linha h2 { font-size: 1rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--texto-suave); }

/* G10 — celular: tudo que se toca tem pelo menos 44 px de altura. */
@media (max-width: 620px) {
  .botao-link, .filtros-acoes button, .paginador button { min-height: 44px; }
  details > summary, .menu-acao > summary, .evidencia-resumo { min-height: 44px; display: flex; align-items: center; }
  .grupo-item details > summary, .tabela-membros .membro-menu details > summary { padding: 0 4px; font-size: 0.9rem; }
  .registro-card .grade-metricas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metrica .metrica-valor { font-size: 1.9rem; }
  .metrica .metrica-valor.metrica-valor-texto { font-size: 1rem; }
  .campo-leitura.campo-nome { grid-column: auto; }
  .tabela-rolavel { max-height: none; }
  .comando-enviar { width: 100%; }
}
.metrica-valor-texto .metrica-unidade { display: none; }
/* Formulário recolhido que tira ou apaga: separado, afastado e com texto coral. */
.comando-recolhido.comando-destrutivo { margin-top: 12px; border-color: rgba(255, 143, 120, 0.35); }
.comando-recolhido.comando-destrutivo > summary.comando-abrir { color: var(--coral); }
.comando-recolhido.comando-destrutivo > summary.comando-abrir::before { color: var(--coral); }
.comando-destrutivo .comando-enviar { background: transparent; border-color: var(--coral); color: var(--coral); }
.registro-card > .comando-recolhido { margin-top: 4px; }

/* ============================================================================
   RODADA 2 DA REVISÃO DE DESIGN (Iorran 29/09: D1 D2 D3 E1 E2). Só aparência.
   ============================================================================ */
/* E1: o nome do produto é "Z Global" — escrito como nome, não em caixa-alta espaçada. */
.marca { letter-spacing: 0.02em; }
.marca strong { font-size: 1.05rem; }

/* D2: abas da tela de Pessoas. */
.abas { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--linha); margin-bottom: 18px; }
.abas .aba {
  padding: 10px 14px; color: var(--texto-suave); text-decoration: none; font-weight: 600;
  border-bottom: 2px solid transparent; margin-bottom: -1px; min-height: 44px; display: inline-flex; align-items: center;
}
.abas .aba:hover { color: var(--texto); }
.abas .aba.ativa { color: var(--texto); border-bottom-color: var(--menta); }
.aba-painel[hidden] { display: none; }
.aba-painel { display: grid; gap: 18px; }

/* D3/E2: resultados em tabela, colunas curtas, detalhe num clique. */
.tabela-resultados { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tabela-resultados th, .tabela-resultados td { padding: 10px 12px; border-bottom: 1px solid var(--linha); white-space: nowrap; }
.tabela-resultados th { text-align: left; color: var(--texto-suave); font-size: 0.78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em; position: sticky; top: 0; background: var(--fundo-bloco, var(--fundo)); z-index: 1; }
.tabela-resultados .celula-numero { text-align: right; }
.tabela-resultados .coluna-nome { text-align: left; max-width: 340px; overflow: hidden; text-overflow: ellipsis; }
.tabela-resultados .linha-abrir {
  background: none; border: 0; padding: 0; color: var(--texto); font: inherit; font-weight: 600; cursor: pointer;
  text-align: left; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tabela-resultados .linha-abrir::before { content: '▸'; display: inline-block; width: 1.1em; color: var(--texto-suave); }
.tabela-resultados .linha-abrir[aria-expanded="true"]::before { content: '▾'; }
.tabela-resultados .linha-resultado:hover { background: rgba(255, 255, 255, 0.03); }
.tabela-resultados .linha-detalhe > td { white-space: normal; padding: 0 0 16px; background: rgba(255, 255, 255, 0.02); }
.tabela-resultados .linha-detalhe[hidden] { display: none; }
.tabela-resultados .linha-detalhe .registro-card { margin: 0; border: 0; }
.tabela-resultados .celula-vazia { color: var(--texto-suave); }
.tabela-resultados .celula-estado { color: var(--ambar); margin-left: 2px; cursor: help; font-size: 0.85rem; }
.tabela-resultados .coluna-cpic .pill { white-space: nowrap; }
.ajuda-cabecalho { margin-left: 6px; cursor: help; color: var(--texto-suave); text-transform: none; }
.tabela-resultados-nota { margin-top: 8px; }

@media (max-width: 620px) {
  .abas { flex-wrap: nowrap; overflow-x: auto; }
  .abas .aba { white-space: nowrap; }
  .tabela-resultados .coluna-nome { max-width: 170px; position: sticky; left: 0; background: var(--fundo-bloco, var(--fundo)); }
  .tabela-resultados .linha-abrir { min-height: 44px; }
  .tabela-resultados .linha-detalhe > td { position: sticky; left: 0; }
  .tabela-resultados .linha-detalhe .registro-card { width: calc(100vw - 28px); padding: 12px 10px; box-sizing: border-box; }
  .tabela-resultados .linha-detalhe .grade-metricas { grid-template-columns: 1fr; }
}

/* Demanda na tabela (Iorran 29/09): código em negrito · título normal. */
.tabela-resultados .nome-demanda .demanda-codigo { font-weight: 700; }
.tabela-resultados .nome-demanda .demanda-titulo { font-weight: 400; color: var(--texto-suave); }
@media (max-width: 620px) {
  /* No celular o título da demanda desce para baixo do código em vez de ser cortado. */
  .tabela-resultados .linha-abrir:has(.nome-demanda) { white-space: normal; display: flex; align-items: flex-start; }
  .tabela-resultados .nome-demanda { display: flex; flex-direction: column; }
  .tabela-resultados .nome-demanda .demanda-titulo { font-size: 0.85rem; line-height: 1.3; white-space: normal; }
}

/* 227: título livre da demanda depois do tipo, peso normal. */
.tabela-resultados .nome-demanda .demanda-titulo-livre { font-weight: 400; color: var(--texto); }
@media (max-width: 620px) {
  .tabela-resultados .nome-demanda .demanda-titulo-livre { font-size: 0.85rem; line-height: 1.3; white-space: normal; }
}

/* TABELA DE CRIATIVOS (Iorran 29/09): hoje até agora em destaque, dia fechado ao lado. */
.tabela-criativos .grupo-dia { text-align: center; border-bottom: 1px solid var(--linha); white-space: nowrap; }
.tabela-criativos .inicio-dia { border-left: 1px solid var(--linha); }
.tabela-criativos td.hoje { color: var(--texto); font-weight: 600; }
.tabela-criativos td.fechado { color: var(--texto-suave); }
.tabela-criativos .etiqueta-cpic { margin-left: 0; }
.etiqueta-dia { display: inline-block; font-size: .75rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; margin-left: 8px; letter-spacing: 0; text-transform: none; vertical-align: middle; }
.etiqueta-dia.etiqueta-parcial { color: var(--ambar); border: 1px solid var(--ambar); }
.etiqueta-dia.etiqueta-fechado { color: var(--texto-suave); border: 1px solid var(--linha); }
.faixa-dias { display: none; }
.criativo-celular { display: none; }
@media (max-width: 620px) {
  /* Celular: sem colunas de número. Cada criativo vira um bloco — nome em linha
     inteira e seis quadros: rótulo, hoje grande, dia fechado pequeno embaixo. */
  .tabela-criativos thead { display: none; }
  .tabela-criativos td.celula-numero { display: none; }
  .tabela-criativos, .tabela-criativos tbody, .tabela-criativos tr.linha-criativo, .tabela-criativos td.coluna-nome { display: block; width: 100%; }
  .tabela-criativos td.coluna-nome { white-space: normal; padding: 12px 4px; max-width: none; position: static; overflow: visible; }
  .tabela-criativos tr.linha-detalhe:not([hidden]) { display: block; }
  .faixa-dias { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 0 0 8px; color: var(--texto-suave); font-size: .85rem; }
  .faixa-dias .etiqueta-dia { margin-left: 0; }
  .criativo-celular { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 10px; margin-top: 8px; }
  .criativo-celular-quadro { min-width: 0; }
  .criativo-celular-rotulo { font-size: .75rem; color: var(--texto-suave); text-transform: uppercase; letter-spacing: .05em; }
  .criativo-celular-hoje { font-size: 1rem; font-weight: 600; color: var(--texto); white-space: nowrap; }
  .criativo-celular-fechado { font-size: .78rem; color: var(--texto-suave); white-space: nowrap; }
  .criativo-celular-rotulo-dia { display: block; font-size: .75rem; }
  .criativo-celular .etiqueta-cpic { font-size: .8rem; padding: 1px 6px; white-space: nowrap; }
}