:root {
    --cor-paga: #1b8a3a;
    --cor-pendente: #b07a00;
    --cor-erro: #c0392b;
    --cor-info: #0b5cab;
}

.mono { font-family: monospace; font-size: 0.85rem; }

/* classes no lugar de style="" inline (bloqueado pela Content-Security-Policy) */
.form-sem-margem { margin: 0; }
.form-inline { display: inline; }
.btn-compacto { padding: 0.3rem 0.8rem; }
.btn-largo { width: 100%; margin-top: 1rem; }
.cartao-login { max-width: 380px; margin: 3rem auto; }
.lista-erros { margin: 0; }
.valor-destaque { font-size: 1.4rem; }
.codigo-destaque { font-size: 1.2rem; }
.acoes-filtro { display: flex; gap: 0.5rem; margin-top: 1rem; }
.tabela-rolagem { overflow-x: auto; }

.detalhe-cobranca { max-width: 480px; }

.qrcode { text-align: center; margin: 1.5rem 0; }
.qrcode img { max-width: 260px; }

.resumo { margin-bottom: 1.5rem; }
.resumo article { margin-bottom: 0; text-align: center; }
.resumo header { color: var(--pico-muted-color); font-size: 0.85rem; margin-bottom: 0.3rem; }

.tabela-cobrancas td.acoes { display: flex; gap: 0.4rem; flex-wrap: wrap; white-space: nowrap; }
.tabela-cobrancas td.acoes button, .tabela-cobrancas td.acoes a { padding: 0.3rem 0.6rem; font-size: 0.8rem; margin: 0; }

.badge {
    display: inline-block;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    color: white;
}

.badge-paga { background: var(--cor-paga); }
.badge-ativa { background: var(--cor-pendente); }
.badge-criada { background: #6c757d; }
.badge-expirada, .badge-erro { background: var(--cor-erro); }

.toast {
    padding: 0.8rem 1rem;
    border-radius: 6px;
    margin-bottom: 1rem;
    color: white;
    font-weight: 500;
}

.toast-sucesso { background: var(--cor-paga); }
.toast-erro { background: var(--cor-erro); }
.toast-info { background: var(--cor-info); }