/* Analista Sped ICMS/IPI — versão web · Senior Contabilidade */
:root {
  --marinho: #14284B; --marinho2: #2D4A7A; --marinho3: #4A6694; --dourado: #B8962E;
  --texto: #1F2937; --suave: #6B7280; --linha: #E3E7EE; --fundo: #F3F5F9; --branco: #FFFFFF;
  --ok: #1E6B35; --ok-f: #E6F4EA; --alerta: #92600A; --alerta-f: #FFF1CC; --erro: #9B1C1C; --erro-f: #FAD7D4;
  --info: #1E4E8C; --info-f: #DEEBF9; --excl-f: #F3E4E2; --lido-f: #FFF6D5; --div-f: #F8CFCB; --zebra: #F5F7FA; --subtot: #E3EAF4;
  --raio: 8px; --sombra: 0 1px 2px rgba(20, 40, 75, .06), 0 2px 8px rgba(20, 40, 75, .05);
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font: 14px/1.45 "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif; color: var(--texto); background: var(--fundo); }
a { color: var(--marinho2); }
code, .mono { font-family: Consolas, "Cascadia Mono", Menlo, monospace; font-size: 12.5px; }
h2 { font-size: 17px; margin: 0 0 12px; color: var(--marinho); }
h3 { font-size: 14px; margin: 18px 0 8px; color: var(--marinho2); }
h2 small, h3 small { font-weight: 400; color: var(--suave); font-size: 12px; }

/* topo */
.topo { display: flex; align-items: center; gap: 18px; background: var(--marinho); color: #fff; padding: 8px 18px;
  border-bottom: 3px solid var(--dourado); flex-wrap: wrap; }
.topo-marca { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 16px; white-space: nowrap; }
.logo { color: var(--dourado); font-size: 18px; }
.versao { background: #2d6a4f; font-size: 11px; padding: 2px 7px; border-radius: 4px; font-weight: 600; }
.topo-empresa { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 260px; }
.topo-empresa label { color: #c9d4e6; font-size: 12px; white-space: nowrap; }
.topo-empresa select { flex: 1; max-width: 560px; background: #1e3766; color: #fff; border: 1px solid var(--marinho3); border-radius: 6px; padding: 6px 8px; }
.topo-usuario { display: flex; align-items: center; gap: 14px; font-size: 13px; }
.topo-usuario a { color: #e5ebf5; text-decoration: none; }
.topo-usuario a.ativo, .topo-usuario a:hover { color: var(--dourado); }
.link-sair { background: none; border: 1px solid #c0392b; color: #ffd9d4; border-radius: 5px; padding: 4px 10px; cursor: pointer; }
.selo { background: var(--dourado); color: #fff; font-size: 10.5px; padding: 1px 6px; border-radius: 3px; font-weight: 600; vertical-align: middle; }

/* abas */
.abas { display: flex; gap: 2px; background: #fff; padding: 0 12px; border-bottom: 1px solid var(--linha); overflow-x: auto; position: sticky; top: 0; z-index: 5; }
.abas a { padding: 10px 12px; text-decoration: none; color: var(--suave); border-bottom: 3px solid transparent; white-space: nowrap; font-size: 13.5px; }
.abas a .ic { margin-right: 5px; }
.abas a:hover { color: var(--marinho); background: #f6f8fb; }
.abas a.ativo { color: var(--marinho); border-bottom-color: var(--dourado); font-weight: 600; }

.conteudo { padding: 16px 18px 30px; max-width: 1680px; margin: 0 auto; }
.rodape { text-align: center; color: #9ca3af; font-size: 11.5px; padding: 12px; }
.titulo-pagina { margin: 4px 0 10px; font-size: 18px; }
.intro { color: #4b5563; margin: 0 0 12px; max-width: 1100px; }

/* cartões e grades */
.cartao { background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio); padding: 16px 18px; margin-bottom: 14px; box-shadow: var(--sombra); }
.cartao-topo { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.grade-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.grade-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.grade-lateral { display: grid; grid-template-columns: minmax(320px, 420px) 1fr; gap: 14px; align-items: start; }
.sem-margem > * { margin: 0; }
@media (max-width: 1100px) { .grade-2, .grade-3, .grade-lateral { grid-template-columns: 1fr; } }
.vazio { text-align: center; padding: 60px 20px; background: #fff; border: 1px dashed #cfd6e2; border-radius: var(--raio); }

/* formulários */
.form { display: flex; flex-direction: column; gap: 10px; }
.form label, .form-linha label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: #4b5563; }
.form-linha { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; margin: 10px 0; }
.form-linha label { flex-direction: row; align-items: center; gap: 6px; }
.cresce { flex: 1; min-width: 160px; }
input, select, textarea { font: inherit; padding: 7px 9px; border: 1px solid #cdd4df; border-radius: 6px; background: #fff; color: var(--texto); }
input:focus, select:focus { outline: 2px solid #c9d8f0; border-color: var(--marinho3); }
input[disabled] { background: #f3f4f6; color: #6b7280; }
.largo { width: 100%; }
label.check { flex-direction: row !important; align-items: center; gap: 8px; color: var(--texto) !important; font-size: 13.5px !important; margin: 3px 0; display: flex; }
.campo-linha { display: grid !important; grid-template-columns: minmax(220px, 1fr) 110px auto; align-items: center; gap: 8px; margin: 4px 0; font-size: 13px !important; }
.campo-linha small { color: #9ca3af; }
fieldset.painel { border: 1px solid var(--linha); border-radius: var(--raio); padding: 10px 12px; margin: 4px 0; display: flex; flex-direction: column; gap: 8px; }
fieldset.painel legend { font-weight: 600; color: var(--marinho); padding: 0 6px; }
.painel-avancado { background: #f7f9fc; }
.acoes { display: flex; gap: 8px; margin-top: 6px; }
.dica { color: var(--suave); font-size: 12px; margin: 4px 0; }
.ok-texto { color: var(--ok); }
.erro-texto { color: var(--erro); }
.destaque { font-size: 16px; font-weight: 600; color: var(--marinho); margin: 0; }
dl.dados { display: grid; grid-template-columns: 170px 1fr; gap: 6px 12px; margin: 0; }
dl.dados dt { color: var(--suave); }
dl.dados dd { margin: 0; }
.passos li { margin: 4px 0; }

/* botões */
.botao { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 6px; border: 1px solid #c6cfdc; background: #fff;
  color: var(--marinho); font: inherit; font-weight: 500; cursor: pointer; text-decoration: none; white-space: nowrap; }
.botao:hover { background: #f1f4f9; }
.botao-primario { background: var(--marinho); color: #fff; border-color: var(--marinho); }
.botao-primario:hover { background: var(--marinho2); }
.botao-verde { background: #1a6b2a; color: #fff; border-color: #1a6b2a; }
.botao-verde:hover { background: #145220; }
.botao-laranja { background: #e67e22; color: #fff; border-color: #e67e22; }
.botao-ok { color: var(--ok); border-color: #9ccfaa; }
.botao-perigo { color: #b42318; border-color: #f0b6b0; }
.botao-perigo:hover { background: #fdecea; }
.botao-p { padding: 4px 9px; font-size: 12.5px; }
.botao.grande { padding: 9px 18px; font-size: 14.5px; }
.botao[disabled], .botao.desabilitado { opacity: .45; pointer-events: none; }
.linha-botoes { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 8px 0; }
.acoes-linha { display: flex; gap: 4px; flex-wrap: wrap; }
.acoes-linha form, form.inline { display: inline; margin: 0; }
label.arquivo { position: relative; display: inline-flex; }
label.arquivo input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
label.arquivo span { display: inline-flex; padding: 7px 13px; border: 1px dashed var(--marinho3); border-radius: 6px; color: var(--marinho2); background: #f7f9fc; cursor: pointer; }
label.arquivo.escolhido span { border-style: solid; background: var(--ok-f); color: var(--ok); }

/* alertas */
.alerta { padding: 10px 14px; border-radius: 6px; margin: 0 0 12px; border: 1px solid; }
.alerta-ok { background: var(--ok-f); border-color: #b7dfc2; color: var(--ok); }
.alerta-erro { background: var(--erro-f); border-color: #f1b3ab; color: var(--erro); }
.alerta-aviso { background: var(--alerta-f); border-color: #f2d48a; color: var(--alerta); }
.alerta-info { background: var(--info-f); border-color: #b9d1ef; color: var(--info); }

/* tabelas */
.tabela-rolagem { overflow: auto; max-height: 70vh; border: 1px solid var(--linha); border-radius: 6px; }
.tabela-rolagem.alta { max-height: calc(100vh - 290px); min-height: 220px; }
.tabela-rolagem.baixa { max-height: 320px; }
table.tabela { border-collapse: collapse; width: 100%; font-size: 13px; background: #fff; }
.tabela th { background: var(--marinho2); color: #fff; font-weight: 600; text-align: left; padding: 7px 8px; position: sticky; top: 0; z-index: 2;
  border-bottom: 2px solid var(--dourado); white-space: nowrap; }
.tabela td { padding: 5px 8px; border-bottom: 1px solid #edf0f5; vertical-align: top; }
.tabela tbody tr:nth-child(even) td { background: var(--zebra); }
.tabela tbody tr:hover td { background: #eef3fb; }
.tabela .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tabela.compacta td, .tabela.compacta th { padding: 3px 6px; font-size: 12px; }
.tabela .quebra { word-break: break-all; }
.linha-ativa td { background: #e3f2e8 !important; }
.linha-inativa td { color: #9ca3af; }
.fundo-erro td { background: #fdf0ee !important; } .fundo-alerta td { background: #fffaeb !important; } .fundo-info td { background: #f2f7fd !important; }
.tag { display: inline-block; font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 10px; }
.tag-ok { background: var(--ok-f); color: var(--ok); } .tag-erro { background: var(--erro-f); color: var(--erro); }
.tag-alerta { background: var(--alerta-f); color: var(--alerta); } .tag-info { background: var(--info-f); color: var(--info); }
.contador { background: var(--subtot); color: var(--marinho); font-size: 12px; padding: 1px 8px; border-radius: 10px; }
.filtro-tabela, .filtro-grade { margin: 0 0 8px; min-width: 260px; }

/* grade de revisão */
.faixa-grade { display: flex; justify-content: space-between; background: var(--marinho); color: #fff; padding: 8px 12px; border-radius: 6px 6px 0 0;
  font-weight: 600; margin: -6px -6px 0; }
.faixa-grade .total { color: #90e0ef; font-weight: 600; }
.legenda { font-size: 12px; color: #4b5563; padding: 6px 2px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.sw { display: inline-block; width: 12px; height: 12px; border-radius: 3px; border: 1px solid #d1d5db; margin-left: 6px; }
.sw.incl { background: #eafaf1; } .sw.excl { background: var(--excl-f); } .sw.lido { background: var(--lido-f); } .sw.div { background: #ff8a80; }
.sw.alerta { background: #fff3cd; }
.tabela-edit td { padding: 0 2px; vertical-align: middle; }
.tabela-edit input.ed { border: 1px solid transparent; background: transparent; padding: 4px 5px; width: 100%; min-width: 50px; border-radius: 4px; font-size: 13px; }
.tabela-edit input.ed:hover { border-color: #cdd4df; background: #fff; }
.tabela-edit input.ed:focus { border-color: var(--marinho3); background: #fff; }
.tabela-edit input.ed.n { text-align: right; font-variant-numeric: tabular-nums; }
.tabela-edit td.ro { padding: 4px 6px; white-space: nowrap; }
.tabela-edit tr.r-incl td { background: #eafaf1 !important; } .tabela-edit tr.r-excl td { background: var(--excl-f) !important; color: #8a6d6a; }
.tabela-edit tr.r-lido td { background: #fff9c4 !important; } .tabela-edit tr.r-div td { background: #ffd2cc !important; }
.tabela-edit tr.r-alerta td { background: #fff3cd !important; }
.tabela-edit tr.editado td:first-child { box-shadow: inset 3px 0 0 var(--dourado); }
.tog { cursor: pointer; font-weight: 700; width: 30px; text-align: center; user-select: none; }
.status { font-size: 12.5px; color: var(--ok); }
.status.erro { color: var(--erro); }

/* log */
pre.log { background: #fbfcfe; border: 1px solid var(--linha); border-radius: 6px; padding: 12px; font: 12.5px/1.5 Consolas, Menlo, monospace;
  white-space: pre-wrap; max-height: 62vh; overflow: auto; margin: 0; }
pre.log-escuro { background: #1e1e2e; color: #cdd6f4; border-color: #1e1e2e; white-space: pre; }
.lg-titulo { color: #89b4fa; font-weight: 700; } .lg-ok { color: #a6e3a1; } .lg-diverge { color: #f38ba8; font-weight: 700; }
.lg-e113 { color: #a6adc8; } .lg-aviso { color: #fab387; }

/* progresso */
.progresso { display: flex; align-items: center; gap: 8px; min-width: 260px; }
.progresso .barra { flex: 1; height: 8px; background: #e5e7eb; border-radius: 4px; overflow: hidden; }
.progresso .barra span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--marinho2), var(--dourado)); transition: width .3s; }
.progresso.indeterminado .barra span { width: 35%; animation: vai 1.2s infinite ease-in-out; }
@keyframes vai { 0% { margin-left: -35%; } 100% { margin-left: 100%; } }
.progresso small { color: var(--suave); white-space: nowrap; }
.status-sefaz { margin: 6px 0 0; color: #374151; }

/* abas internas */
.abas-internas { display: flex; gap: 4px; margin: 0 0 -1px; }
.abas-internas button { border: 1px solid var(--linha); border-bottom: none; background: #eef1f6; padding: 8px 14px; border-radius: 8px 8px 0 0; cursor: pointer;
  font: inherit; color: var(--suave); }
.abas-internas button.ativo { background: #fff; color: var(--marinho); font-weight: 600; }
.abas-internas + .cartao, .abas-internas ~ .cartao[data-painel] { border-top-left-radius: 0; }
.resumo-linha { font-weight: 600; color: #374151; }

/* login */
.pagina-login { display: flex; align-items: center; justify-content: center; min-height: 100vh;
  background: radial-gradient(circle at 20% 10%, #22406f 0, var(--marinho) 45%, #0d1b33 100%); padding: 20px; }
.cartao-login { background: #fff; border-radius: 12px; padding: 28px 30px; width: 100%; max-width: 480px; box-shadow: 0 10px 40px rgba(0, 0, 0, .35);
  border-top: 4px solid var(--dourado); }
.cartao-login.largo { max-width: 760px; }
.login-marca { display: flex; gap: 12px; align-items: center; margin-bottom: 18px; }
.login-marca .logo { font-size: 28px; }
.login-marca .nome { font-weight: 700; color: var(--marinho); font-size: 18px; }
.login-marca .sub { color: var(--suave); font-size: 12px; }
.form-login { display: flex; flex-direction: column; gap: 12px; }
.form-login label { display: flex; flex-direction: column; gap: 5px; color: #4b5563; font-size: 13px; }
.form-login input { padding: 10px 12px; font-size: 15px; }
.cartao-login .tabela { margin: 6px 0; }
.cartao-login .form label { font-size: 12.5px; }

/* grade de revisão: colunas de seleção e inclusão */
.tabela-edit th.ck, .tabela-edit td.ck { width: 26px; text-align: center; }
.tabela-edit td.incl { cursor: pointer; text-align: center; font-weight: 700; user-select: none; width: 30px; }
.tabela-edit td.incl:hover { outline: 2px solid var(--dourado); outline-offset: -2px; }
.tabela tr.linha-erro td { background: #fdecea; }
.abas-internas button.alerta-aba::after { content: ' ●'; color: var(--erro); }
td.vazio { text-align: center; color: #6b7280; padding: 18px; }
.centro { text-align: center; } .form-linha.quebra label { flex-direction: column; align-items: flex-start; }