:root {
  --verde-esc: #0b2a5b;
  --verde: #2f9e1c;
  --verde-2: #3aa62a;
  --verde-claro: #e8f5e1;
  --amarelo: #f5b400;
  --amarelo-claro: #fff6d6;
  --vermelho: #d63a45;
  --vermelho-claro: #fde8ea;
  --azul: #2563eb;
  --azul-claro: #e6efff;
  --tinta: #17201a;
  --tinta-2: #4a5a4f;
  --tinta-3: #7d8b82;
  --linha: #e3e9e4;
  --fundo: #f5f7f4;
  --cartao: #ffffff;
  --raio: 14px;
  --sombra: 0 1px 2px rgba(11, 42, 91, .06), 0 4px 16px rgba(11, 42, 91, .06);
  --fonte: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --titulo: 'Poppins', var(--fonte);
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: var(--fonte); color: var(--tinta); background: var(--fundo); font-size: 15px; line-height: 1.45; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { font-family: var(--titulo); margin: 0; line-height: 1.2; color: var(--verde-esc); }
h1 { font-size: 24px; font-weight: 700; }
h2 { font-size: 18px; font-weight: 600; }
h3 { font-size: 15px; font-weight: 600; }
a { color: var(--verde); }
img { max-width: 100%; }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--tinta-3); }
.small { font-size: 13px; }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
.hide { display: none !important; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.grow { flex: 1; }
.stack > * + * { margin-top: 12px; }

/* botões */
.btn { appearance: none; border: 1px solid var(--linha); background: #fff; color: var(--tinta); font: 600 14px var(--fonte); padding: 10px 16px; border-radius: 10px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; min-height: 42px; transition: background .15s, border-color .15s, transform .05s; }
.btn:hover { border-color: #c9d4cc; background: #fafcfa; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .55; cursor: default; }
.btn.prim { background: var(--verde); border-color: var(--verde); color: #fff; }
.btn.prim:hover { background: #27861a; }
.btn.perigo { color: var(--vermelho); }
.btn.perigo.cheio { background: var(--vermelho); border-color: var(--vermelho); color: #fff; }
.btn.amarelo { background: var(--amarelo); border-color: var(--amarelo); color: #3b2a00; }
.btn.peq { padding: 6px 10px; min-height: 32px; font-size: 13px; border-radius: 8px; }
.btn.fantasma { border-color: transparent; background: transparent; }
.btn.fantasma:hover { background: rgba(11, 42, 91, .06); }
.btn.bloco { width: 100%; }
.btn svg { width: 18px; height: 18px; flex: none; }

/* formulários */
label.campo { display: block; }
label.campo > span { display: block; font-size: 13px; font-weight: 600; color: var(--tinta-2); margin-bottom: 5px; }
input, select, textarea { font: 15px var(--fonte); color: var(--tinta); width: 100%; padding: 10px 12px; border: 1px solid #d3ddd6; border-radius: 10px; background: #fff; min-height: 42px; }
input:focus, select:focus, textarea:focus { outline: 2px solid rgba(35, 137, 28, .25); border-color: var(--verde); }
textarea { min-height: 70px; resize: vertical; }
input[type=checkbox] { width: 18px; height: 18px; min-height: 0; accent-color: var(--verde); }
.grade { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

/* cartões */
.cartao { background: var(--cartao); border-radius: var(--raio); box-shadow: var(--sombra); padding: 18px; }
.cartao.plano { box-shadow: none; border: 1px solid var(--linha); }

/* etiquetas */
.tag { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 99px; background: #eef1ef; color: var(--tinta-2); white-space: nowrap; }
.tag.pendente { background: var(--amarelo-claro); color: #8a5b00; }
.tag.aprovado, .tag.pago, .tag.ok { background: var(--verde-claro); color: #1d6d17; }
.tag.recusado, .tag.divergente { background: var(--vermelho-claro); color: #b0222e; }
.tag.a_pagar { background: var(--azul-claro); color: #1d4ed8; }
.tag.ilegivel, .tag.erro { background: #eef1ef; color: var(--tinta-2); }

/* tabelas */
.tabela-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.t { width: 100%; border-collapse: collapse; font-size: 14px; }
table.t th { text-align: left; font-size: 12px; font-weight: 600; color: var(--tinta-3); text-transform: uppercase; letter-spacing: .03em; padding: 8px 10px; border-bottom: 1px solid var(--linha); white-space: nowrap; }
table.t td { padding: 10px; border-bottom: 1px solid var(--linha); vertical-align: middle; }
table.t tr:last-child td { border-bottom: 0; }
table.t tfoot td { font-weight: 700; border-top: 2px solid var(--verde-esc); }
table.t .r { text-align: right; }

/* aviso / toast */
.aviso { padding: 12px 14px; border-radius: 12px; font-size: 14px; background: var(--amarelo-claro); color: #6b4700; border: 1px solid #f3dd94; }
.aviso.info { background: var(--azul-claro); color: #1e3a8a; border-color: #c7d7fb; }
.aviso.ok { background: var(--verde-claro); color: #1d5e17; border-color: #c4e5b7; }
.aviso.erro { background: var(--vermelho-claro); color: #8f1c26; border-color: #f5c2c7; }
#toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(20px); background: var(--verde-esc); color: #fff; padding: 12px 18px; border-radius: 12px; font-weight: 600; font-size: 14px; opacity: 0; pointer-events: none; transition: .25s; z-index: 1000; max-width: calc(100vw - 32px); box-shadow: 0 8px 24px rgba(0,0,0,.2); }
#toast.on { opacity: 1; transform: translateX(-50%) translateY(0); }
#toast.erro { background: var(--vermelho); }

/* modal / folha inferior */
.modal-fundo { position: fixed; inset: 0; background: rgba(8, 25, 55, .45); z-index: 500; display: flex; align-items: center; justify-content: center; padding: 16px; animation: aparece .15s; }
.modal { background: #fff; border-radius: 18px; width: 100%; max-width: 560px; max-height: calc(100vh - 32px); overflow: auto; box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.modal.largo { max-width: 860px; }
.modal-cab { display: flex; align-items: center; gap: 10px; padding: 16px 18px; border-bottom: 1px solid var(--linha); position: sticky; top: 0; background: #fff; z-index: 2; }
.modal-cab h2 { flex: 1; }
.modal-corpo { padding: 18px; }
.modal-rodape { display: flex; gap: 10px; justify-content: flex-end; padding: 14px 18px; border-top: 1px solid var(--linha); position: sticky; bottom: 0; background: #fff; flex-wrap: wrap; }
@keyframes aparece { from { opacity: 0; } }
@media (max-width: 640px) {
  .modal-fundo { align-items: flex-end; padding: 0; }
  .modal { border-radius: 18px 18px 0 0; max-height: 92vh; }
}

.foto-mini { width: 46px; height: 46px; border-radius: 8px; object-fit: cover; background: #eef1ef; cursor: zoom-in; border: 1px solid var(--linha); display: block; }
.vazio { text-align: center; padding: 36px 16px; color: var(--tinta-3); }
.vazio svg { width: 40px; height: 40px; opacity: .5; margin-bottom: 6px; }
.carregando { padding: 40px; text-align: center; color: var(--tinta-3); }
.spin { width: 18px; height: 18px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: gira .7s linear infinite; display: inline-block; vertical-align: middle; }
@keyframes gira { to { transform: rotate(360deg); } }

#zoom { position: fixed; inset: 0; background: rgba(0,0,0,.88); z-index: 900; display: flex; align-items: center; justify-content: center; padding: 16px; cursor: zoom-out; }
#zoom img { max-width: 100%; max-height: 100%; border-radius: 8px; }