/* UsoPago — design system (fonte única para a interface e o relatório). */
:root {
  /* Marca */
  --marca: #0F3B32;          /* verde-garrafa: barra superior, botões, títulos */
  --marca-2: #164A3F;
  --sol: #F2C14E;            /* amarelo-sol: acento da marca (só sobre fundo escuro ou no selo) */
  --barra: #0F3B32;          /* fundo da barra superior */
  --barra-texto: #D3E2DB;
  --verde-marca: #1F8A5B;    /* "bateu": barras e símbolos (não usar em texto pequeno) */
  --verde-texto: #17714F;    /* "bateu" em texto: contraste AA sobre branco */
  /* Semântica: coral = não bateu (receita), âmbar = risco */
  --coral: #B93D0C;
  --coral-barra: #E4572E;
  --coral-fundo: #FCEBE3;
  --ambar: #8A5A06;
  --ambar-barra: #D99A2B;
  --ambar-fundo: #FAF0D9;
  --vermelho-fundo: #FCEAEA; --vermelho-borda: #EFB6B2; --vermelho-texto: #8E1F1A;
  /* Neutros (tom papel) */
  --tinta: #1D2420;
  --cinza: #57605B;
  --linha: #DCD7CB;
  --fundo: #EEEAE1;          /* papel: os cartões brancos se destacam sobre ele */
  --branco: #FFFFFF;
  /* Forma e ritmo */
  --raio: 14px; --raio-p: 10px;
  --sombra: 0 1px 2px rgba(15, 59, 50, .06), 0 3px 10px rgba(15, 59, 50, .05);
  --fonte: "Plus Jakarta Sans", "Segoe UI", Roboto, Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
  /* Papéis (mudam com o tema) */
  --titulo: #0F3B32; --link: #0F3B32;
  --primario: #0F3B32; --primario-hover: #164A3F; --primario-texto: #FFFFFF;
  --sutil: #F5F2EA; --borda-campo: #C8C1B2; --borda-hover: #8F8878;
  --cabecalho-tabela: #F6F3EC;
  --grave-borda: #E6C989; --grave-texto: #6B4706;
  --ok-fundo: #E5F4EC; --ok-borda: #BBE2CD; --ok-texto: #0F5132; --verde-fundo: #EFF8F3;
  --foco: #2563EB;
  /* As duas ações que o UsoPago compara: o uso (o que se libera) e o pagamento (o que se cobra) */
  --acao-cobra: #6B4E00; --acao-cobra-fundo: #FCEFC9;
  --acao-libera: #0F3B32; --acao-libera-fundo: #D7ECE3;
  color-scheme: light;
}

/* Tema escuro: segue o sistema operacional, salvo escolha explícita (data-theme).
   O relatório fixa data-theme="light": é documento para imprimir e enviar. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --tinta: #E8EEEA; --cinza: #A6B0AA; --linha: #24352F; --fundo: #0A1613; --branco: #11201C;
    --titulo: #F7F4EC; --link: #F2C14E; --barra: #0A2620;
    --primario: #F2C14E; --primario-hover: #F6D27A; --primario-texto: #1A1405;
    --coral: #FF9A76; --coral-fundo: #3A1D14; --ambar: #F5A25D; --ambar-fundo: #36220F;
    --vermelho-fundo: #3A1517; --vermelho-borda: #7A2E2A; --vermelho-texto: #FFB4AE;
    --verde-texto: #6FD8A8; --verde-marca: #3FBF85; --sutil: #172A25; --borda-campo: #2F4A42; --borda-hover: #46665B;
    --grave-borda: #6E4A24; --grave-texto: #F5A25D;
    --ok-fundo: #0F2A1E; --ok-borda: #1F5A3D; --ok-texto: #86E5B8; --verde-fundo: #10261C;
    --sombra: none; --foco: #8AB4FF; --cabecalho-tabela: #0E1D19;
    --acao-cobra: #F2C14E; --acao-cobra-fundo: #3A2F12; --acao-libera: #8FE0BE; --acao-libera-fundo: #12302A;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --tinta: #E8EEEA; --cinza: #A6B0AA; --linha: #24352F; --fundo: #0A1613; --branco: #11201C;
  --titulo: #F7F4EC; --link: #F2C14E; --barra: #0A2620;
  --primario: #F2C14E; --primario-hover: #F6D27A; --primario-texto: #1A1405;
  --coral: #FF9A76; --coral-fundo: #3A1D14; --ambar: #F5A25D; --ambar-fundo: #36220F;
  --vermelho-fundo: #3A1517; --vermelho-borda: #7A2E2A; --vermelho-texto: #FFB4AE;
  --verde-texto: #6FD8A8; --verde-marca: #3FBF85; --sutil: #172A25; --borda-campo: #2F4A42; --borda-hover: #46665B;
  --grave-borda: #6E4A24; --grave-texto: #F5A25D;
  --ok-fundo: #0F2A1E; --ok-borda: #1F5A3D; --ok-texto: #86E5B8; --verde-fundo: #10261C;
  --sombra: none; --foco: #8AB4FF; --cabecalho-tabela: #0E1D19;
  --acao-cobra: #F2C14E; --acao-cobra-fundo: #3A2F12; --acao-libera: #8FE0BE; --acao-libera-fundo: #12302A;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 400 15px/1.55 var(--fonte); color: var(--tinta); background: var(--fundo); font-variant-numeric: tabular-nums; }
h1, h2, h3 { color: var(--titulo); letter-spacing: -.02em; line-height: 1.2; margin: 0; }
h1 { font-size: clamp(22px, 3.2vw, 30px); font-weight: 800; }
h2 { font-size: 18px; font-weight: 800; }
h3 { font-size: 15px; font-weight: 600; }
p { margin: 0; }
b, strong { font-weight: 600; } /* a fonte tem 400, 600 e 800: negrito padrão (700) caía no 800, pesado demais */
a { color: var(--link); }
code { font-family: var(--mono); font-size: .92em; background: var(--sutil); padding: 1px 5px; border-radius: 4px; }
.muted { color: var(--cinza); }
.pequeno { font-size: 13px; }
.mono { font-family: var(--mono); font-size: 13px; }
.visualmente-oculto { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; border: 0 !important; overflow: hidden !important; clip: rect(0 0 0 0); white-space: nowrap; }

:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; border-radius: 4px; }

.cartao { background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio); box-shadow: var(--sombra); }

/* Botões: um padrão só, em todas as telas.
   primario  = a ação principal da área (no máximo uma por bloco)
   secundario = ações comuns (contorno, fundo branco)
   suave     = ações de apoio (ver exemplo, copiar, baixar): fundo verde-claro
   perigo    = ações que tiram acesso ou encerram (texto e contorno vermelhos)
   peq       = versão compacta (tabelas, cartões, linhas de formulário) */
.botao { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: 600 14px/1 var(--fonte); letter-spacing: -.005em; border-radius: var(--raio-p); padding: 0 16px; min-height: 40px; cursor: pointer; border: 1px solid transparent; text-decoration: none; white-space: nowrap; transition: background-color .15s, border-color .15s, color .15s; vertical-align: middle; }
.botao.primario { background: var(--primario); color: var(--primario-texto); }
.botao.primario:hover { background: var(--primario-hover); }
.botao.secundario { background: var(--branco); color: var(--titulo); border-color: var(--borda-campo); }
.botao.secundario:hover { background: var(--sutil); border-color: var(--borda-hover); }
.botao.suave { background: var(--acao-libera-fundo); color: var(--acao-libera); }
.botao.suave:hover { border-color: currentColor; }
.botao.perigo { background: var(--branco); color: var(--vermelho-texto); border-color: var(--vermelho-borda); }
.botao.perigo:hover { background: var(--vermelho-fundo); }
.botao.peq { min-height: 32px; padding: 0 12px; font-size: 13px; border-radius: 8px; gap: 6px; }
.botao:disabled, .botao[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.botao.primario:disabled:hover { background: var(--primario); }
.botao.secundario:disabled:hover { background: var(--branco); border-color: var(--borda-campo); }
/* Botão de alternância (filtros): pressionado = verde-claro, nunca bloco escuro */
.botao[aria-pressed="true"] { background: var(--acao-libera-fundo); color: var(--acao-libera); border-color: var(--acao-libera); }
/* Ícones de linha (16px, cor do texto), só por classe: <button class="botao secundario ic ic-baixar"> */
.ic::before { content: ""; width: 16px; height: 16px; flex: 0 0 16px; background: currentColor; -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
.botao.peq.ic::before { width: 14px; height: 14px; flex-basis: 14px; }
.ic-baixar { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11M7 10l5 5 5-5M5 20h14'/%3E%3C/svg%3E"); }
.ic-enviar { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 16V5M7 10l5-5 5 5M5 20h14'/%3E%3C/svg%3E"); }
.ic-imprimir { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 9V4h10v5M7 17H5a1 1 0 0 1-1-1v-5a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v5a1 1 0 0 1-1 1h-2M7 14h10v6H7z'/%3E%3C/svg%3E"); }
.ic-copiar { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='11' height='11' rx='2'/%3E%3Cpath d='M5 15V5a1 1 0 0 1 1-1h9'/%3E%3C/svg%3E"); }
.ic-conferir { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 11a8 8 0 1 0-2.3 5.7M20 4v7h-7'/%3E%3C/svg%3E"); }
.ic-ver { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); }
.ic-mais { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); }
/* Seletor de arquivo nativo com a mesma cara do botão secundário */
input[type=file] { font: 400 13px var(--fonte); color: var(--cinza); max-width: 100%; }
input[type=file]::file-selector-button { font: 600 13px var(--fonte); color: var(--titulo); background: var(--branco); border: 1px solid var(--borda-campo); border-radius: 8px; min-height: 32px; padding: 0 12px; margin-right: 10px; cursor: pointer; }
input[type=file]::file-selector-button:hover { background: var(--sutil); border-color: var(--borda-hover); }

.campo { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--cinza); }
.campo input, .campo select, .campo textarea { font: 400 15px var(--fonte); color: var(--tinta); padding: 8px 12px; border: 1px solid var(--borda-campo); border-radius: var(--raio-p); background: var(--branco); min-height: 40px; }
.campo input:hover, .campo select:hover { border-color: var(--borda-hover); }
.campo input[type=file] { border: 0; padding: 0; min-height: 0; background: none; font-size: 13px; }
.campo input[type=checkbox], .campo input[type=radio] { min-height: 0; padding: 0; }
/* Seletores dentro de tabelas (ex.: trocar papel): compactos, no padrão dos campos */
td select { font: 400 13px var(--fonte); color: var(--tinta); border: 1px solid var(--borda-campo); border-radius: 8px; background: var(--branco); min-height: 32px; padding: 0 8px; max-width: 100%; }
/* Botões dentro de formulários em grade: tamanho natural (não esticam) e altura igual à dos campos */
.form > .botao, .bloco > .botao, .linha-form > .botao, .bloco > form > .botao { justify-self: start; align-self: end; }
.form > .botao.peq, .linha-form > .botao.peq { min-height: 40px; padding: 0 16px; font-size: 14px; border-radius: var(--raio-p); }
/* Estado (ponto + texto) não herda a caixa do aviso .alerta */
.estado.alerta { border: 0; padding: 0; border-radius: 0; background: none; font-size: 13px; }

.tag { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.tag.receita { background: var(--coral-fundo); color: var(--coral); }
.tag.risco { background: var(--ambar-fundo); color: var(--ambar); }
.tag.neutra { background: var(--sutil); color: var(--cinza); }
.tag.operacao { background: var(--vermelho-fundo); color: var(--vermelho-texto); }

.alerta { border-radius: var(--raio); padding: 12px 14px; border: 1px solid; font-size: 14px; }
.alerta.bloqueante { background: var(--vermelho-fundo); border-color: var(--vermelho-borda); color: var(--vermelho-texto); }
.alerta.grave { background: var(--ambar-fundo); border-color: var(--grave-borda); color: var(--grave-texto); }
.alerta.info { background: var(--sutil); border-color: var(--linha); color: var(--tinta); }
.alerta.ok { background: var(--ok-fundo); border-color: var(--ok-borda); color: var(--ok-texto); }
.alerta strong { display: block; margin-bottom: 2px; }

table.dados { width: 100%; border-collapse: collapse; background: var(--branco); font-size: 14px; }
table.dados th, table.dados td { padding: 10px 12px; border-bottom: 1px solid var(--linha); vertical-align: top; text-align: left; }
table.dados th { background: var(--cabecalho-tabela); font-size: 12.5px; color: var(--cinza); font-weight: 600; position: sticky; top: 0; }
table.dados td.num, table.dados th.num { text-align: right; white-space: nowrap; }

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

/* Abas: sublinhado verde na aba atual (leve, sem bloco escuro) */
.abas-linha { display: flex; gap: 2px; flex-wrap: wrap; margin: 0 0 18px; border-bottom: 1px solid var(--linha); }
.abas-linha > a, .abas-linha > button { background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: 10px 12px; font: 600 14px/1.2 var(--fonte); color: var(--cinza); text-decoration: none; cursor: pointer; border-radius: 0; }
.abas-linha > a:hover, .abas-linha > button:hover:not(:disabled) { color: var(--titulo); }
.abas-linha > [aria-current="page"], .abas-linha > [aria-selected="true"] { color: var(--titulo); border-bottom-color: var(--verde-marca); }
.abas-linha > button:disabled { opacity: .45; cursor: not-allowed; }

/* Barra superior (interface e painel) */
.barra-topo { background: var(--barra); color: #fff; padding: 12px 20px; display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.barra-topo img { height: 24px; width: auto; display: block; }
.barra-topo nav { display: flex; gap: 4px; flex-wrap: wrap; min-width: 0; }
.barra-topo nav a { color: var(--barra-texto); text-decoration: none; font-weight: 600; font-size: 14px; padding: 6px 10px; border-radius: 6px; }
.barra-topo nav a:hover { color: #fff; background: rgba(255,255,255,.08); }
.barra-topo nav a[aria-current="page"] { color: #fff; background: rgba(255,255,255,.12); }
.barra-topo .selo { margin-left: auto; font-size: 12.5px; color: var(--barra-texto); display: flex; align-items: center; gap: 6px; }
.barra-topo .selo { border: 0; padding: 0; border-radius: 0; }
.barra-topo .selo::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--sol); }
@media (max-width: 600px) { .barra-topo .selo { margin-left: 0; width: 100%; } }
/* Quem está logado e Sair (canto direito do topo) */
.barra-topo .quem { font-size: 12.5px; color: var(--barra-texto); max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barra-topo .sair { color: #fff; font: 600 13px var(--fonte); text-decoration: none; border: 1px solid rgba(255,255,255,.22); border-radius: 6px; padding: 6px 10px; min-height: 32px; display: inline-flex; align-items: center; }
.barra-topo .sair:hover { border-color: rgba(255,255,255,.5); background: rgba(255,255,255,.08); }
.barra-topo .alternar-tema { background: transparent; color: var(--barra-texto); border: 1px solid rgba(255,255,255,.22); border-radius: 6px; font: 600 13px var(--fonte); padding: 6px 10px; cursor: pointer; min-height: 32px; }
.barra-topo .alternar-tema:hover { color: #fff; border-color: rgba(255,255,255,.45); }

/* Cartões de indicador: faixa superior com a cor do significado (mesma semântica dos números) */
.indicador { position: relative; overflow: hidden; }
.indicador::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--borda-hover); }
.indicador.receita::before { background: var(--coral-barra); }
.indicador.risco::before { background: var(--ambar-barra); }
.indicador.confirmado::before { background: var(--primario); }
.indicador.ok::before { background: var(--verde-marca); }

/* As duas ações comparadas: o que se cobra e o que se libera */
.acao { font-weight: 600; padding: 1px 7px; border-radius: 6px; white-space: nowrap; }
.acao.cobra { background: var(--acao-cobra-fundo); color: var(--acao-cobra); }
.acao.libera { background: var(--acao-libera-fundo); color: var(--acao-libera); }

/* Rodapé (interface e painel) */
.rodape { max-width: 1200px; margin: 0 auto; padding: 18px 16px 32px; display: flex; gap: 16px; flex-wrap: wrap; justify-content: space-between; font-size: 12.5px; color: var(--cinza); border-top: 1px solid var(--linha); }
.rodape a { color: var(--cinza); }

/* Celular: cabeçalho compacto (logo e tema na mesma linha, navegação abaixo) */
@media (max-width: 600px) {
  .barra-topo { padding: 10px 16px; gap: 8px 12px; }
  .barra-topo .marca-link { order: 1; }
  .barra-topo .alternar-tema { order: 2; margin-left: auto; }
  .barra-topo nav { order: 3; width: 100%; }
  .barra-topo .selo { order: 4; width: 100%; font-size: 11.5px; }
  .barra-topo .sair { order: 2; }
  .barra-topo .quem { order: 5; width: 100%; max-width: none; font-size: 11.5px; }
}

/* Tabelas viram cartões no celular: cada linha empilha seus campos com o rótulo ao lado */
@media (max-width: 700px) {
  table.cartoes thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  table.cartoes, table.cartoes tbody, table.cartoes tr, table.cartoes td { display: block; width: 100%; }
  table.cartoes tr { border-bottom: 1px solid var(--linha); padding: 8px 0; }
  table.cartoes td { border: 0; padding: 6px 14px; display: grid; grid-template-columns: 9.5em 1fr; gap: 10px; text-align: left; }
  table.cartoes td.num { text-align: left; }
  table.cartoes td::before { content: attr(data-rotulo); font: 600 12px var(--fonte); color: var(--cinza); }
  table.cartoes td.vazio { display: block; }
  table.cartoes td.vazio::before { content: none; }
  table.cartoes td.inteira { grid-template-columns: 1fr; }
  table.cartoes td.inteira::before { content: none; }
}