/* Elementos de marca, ajustes de paleta e tipografia. Carregado depois de portal.css. */
/* =====================================================================
   Elementos da marca M&O
   ===================================================================== */
.lateral { background: linear-gradient(180deg, var(--noite) 0%, var(--noite-2) 100%); border-right: 1px solid var(--lateral-linha); }
.marca-logo { display: block; margin: 0 auto var(--e5); text-align: center; }
.marca-logo img { width: 100%; max-width: 200px; height: auto; display: block; margin: 0 auto; filter: drop-shadow(0 0 18px rgba(0, 144, 240, .25)); }
.nav a[aria-current="page"] { background: var(--lateral-real); border-left-color: var(--ciano); }
.nav a:hover { background: var(--lateral-real); }
.nav .contagem { background: var(--ciano); color: var(--lateral); font-weight: 700; }
.nav-grupo .rotulo { color: var(--ciano); }
.busca-lateral input { background: var(--lateral-real); border-color: var(--lateral-linha); }
.lateral .empresa-ativa { border-color: var(--lateral-linha); background: rgba(0, 144, 240, .08); }
.lateral .empresa-ativa small { color: var(--ciano); }

h1, h2 { font-family: var(--titulo); font-weight: 600; letter-spacing: 0; }
h1 { font-weight: 700; }
.sobretitulo { color: var(--acento); letter-spacing: .18em; }
.card-valor, .destaque, .contador-nome, .agenda .dia strong, .resumo-nota .total { font-family: var(--titulo); }
.card-valor { font-weight: 700; }

.botao.primario { background: linear-gradient(135deg, #004c9c 0%, #005fc2 100%); border-color: transparent; box-shadow: var(--brilho); }
.botao.primario:hover { filter: brightness(1.08); }
@media (prefers-color-scheme: dark) {
  .botao.primario { background: linear-gradient(135deg, var(--eletrico) 0%, var(--ciano) 100%); color: var(--noite); }
}
.selo, .semaforo { border-radius: 999px; padding: 2px var(--e3); }
.painel-destaque { border-top: 0; position: relative; overflow: hidden; }
.painel-destaque::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, var(--eletrico), var(--ciano)); }
.cabecalho-pagina { border-bottom: 1px solid var(--regua); position: relative; }
.cabecalho-pagina::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 96px; height: 3px; background: linear-gradient(90deg, var(--eletrico), var(--ciano)); border-radius: 999px; }
.tabela th { border-bottom: 2px solid var(--regua-forte); }
.tabela tfoot td { border-top: 2px solid var(--regua-forte); }
.grafico .barra-a { fill: url(#grad-marca); }
.legenda .la { background: linear-gradient(180deg, var(--ciano), var(--eletrico)); }
.medidor span { background: linear-gradient(90deg, var(--eletrico), var(--ciano)); }
.calendario .tem { background: var(--acento-suave); border-color: var(--eletrico); }
.calendario .tem b { color: var(--texto); }
.agenda .dia { border-color: var(--regua-forte); }

/* faixa de boas-vindas (cartaz da marca) */
.faixa-marca {
  position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--e5); align-items: end;
  background: radial-gradient(120% 140% at 85% 0%, #003a7a 0%, var(--noite-2) 45%, var(--noite) 100%);
  color: var(--lateral-texto); border-radius: var(--raio); padding: var(--e6) var(--e6) 0; margin-bottom: var(--e5); box-shadow: var(--sombra-2);
  min-height: 220px;
}
.faixa-marca::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background: url("/static/marca/barras.svg") right 18% bottom / 520px auto no-repeat;
}
.faixa-marca > * { position: relative; }
.faixa-marca .texto-marca { padding-bottom: var(--e6); }
.faixa-marca h1 { color: var(--lateral-texto); font-size: var(--t-titulo); text-transform: uppercase; letter-spacing: .01em; line-height: 1.1; max-width: 26ch; }
.faixa-marca h1 em { font-style: normal; color: var(--ciano); text-shadow: 0 0 22px rgba(0, 200, 240, .55); }
.faixa-marca .sub { color: var(--lateral-2); margin-top: var(--e3); }
.faixa-marca .sobretitulo { color: var(--ciano); }
.faixa-marca .acoes { margin-top: var(--e5); }
.faixa-marca .botao:not(.primario) { background: rgba(228, 244, 255, .08); color: var(--lateral-texto); border-color: rgba(228, 244, 255, .3); }
.faixa-marca .botao:not(.primario):hover { background: rgba(228, 244, 255, .16); }
.faixa-marca .botao.primario { background: linear-gradient(135deg, var(--eletrico), var(--ciano)); color: var(--noite); }
.faixa-marca .regua-ciano { width: 72px; height: 3px; background: var(--ciano); border-radius: 999px; margin: var(--e3) 0; }
.personagem { align-self: end; max-height: 260px; width: auto; display: block; filter: drop-shadow(0 10px 30px rgba(0, 0, 0, .45)); }
@media (max-width: 860px) { .faixa-marca { grid-template-columns: 1fr; padding: var(--e5) var(--e5) 0; } .personagem { max-height: 200px; justify-self: end; } .faixa-marca h1 { font-size: var(--t-gg); } }

/* tela de acesso com a marca */
.acesso-capa { background: radial-gradient(120% 120% at 80% 10%, #003a7a 0%, var(--noite-2) 45%, var(--noite) 100%); position: relative; overflow: hidden; }
.acesso-capa::after { content: ""; position: absolute; inset: auto 0 0 0; height: 55%; background: url("/static/marca/barras.svg") right -40px bottom / 560px auto no-repeat; opacity: .35; pointer-events: none; }
.acesso-capa > * { position: relative; z-index: 1; }
.acesso-capa h1 { color: var(--lateral-texto); text-transform: uppercase; max-width: 16ch; }
.acesso-capa h1 em { font-style: normal; color: var(--ciano); text-shadow: 0 0 22px rgba(0, 200, 240, .55); }
.acesso-capa .logo-capa { width: min(300px, 70%); height: auto; filter: drop-shadow(0 0 24px rgba(0, 144, 240, .35)); }
.acesso-capa li svg { color: var(--ciano); }
.acesso-capa .personagem { position: absolute; right: 0; bottom: 0; max-height: 62%; z-index: 0; opacity: .95; }

.medidor-svg { width: 120px; height: 8px; display: block; }
.medidor-svg .trilho { fill: var(--fundo-2); }
.medidor-svg .nivel { fill: var(--eletrico); }
.medidor-svg.medio .nivel { fill: var(--atencao); }
.medidor-svg.baixo .nivel { fill: var(--erro); }

/* o fundo azul-noite da imagem da logo some sobre fundo escuro: so o brilho fica */
.marca-logo img, .acesso-capa .logo-capa { mix-blend-mode: screen; }

/* um peso forte so (600) e micro-rotulos sempre em 700: menos combinacoes de fonte */
strong, b, th { font-weight: 600; }
.selo, .semaforo, .card-rotulo, .rotulo, .sobretitulo, .tabela th, .contador, .nav .contagem { font-weight: 700; }

.filtro label.check { display: flex; flex-direction: row; align-items: center; gap: var(--e2); text-transform: none; letter-spacing: 0; font-size: var(--t-p); min-height: 40px; }
.zona-envio input[type="file"] { max-width: 420px; margin: var(--e2) auto 0; background: var(--fundo-1); }

details.painel > summary h2 { display: inline-flex; gap: var(--e2); align-items: center; margin: 0; color: var(--acento); }
details.painel[open] > summary { margin-bottom: var(--e4); }
.formulario.campos-3 > button, .formulario.campos-3 > p { grid-column: 1 / -1; justify-self: start; }

.atalhos { display: flex; flex-wrap: wrap; gap: var(--e2); margin-bottom: var(--e4); }

/* =====================================================================
   Paleta enxuta de texto: tinta, tinta-2 e acento (e o gelo/ciano da marca
   sobre o escuro). Estado NAO muda a cor do texto: o significado vem do fundo,
   da borda e do icone colorido + a palavra. Isso tambem ajuda o daltonico.
   ===================================================================== */
.selo, .semaforo, .flash, .card-alerta .card-valor, .card-alerta .card-rotulo,
.observacao, .agenda .atrasado .dia, .agenda .atrasado .dia small,
.calendario .vencido b, .barra-lote, .faixa-homologacao, .botao.perigo { color: var(--texto); }
.selo-ok, .semaforo-verde { border-color: var(--ok); }
.selo-aviso, .semaforo-amarelo { border-color: var(--atencao); }
.selo-erro, .semaforo-vermelho { border-color: var(--erro); }
.selo-ok svg, .flash-ok svg { color: var(--ok); }
.selo-aviso svg, .faixa-homologacao svg { color: var(--atencao); }
.selo-erro svg, .flash-erro svg, .card-alerta svg, .observacao svg, .agenda .atrasado svg { color: var(--erro); }
.semaforo-verde::before { background: var(--ok); }
.semaforo-amarelo::before { background: var(--atencao); }
.semaforo-vermelho::before { background: var(--erro); }
.flash-ok { border-color: var(--ok); }
.flash-erro { border-color: var(--erro); }
.botao.perigo { border-color: var(--erro); border-left-width: 4px; }
.agenda .atrasado .dia { border-width: 2px; }

/* superficie escura: gelo para tudo, ciano para o destaque */
.lateral, .lateral a, .lateral-pe .usuario, .lateral .empresa-ativa, .busca-lateral input,
.faixa-marca .sub, .acesso-capa p, .marca-nome small { color: var(--lateral-texto); }
.busca-lateral input::placeholder { color: var(--lateral-texto); opacity: .7; }

/* oito combinacoes de fonte, no maximo */
.formulario label, .filtro label { font-weight: 400; }
.rodape, .aviso-item small, .calendario .cab, .agenda .dia small, .botao.pequeno, .legenda,
.mensagem time { font-size: var(--t-micro); font-weight: 700; }
.tabela.compacta td { font-size: var(--t-p); font-weight: 400; }
.botao { font-size: var(--t-base); font-weight: 600; }
.botao.pequeno { font-size: var(--t-micro); }
.sub, .ajuda, .card-nota, .aviso-item span, .dados dt, .migalha, .previa { font-size: var(--t-p); font-weight: 400; }

/* fundo claro: o azul da marca fica no sublinhado, nas barras e nos botoes;
   o texto e sempre tinta (dois tons). No escuro, o ciano faz o destaque. */
@media (prefers-color-scheme: light) {
  a { color: var(--texto); text-decoration-color: var(--acento); text-decoration-thickness: 2px; }
  .sobretitulo, .detalhe summary, details.painel > summary h2, .link { color: var(--texto); }
  .sobretitulo { border-left: 3px solid var(--acento); padding-left: var(--e2); }
}
.faixa-marca .sobretitulo { border-left: 0; padding-left: 0; color: var(--ciano); }
.grafico text { font: 400 13px var(--sans); }
.calendario .d b, .calendario .tem b, .calendario .vencido b { font-size: var(--t-micro); font-weight: 700; }
.lateral-pe .usuario, .marca-nome small, .lateral .empresa-ativa small { font-weight: 700; font-size: var(--t-micro); }
/* espacamento so na escala: sem margem automatica, sem 2px */
.nav a > span:not(.contagem) { flex: 1; white-space: nowrap; }
.nav .contagem { margin-left: 0; }
.selo, .semaforo { padding: var(--e1) var(--e3); }
.mensagem time { margin-left: 0; }
.mensagem header { justify-content: space-between; }

/* ultimas fusoes de tipografia: um peso por tamanho de titulo, h3 no corpo */
.destaque, .contador-nome, .resumo-nota .total { font-weight: 700; }
h3 { font-family: var(--sans); font-size: var(--t-base); font-weight: 600; }
code { font-family: var(--sans); letter-spacing: .02em; }
.sub strong, .ajuda strong, .migalha a, .resumo-nota .linha strong { font-weight: 400; }
.tabela tfoot td { font-weight: 600; }
.filtro label { font-weight: 700; }
.filtro label.check { font-weight: 400; font-size: var(--t-p); }

.vazio-ilustrado { display: flex; gap: var(--e5); align-items: center; }
.vazio-ilustrado img { max-height: 160px; width: auto; }

/* personagem da campanha M&O, recortado com fundo transparente.
   O braco direito sai da arte original: essa borda some em degrade. */
.faixa-marca { grid-template-columns: minmax(0, 1fr) 280px; }
.faixa-marca .personagem {
  width: 280px; height: auto; max-height: none; align-self: end; margin-top: calc(var(--e6) * -1);
  transform: scaleX(-1);
  -webkit-mask-image: linear-gradient(90deg, #000 86%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 86%, transparent 100%);
  filter: drop-shadow(0 0 24px rgba(0, 200, 240, .35));
}
.acesso-capa .personagem {
  width: min(340px, 46%); max-height: 78%; height: auto; right: 0; bottom: 0; opacity: 1; object-fit: contain; object-position: bottom right;
  -webkit-mask-image: linear-gradient(90deg, #000 86%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 86%, transparent 100%);
  filter: drop-shadow(0 0 28px rgba(0, 200, 240, .4));
}
@media (max-width: 860px) { .faixa-marca { grid-template-columns: 1fr; } .faixa-marca .personagem { display: none; } }
.vazio-ilustrado img { width: 120px; height: 120px; max-height: none; border-radius: 50%; filter: drop-shadow(0 0 16px rgba(0, 200, 240, .35)); }

/* Loja: vitrine de servicos extras do escritorio */
.vitrine { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e4); margin-bottom: var(--e5); }
@media (max-width: 1100px) { .vitrine { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .vitrine { grid-template-columns: 1fr; } }
.produto { display: flex; flex-direction: column; gap: var(--e3); background: var(--fundo-1); border: 1px solid var(--regua); border-radius: var(--raio); padding: var(--e5); box-shadow: var(--sombra-1); }
.produto-destaque { border-color: var(--eletrico); box-shadow: var(--brilho); }
.produto h3 { font: 600 var(--t-g)/1.25 var(--titulo); }
.produto .preco { font: 600 var(--t-gg)/1.1 var(--titulo); color: var(--texto); }
.produto .preco small { font: 400 var(--t-p) var(--sans); color: var(--texto-2); }
.produto form { flex: 1; display: grid; align-content: end; gap: var(--e2); }
.categoria-titulo { font: 600 var(--t-micro)/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--texto-2); margin: var(--e5) 0 var(--e3); }
.lista-linhas li.bloco { display: block; }
.lista-linhas li.bloco form { margin-top: var(--e3); }

/* Tela de entrada: capa em duas colunas (texto | personagem em pe) e o
   formulario num cartao. Na tela larga a capa ocupa mais que a metade. */
.tela-acesso { grid-template-columns: minmax(0, 1.3fr) minmax(380px, 1fr); }
.acesso-capa {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 1fr auto;
  column-gap: var(--e5); padding: var(--e7) 0 0 var(--e7);
}
.acesso-capa .logo-capa { grid-column: 1; grid-row: 1; width: min(220px, 60%); }
.acesso-capa > div { grid-column: 1; grid-row: 2; align-self: center; padding-right: var(--e4); }
.acesso-capa h1 { font-size: clamp(var(--t-gg), 3.2vw, 48px); line-height: 1.05; max-width: 13ch; margin: 0 0 var(--e5); }
.acesso-capa p { max-width: 38ch; }
.acesso-capa ul { grid-column: 1; grid-row: 3; padding-bottom: var(--e7); }
.acesso-capa .personagem {
  grid-column: 2; grid-row: 1 / 4; align-self: end; justify-self: end;
  position: relative; width: auto; height: clamp(420px, 86vh, 820px); max-height: none;
}
.acesso-capa::after { height: 70%; background-size: 720px auto; opacity: .28; }
.acesso-folha { background: radial-gradient(90% 70% at 50% 0%, var(--acento-tinta) 0%, var(--fundo-0) 70%); }
.cartao-acesso {
  width: min(440px, 100%); background: var(--fundo-1); border: 1px solid var(--regua);
  border-top: 3px solid var(--ciano); border-radius: var(--raio); box-shadow: var(--sombra-1);
  padding: var(--e7) var(--e6);
}
@media (max-width: 1100px) {
  .acesso-capa { grid-template-columns: minmax(0, 1fr); padding: var(--e6); }
  .acesso-capa .personagem { display: none; }
}
@media (max-width: 860px) {
  .tela-acesso { grid-template-columns: 1fr; }
  .acesso-capa { grid-template-rows: auto auto; row-gap: var(--e4); }
  .acesso-capa h1 { font-size: var(--t-gg); }
  .cartao-acesso { padding: var(--e6) var(--e4); }
}
/* ajuste fino da capa: coluna de texto com largura garantida e a foto do
   personagem com as bordas de cima e da esquerda esmaecidas (sem retangulo) */
@media (min-width: 1101px) { .acesso-capa { grid-template-columns: minmax(440px, 1fr) auto; } }
@media (max-width: 1100px) { .acesso-capa .logo-capa { width: min(160px, 45%); } }
.acesso-capa h1 { font-size: clamp(var(--t-gg), 2.6vw, 44px); max-width: 15ch; }
.acesso-capa .personagem {
  height: clamp(420px, 80vh, 760px); margin-left: calc(-1 * var(--e7));
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%), linear-gradient(180deg, transparent 0, #000 14%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0, #000 22%), linear-gradient(180deg, transparent 0, #000 14%);
  mask-composite: intersect;
  filter: none;
}

/* Tela de entrada com a arte da campanha (capa-entrada.webp): a imagem ja traz
   logo, titulo e vantagens; o formulario segue o mesmo desenho. */
.acesso-arte { display: block; padding: 0; background: var(--noite); }
.acesso-arte::after { display: none; }
.acesso-arte .capa-arte { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
/* Coluna da arte no tamanho exato da imagem (984x941) na altura da tela: nada cortado. */
.tela-acesso { grid-template-columns: minmax(0, calc(100vh * 1.046)) minmax(440px, 1fr); }
.cartao-acesso { border-top-width: 1px; border-top-color: var(--regua); padding: var(--e7) var(--e6); box-shadow: var(--sombra-1); }
.entrada { position: relative; }
.entrada h1 { font-size: var(--t-gg); margin: 0 0 var(--e2); }
.entrada .sub { max-width: 34ch; }
.selo-seguro { position: absolute; top: 0; right: 0; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--acento-tinta); color: var(--acento); }
.selo-seguro svg { width: 22px; height: 22px; }
.campo-icone { position: relative; display: block; }
.campo-icone > svg { position: absolute; left: var(--e3); top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: var(--texto-2); pointer-events: none; }
.campo-icone input { padding-left: var(--e7); }
.campo-icone input[type="password"], .campo-icone input.mostrando { padding-right: var(--e7); }
.ver-senha { position: absolute; right: var(--e2); top: 50%; transform: translateY(-50%); background: none; border: 0; padding: var(--e1); color: var(--texto-2); cursor: pointer; min-height: 32px; }
.ver-senha svg { width: 20px; height: 20px; }
.linha-entrada { display: flex; justify-content: space-between; align-items: center; gap: var(--e3); flex-wrap: wrap; }
.linha-entrada a { color: var(--acento); font-weight: 600; }
.entrada .botao.largo { display: flex; justify-content: center; align-items: center; gap: var(--e2); min-height: 48px; font-size: var(--t-base); }
.entrada-ajuda { border-top: 1px solid var(--regua); margin-top: var(--e5); padding-top: var(--e5); text-align: center; color: var(--texto); display: flex; justify-content: center; align-items: center; gap: var(--e2); flex-wrap: wrap; }
.entrada-ajuda a { color: var(--acento); font-weight: 600; }
.entrada-selo { border-top: 1px solid var(--regua); margin-top: var(--e4); padding-top: var(--e4); text-align: center; color: var(--texto-2); font-size: var(--t-p); display: flex; justify-content: center; align-items: center; gap: var(--e2); }
.entrada-ajuda svg, .entrada-selo svg { width: 18px; height: 18px; }
.passos-ajuda { display: grid; gap: var(--e3); padding-left: var(--e5); margin: var(--e4) 0 var(--e5); }
@media (max-width: 1100px) {
  .tela-acesso { grid-template-columns: 1fr; }
  .acesso-arte { max-height: 340px; overflow: hidden; }
  .acesso-arte .capa-arte { object-position: left top; }
}
@media (max-width: 860px) { .acesso-arte { max-height: 260px; } }

/* Campo de arquivo: o botao nativo cinza vira um botao da marca. */
input[type="file"] { color: var(--texto-2); font-size: var(--t-p); cursor: pointer; }
input[type="file"]::file-selector-button {
  margin-right: var(--e3); padding: var(--e2) var(--e4); border: 1px solid var(--acento); border-radius: 999px;
  background: var(--acento-tinta); color: var(--acento); font: inherit; font-weight: 600; cursor: pointer;
  transition: background .15s, color .15s;
}
input[type="file"]:hover::file-selector-button { background: var(--acento); color: #fff; }
input[type="file"]:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

/* Varios botoes no cabecalho da pagina (Impostos: agenda + CSV). */
.acoes-cabecalho { display: flex; flex-wrap: wrap; gap: var(--e2); justify-content: flex-end; }

/* Prazo de resposta do chamado (1 dia util). */
.prazo-ok, .prazo-vencido { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }
.prazo-ok { color: var(--acento); }
.prazo-vencido { color: var(--erro); }
.prazo-ok svg, .prazo-vencido svg { width: 14px; height: 14px; }

/* Andamento dos documentos do mes (largura por classe: a CSP proibe style inline). */
.progresso-mes { display: grid; gap: var(--e2); margin: 0 0 var(--e5); padding: var(--e4) var(--e5); background: var(--fundo-1); border: 1px solid var(--regua); border-radius: var(--raio-2, 14px); box-shadow: var(--sombra-1); }
.progresso-texto { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e2); }
.progresso-trilho { height: 10px; border-radius: 999px; background: var(--acento-tinta); overflow: hidden; }
.progresso-trilho span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--eletrico), var(--ciano)); }
.progresso-pct-0 { width: 0%; }
.progresso-pct-10 { width: 10%; }
.progresso-pct-20 { width: 20%; }
.progresso-pct-30 { width: 30%; }
.progresso-pct-40 { width: 40%; }
.progresso-pct-50 { width: 50%; }
.progresso-pct-60 { width: 60%; }
.progresso-pct-70 { width: 70%; }
.progresso-pct-80 { width: 80%; }
.progresso-pct-90 { width: 90%; }
.progresso-pct-100 { width: 100%; }

/* Guia: pagar sem baixar o PDF (PIX e linha digitavel). */
.pagar-rapido { margin-top: var(--e5); padding: var(--e4); border-radius: 14px; background: var(--acento-tinta); border: 1px solid var(--acento-suave); }
.pagar-rapido h2 { margin-top: 0; }
.copiar-linha { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); margin-bottom: var(--e3); }
.copiar-linha code { flex: 1 1 260px; min-width: 0; overflow-wrap: anywhere; padding: var(--e2) var(--e3); background: var(--fundo-1); border: 1px solid var(--regua); border-radius: 10px; font-size: var(--t-p); }

/* Meus numeros: limite do regime e certidoes. */
.limite-regime { display: grid; gap: var(--e3); }
.limite-regime h2 { margin: 0; }
.limite-numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--e4); }
.limite-numeros > div { display: grid; gap: 2px; }
.limite-alerta { border-color: var(--erro); box-shadow: 0 0 0 1px var(--erro), var(--sombra-1); }
.limite-alerta .progresso-trilho span { background: linear-gradient(90deg, #f2a33a, var(--erro)); }
.aviso-limite { display: flex; gap: var(--e2); align-items: flex-start; margin: 0; padding: var(--e3); border-radius: 10px; background: var(--erro-f); color: var(--texto); }
.aviso-limite svg { width: 18px; height: 18px; color: var(--erro); flex: none; margin-top: 2px; }
.grade-certidoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--e4); }
.certidao { display: grid; gap: var(--e2); padding: var(--e4); border-radius: 14px; border: 1px solid var(--regua); border-left-width: 4px; background: var(--fundo-1); }
.certidao header { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--e2); }
.certidao p { margin: 0; }
.certidao-valida { border-left-color: var(--ok, #1f8a4c); }
.certidao-vencendo { border-left-color: #c98a12; }
.certidao-vencida { border-left-color: var(--erro); }
.certidao-sem-data { border-left-color: var(--regua); }

/* Botao de camera: o input de arquivo fica escondido dentro do rotulo. */
.botao-camera { position: relative; overflow: hidden; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: var(--e2); }
.botao-camera svg { width: 18px; height: 18px; flex: none; }
.botao-camera input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.botao-camera:focus-within { outline: 2px solid var(--acento); outline-offset: 2px; }

/* Indicacao da Cora na barra lateral. */
.cora-lateral { display: flex; align-items: center; gap: var(--e3); margin: var(--e4) 0; padding: var(--e3) var(--e4); border-radius: 14px; text-decoration: none; color: var(--gelo); background: linear-gradient(135deg, rgba(254, 60, 87, .22), rgba(0, 144, 240, .14)); border: 1px solid rgba(254, 60, 87, .55); transition: border-color .15s, transform .15s; }
.cora-lateral:hover, .cora-lateral:focus-visible { border-color: #fe3c57; transform: translateY(-1px); }
.cora-lateral span { display: grid; gap: 2px; flex: 1; min-width: 0; }
.cora-lateral strong { font-size: var(--t-p); line-height: 1.25; }
.cora-lateral small { font-size: var(--t-micro); color: rgba(228, 255, 255, .78); }
.cora-lateral svg { width: 20px; height: 20px; flex: none; color: #ff8597; }

/* ---------------------------------------------------------------------------
 * Tour guiado (estilo jogo): holofote + caixa de dialogo com o personagem.
 * ------------------------------------------------------------------------- */
.tour-camada { position: fixed; inset: 0; z-index: 900; background: transparent; cursor: pointer; }
.tour-holofote { position: fixed; z-index: 901; border-radius: 14px; pointer-events: none;
  box-shadow: 0 0 0 9999px rgba(0, 9, 29, .74), 0 0 0 3px var(--ciano), 0 0 26px 6px rgba(0, 200, 240, .55);
  transition: top .35s ease, left .35s ease, width .35s ease, height .35s ease; }
.tour-holofote[hidden] { display: block; top: 50% !important; left: 50% !important; width: 0 !important; height: 0 !important; box-shadow: 0 0 0 9999px rgba(0, 9, 29, .74); }
.tour-caixa { position: fixed; z-index: 902; width: min(440px, calc(100vw - 32px)); display: grid; grid-template-columns: 96px 1fr; gap: var(--e4); align-items: start;
  padding: var(--e5); border-radius: 20px; color: var(--gelo);
  background: radial-gradient(120% 140% at 0% 0%, #0a3a74 0%, var(--noite-2) 46%, var(--noite) 100%);
  border: 2px solid var(--ciano); box-shadow: 0 0 0 4px rgba(0, 200, 240, .18), 0 24px 60px rgba(0, 0, 0, .55); }
.tour-caixa::after { content: ""; position: absolute; inset: 6px; border-radius: 15px; border: 1px dashed rgba(0, 200, 240, .28); pointer-events: none; }
.tour-centro { top: 50% !important; left: 50% !important; transform: translate(-50%, -50%); }
.tour-retrato { width: 96px; height: 96px; border-radius: 50%; border: 3px solid var(--ciano); box-shadow: 0 0 18px rgba(0, 200, 240, .65); background: var(--noite-2); animation: tour-respira 2.6s ease-in-out infinite; }
.tour-fala { display: grid; gap: var(--e2); min-width: 0; }
.tour-contador { margin: 0; font-size: var(--t-micro); letter-spacing: .14em; text-transform: uppercase; color: var(--ciano); font-weight: 700; }
.tour-titulo { margin: 0; font-size: var(--t-g); color: #fff; letter-spacing: .01em; }
.tour-texto { margin: 0; min-height: 4.6em; line-height: 1.5; color: rgba(228, 255, 255, .92); }
.tour-texto::after { content: "▌"; margin-left: 2px; color: var(--ciano); animation: tour-cursor 1s steps(1) infinite; }
.tour-botoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); margin-top: var(--e2); }
.tour-espaco { flex: 1; }
.tour-caixa .botao { border-color: rgba(0, 200, 240, .45); color: var(--gelo); background: rgba(255, 255, 255, .06); }
.tour-caixa .botao.primario { background: linear-gradient(135deg, var(--eletrico), var(--ciano)); color: var(--noite); border-color: transparent; font-weight: 800; }
.tour-caixa .tour-pular { background: transparent; border-color: transparent; color: rgba(228, 255, 255, .7); text-decoration: underline; padding-inline: 0; }
.tour-caixa [hidden] { display: none; }
.tour-entrar { animation: tour-entrar .32s cubic-bezier(.2, 1.4, .4, 1); }
.tour-centro.tour-entrar { animation: tour-entrar-centro .32s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes tour-entrar { from { opacity: 0; transform: scale(.86) translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes tour-entrar-centro { from { opacity: 0; transform: translate(-50%, -46%) scale(.86); } to { opacity: 1; transform: translate(-50%, -50%); } }
@keyframes tour-respira { 50% { box-shadow: 0 0 28px rgba(0, 200, 240, .9); } }
@keyframes tour-cursor { 50% { opacity: 0; } }
@media (max-width: 859px) {
  .tour-caixa:not(.tour-centro) { left: 16px !important; right: 16px; top: auto !important; bottom: 16px; width: auto; }
  .tour-caixa { grid-template-columns: 64px 1fr; padding: var(--e4); }
  .tour-retrato { width: 64px; height: 64px; }
  .tour-caixa.tour-topo { top: 16px !important; bottom: auto; }
  .tour-botoes .botao { padding-inline: var(--e3); }
}
@media (prefers-reduced-motion: reduce) {
  .tour-holofote { transition: none; }
  .tour-retrato, .tour-entrar, .tour-centro.tour-entrar, .tour-texto::after { animation: none; }
}

/* Cartao do contador: CRC e botao de WhatsApp. */
.contador-crc { margin: 2px 0 var(--e3); font-size: var(--t-p); font-weight: 600; letter-spacing: .04em; color: var(--texto-2); }
.botao-whatsapp { display: inline-flex; align-items: center; gap: var(--e2); flex-wrap: wrap; background: #0b7a3e; border-color: #0b7a3e; color: #fff; font-weight: 700; }
.botao-whatsapp:hover, .botao-whatsapp:focus-visible { background: #08662f; border-color: #08662f; color: #fff; }
.botao-whatsapp svg { width: 20px; height: 20px; }
.botao-whatsapp { margin-bottom: var(--e4); }
.botao-whatsapp .sub { color: #fff; font-weight: 500; }

/* Mensalidade (honorarios) */
.lista-cobrancas { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e3); }
.cobranca { display: grid; grid-template-columns: minmax(120px, 1fr) minmax(110px, auto) auto minmax(0, 2fr); align-items: center; gap: var(--e4); padding: var(--e4); border: 1px solid var(--regua); border-left-width: 4px; border-radius: 14px; background: var(--fundo-1); }
.cobranca-mes { display: grid; gap: 2px; }
.cobranca-valor { font-family: var(--titulo); font-size: var(--t-g); font-weight: 700; }
.cobranca-acoes { display: flex; flex-wrap: wrap; gap: var(--e2); justify-content: flex-end; align-items: center; }
.cobranca-atrasada { border-left-color: var(--erro); }
.cobranca-aberta { border-left-color: #c98a12; }
.cobranca-paga { border-left-color: var(--ok); }
@media (max-width: 700px) { .cobranca { grid-template-columns: 1fr auto; } .cobranca-acoes { grid-column: 1 / -1; justify-content: flex-start; } }

/* Indique e ganhe */
.indique-hero { display: flex; align-items: center; justify-content: space-between; gap: var(--e5); margin-bottom: var(--e5); padding: var(--e6); border-radius: 20px; color: var(--gelo);
  background: radial-gradient(120% 140% at 0% 0%, #0a3a74 0%, var(--noite-2) 50%, var(--noite) 100%); box-shadow: var(--sombra-2); }
.indique-hero h1 { color: #fff; margin: var(--e2) 0; font-size: var(--t-titulo); text-transform: uppercase; }
.indique-hero h1 em { font-style: normal; color: var(--ciano); }
.indique-hero p { max-width: 60ch; color: rgba(228, 255, 255, .9); margin: 0; }
.indique-hero .sobretitulo { color: var(--ciano); }
.indique-hero img { width: 140px; height: 140px; border-radius: 50%; flex: none; }
@media (max-width: 700px) { .indique-hero { flex-direction: column-reverse; align-items: flex-start; } .indique-hero img { width: 96px; height: 96px; } }
.isca { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Imposto de Renda */
.checklist-irpf { list-style: none; margin: var(--e3) 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--e2); }
.checklist-irpf li { display: flex; gap: var(--e2); align-items: flex-start; padding: var(--e2) var(--e3); border-radius: 10px; background: var(--fundo-0); color: var(--texto-2); font-size: var(--t-p); }
.checklist-irpf li svg { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.checklist-irpf li.feito { background: var(--ok-f); color: var(--texto); }
.checklist-irpf li.feito svg { color: var(--ok); }
.envio-irpf { margin: var(--e3) 0; }

.sem-quebra { white-space: nowrap; }
.grade-conferencia .campo-largo { grid-column: 1 / -1; }

/* Area interna ocupa a largura toda da tela (antes travava em 1240px e sobrava
 * uma faixa vazia a direita em monitores grandes). O respiro cresce com a tela. */
.conteudo { max-width: none; padding: clamp(16px, 2.2vw, 44px); }
@media (min-width: 1700px) { .vitrine { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------------------------------------------------------------------------
 * Painel do escritorio reorganizado: faixa baixa (rosto sempre inteiro),
 * 6 indicadores numa linha e duas colunas fixas (trabalho | acompanhamento).
 * ------------------------------------------------------------------------- */
.faixa-compacta { display: block; height: auto; min-height: 210px; padding: var(--e5) var(--e6); }
.faixa-compacta .texto-marca { padding: 0; max-width: min(62%, 780px); min-height: 160px; display: flex; flex-direction: column; justify-content: center; }
.faixa-compacta h1 { font-size: clamp(var(--t-gg), 2.1vw, var(--t-titulo)); margin: var(--e2) 0 0; }
.faixa-compacta .acoes { margin-top: var(--e4); display: flex; flex-wrap: wrap; gap: var(--e2); }
.faixa-compacta .acoes form { margin: 0; }
.faixa-compacta .personagem { position: absolute; right: clamp(16px, 4vw, 72px); top: 14px; height: 400px; width: auto; max-height: none; margin: 0; align-self: auto; }
.faixa-compacta::before { background-position: right 22% bottom; background-size: 440px auto; }
@media (max-width: 860px) {
  .faixa-compacta { height: auto; padding: var(--e5); }
  .faixa-compacta .texto-marca { max-width: none; }
  .faixa-compacta .personagem { display: none; }
}

.indicadores-painel { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--e4); margin-bottom: var(--e5); }
.indicadores-painel .card { min-width: 0; }
.indicadores-painel .card-valor { font-size: clamp(var(--t-g), 1.6vw, var(--t-gg)); white-space: nowrap; }
.card-destaque { border-color: var(--acento); box-shadow: 0 0 0 1px var(--acento), var(--sombra-1); }
@media (max-width: 1600px) { .indicadores-painel { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) { .indicadores-painel { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.painel-grade { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(340px, 1fr); gap: var(--e5); align-items: start; }
.painel-coluna { display: grid; gap: var(--e5); min-width: 0; }
.painel-coluna > .painel { margin: 0; }
@media (max-width: 1100px) { .painel-grade { grid-template-columns: 1fr; } }
.vazio-linha { display: flex; align-items: center; gap: var(--e2); margin: 0; color: var(--texto-2); font-style: italic; }
.vazio-linha svg { width: 18px; height: 18px; color: var(--ok); flex: none; font-style: normal; }

.comece-aqui { border: 1px solid var(--acento-suave); background: linear-gradient(180deg, var(--acento-tinta), var(--fundo-1) 60%); }
.comece-aqui .progresso-trilho { margin: var(--e2) 0 var(--e4); }
.passos-inicio { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--e2); }
.passos-inicio a { display: flex; align-items: center; gap: var(--e2); padding: var(--e3); border-radius: 12px; border: 1px solid var(--regua); background: var(--fundo-1); text-decoration: none; color: var(--texto); font-weight: 600; }
.passos-inicio a:hover { border-color: var(--acento); }
.passos-inicio svg { width: 18px; height: 18px; color: var(--acento); flex: none; }
.passos-inicio .feito a { color: var(--texto-2); font-weight: 500; text-decoration: line-through; background: var(--ok-f); border-color: transparent; }
.passos-inicio .feito svg { color: var(--ok); }

/* Regua da cobranca automatica de documentos */
.cobranca-auto h2 { display: flex; align-items: center; gap: var(--e2); }
.cobranca-auto h2 svg { width: 20px; height: 20px; color: var(--ok); }
.regua-cobranca { list-style: none; margin: var(--e4) 0 var(--e2); padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: var(--e2); counter-reset: none; }
.regua-cobranca li { position: relative; display: grid; gap: 2px; padding: var(--e3); border-radius: 12px; background: var(--acento-tinta); border: 1px solid var(--acento-suave); }
.regua-cobranca li strong { color: var(--acento); font-family: var(--titulo); }
.regua-cobranca li span { font-size: var(--t-p); color: var(--texto); }
.regua-cobranca .regua-equipe { background: var(--erro-f); border-color: transparent; }
.regua-cobranca .regua-equipe strong { color: var(--erro); }

/* Faixa de atraso/bloqueio da mensalidade */
.faixa-bloqueio { display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap; padding: var(--e3) var(--e4); margin-bottom: var(--e4); border-radius: 14px; background: var(--atencao-f); border: 1px solid var(--atencao); color: var(--texto); }
.faixa-bloqueio.ativo { background: var(--erro-f); border-color: var(--erro); }
.faixa-bloqueio > svg { width: 22px; height: 22px; flex: none; color: var(--erro); }
.faixa-bloqueio > span { flex: 1 1 320px; }
.conciliacao-resultado { display: grid; gap: var(--e3); margin-top: var(--e4); }
.conciliacao-resultado ul { margin: 0; padding-left: 1.2em; }
.comprovante-campo { display: flex; gap: var(--e2); align-items: center; flex-wrap: wrap; }
.comprovante-campo input[type=file] { max-width: 230px; font-size: var(--t-p); }

/* Nota nova: preencher pelo XML de uma NFS-e anterior */
.importar-xml { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e4); border: 1px dashed var(--acento-suave); background: var(--acento-tinta); }
.importar-xml-texto { flex: 1 1 360px; }
.importar-xml-texto h2 { display: flex; align-items: center; gap: var(--e2); margin: 0 0 var(--e1); }
.importar-xml-texto h2 svg { width: 20px; height: 20px; color: var(--acento); }
.importar-xml-form { display: flex; flex-wrap: wrap; gap: var(--e2); align-items: center; }
.importar-xml-form input[type=file] { max-width: 260px; font-size: var(--t-p); }

/* ===================== Emissao completa de NFS-e (todos os campos do leiaute) ===================== */
.nc .oculto { display: none; }
.nc .nota-peq { font-size: var(--t-p); color: var(--texto-2); margin: var(--e2) 0; }
.nc-faixa { padding: var(--e3) var(--e4); border-radius: var(--raio-p); background: var(--acento-tinta); border: 1px solid var(--acento-suave); margin-bottom: var(--e4); font-size: var(--t-p); }
.nc-barra { display: flex; flex-wrap: wrap; gap: var(--e2); align-items: center; margin-bottom: var(--e4); }
.nc-arquivo { position: relative; cursor: pointer; }
.nc-arquivo input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.nc-manter { display: inline-flex; gap: var(--e2); align-items: center; font-size: var(--t-p); color: var(--texto-2); }
.nc-grade { display: grid; grid-template-columns: 190px minmax(0, 1fr) 360px; gap: var(--e5); align-items: start; }
.nc-indice { position: sticky; top: var(--e4); display: grid; gap: 2px; font-size: var(--t-p); }
.nc-indice a { padding: var(--e2) var(--e3); border-radius: var(--raio-p); color: var(--texto-2); text-decoration: none; display: flex; justify-content: space-between; gap: var(--e2); }
.nc-indice a:hover { background: var(--fundo-2); color: var(--texto); }
.nc .cont { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--erro); color: #fff; font-size: var(--t-micro); display: inline-grid; place-items: center; font-weight: 700; }
.nc-etapas { display: flex; flex-wrap: wrap; gap: var(--e2); margin-bottom: var(--e3); }
.nc-etapas .etapa { display: inline-flex; align-items: center; gap: var(--e2); padding: var(--e2) var(--e3); border: 1px solid var(--regua); border-radius: 999px; background: var(--fundo-1); color: var(--texto-2); font: inherit; font-size: var(--t-p); cursor: pointer; min-height: 40px; }
.nc-etapas .etapa .num { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--fundo-2); font-weight: 700; color: var(--texto); }
.nc-etapas .etapa.ativa { border-color: var(--acento); color: var(--texto); background: var(--acento-tinta); font-weight: 600; }
.nc-etapas .etapa.ativa .num { background: var(--acento); color: #fff; }
.nc-busca { display: flex; flex-wrap: wrap; gap: var(--e3); align-items: center; margin-bottom: var(--e4); }
.nc-busca input[type=search] { flex: 1 1 280px; }
.nc-busca .check { display: inline-flex; gap: var(--e2); align-items: center; font-size: var(--t-p); color: var(--texto-2); }
.nc .secao .cab { display: flex; justify-content: space-between; align-items: center; gap: var(--e3); margin-bottom: var(--e3); }
.nc .secao .cab h2 { margin: 0; font-size: var(--t-g); }
.nc-cuidados { background: var(--atencao-f); border-left: 4px solid var(--atencao); border-radius: var(--raio-p); padding: var(--e3) var(--e4); margin-bottom: var(--e4); font-size: var(--t-p); }
.nc-cuidados strong { display: block; margin-bottom: var(--e1); }
.nc-cuidados ul { margin: 0; padding-left: 1.1em; display: grid; gap: 2px; }
.nc .campos { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--e3) var(--e4); margin: var(--e2) 0 var(--e3); }
.nc .campo { display: grid; gap: 4px; align-content: start; padding: var(--e2); border-radius: var(--raio-p); border: 1px solid transparent; }
.nc .campo.largo { grid-column: 1 / -1; }
.nc .campo .rot { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; font-size: var(--t-p); font-weight: 600; color: var(--texto); }
.nc .campo .rot .nome, .nc .nome-tag { font-family: var(--mono); font-size: var(--t-micro); font-weight: 400; color: var(--texto-3); }
.nc .obr { color: var(--erro); font-weight: 700; }
.nc .ajuda-campo { width: 18px; height: 18px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--fundo-2); color: var(--texto-2); font-size: 11px; cursor: help; font-weight: 700; }
.nc .campo input, .nc .campo select, .nc .campo textarea { width: 100%; }
.nc .campo .item { display: flex; gap: var(--e1); align-items: center; }
.nc .explica { font-size: var(--t-micro); color: var(--texto-2); line-height: 1.45; }
.nc .dica { justify-self: start; font-size: var(--t-micro); padding: 2px 8px; border-radius: 999px; background: var(--neutro-f); color: var(--texto-2); }
.nc .dica.proibido { background: var(--erro-f); color: var(--erro); }
.nc .dica.obrigatorio { background: var(--atencao-f); color: var(--texto); }
.nc .dica.auto { background: var(--ok-f); color: var(--texto); }
.nc .msg { font-size: var(--t-micro); color: var(--erro); }
.nc .campo.invalido input, .nc .campo.invalido select, .nc .campo.invalido textarea { border-color: var(--erro); }
.nc .criticado { border-color: var(--erro); background: var(--erro-f); }
.nc .destaque { outline: 3px solid var(--foco); outline-offset: 2px; }
.nc .filtrado { display: none !important; }
.nc fieldset.grupo { border: 1px solid var(--regua); border-radius: var(--raio); padding: var(--e3) var(--e4) var(--e4); margin: var(--e3) 0; min-width: 0; }
.nc fieldset.grupo.vazio { background: var(--fundo-2); }
.nc fieldset.grupo > legend { display: flex; flex-wrap: wrap; gap: var(--e2); align-items: center; padding: 0 var(--e2); font-weight: 600; font-size: var(--t-p); }
.nc .pergunta { font-weight: 600; }
.nc .chk { display: inline-flex; align-items: center; gap: 4px; font-weight: 400; cursor: pointer; min-height: 32px; }
.nc .mini { font: inherit; font-size: var(--t-micro); padding: 4px 10px; border-radius: 999px; border: 1px solid var(--regua-forte); background: var(--fundo-1); color: var(--texto); cursor: pointer; min-height: 30px; }
.nc .mini:hover { border-color: var(--acento); }
.nc .repeticao { border-top: 1px dashed var(--regua); padding-top: var(--e3); margin-top: var(--e3); }
.nc .escolha { display: flex; flex-wrap: wrap; gap: var(--e3); align-items: center; margin: var(--e2) 0; }
.nc .rotulo-esc { font-size: var(--t-p); color: var(--texto-2); }
.nc .toma-busca { display: flex; flex-wrap: wrap; gap: var(--e2); align-items: center; margin: var(--e2) 0 var(--e3); }
.nc .toma-busca input { flex: 1 1 260px; }
.nc .linha-acoes, .nc .nav-etapas { display: flex; flex-wrap: wrap; gap: var(--e3); align-items: center; justify-content: space-between; margin-top: var(--e4); }
.nc-painel { position: sticky; top: var(--e4); display: grid; gap: var(--e3); max-height: calc(100vh - 2 * var(--e4)); overflow: auto; padding-right: 2px; }
.nc-cartao { background: var(--fundo-1); border: 1px solid var(--regua); border-radius: var(--raio); padding: var(--e4); box-shadow: var(--sombra-1); }
.nc-cartao h3 { margin: 0 0 var(--e3); font-size: var(--t-base); display: flex; align-items: center; gap: var(--e2); flex-wrap: wrap; }
.nc-cartao h3 svg { width: 18px; height: 18px; color: var(--acento); }
.nc-dl { display: grid; grid-template-columns: auto 1fr; gap: 6px var(--e3); margin: 0; font-size: var(--t-p); }
.nc-dl dt { color: var(--texto-2); }
.nc-dl dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.nc-dl dd.total { font-weight: 700; color: var(--acento); font-size: var(--t-base); }
.nc-dl.resumo-final dd { text-align: left; }
.nc-ret-grade { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--e1); margin: var(--e2) 0; }
.nc-ret-grade label { display: grid; gap: 2px; font-size: var(--t-micro); color: var(--texto-2); }
.nc-ret-grade input { width: 100%; padding: 6px; }
.nc-cartao select { width: 100%; }
.nc-criticas { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e2); font-size: var(--t-p); }
.nc-criticas li.grupo { font-weight: 700; color: var(--texto-2); font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .04em; margin-top: var(--e2); }
.nc-criticas li.erro, .nc-criticas li.alerta { padding: var(--e2) var(--e3); border-radius: var(--raio-p); cursor: pointer; display: grid; gap: 2px; }
.nc-criticas li.erro { background: var(--erro-f); border-left: 3px solid var(--erro); }
.nc-criticas li.alerta { background: var(--atencao-f); border-left: 3px solid var(--atencao); }
.nc-criticas li.ok { background: var(--ok-f); padding: var(--e2) var(--e3); border-radius: var(--raio-p); }
.nc-criticas .dica-pend { font-size: var(--t-micro); color: var(--texto-2); }
.nc-criticas small { font-size: var(--t-micro); color: var(--acento); }
.nc-emitir { width: 100%; justify-content: center; min-height: 48px; }
.nc-toast { position: fixed; left: 50%; bottom: var(--e5); transform: translate(-50%, 160%); background: var(--noite); color: #fff; padding: var(--e3) var(--e4); border-radius: var(--raio); box-shadow: var(--sombra-2); max-width: min(560px, 92vw); font-size: var(--t-p); transition: transform .25s ease; z-index: 60; }
.nc-toast.ver { transform: translate(-50%, 0); }
.nc-dlg { border: 0; border-radius: var(--raio); padding: var(--e5); max-width: min(860px, 94vw); box-shadow: var(--sombra-2); background: var(--fundo-1); color: var(--texto); }
.nc-dlg::backdrop { background: rgba(10, 20, 35, .45); }
.nc-xml { max-height: 60vh; overflow: auto; font-family: var(--mono); font-size: 12px; background: var(--fundo-2); padding: var(--e3); border-radius: var(--raio-p); white-space: pre; }
@media (max-width: 1300px) { .nc-grade { grid-template-columns: minmax(0, 1fr) 330px; } .nc-indice { display: none; } }
@media (max-width: 900px) { .nc-grade { grid-template-columns: 1fr; } .nc-painel { position: static; max-height: none; } .nc-ret-grade { grid-template-columns: repeat(3, 1fr); } }