/* ---------- Cores: tema claro (padrão) e escuro. Use sempre as variáveis, nunca cores fixas. ---------- */
:root {
  color-scheme: light;
  --fundo: #f7f3ee;          /* fundo da página */
  --superficie: #fff;        /* cartões, campos, modal */
  --superficie-2: #fbf8f4;   /* destaque leve: linha sob o mouse, painel de impressão */
  --borda: #e4dcd2;
  --texto: #2b2118;
  --dim: #8a7c70;            /* texto secundário */
  --destaque: #5b3a21;       /* links, aba ativa */
  --topo: #5b3a21;           /* barra do topo */
  --botao: #5b3a21;          /* botão principal */
  --sobre-botao: #fff;
  --neg: #b3261e;
  --pos: #1d6b3a;
  --aviso-fundo: #fff7e0;
  --aviso-borda: #f0d98a;
  --tag: #eee;
  --papel: #fff;             /* folha dos relatórios */
  --papel-texto: #000;
  --papel-linha: #bbb;
  --veu: rgba(43, 33, 24, .45);
  --sombra: 0 20px 60px rgba(0, 0, 0, .25);
}
[data-tema="escuro"] {
  color-scheme: dark;
  --fundo: #17120e;
  --superficie: #221b16;
  --superficie-2: #2b231d;
  --borda: #3b3129;
  --texto: #ece3d9;
  --dim: #a3958a;
  --destaque: #dcae7e;
  --topo: #2e1f13;
  --botao: #8f5e34;
  --sobre-botao: #fff;
  --neg: #ff8f85;
  --pos: #7fd39b;
  --aviso-fundo: #352b1a;
  --aviso-borda: #6b5626;
  --tag: #352c25;
  --papel: #221b16;
  --papel-texto: #ece3d9;
  --papel-linha: #4a3f36;
  --veu: rgba(0, 0, 0, .6);
  --sombra: 0 20px 60px rgba(0, 0, 0, .6);
}

* { box-sizing: border-box; }
body { margin: 0; font: 15px/1.45 -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--fundo); color: var(--texto); }
a { color: var(--destaque); }
.topo { display: flex; align-items: center; justify-content: space-between; padding: 12px 24px; background: var(--topo); }
.topo nav { display: flex; align-items: center; }
.topo a { color: #fff; text-decoration: none; margin-left: 20px; }
.marca { font-weight: 700; font-size: 18px; margin-left: 0 !important; }
.marca small { font-weight: 400; opacity: .75; font-size: 13px; }
.botao-tema { margin-left: 18px; background: none; border: 1px solid rgba(255, 255, 255, .35); color: #fff; font-size: 15px; line-height: 1; padding: 5px 8px; }
.botao-tema:hover { background: rgba(255, 255, 255, .12); }
main { max-width: 1200px; margin: 24px auto; padding: 0 16px; }
.cartao { background: var(--superficie); border: 1px solid var(--borda); border-radius: 10px; padding: 20px 24px; }
h1 { margin: 4px 0; font-size: 22px; }
h3 { margin: 24px 0 8px; display: flex; align-items: center; gap: 12px; }
.sub { color: var(--dim); margin: 4px 0 16px; }
.cod { color: var(--dim); font-weight: 400; font-size: .8em; }
.tag { background: var(--tag); color: var(--dim); border-radius: 4px; padding: 1px 6px; font-size: 12px; vertical-align: middle; }
input, select { background: var(--superficie); color: var(--texto); }
input[type=search], select { width: 100%; padding: 10px 12px; font-size: 16px; border: 1px solid var(--borda); border-radius: 8px; margin-bottom: 12px; }
select { width: auto; }
button { padding: 4px 12px; border: 1px solid var(--borda); background: var(--superficie); color: var(--texto); border-radius: 6px; cursor: pointer; font-size: 13px; }
.rolagem { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; color: var(--dim); font-weight: 600; border-bottom: 2px solid var(--borda); padding: 6px 8px; white-space: nowrap; }
td { border-bottom: 1px solid var(--borda); padding: 6px 8px; vertical-align: top; }
tbody tr:hover { background: var(--superficie-2); }
.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.neg { color: var(--neg); } .pos { color: var(--pos); }
.dim { color: var(--dim); } .difere { color: var(--neg); font-weight: 600; }
.ok { color: var(--pos); } .alerta { color: var(--neg); font-weight: 600; }
.aviso { background: var(--aviso-fundo); border: 1px solid var(--aviso-borda); border-radius: 6px; padding: 8px 12px; font-size: 13px; }
.vazio, .carregando { color: var(--dim); }
.voltar { text-decoration: none; font-size: 13px; }
.abas { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--borda); margin: 16px 0; }
.abas a { padding: 8px 12px; text-decoration: none; color: var(--dim); border-bottom: 2px solid transparent; }
.abas a.ativa { color: var(--destaque); border-color: var(--destaque); font-weight: 600; }
.ficha { display: grid; grid-template-columns: 160px 1fr; gap: 6px 16px; }
.ficha dt { color: var(--dim); }
.ficha dd { margin: 0; }
.rodape { text-align: center; color: var(--dim); font-size: 12px; padding: 24px; }

/* Impressão de extrato por período */
.imprimir { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 16px 0 4px; padding: 12px 14px;
  background: var(--superficie-2); border: 1px solid var(--borda); border-radius: 8px; }
.imprimir label { display: flex; align-items: center; gap: 6px; color: var(--dim); }
.imprimir select, .imprimir input { width: auto; margin: 0; padding: 5px 8px; font-size: 14px; border: 1px solid var(--borda); border-radius: 6px; }
button.principal { background: var(--botao); color: var(--sobre-botao); border-color: var(--botao); }
.modo-impressao .topo, .modo-impressao .rodape { display: none; }
.barra-impressao { display: flex; justify-content: space-between; align-items: center; max-width: 820px; margin: 0 auto 12px; }
.barra-impressao button { font-size: 15px; padding: 6px 18px; }
.relatorio { background: var(--papel); max-width: 820px; margin: 0 auto; padding: 28px 32px; border: 1px solid var(--borda); color: var(--papel-texto); }
.rel-topo { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 2px solid var(--papel-texto); padding-bottom: 6px; }
.rel-marca { font: italic bold 24px "Lucida Calligraphy", "Apple Chancery", "Brush Script MT", cursive; }
.rel-marca span { font-size: 14px; }
.rel-emissao { font-size: 12px; }
.rel-titulo { text-align: center; font-size: 18px; margin: 14px 0 2px; }
.rel-periodo { text-align: center; margin: 0 0 12px; font-size: 13px; }
.rel-cliente { display: flex; justify-content: space-between; gap: 16px; border: 1px solid var(--papel-texto); padding: 6px 10px; margin-bottom: 10px; font-size: 14px; }
.relatorio table { font-size: 12px; }
.relatorio th { color: var(--papel-texto); border-bottom: 1px solid var(--papel-texto); }
.relatorio td { border-bottom: 1px dotted var(--papel-linha); padding: 3px 6px; }
.relatorio .neg, .relatorio .pos { color: var(--papel-texto); }
.relatorio h3 { font-size: 14px; margin-top: 18px; }
.rel-rodape { text-align: right; font-size: 11px; margin-top: 10px; }

/* Cabeçalho do cliente e modal de saldos */
.cab-cliente { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.cab-cliente button { font-size: 14px; padding: 7px 16px; white-space: nowrap; }
.modal { border: 0; border-radius: 12px; padding: 0; width: min(640px, 92vw); box-shadow: var(--sombra); background: var(--superficie); color: var(--texto); }
.modal::backdrop { background: var(--veu); }
.modal-corpo { padding: 18px 22px; }
.modal-topo { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.modal-topo h2 { font-size: 18px; margin: 0; }
.modal-topo button { border: 0; font-size: 18px; color: var(--dim); background: none; }
/* Botões de escolha da conta no extrato */
.contas { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.contas a { padding: 5px 12px; border: 1px solid var(--borda); border-radius: 999px; text-decoration: none; color: var(--texto); font-size: 14px; }
.contas a.ativa { background: var(--botao); border-color: var(--botao); color: var(--sobre-botao); }

/* Relatório de saldos */
.filtros { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 12px; }
.filtros label { display: flex; align-items: center; gap: 6px; color: var(--dim); }
.filtros select, .filtros input:not([type=checkbox]) { width: auto; margin: 0; padding: 5px 8px; font-size: 14px; border: 1px solid var(--borda); border-radius: 6px; }
.filtros .check { color: var(--texto); }
.filtros button { font-size: 14px; padding: 6px 18px; }
.filtros .unidade { color: var(--dim); font-size: 14px; }
.rel-saldos { margin-top: 16px; }
.rel-saldos h3 .sub, .grupo-corrego .sub { font-weight: 400; font-size: 13px; margin: 0; }
.grupo-corrego { margin: 14px 0 4px; font-size: 13px; border-bottom: 1px solid var(--papel-texto); padding-bottom: 2px; }

/* Bloqueio: enquanto os dados não forem abertos, só aparece a tela de desbloqueio */
body.bloqueado .topo, body.bloqueado #app, body.bloqueado .rodape { display: none; }
body:not(.bloqueado) #tranca { display: none; }
.oculto-visual { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.caixa-login form { display: flex; flex-direction: column; gap: 12px; }
.caixa-login .opcoes { font-size: 13px; line-height: 1.8; }
.caixa-login .instalar { font-size: 13px; text-align: center; border-top: 1px solid var(--borda); padding-top: 10px; }
.soltar { display: block; border: 2px dashed var(--borda); border-radius: 10px; padding: 26px 16px; text-align: center; cursor: pointer; color: var(--texto); }
.soltar:hover, .soltar.arrastando { border-color: var(--destaque); background: var(--superficie-2); }
.soltar input { display: none; }
.soltar small { color: var(--dim); }

/* Login */
.tela-login { display: grid; place-items: center; min-height: 100vh; }
.tela-login .botao-tema { position: fixed; top: 14px; right: 16px; color: var(--texto); border-color: var(--borda); }
.caixa-login { width: min(380px, 92vw); display: flex; flex-direction: column; gap: 12px; }
.caixa-login h1 { margin: 6px 0 0; }
.caixa-login .sub { margin: 0; }
.caixa-login label { display: flex; flex-direction: column; gap: 4px; color: var(--dim); font-size: 14px; }
.caixa-login input { padding: 9px 11px; font-size: 16px; border: 1px solid var(--borda); border-radius: 8px; }
.caixa-login button { padding: 10px; font-size: 16px; margin-top: 4px; }
.erro { color: var(--neg); margin: 0; font-size: 14px; }

[hidden] { display: none !important; }

/* ---------- Impressão: sempre no tema claro, papel branco e texto preto ---------- */
@media print {
  :root, [data-tema="escuro"] {
    color-scheme: light;
    --fundo: #fff; --superficie: #fff; --superficie-2: #fff; --borda: #ccc; --texto: #000; --dim: #555;
    --destaque: #000; --papel: #fff; --papel-texto: #000; --papel-linha: #bbb; --neg: #000; --pos: #000;
  }
  @page { size: A4; margin: 12mm; }
  .topo, .rodape, .no-print { display: none !important; }
  body { background: #fff; }
  main { margin: 0; max-width: none; }
  .cartao { border: 0; padding: 0; }
  table { font-size: 11px; }
  .relatorio { border: 0; padding: 0; max-width: none; }
  .relatorio thead { display: table-header-group; }
  .relatorio tr { break-inside: avoid; }
  .rel-saldos { margin-top: 0; }
  .rel-saldos a { color: #000; text-decoration: none; }
}