/* ============================================================
   Gláucia Sampaio — Identidade visual do sistema

   Segue a identidade da própria loja (glauciasampaio.com.br):
   preto-suave #232323 dominante sobre branco, com o coral
   #E95144 usado com parcimônia — no site ele aparece 47 vezes
   contra 1.359 do preto, e a mesma disciplina vale aqui.
   Tipografia Inter (números tabulares para leitura financeira).

   As cores de status foram validadas para daltonismo:
   verde #0F6B3F ↔ âmbar #B58000 têm ΔE 13,1 sob protanopia e
   âmbar ↔ vermelho #A32118 têm ΔE 21,4 — e nunca aparecem
   sozinhas: sempre acompanham um rótulo em texto.
   ============================================================ */
@font-face {
  font-family: 'Inter';
  src: url('fontes/inter-variavel.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Identidade da marca Gláucia Sampaio: preto-suave dominante sobre
   branco, com o coral como assinatura rara (é assim que a própria
   loja se apresenta). Cores de status validadas para daltonismo. */
:root {
  --sidebar-bg: #232323;
  --sidebar-texto: #c9c6c2;
  --sidebar-titulo: #8a8681;
  --sidebar-ativo: #313131;

  --fundo: #f4f3f1;
  --cartao: #ffffff;
  --superficie-2: #faf9f8;
  --borda: #e0ddd9;
  --borda-forte: #c2beb8;

  --tinta: #232323;
  --tinta-2: #565350;
  --tinta-3: #8a8681;

  --acento: #232323;
  --acento-claro: #f0efed;
  --marca: #E95144;              /* coral da marca — uso deliberadamente escasso */

  --positivo: #0F6B3F;
  --positivo-claro: #e8f2ec;
  --alerta: #B58000;
  --alerta-texto: #7D5400;
  --alerta-claro: #fbf3e0;
  --negativo: #A32118;
  --negativo-claro: #fbecea;

  --grafico-serie: #232323;
  --grafico-banda: rgba(35, 35, 35, 0.10);
  --grafico-neutra: #a5a19c;
  --grade-grafico: #eceae7;

  --aviso-borda: #e0cfa4;
  --aviso-texto: #6b5410;
}

/* ------------------------------------------------------------
   Tema escuro (fundo preto) — ativado por body[data-tema="escuro"]
   Mesmas famílias de cor, em passos legíveis sobre superfície escura.
   ------------------------------------------------------------ */
body[data-tema="escuro"] {
  --sidebar-bg: #141414;
  --sidebar-texto: #c9c6c2;
  --sidebar-titulo: #7d7975;
  --sidebar-ativo: #262626;

  --fundo: #0f0f0f;
  --cartao: #1a1a1a;
  --superficie-2: #212121;
  --borda: #2e2e2e;
  --borda-forte: #454443;

  --tinta: #ecebe9;
  --tinta-2: #b5b2ae;
  --tinta-3: #85817d;

  --acento: #ecebe9;
  --acento-claro: #262626;
  --marca: #F2705F;

  --positivo: #4FBF87;
  --positivo-claro: #14261c;
  --alerta: #F2CB57;
  --alerta-texto: #F2CB57;
  --alerta-claro: #2b2411;
  --negativo: #D9503F;
  --negativo-claro: #2c1715;

  --grafico-serie: #ecebe9;
  --grafico-banda: rgba(236, 235, 233, 0.13);
  --grafico-neutra: #7d7975;
  --grade-grafico: #2a2a2a;

  --aviso-borda: #574a26;
  --aviso-texto: #ddc98a;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; }

body {
  font-family: 'Inter', -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  background: var(--fundo);
  color: var(--tinta);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ------------------------------------------------------------
   Estrutura: barra lateral + conteúdo
   ------------------------------------------------------------ */
#aplicacao { display: flex; min-height: 100vh; }

aside {
  width: 236px;
  flex-shrink: 0;
  background: var(--sidebar-bg);
  color: var(--sidebar-texto);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}
.logotipo {
  padding: 1.5rem 1.4rem 1.2rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.logotipo img {
  display: block;
  width: 100%;
  max-width: 168px;
  height: auto;
}
.logotipo span {
  display: block;
  font-size: 0.62rem;
  color: var(--sidebar-titulo);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-top: 0.6rem;
}
.grupo-menu { padding: 1.05rem 0 0.2rem; }
.grupo-menu h6 {
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sidebar-titulo);
  padding: 0 1.4rem 0.45rem;
}
nav button {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-left: 3px solid transparent;
  color: var(--sidebar-texto);
  font-size: 0.9rem;
  font-family: inherit;
  padding: 0.6rem 1.4rem 0.6rem 1.22rem;
  cursor: pointer;
}
nav button:hover { background: rgba(255,255,255,0.05); color: #fff; }
nav button.ativo {
  background: var(--sidebar-ativo);
  border-left-color: var(--marca);   /* assinatura coral da marca */
  color: #ffffff;
  font-weight: 600;
}
.rodape-menu {
  margin-top: auto;
  padding: 1rem 1.4rem 1.2rem;
  font-size: 0.7rem;
  color: var(--sidebar-titulo);
  border-top: 1px solid rgba(255,255,255,0.07);
}

/* ------------------------------------------------------------
   Área de conteúdo
   ------------------------------------------------------------ */
#area { flex: 1; min-width: 0; }

.barra-superior {
  background: var(--cartao);
  border-bottom: 1px solid var(--borda);
  padding: 0.85rem 1.8rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  position: sticky;
  top: 0;
  z-index: 20;
}
.barra-superior h1 { font-size: 1.14rem; font-weight: 700; letter-spacing: 0.01em; }
.barra-superior .data-atual { font-size: 0.8rem; color: var(--tinta-3); }

#indicador-conexao {
  margin-left: auto;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.3rem 0.75rem;
  border-radius: 3px;
  background: var(--positivo-claro);
  color: var(--positivo);
  border: 1px solid currentColor;
}
#indicador-conexao.offline { background: var(--negativo-claro); color: var(--negativo); }

main { padding: 1.5rem 1.7rem 3rem; max-width: 1680px; }

/* Duas colunas dentro de uma seção, quando a tela permite */
.duas-colunas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.4rem;
  align-items: start;
}
@media (max-width: 1100px) { .duas-colunas { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------
   Avisos
   ------------------------------------------------------------ */
.aviso-offline {
  background: var(--negativo-claro);
  border: 1px solid var(--negativo);
  border-radius: 4px;
  padding: 0.7rem 1rem;
  margin-bottom: 1.25rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--negativo);
  display: none;
}

/* ------------------------------------------------------------
   Cartões de indicadores
   ------------------------------------------------------------ */
.grade-cartoes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(206px, 1fr));
  gap: 0.75rem;
  margin-bottom: 1.1rem;
}
.cartao {
  background: var(--cartao);
  border: 1px solid var(--borda);
  border-radius: 5px;
  padding: 0.85rem 1rem 0.8rem;
}
.cartao .rotulo {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--tinta-3);
  display: flex;
  align-items: center;
  gap: 0.45rem;
}
.cartao .valor {
  font-size: 1.62rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  margin: 0.3rem 0 0.15rem;
}
.cartao .detalhe { font-size: 0.78rem; color: var(--tinta-2); }
.ponto { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.ponto.verde { background: var(--positivo); }
.ponto.amarelo { background: var(--alerta); }
.ponto.vermelho { background: var(--negativo); }
.cartao.verde { border-top: 3px solid var(--positivo); }
.cartao.amarelo { border-top: 3px solid var(--alerta); }
.cartao.vermelho { border-top: 3px solid var(--negativo); }
.cartao.verde .valor { color: var(--positivo); }
.cartao.amarelo .valor { color: var(--alerta); }
.cartao.vermelho .valor { color: var(--negativo); }

/* ------------------------------------------------------------
   Seções
   ------------------------------------------------------------ */
.secao {
  background: var(--cartao);
  border: 1px solid var(--borda);
  border-radius: 5px;
  padding: 1rem 1.2rem 1.15rem;
  margin-bottom: 1.1rem;
}
.secao > h2 {
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--tinta);
  padding-bottom: 0.65rem;
  border-bottom: 1px solid var(--borda);
  margin-bottom: 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.secao h3 {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--tinta-2);
  margin: 1rem 0 0.5rem;
}
.nota { font-size: 0.76rem; color: var(--tinta-3); }

/* ------------------------------------------------------------
   Painel de recomendações da IA
   ------------------------------------------------------------ */
.painel-ia {
  background: var(--cartao);
  border: 1px solid var(--borda);
  border-left: 3px solid var(--acento);
  border-radius: 5px;
  padding: 1.05rem 1.3rem;
  margin-bottom: 1.25rem;
}
.painel-ia h2 {
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--acento);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.6rem;
}
.painel-ia .origem {
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  background: var(--acento-claro);
  color: var(--acento);
  padding: 0.15rem 0.55rem;
  border-radius: 3px;
  text-transform: none;
}
.painel-ia ul { list-style: none; }
.painel-ia li { padding: 0.55rem 0; border-bottom: 1px solid var(--grade-grafico); }
.painel-ia li:last-child { border-bottom: none; padding-bottom: 0.1rem; }
.painel-ia li strong { display: block; font-size: 0.88rem; font-weight: 600; }
.painel-ia li span { font-size: 0.8rem; color: var(--tinta-2); }

/* ------------------------------------------------------------
   Lista de ações prioritárias
   ------------------------------------------------------------ */
.acao-item {
  display: flex;
  gap: 0.85rem;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--grade-grafico);
  align-items: flex-start;
}
.acao-item:last-child { border-bottom: none; }
.acao-numero {
  flex-shrink: 0;
  width: 26px; height: 26px;
  border-radius: 3px;
  background: var(--acento);
  color: #fff;
  font-weight: 700;
  font-size: 0.82rem;
  display: flex; align-items: center; justify-content: center;
  margin-top: 0.1rem;
}
.acao-item strong { font-size: 0.9rem; font-weight: 600; }
.acao-item p { font-size: 0.8rem; color: var(--tinta-2); margin-top: 0.15rem; }
.acao-item .etiqueta {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--acento-claro);
  color: var(--acento);
  padding: 0.12rem 0.5rem;
  border-radius: 3px;
  margin-left: 0.5rem;
  vertical-align: middle;
}

/* ------------------------------------------------------------
   Tabelas
   ------------------------------------------------------------ */
.rolagem { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 0.83rem; }
th, td { text-align: left; padding: 0.42rem 0.6rem; border-bottom: 1px solid var(--grade-grafico); }
th {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--tinta-3);
  border-bottom: 1px solid var(--borda-forte);
  white-space: nowrap;
}
tbody tr:hover td { background: var(--superficie-2); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.positivo { color: var(--positivo); }
.negativo { color: var(--negativo); }
td strong { font-weight: 600; }
tr.linha-subtotal td { font-weight: 700; border-top: 1px solid var(--borda-forte); background: var(--superficie-2); }
tr.linha-total td { font-weight: 700; border-top: 2px solid var(--tinta); font-size: 0.88rem; }

.selo {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.14rem 0.5rem;
  border-radius: 3px;
  white-space: nowrap;
}
.selo.verde { background: var(--positivo-claro); color: var(--positivo); }
.selo.amarelo { background: var(--alerta-claro); color: var(--alerta); }
.selo.vermelho { background: var(--negativo-claro); color: var(--negativo); }
.selo.neutro { background: var(--acento-claro); color: var(--acento); }

/* ------------------------------------------------------------
   Botões e formulários
   ------------------------------------------------------------ */
button.primario, button.perigo, button.secundario, button.discreto {
  font-size: 0.82rem;
  font-weight: 600;
  font-family: inherit;
  padding: 0.55rem 1.1rem;
  border-radius: 4px;
  border: 1px solid transparent;
  cursor: pointer;
}
button.primario { background: var(--acento); color: #fff; }
button.primario:hover { background: #173d5f; }
button.perigo { background: var(--negativo); color: #fff; }
button.secundario { background: var(--cartao); border-color: var(--acento); color: var(--acento); }
button.secundario:hover { background: var(--acento-claro); }
button.discreto {
  background: var(--cartao); border-color: var(--borda-forte); color: var(--tinta-2);
  padding: 0.3rem 0.7rem; font-size: 0.74rem;
}
button.discreto:hover { border-color: var(--acento); color: var(--acento); }
button:disabled { opacity: 0.45; cursor: not-allowed; }

input, select, textarea {
  font-size: 0.86rem;
  font-family: inherit;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--borda-forte);
  border-radius: 4px;
  width: 100%;
  background: var(--cartao);
  color: var(--tinta);
}
input:focus, select:focus { outline: 2px solid rgba(31,78,121,0.25); border-color: var(--acento); }
label {
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tinta-2);
  display: block;
  margin-bottom: 0.3rem;
}
.linha-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.8rem;
  margin-bottom: 0.9rem;
  align-items: end;
}

/* ------------------------------------------------------------
   Abas internas (Contabilidade)
   ------------------------------------------------------------ */
.abas {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--borda);
  margin-bottom: 1.1rem;
  flex-wrap: wrap;
}
.abas button {
  font-size: 0.8rem;
  font-weight: 600;
  font-family: inherit;
  color: var(--tinta-2);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 0.55rem 1rem;
  cursor: pointer;
}
.abas button:hover { color: var(--acento); }
.abas button.ativa { color: var(--acento); border-bottom-color: var(--acento); }

/* ------------------------------------------------------------
   PDV
   ------------------------------------------------------------ */
.pdv-grade { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1.25rem; }
@media (max-width: 980px) { .pdv-grade { grid-template-columns: 1fr; } }
.resultado-busca button {
  display: block; width: 100%;
  text-align: left;
  font-size: 0.84rem;
  font-family: inherit;
  padding: 0.6rem 0.8rem;
  margin-bottom: 0.35rem;
  border: 1px solid var(--borda);
  border-radius: 4px;
  background: var(--cartao);
  cursor: pointer;
  color: var(--tinta);
}
.resultado-busca button:hover { border-color: var(--acento); background: var(--acento-claro); }
.carrinho-item {
  display: flex; justify-content: space-between;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--grade-grafico);
  font-size: 0.86rem;
  align-items: center; gap: 0.5rem;
}
.carrinho-total {
  font-size: 1.35rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  margin: 0.7rem 0;
  color: var(--tinta);
}
.botoes-pagamento { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.botoes-pagamento button {
  font-size: 0.84rem; font-weight: 700;
  font-family: inherit;
  padding: 0.75rem;
  border-radius: 4px;
  border: 1px solid var(--borda-forte);
  background: var(--cartao); color: var(--tinta-2);
  cursor: pointer;
  letter-spacing: 0.04em;
}
.botoes-pagamento button:hover { border-color: var(--acento); color: var(--acento); }
.botoes-pagamento button.escolhido {
  background: var(--acento); border-color: var(--acento); color: #fff;
}

/* ------------------------------------------------------------
   Assistente (chat)
   ------------------------------------------------------------ */
#conversa {
  max-height: 430px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 0.6rem;
  padding: 0.4rem 0; margin-bottom: 1rem;
}
.balao {
  max-width: 82%;
  padding: 0.65rem 0.9rem;
  border-radius: 6px;
  font-size: 0.86rem;
  white-space: pre-wrap;
}
.balao.usuario { align-self: flex-end; background: var(--acento); color: #fff; }
.balao.robo { align-self: flex-start; background: var(--superficie-2); border: 1px solid var(--borda); }
#linha-pergunta { display: flex; gap: 0.5rem; }
#botao-voz {
  flex-shrink: 0;
  width: 46px;
  border-radius: 4px;
  border: 1px solid var(--borda-forte);
  background: var(--cartao);
  color: var(--tinta-2);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
#botao-voz:hover { border-color: var(--acento); color: var(--acento); }
#botao-voz.gravando { background: var(--negativo); border-color: var(--negativo); color: #fff; animation: pulsar 1s infinite; }
@keyframes pulsar { 50% { opacity: 0.65; } }

/* ------------------------------------------------------------
   Medidor de saúde
   ------------------------------------------------------------ */
.medidor { height: 8px; background: var(--grade-grafico); border-radius: 4px; overflow: hidden; margin: 0.6rem 0 0.4rem; }
.medidor > div { height: 100%; transition: width 0.5s; }
.medidor > div.verde { background: var(--positivo); }
.medidor > div.amarelo { background: var(--alerta); }
.medidor > div.vermelho { background: var(--negativo); }

/* ------------------------------------------------------------
   Gráficos
   ------------------------------------------------------------ */
.figura { margin: 0.4rem 0 0.6rem; }
.figura svg { display: block; width: 100%; height: auto; }
.legenda-grafico {
  display: flex; gap: 1.2rem; flex-wrap: wrap;
  font-size: 0.74rem; color: var(--tinta-2);
  margin: 0.35rem 0 0.2rem;
}
.legenda-grafico span { display: inline-flex; align-items: center; gap: 0.4rem; }
.amostra { width: 14px; height: 3px; display: inline-block; border-radius: 2px; }
.amostra.quadrado { width: 11px; height: 11px; border-radius: 2px; }

.mudo { color: var(--tinta-3); font-size: 0.82rem; }

@media (max-width: 900px) {
  #aplicacao { flex-direction: column; }
  aside { width: 100%; height: auto; position: static; }
  .grupo-menu { padding-top: 0.5rem; }
  nav { display: flex; flex-wrap: wrap; }
  nav button { width: auto; border-left: none; border-bottom: 3px solid transparent; }
  nav button.ativo { border-left: none; border-bottom-color: var(--marca); }
  main { padding: 1rem; }
}

/* ------------------------------------------------------------
   Contraste no tema escuro: elementos com fundo de acento
   recebem tinta escura (o acento clareia no tema escuro).
   ------------------------------------------------------------ */
body[data-tema="escuro"] button.primario,
body[data-tema="escuro"] button.perigo,
body[data-tema="escuro"] .acao-numero,
body[data-tema="escuro"] .balao.usuario,
body[data-tema="escuro"] .botoes-pagamento button.escolhido {
  color: #10141a;
}
body[data-tema="escuro"] button.primario:hover { background: #85b6e5; }

/* Botão de tema na barra superior */
#botao-tema {
  font-size: 0.72rem;
  font-weight: 600;
  font-family: inherit;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.3rem 0.75rem;
  border-radius: 3px;
  border: 1px solid var(--borda-forte);
  background: var(--cartao);
  color: var(--tinta-2);
  cursor: pointer;
}
#botao-tema:hover { border-color: var(--acento); color: var(--acento); }

/* ------------------------------------------------------------
   Logotipo na tela de entrada: versão conforme o tema
   ------------------------------------------------------------ */
.logo-tema-escuro { display: none; }
body[data-tema="escuro"] .logo-tema-claro { display: none; }
body[data-tema="escuro"] .logo-tema-escuro { display: inline-block; }

/* No tema escuro o acento é claro: inverte a tinta dos elementos
   que usam o acento como fundo. */
body[data-tema="escuro"] button.primario,
body[data-tema="escuro"] .acao-numero,
body[data-tema="escuro"] .balao.usuario,
body[data-tema="escuro"] .botoes-pagamento button.escolhido {
  color: #141414;
}
body[data-tema="escuro"] button.primario:hover { background: #ffffff; }

/* ------------------------------------------------------------
   Barra de exportação e impressão
   ------------------------------------------------------------ */
.barra-acoes {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  margin-bottom: 0.9rem;
}

#cabecalho-impressao { display: none; }

/* ------------------------------------------------------------
   Impressão / PDF
   O papel recebe só o conteúdo, com cabeçalho de documento,
   fundo branco e tabelas que não quebram no meio da linha.
   ------------------------------------------------------------ */
@media print {
  @page { margin: 14mm 12mm; size: A4; }

  aside, .barra-superior, .barra-acoes, .aviso-offline,
  #tela-entrada, .painel-ia { display: none !important; }

  #aplicacao { display: block; }
  #area { margin: 0; }
  main { padding: 0; max-width: none; }

  body {
    background: #fff !important;
    color: #000 !important;
    font-size: 9.5pt;
  }

  #cabecalho-impressao { display: block; }
  .cabecalho-doc {
    border-bottom: 1.5pt solid #000;
    padding-bottom: 6pt;
    margin-bottom: 12pt;
    display: flex;
    flex-direction: column;
    gap: 2pt;
  }
  .cabecalho-doc strong { font-size: 13pt; letter-spacing: 0.04em; }
  .cabecalho-doc span { font-size: 8.5pt; color: #333; }

  /* Só o alvo marcado vai ao papel */
  .imprimir-alvo, .imprimir-alvo * { visibility: visible; }

  .secao {
    border: none;
    border-top: 0.75pt solid #999;
    border-radius: 0;
    padding: 8pt 0 4pt;
    margin: 0 0 8pt;
    break-inside: avoid;
    background: #fff !important;
  }
  .secao > h2 {
    font-size: 10pt;
    border-bottom: 0.5pt solid #ccc;
    padding-bottom: 3pt;
    color: #000;
  }

  .grade-cartoes { display: flex; flex-wrap: wrap; gap: 8pt; }
  .cartao {
    border: 0.5pt solid #999 !important;
    border-radius: 0;
    padding: 5pt 8pt;
    background: #fff !important;
    flex: 1 1 22%;
    break-inside: avoid;
  }
  .cartao .valor { font-size: 12pt; color: #000 !important; }
  .cartao .rotulo, .cartao .detalhe { color: #333 !important; }

  table { font-size: 8.5pt; page-break-inside: auto; }
  thead { display: table-header-group; }   /* repete o cabeçalho a cada página */
  tr { break-inside: avoid; }
  th {
    background: #eee !important;
    color: #000 !important;
    border-bottom: 0.75pt solid #000;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  td { border-bottom: 0.25pt solid #ccc; }
  tbody tr:hover td { background: transparent !important; }

  .selo {
    border: 0.5pt solid #666;
    background: #fff !important;
    color: #000 !important;
  }
  .ponto { border: 0.5pt solid #000; }
  .positivo, .negativo { color: #000 !important; font-weight: 700; }
  .negativo::before { content: '('; }
  .negativo::after { content: ')'; }   /* convenção contábil para negativo */

  .figura svg { max-width: 100%; }
  .rolagem { overflow: visible !important; }
  button { display: none !important; }
  .nota, .mudo { color: #444 !important; font-size: 8pt; }
}

/* Aviso discreto de que a análise aprofundada ainda está rodando por
   cima das recomendações locais, que já estão na tela. */
.ia-status {
  margin-left: auto;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--tinta-fraca);
  opacity: 0.85;
}
.ia-status::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  margin-right: 0.4rem;
  border-radius: 50%;
  background: var(--marca);
  animation: pulso-ia 1.4s ease-in-out infinite;
}
@keyframes pulso-ia { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }
@media print { .ia-status { display: none; } }

/* Listas de leitura corrida (pontos fortes/fracos do concorrente) */
.lista-simples {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
}
.lista-simples li {
  position: relative;
  padding: 0.4rem 0 0.4rem 1rem;
  border-bottom: 1px solid var(--grade-grafico);
  font-size: 0.86rem;
  line-height: 1.5;
}
.lista-simples li:last-child { border-bottom: none; }
.lista-simples li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.85rem;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--tinta-fraca);
}