/* Contabiliza Educacional — tema quente
   Paleta recuperada do projeto original: creme #F9F6F0, verde profundo
   #103F2D, mint #DFF1E2. Tipografia DM Sans + Libre Baskerville + DM Mono.
   Cor por categoria: cada módulo tem seu acento, para orientar sem legenda. */

@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=Libre+Baskerville:wght@400;700&display=swap');

:root {
  --papel:        #F9F6F0;
  --cartao:       #FEFDFB;
  --tinta:        #2F281F;
  --tinta-suave:  #6F685E;
  --regua:        #DBD7D0;
  --regua-suave:  #F0EBE1;

  --verde:        #103F2D;
  --verde-medio:  #245C45;
  --verde-vivo:   #2C965D;
  --mint:         #DFF1E2;

  --ambar:        #D49838;
  --ambar-claro:  #FBEDD1;
  --terracota:    #C44132;
  --terracota-claro:#FFE8E1;
  --azul:         #3A78A1;
  --azul-claro:   #DAEEFE;
  --roxo:         #7B63A3;
  --roxo-claro:   #F1EAFF;

  --fonte:  "DM Sans", ui-sans-serif, system-ui, sans-serif;
  --titulo: "Libre Baskerville", Georgia, serif;
  --mono:   "DM Mono", ui-monospace, Menlo, monospace;

  --r:  12px;
  --rs: 8px;
  --sombra: 0 1px 2px rgba(47,40,31,.05), 0 4px 14px rgba(47,40,31,.06);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--fonte);
  font-size: 15.5px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Topo ---------- */

.topo {
  background: linear-gradient(160deg, var(--verde) 0%, #0A2E20 100%);
  color: #F3EFE6;
}

.topo-interno {
  max-width: 1160px; margin: 0 auto; padding: 0 20px;
  display: flex; align-items: center; gap: 24px; min-height: 60px; flex-wrap: wrap;
}

.marca {
  font-family: var(--titulo); font-weight: 700; font-size: 17px;
  color: #FFF; text-decoration: none; letter-spacing: -0.01em;
}
.marca span { color: #8FBFA3; font-weight: 400; }

.menu { display: flex; gap: 3px; flex: 1; flex-wrap: wrap; }
.menu a {
  color: #C3D8CB; text-decoration: none; padding: 7px 13px;
  border-radius: 999px; font-size: 14px; font-weight: 500;
  transition: background .15s, color .15s;
}
.menu a:hover { color: #FFF; background: rgba(255,255,255,.09); }
.menu a.ativo { color: var(--verde); background: var(--mint); }

.topo-usuario { font-size: 13px; color: #9CBCA9; display: flex; align-items: center; gap: 14px; }
.topo-usuario a { color: #9CBCA9; }
.topo-usuario a:hover { color: #FFF; }

/* ---------- Estrutura ---------- */

.pagina { max-width: 1160px; margin: 0 auto; padding: 30px 20px 72px; }

h1 { font-family: var(--titulo); font-size: 26px; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 6px; }
h2 { font-size: 18px; font-weight: 600; margin: 36px 0 14px; letter-spacing: -0.01em; }
h3 { font-size: 15.5px; font-weight: 600; margin: 0 0 8px; }
.legenda { color: var(--tinta-suave); font-size: 14.5px; margin: 0 0 26px; }

.cartao {
  background: var(--cartao); border: 1px solid var(--regua);
  border-radius: var(--r); padding: 22px; box-shadow: var(--sombra);
}

/* ---------- Cartões de número ---------- */

.numeros {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px; margin: 0;
}

.numero {
  background: var(--cartao); border: 1px solid var(--regua);
  border-radius: var(--r); padding: 16px 18px; box-shadow: var(--sombra);
  border-top: 3px solid var(--verde-vivo);
}
.numero dt {
  font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--tinta-suave); margin-bottom: 6px; font-weight: 600;
}
.numero dd {
  margin: 0; font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 26px; font-weight: 500; letter-spacing: -.03em;
}
.numero.alerta { border-top-color: var(--terracota); }
.numero.alerta dd { color: var(--terracota); }
.numero.ok { border-top-color: var(--verde-vivo); }

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

.tabela-caixa {
  border: 1px solid var(--regua); border-radius: var(--r);
  overflow-x: auto; background: var(--cartao); box-shadow: var(--sombra);
}

table { width: 100%; border-collapse: collapse; font-size: 14.5px; }

thead th {
  background: var(--regua-suave); color: var(--verde);
  text-align: left; padding: 11px 15px;
  font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
  font-weight: 700; white-space: nowrap;
  border-bottom: 1px solid var(--regua);
}

tbody td { padding: 11px 15px; border-bottom: 1px solid #F2EFE9; vertical-align: top; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: #FCFAF5; }

td.num {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  text-align: right; white-space: nowrap;
}

td a, .legenda a { color: var(--verde-medio); font-weight: 500; }

.caminho { font-size: 12.5px; color: var(--tinta-suave); font-family: var(--mono); }

tfoot td { padding: 12px 15px; border-top: 2px solid var(--verde); background: var(--regua-suave); font-weight: 600; }
td[rowspan] { border-right: 1px solid #F2EFE9; background: #FDFCF8; }

/* ---------- Etiquetas ---------- */

.etiqueta {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .02em; white-space: nowrap;
}
.etiqueta.aprovado  { background: var(--mint);            color: var(--verde); }
.etiqueta.pendente  { background: var(--ambar-claro);     color: #8A6314; }
.etiqueta.arquivado { background: var(--regua-suave);     color: var(--tinta-suave); }
.etiqueta.falha     { background: var(--terracota-claro); color: var(--terracota); }
.etiqueta.info      { background: var(--azul-claro);      color: var(--azul); }

/* ---------- Formulários ---------- */

.busca { display: flex; gap: 9px; margin-bottom: 20px; flex-wrap: wrap; }

.grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 15px; }
.grade label, .entrar label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.grade input, .grade select, .grade textarea { width: 100%; }

input[type=text], input[type=email], input[type=password], input[type=search],
input[type=date], input[type=month], input[type=number], select, textarea {
  font: inherit; padding: 9px 12px; border: 1px solid #CFC9C0;
  border-radius: var(--rs); background: #FFF; color: var(--tinta); min-width: 0;
  transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--verde-medio);
  box-shadow: 0 0 0 3px rgba(36,92,69,.13);
}
button:focus-visible, a:focus-visible { outline: 2px solid var(--verde-medio); outline-offset: 2px; }
.busca input[type=search] { flex: 1; min-width: 210px; }
textarea { font-family: var(--fonte); line-height: 1.6; resize: vertical; }

button, .botao {
  font: inherit; font-weight: 600; padding: 9px 18px;
  border: 1px solid var(--verde); border-radius: var(--rs);
  background: var(--verde); color: #FFF; cursor: pointer;
  text-decoration: none; display: inline-block;
  transition: background .15s, transform .05s;
}
button:hover, .botao:hover { background: var(--verde-medio); }
button:active, .botao:active { transform: translateY(1px); }
.botao.neutro { background: var(--cartao); color: var(--verde); border-color: var(--regua); }
.botao.neutro:hover { background: var(--mint); border-color: var(--verde-medio); }
.botao.perigo { background: var(--terracota); border-color: var(--terracota); }

/* ---------- Entrar ---------- */

.entrar { max-width: 400px; margin: 76px auto; }
.entrar .cartao { padding: 32px; }
.entrar label { margin-top: 16px; }
.entrar input { width: 100%; }
.entrar button { width: 100%; margin-top: 22px; padding: 11px; }

/* ---------- Avisos ---------- */

.aviso {
  padding: 12px 16px; border-radius: var(--rs); font-size: 14.5px;
  margin-bottom: 18px; border-left: 4px solid;
}
.aviso.erro { background: var(--terracota-claro); border-color: var(--terracota); color: #8E2E22; }
.aviso.info { background: var(--azul-claro);      border-color: var(--azul);      color: #275672; }
.aviso.ok   { background: var(--mint);            border-color: var(--verde-vivo); color: var(--verde); }

/* ---------- Detalhe ---------- */

.campo { margin-bottom: 20px; }
.campo dt {
  font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--tinta-suave); margin-bottom: 5px; font-weight: 600;
}
.campo dd { margin: 0; }

.evidencia {
  background: var(--regua-suave); border-left: 4px solid var(--ambar);
  padding: 16px 18px; border-radius: 0 var(--rs) var(--rs) 0;
  font-size: 14.5px; white-space: pre-wrap; max-height: 360px; overflow-y: auto;
}

.enunciado {
  background: var(--cartao); border: 1px solid var(--regua);
  border-left: 4px solid var(--azul); border-radius: 0 var(--r) var(--r) 0;
  padding: 20px 22px; white-space: pre-wrap; font-size: 15px;
  max-height: 420px; overflow-y: auto; box-shadow: var(--sombra);
}

.paginacao { margin-top: 20px; display: flex; gap: 9px; align-items: center; font-size: 14.5px; }

/* ---------- Apontamentos ---------- */

.apontamento {
  border-radius: var(--rs); padding: 12px 15px; margin-bottom: 10px;
  border-left: 4px solid; font-size: 14.5px; background: var(--cartao);
  border-top: 1px solid var(--regua); border-right: 1px solid var(--regua);
  border-bottom: 1px solid var(--regua);
}
.apontamento.erro    { border-left-color: var(--terracota); background: var(--terracota-claro); }
.apontamento.atencao { border-left-color: var(--ambar);     background: var(--ambar-claro); }
.apontamento.info    { border-left-color: var(--azul);      background: var(--azul-claro); }
.apontamento .regra {
  font-family: var(--mono); font-size: 11px; letter-spacing: .04em;
  text-transform: uppercase; opacity: .75; display: block; margin-bottom: 3px;
}

/* ---------- Barra de proporção ---------- */

.barra { background: var(--regua-suave); border-radius: 999px; height: 9px; overflow: hidden; }
.barra > span { display: block; height: 100%; background: var(--verde-vivo); border-radius: 999px; }
.barra.aviso > span { background: var(--ambar); }
.barra.ruim  > span { background: var(--terracota); }

/* ---------- Módulos com cor própria ---------- */

.mod-estoque  .numero { border-top-color: var(--ambar); }
.mod-imob     .numero { border-top-color: var(--azul); }
.mod-exercicio .numero { border-top-color: var(--roxo); }

@media (max-width: 640px) {
  .pagina { padding: 22px 14px 52px; }
  h1 { font-size: 22px; }
  .numero dd { font-size: 22px; }
  thead th, tbody td { padding: 9px 11px; }
  .topo-interno { min-height: 52px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ---------- Bancada de exercício: enunciado sempre à vista ---------- */

.bancada {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 400px);
  gap: 24px;
  align-items: start;
}

.bancada-trabalho { min-width: 0; }

.bancada-enunciado {
  position: sticky;
  /* Abaixo da barra de ações, que é fixa no topo da coluna. */
  top: 74px;
  max-height: calc(100vh - 90px);
  display: flex;
  flex-direction: column;
}

.bancada-enunciado h2 { margin-top: 0; }

.bancada-enunciado .enunciado {
  flex: 1;
  max-height: none;
  overflow-y: auto;
  font-size: 14px;
  line-height: 1.65;
}

.enunciado-topo {
  display: flex; justify-content: space-between; align-items: center;
  gap: 10px; margin-bottom: 10px;
}

/* Realce de números e datas dentro do enunciado, para achar rápido */
.enunciado mark {
  background: var(--ambar-claro);
  color: inherit;
  padding: 0 2px;
  border-radius: 3px;
}

@media (max-width: 1000px) {
  .bancada { grid-template-columns: 1fr; }
  .bancada-enunciado {
    position: static;
    max-height: none;
    order: -1;   /* no celular, enunciado antes do formulário */
  }
  .bancada-enunciado .enunciado { max-height: 46vh; }
}


/* ---------- Barra de ações do exercício, sempre à mão ---------- */

.barra-acoes {
  position: sticky;
  top: 0;
  z-index: 40;
  margin: 0 0 18px;
  padding: 10px 0;
  background: var(--papel);
  border-bottom: 1px solid var(--regua);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

/* A barra encosta nas bordas da coluna sem deixar o conteúdo aparecer
   por trás enquanto rola. */
.barra-acoes::before {
  content: "";
  position: absolute;
  inset: 0 -12px;
  background: var(--papel);
  z-index: -1;
}

.barra-acoes .botao { margin: 0; }

/* Âncora de seção não pode parar debaixo da barra fixa: sem isso o
   título "Balanço Patrimonial" fica escondido atrás dela ao chegar. */
h2[id], h3[id] { scroll-margin-top: 76px; }

/* ---------- Painel de módulos do exercício ---------- */

/* Vinte botões numa lista plana não comunicam estrutura. Agrupados por
   área, o painel passa a dizer o que o sistema faz — e onde não faz. */
.modulos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 14px;
  margin-bottom: 26px;
}

.modulo h3 { margin: 0 0 2px; }
.modulo .legenda { margin: 0 0 12px; font-size: 13.5px; }
.modulo p:last-child { margin: 0; display: flex; flex-wrap: wrap; gap: 7px; }
.modulo .botao { margin: 0; }

/* Módulo previsto e não construído: fica visível, sem fingir que existe. */
.modulo-vazio { border-style: dashed; background: transparent; }
.modulo-vazio h3 { color: var(--tinta-suave); }

/* ---------- Variações gerenciais ---------- */

/* Favorável e desfavorável, não positivo e negativo: o sinal já foi
   ajustado no cálculo, porque receita a mais e custo a mais têm efeitos
   opostos sobre o resultado. */
.fav    { color: var(--verde-vivo); }
.desfav { color: var(--terracota); }

/* ---------- Mapa de transmissão do mercado ---------- */

/* A direção é sobre o valor da empresa, não sobre o parâmetro. Cores
   distintas para +, − e ±, sendo o ± deliberadamente neutro: ele não é
   um meio-termo, é a informação de que o sinal depende do caso. */
.dir-mais, .dir-menos, .dir-ambos {
  display: inline-block;
  min-width: 22px;
  padding: 1px 6px;
  border-radius: 999px;
  font-family: var(--mono);
  font-weight: 600;
  font-size: 13px;
  text-align: center;
}
.dir-mais  { background: var(--mint);            color: var(--verde); }
.dir-menos { background: var(--terracota-claro); color: var(--terracota); }
.dir-ambos { background: var(--ambar-claro);     color: var(--ambar); }

/* ---------- Item do enunciado ---------- */

/* O número que liga o lançamento ao fato narrado no enunciado. Aparece
   no diário e como referência ao lado dos valores nos razonetes, do
   mesmo modo que o gabarito do professor numera as operações. */
.marca-item {
  display: inline-block;
  min-width: 22px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--azul-claro);
  color: var(--azul);
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 500;
  text-align: center;
}

.col-item { width: 1%; white-space: nowrap; }

/* ---------- Filtro de linhas na barra de ações ---------- */

.busca-pagina {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

#filtro-pagina {
  width: 190px;
  padding: 7px 11px;
  font: inherit;
  font-size: 13.5px;
  border: 1px solid var(--regua);
  border-radius: var(--r);
  background: var(--cartao);
  color: var(--tinta);
}

#filtro-pagina:focus {
  outline: none;
  border-color: var(--verde-vivo);
  box-shadow: 0 0 0 2px var(--mint);
}

.filtro-conta {
  font-size: 12px;
  color: var(--tinta-suave);
  white-space: nowrap;
}

.filtro-conta.vazio { color: var(--terracota); }

@media (max-width: 700px) {
  /* No celular o filtro ganha a primeira linha inteira: é o que mais se
     usa ali, e digitar num campo estreito entre botões é ruim. */
  .busca-pagina {
    order: -1;
    width: 100%;
  }
  #filtro-pagina { flex: 1 1 auto; width: auto; font-size: 16px; }
}

/* ---------- Calculadora flutuante ---------- */

#pop-calc {
  position: fixed;
  z-index: 86;
  width: 268px;
  background: var(--cartao);
  border: 1px solid var(--regua);
  border-radius: var(--r);
  box-shadow: 0 14px 40px rgba(47, 40, 31, .26);
  overflow: hidden;
}

#pop-calc[hidden] { display: none; }

/* A fita: o histórico das contas, que é o que permite refazer o
   raciocínio e conferir de onde saiu o número. */
.calc-fita {
  max-height: 92px;
  overflow-y: auto;
  padding: 8px 12px;
  background: var(--regua-suave);
  border-bottom: 1px solid var(--regua);
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--tinta-suave);
  line-height: 1.7;
}
.calc-fita:empty { display: none; }
.calc-fita strong { color: var(--tinta); }

.calc-visor {
  padding: 10px 14px 12px;
  text-align: right;
  border-bottom: 1px solid var(--regua);
}

.calc-pendente {
  display: block;
  min-height: 14px;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--tinta-suave);
}

.calc-numero {
  font-family: var(--mono);
  font-size: 24px;
  font-weight: 500;
  color: var(--tinta);
  word-break: break-all;
}

.calc-teclas {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--regua);
}

.calc-teclas button {
  border: 0;
  background: var(--cartao);
  padding: 13px 0;
  font: inherit;
  font-size: 16px;
  color: var(--tinta);
  cursor: pointer;
}
.calc-teclas button:hover  { background: var(--regua-suave); }
.calc-teclas button:active { background: var(--mint); }

.calc-teclas .t-aux   { background: var(--regua-suave); font-size: 14px; color: var(--tinta-suave); }
.calc-teclas .t-op    { background: var(--regua-suave); color: var(--verde-medio); font-weight: 600; }
.calc-teclas .t-igual { background: var(--verde); color: #fff; font-weight: 600; }
.calc-teclas .t-igual:hover { background: var(--verde-medio); }
.calc-teclas .t-zero  { grid-column: span 2; }

.calc-rodape {
  display: flex;
  gap: 6px;
  padding: 9px 10px;
  border-top: 1px solid var(--regua);
  background: var(--regua-suave);
}
.calc-rodape .botao { flex: 1; padding: 6px 4px; font-size: 12px; text-align: center; }

@media (max-width: 700px) {
  #pop-calc {
    left: auto !important;
    right: 8px;
    top: auto !important;
    bottom: 8px;
    width: min(268px, calc(100vw - 16px));
  }
  .calc-teclas button { padding: 15px 0; font-size: 17px; }
}

/* ---------- Enunciado: janela solta ---------- */

/* Não é modal e não tem véu: o formulário atrás continua utilizável, que é
   o ponto — ler o enunciado e preencher ao mesmo tempo. */

#pop-enunciado {
  position: fixed;
  z-index: 85;
  display: flex;
  flex-direction: column;
  min-width: 260px;
  min-height: 140px;
  background: var(--cartao);
  border: 1px solid var(--regua);
  border-radius: var(--r);
  box-shadow: 0 14px 40px rgba(47, 40, 31, .26);
  overflow: hidden;
  resize: both;
}

#pop-enunciado[hidden] { display: none; }

.pop-topo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  background: var(--regua-suave);
  border-bottom: 1px solid var(--regua);
  cursor: move;
  user-select: none;
  flex: 0 0 auto;
}

.pop-dica {
  font-size: 11px;
  color: var(--tinta-suave);
  margin-left: auto;
  margin-right: 4px;
}

.pop-x {
  border: 0; background: transparent; cursor: pointer;
  font-size: 20px; line-height: 1; padding: 0 4px;
  color: var(--tinta-suave);
}
.pop-x:hover { color: var(--tinta); }

.pop-corpo {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 14px 16px;
  white-space: pre-wrap;
  font-size: 14.5px;
  line-height: 1.6;
}

/* O sublinhado pontilhado do glossário é discreto de propósito, para não
   poluir a leitura. O rodapé avisa que ele existe — sem isso o recurso
   passa despercebido por quem não sabe procurar. */
.pop-rodape {
  flex: 0 0 auto;
  padding: 7px 14px;
  border-top: 1px solid var(--regua);
  background: var(--regua-suave);
  font-size: 11.5px;
  color: var(--tinta-suave);
}

.termo-exemplo { border-bottom: 1.5px dotted var(--verde-medio); }

/* Botão da barra marcado enquanto a janela está aberta. */
.barra-acoes .botao.ativo { box-shadow: inset 0 0 0 2px var(--verde-vivo); }

@media (max-width: 700px) {
  /* Em tela estreita a janela ocupa a largura toda, embaixo, para não
     tapar o campo que está sendo preenchido. */
  #pop-enunciado {
    left: 8px !important;
    width: calc(100vw - 16px) !important;
    top: auto !important;
    bottom: 8px;
    height: 46vh !important;
    resize: none;
  }
  .pop-dica { display: none; }
}

/* ---------- Glossário interativo ---------- */

.termo-glossario {
  border-bottom: 1.5px dotted var(--verde-medio);
  cursor: help;
  color: inherit;
}
.termo-glossario:hover { background: var(--mint); }

#painel-conceito {
  position: fixed;
  /* Acima do enunciado flutuante (80) e do véu (70): o glossário é
     clicável de dentro do enunciado, e a explicação não pode nascer
     atrás dele. */
  z-index: 90;
  right: 18px; bottom: 18px;
  width: min(430px, calc(100vw - 36px));
  max-height: min(66vh, 620px);
  background: var(--cartao);
  border: 1px solid var(--regua);
  border-radius: var(--r);
  box-shadow: 0 8px 34px rgba(47,40,31,.20);
  z-index: 60;
  display: flex; flex-direction: column;
  overflow: hidden;
}

.pc-topo {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 13px 16px;
  background: var(--verde); color: #fff;
}
.pc-topo strong { font-size: 15px; line-height: 1.35; }
#pc-fechar {
  background: transparent; border: none; color: #fff;
  font-size: 22px; line-height: 1; padding: 0 4px; cursor: pointer;
}
#pc-fechar:hover { background: transparent; opacity: .75; }

#pc-corpo { padding: 16px; overflow-y: auto; font-size: 14px; }

.pc-campos { margin: 0; }
.pc-campos dt {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--tinta-suave); font-weight: 700; margin-top: 12px;
}
.pc-campos dt:first-child { margin-top: 0; }
.pc-campos dd { margin: 4px 0 0; line-height: 1.55; }

.pc-meta {
  font-size: 12.5px; color: var(--tinta-suave);
  margin: 12px 0 0; font-family: var(--mono);
}
.pc-rel { color: var(--verde-medio); }

@media (max-width: 640px) {
  #painel-conceito { right: 10px; left: 10px; bottom: 10px; width: auto; max-height: 62vh; }

.macro-grafico { position: relative; width: 100%; height: 320px; }
 
.macro-chave {
  display: flex; flex-wrap: wrap; gap: 18px;
  font-size: 12.5px; color: var(--tinta-suave); margin: 0 0 14px;
}
.macro-chave .mk { display: inline-block; margin-right: 6px; vertical-align: middle; }
/* Forma além da cor: num módulo cujo assunto é separar confirmação de
   coincidência, matiz sozinho não deveria carregar o significado. */
.mk-sup { width: 10px; height: 10px; border-radius: 50%; background: var(--verde-vivo); }
.mk-con { width: 0; height: 0; border-left: 5px solid transparent;
          border-right: 5px solid transparent; border-bottom: 9px solid var(--terracota); }
.mk-ind { width: 10px; height: 10px; background: var(--tinta-suave); }
 
.macro-split {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 18px; margin-bottom: 8px;
}
.macro-split .campo:last-of-type { margin-bottom: 0; }
 
.macro-fatores { list-style: none; padding: 0; margin: 0; }
.macro-fatores li {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 7px 0; border-bottom: 1px solid var(--regua-suave); font-size: 14px;
}
.macro-fatores li:last-child { border-bottom: none; }
 
.macro-dir-pos    { background: var(--mint);            color: var(--verde); }
.macro-dir-neg    { background: var(--terracota-claro); color: var(--terracota); }
.macro-dir-neutro { background: var(--regua-suave);     color: var(--tinta-suave); }
 
/* Ambíguo fica FORA da escala, hachurado. Pintado como tom intermediário
   entre o verde e o terracota, ficaria idêntico a neutro — e os dois
   afirmam coisas opostas: neutro diz "não afeta", ambíguo diz "não
   sabemos dizer". São poucos casos, e é por isso que precisam destoar. */
.macro-dir-ambiguo {
  color: var(--tinta-suave); border: 1px dashed #B9B2A6;
  background: repeating-linear-gradient(45deg,
    var(--regua-suave), var(--regua-suave) 4px, #E6E0D4 4px, #E6E0D4 8px);
/* ---------- Provisões e contingências (CPC 25) ---------- */

/* A referência ao item da norma acompanha cada afirmação. Não é enfeite:
   é o que permite ao aluno conferir a regra na fonte em vez de decorar
   o resultado desta tela. */
.norma-ref {
  display: inline-block;
  font-size: 12px;
  color: var(--fraco);
  font-variant-numeric: tabular-nums;
}

/* Os três desfechos da árvore recebem borda esquerda distinta. A cor
   carrega o sentido contábil, não um juízo de bom e ruim: reconhecer
   entra no balanço, divulgar fica em nota, e o terceiro não gera registro. */
.desfecho-reconhecer { border-left: 4px solid var(--verde-vivo); }
.desfecho-divulgar   { border-left: 4px solid var(--ambar, #C89A3C); }
.desfecho-nada       { border-left: 4px solid var(--fraco); }
    
}