:root {
    --fundo: #f6f5f1;
    --superficie: #ffffff;
    --borda: #e4e1d8;
    --texto: #2b2b2b;
    --texto-suave: #7a7769;
    --dourado: #b8952e;
    --creme: #faf6e8;
    --marinho: #1f3a68;
    --marinho-escuro: #162b4f;

    /* cores de estado (CLAUDE.md) */
    --pago: #e3f2e1;          /* verde: pago/finalizado */
    --pago-texto: #2e6b2a;
    --nao-pagou: #fbe3ea;     /* rosa */
    --pendente: #fdf1cc;      /* amarelo */
    --pendente-texto: #8a6a10;
    --atraso: #fde0c7;        /* laranja */
    --pago-agape: #dfeafb;    /* azul */
    --despesa-texto: #b0413e;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
    margin: 0;
    background: var(--fundo);
    color: var(--texto);
    font: 14px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

a { color: var(--marinho); }

/* ---------- topo ---------- */
.topo {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 48px;
    padding: 0 20px;
    background: var(--creme);
    border-bottom: 1px solid var(--borda);
}
.topo-marca { color: var(--dourado); font-weight: 700; }
.topo-logo { height: 32px; width: auto; max-width: 96px; object-fit: contain; display: block; }
.topo-loja { color: var(--dourado); font-weight: 600; }
.topo-usuario { margin-left: auto; display: flex; align-items: center; gap: 10px; color: var(--texto-suave); }
.topo-usuario form { margin: 0; }
.topo-cargo { background: var(--marinho); color: #fff; font-size: 12px; padding: 2px 10px; border-radius: 10px; white-space: nowrap;
    max-width: 320px; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 760px) { .topo-cargo { max-width: 120px; } }

/* ---------- menu lateral ---------- */
.corpo { display: flex; min-height: calc(100vh - 48px); }
.menu {
    flex: 0 0 200px;
    padding: 16px 0;
    background: var(--superficie);
    border-right: 1px solid var(--borda);
}
.menu-grupo {
    padding: 14px 20px 6px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--texto-suave);
}
.menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 20px;
    color: var(--texto);
    text-decoration: none;
}
.menu-item:hover { background: var(--fundo); }
.menu-item.ativo { background: var(--creme); border-left: 3px solid var(--dourado); padding-left: 17px; font-weight: 500; }
.menu-icone { width: 16px; text-align: center; color: var(--texto-suave); }

/* ---------- conteúdo ---------- */
.conteudo { flex: 1; padding: 24px 28px; min-width: 0; }
.pagina-cabecalho { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px; }
h1 { font-size: 20px; font-weight: 500; margin: 0; }
.subtitulo { margin: 4px 0 0; color: var(--texto-suave); font-size: 13px; }
.vazio {
    padding: 48px;
    text-align: center;
    color: var(--texto-suave);
    background: var(--superficie);
    border: 1px dashed var(--borda);
    border-radius: 6px;
}

/* ---------- componentes ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: 1px solid var(--marinho);
    border-radius: 4px;
    background: var(--superficie);
    color: var(--marinho);
    font: inherit;
    cursor: pointer;
}
.btn-primario { background: var(--marinho); color: #fff; }
.btn-primario:hover { background: var(--marinho-escuro); }
.btn-bloco { width: 100%; justify-content: center; }
.btn-link { background: none; border: 0; padding: 0; color: var(--marinho); font: inherit; cursor: pointer; text-decoration: underline; }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-bottom: 16px; }
.card { background: var(--superficie); border: 1px solid var(--borda); border-top: 3px solid var(--marinho); border-radius: 4px; padding: 14px 16px; }
.card-rotulo { font-size: 12px; color: var(--texto-suave); }
.card-valor { font-size: 20px; margin-top: 6px; }

.tabela { width: 100%; border-collapse: collapse; background: var(--superficie); }
.tabela th { text-align: left; font-size: 11px; font-weight: 500; text-transform: uppercase; color: var(--texto-suave); padding: 10px 12px; background: var(--fundo); }
.tabela td { padding: 10px 12px; border-top: 1px solid var(--borda); }
.tabela .num { text-align: right; font-variant-numeric: tabular-nums; }

.linha-pago, .linha-finalizado { background: var(--pago); }
.linha-nao-pagou { background: var(--nao-pagou); }
.linha-pendente { background: var(--pendente); }
.linha-atraso { background: var(--atraso); }
.linha-pago-agape { background: var(--pago-agape); }

.etiqueta { display: inline-block; padding: 2px 10px; border-radius: 4px; font-size: 12px; }
.etiqueta-pago, .etiqueta-finalizado { background: var(--pago); color: var(--pago-texto); }
.etiqueta-pendente { background: var(--pendente); color: var(--pendente-texto); }

.alerta { padding: 10px 12px; border-radius: 4px; margin-bottom: 14px; }
.alerta-erro { background: var(--nao-pagou); color: var(--despesa-texto); }

label { display: block; margin-bottom: 14px; font-size: 13px; color: var(--texto-suave); }
input, select, textarea {
    display: block;
    width: 100%;
    margin-top: 4px;
    padding: 8px 10px;
    border: 1px solid var(--borda);
    border-radius: 4px;
    font: inherit;
    color: var(--texto);
    background: var(--superficie);
}
input:focus, select:focus, textarea:focus, .btn:focus-visible { outline: 2px solid var(--dourado); outline-offset: 1px; }

/* ---------- login / erro ---------- */
body.publico { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 16px; }
.login-caixa {
    width: 100%;
    max-width: 360px;
    padding: 28px;
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-top: 3px solid var(--dourado);
    border-radius: 6px;
}
.login-caixa h1 { color: var(--dourado); margin-bottom: 4px; }
.login-logo { display: block; width: 260px; max-width: 85%; height: auto; max-height: 280px; margin: 4px auto 18px; object-fit: contain; }
.login-caixa:has(.login-logo) > h1, .login-caixa:has(.login-logo) > .subtitulo { text-align: center; }
.login-caixa form { margin-top: 18px; }
.erro-detalhe { white-space: pre-wrap; font-size: 11px; max-height: 300px; overflow: auto; background: var(--fundo); padding: 8px; }

@media (max-width: 760px) {
    .corpo { flex-direction: column; }
    .menu { flex: none; display: flex; flex-wrap: wrap; padding: 8px; border-right: 0; border-bottom: 1px solid var(--borda); }
    .menu-grupo { width: 100%; padding: 6px 8px 2px; }
    .menu-item { padding: 6px 10px; }
    .menu-item.ativo { border-left: 0; padding-left: 10px; }
    .conteudo { padding: 16px; }
    .topo-loja { font-size: 13px; }
}

/* ---------- formulários e painéis (Etapa 1) ---------- */
.painel { background: var(--superficie); border: 1px solid var(--borda); border-radius: 6px; padding: 18px 20px; margin-bottom: 18px; }
.painel h2 { font-size: 15px; font-weight: 600; margin: 22px 0 4px; }
.painel h2:first-of-type { margin-top: 0; }
.painel h3 { font-size: 13px; font-weight: 600; margin: 18px 0 8px; }
.painel > .subtitulo { margin-bottom: 12px; }
.grade-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0 16px; margin-top: 12px; }
.grade-form .col-2 { grid-column: span 2; }
.grade-form .col-4 { grid-column: 1 / -1; }
.grade-form .acoes, .painel > .acoes { grid-column: 1 / -1; }
.acoes { display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px; }
.acoes-linha { text-align: right; white-space: nowrap; }
.acoes-linha form { display: inline-block; margin: 0 0 0 4px; }
label.check { display: flex; align-items: center; gap: 8px; color: var(--texto); align-self: end; padding-bottom: 8px; }
label.check input { width: auto; margin: 0; }
input.num { text-align: right; font-variant-numeric: tabular-nums; }
input:disabled, select:disabled { background: var(--fundo); color: var(--texto-suave); }
[aria-invalid="true"] { border-color: var(--despesa-texto); }
.erro-campo { display: block; color: var(--despesa-texto); font-size: 12px; margin-top: 2px; }
.alerta-sucesso { background: var(--pago); color: var(--pago-texto); }
.btn-perigo { border-color: var(--despesa-texto); color: var(--despesa-texto); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
a.btn { text-decoration: none; }
.voltar { display: inline-block; margin-bottom: 6px; text-decoration: none; font-size: 13px; }
.texto-suave { color: var(--texto-suave); }
.linha-inativa td { color: var(--texto-suave); }
.tabela td input, .tabela td select { margin: 0; }
.tabela-compacta td { padding: 6px 8px; }
.tabela-rolagem { overflow-x: auto; }
.filtros { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-bottom: 14px; }
.filtros label { margin: 0; min-width: 200px; }

@media (max-width: 760px) {
    .grade-form .col-2 { grid-column: auto; }
    .acoes-linha { white-space: normal; }
}

/* ---------- acesso (Etapa 1A) ---------- */
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.painel-estreito { max-width: 420px; }
.card-valor-texto { font-size: 15px; }
.perfis-layout { display: grid; grid-template-columns: 240px 1fr; gap: 16px; align-items: start; }
.perfis-lista { padding: 8px 0; }
.perfis-item { display: flex; justify-content: space-between; padding: 7px 16px; color: var(--texto); text-decoration: none; }
.perfis-item:hover { background: var(--fundo); }
.perfis-item.ativo { background: var(--creme); border-left: 3px solid var(--dourado); padding-left: 13px; font-weight: 500; }
.perfis-novo { display: flex; gap: 6px; padding: 10px 12px 4px; border-top: 1px solid var(--borda); margin-top: 8px; }
.perfis-novo input { margin: 0; }
.perfis-novo .btn { white-space: nowrap; }
.perfis-matriz .pagina-cabecalho { margin-bottom: 8px; }
.matriz .centro, .tabela th.centro { text-align: center; }
.matriz input[type="checkbox"] { width: auto; display: inline-block; margin: 0; }
.matriz-grupo td { background: var(--fundo); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--texto-suave); }
.topo-usuario a { color: var(--texto-suave); }

@media (max-width: 760px) {
    .perfis-layout { grid-template-columns: 1fr; }
}

/* ---------- ágape (Etapa 2) ---------- */
.botoes { display: flex; gap: 8px; align-items: flex-start; }
.botoes form { margin: 0; }
.card-receita { border-top-color: var(--marinho); }
.card-despesa { border-top-color: var(--dourado); }
.card-saldo { border-top-color: var(--pago-texto); }
.texto-despesa { color: var(--despesa-texto); }
.tabela .centro { text-align: center; }
.etiqueta-especial { background: var(--creme); color: var(--dourado); padding: 0 6px; }

.dialogo { border: 1px solid var(--borda); border-radius: 8px; padding: 22px 24px; width: min(420px, calc(100vw - 32px)); color: var(--texto); background: var(--superficie); }
.dialogo::backdrop { background: rgba(20, 30, 50, .35); }
.dialogo h2 { font-size: 16px; font-weight: 600; margin: 0 0 14px; }
.aviso-dialogo { font-size: 12px; color: var(--pendente-texto); background: var(--pendente); padding: 8px 10px; border-radius: 4px; }

.agape-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.agape-barra input[type="date"] { width: auto; margin: 0; }
.agape-barra label.check { padding: 0; margin: 0; align-self: center; }
.agape-titulo { font-size: 16px; font-weight: 500; margin: 0 6px; }
.barra-espaco { flex: 1; }
.pendente-salvar { box-shadow: 0 0 0 3px var(--pendente); }
.faixa-finalizado { background: var(--pendente); color: var(--pendente-texto); text-align: center; padding: 8px; border-radius: 4px; margin-bottom: 10px; }

.grade-agape-caixa { max-height: calc(100vh - 230px); overflow: auto; border: 1px solid var(--borda); border-radius: 4px; }
.grade-agape thead th { position: sticky; top: 0; z-index: 1; }
.grade-agape td { padding: 4px 10px; }
.grade-agape td.nome { min-width: 220px; }
.grade-agape select, .grade-agape input { padding: 5px 8px; }
.grade-agape select { min-width: 120px; }
.grade-agape input.marmita { width: 64px; display: inline-block; }
.grade-agape input.valor { width: 100px; display: inline-block; }
.grade-agape input[type="checkbox"] { width: auto; display: inline-block; }
.grade-agape .linha-filha td { border-top: 0; }
.grade-agape .linha-filha .nome { display: flex; align-items: center; gap: 6px; padding-left: 22px; }
.grade-agape .linha-visitante .nome { display: flex; align-items: center; gap: 6px; }
.seta { color: var(--texto-suave); }
.btn-remover { background: var(--nao-pagou); border: 1px solid #e7b9c5; color: var(--despesa-texto); border-radius: 4px; cursor: pointer; padding: 2px 8px; }
#secao-despesas { margin-top: 16px; }

.rodape-agape {
    position: sticky; bottom: 0; z-index: 2;
    display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px;
    background: var(--superficie); border: 1px solid var(--borda); border-radius: 4px;
    padding: 8px 12px; margin-top: 12px; box-shadow: 0 -2px 6px rgba(0, 0, 0, .05);
}
.rodape-item { text-align: center; }
.rodape-item span { display: block; font-size: 11px; text-transform: uppercase; color: var(--texto-suave); }
.rodape-item strong { font-weight: 500; font-variant-numeric: tabular-nums; }
.rodape-nao_pagou strong, .rodape-despesas strong { color: var(--despesa-texto); }
.rodape-saldo strong, .rodape-acumulado strong { color: var(--pago-texto); }

@media (max-width: 760px) {
    .rodape-agape { grid-template-columns: repeat(4, 1fr); }
    .barra-espaco { display: none; }
}

/* ---------- mensalidades e pendências (Etapa 3) ---------- */
.btn-pequeno { padding: 4px 10px; font-size: 13px; }
.btn.desabilitado { opacity: .4; pointer-events: none; }
.barra-ano { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; background: var(--superficie); border: 1px solid var(--borda); border-radius: 4px; padding: 8px 12px; margin-bottom: 12px; }
.legenda { display: flex; gap: 6px; flex-wrap: wrap; }
.cel-pago { background: var(--pago); color: var(--pago-texto); }
.cel-pendente { background: var(--pendente); color: var(--pendente-texto); }
.cel-atraso { background: var(--atraso); color: #9a4a12; }

.grade-mensalidades-caixa { overflow: auto; max-height: calc(100vh - 260px); border: 1px solid var(--borda); border-radius: 4px; background: var(--superficie); }
.grade-mensalidades { min-width: 1100px; }
.grade-mensalidades th, .grade-mensalidades td { padding: 4px 6px; }
.grade-mensalidades thead th { position: sticky; top: 0; z-index: 2; }
.grade-mensalidades .nome { position: sticky; left: 0; z-index: 1; background: var(--superficie); text-align: left; font-weight: 400; min-width: 210px; white-space: nowrap; }
.grade-mensalidades thead .nome { z-index: 3; background: var(--fundo); }
.grade-mensalidades tbody .nome, .grade-mensalidades tfoot .nome { text-transform: none; font-size: 13px; color: var(--texto); padding-left: 10px; }
.grade-mensalidades tr.linha-nao-pagou .nome { background: var(--nao-pagou); }
.grade-mensalidades .cel { text-align: center; line-height: 1.15; min-width: 74px; font-size: 12px; }
.grade-mensalidades .cel strong { display: block; font-size: 12px; }
.grade-mensalidades .cel[role="button"] { cursor: pointer; }
.grade-mensalidades .cel[role="button"]:hover, .grade-mensalidades .cel:focus-visible { outline: 2px solid var(--dourado); outline-offset: -2px; }
.grade-mensalidades th.mes-atual { background: var(--marinho); color: #fff; }
.grade-mensalidades td.mes-atual { box-shadow: inset 2px 0 0 var(--marinho), inset -2px 0 0 var(--marinho); }
.grade-mensalidades .traco { color: var(--texto-suave); }
.grade-mensalidades tfoot th, .grade-mensalidades tfoot td { position: sticky; bottom: 0; background: var(--fundo); font-weight: 600; border-top: 2px solid var(--borda); }
.grade-mensalidades tfoot .nome { z-index: 3; }

.alternador { display: flex; gap: 6px; margin-bottom: 14px; }
.alternador label { flex: 1; margin: 0; text-align: center; border: 1px solid var(--marinho); border-radius: 4px; padding: 7px 6px; color: var(--marinho); cursor: pointer; }
.alternador input { position: absolute; opacity: 0; width: 1px; }
.alternador label:has(input:checked) { background: var(--marinho); color: #fff; }
.alternador label:has(input:focus-visible) { outline: 2px solid var(--dourado); }
.dialogo-largo { width: min(560px, calc(100vw - 32px)); }

.card-despesa-vermelho { border-top-color: var(--despesa-texto); }
.painel-filtros { background: var(--superficie); border: 1px solid var(--borda); border-radius: 4px; padding: 10px 12px; }
.abas { display: flex; gap: 6px; align-self: flex-end; }
.abas .btn { text-decoration: none; }
.vazio-tabela { text-align: center; color: var(--texto-suave); padding: 40px; }
.paginacao { display: flex; align-items: center; gap: 12px; margin-top: 12px; }

/* ---------- tronco, despesas e receitas (Etapa 4) ---------- */
.texto-entrada { color: var(--pago-texto); }
.etiqueta-dinheiro { background: var(--pago); color: var(--pago-texto); }
.etiqueta-pix { background: var(--pago-agape); color: var(--marinho); }
.etiqueta-misto { background: var(--creme); color: var(--dourado); }
.etiqueta-despesa { background: var(--nao-pagou); color: var(--despesa-texto); }
.etiqueta-receita { background: var(--pago); color: var(--pago-texto); }
.etiqueta-fixa { background: var(--creme); color: var(--dourado); }
.etiqueta-geral { background: var(--pago-agape); color: var(--marinho); }
.linha-a-pagar { background: #fbf6e9; }
.form-ano { margin: 0; }
.form-ano input { width: 90px; display: inline-block; margin: 0 0 0 4px; }
.grade-form-2 { grid-template-columns: 1fr 1fr; margin-top: 0; }
.campo-com-botao { display: flex; gap: 6px; align-items: center; margin-top: 4px; }
.campo-com-botao select, .campo-com-botao input { margin: 0; }
.campo-com-botao .btn { white-space: nowrap; }
#nova-categoria { margin-bottom: 14px; }
fieldset.replicar { border-top: 1px solid var(--borda); padding-top: 10px; margin-top: 4px; }
fieldset.replicar legend { font-weight: 600; font-size: 13px; padding: 0 4px 0 0; }
.form-excluir { border-top: 1px solid var(--borda); margin-top: 14px; padding-top: 12px; text-align: left; }
.rodape-totais { display: flex; flex-wrap: wrap; gap: 24px; background: var(--superficie); border: 1px solid var(--borda); border-radius: 4px; padding: 10px 14px; margin-top: 10px; }
.rodape-total { margin-left: auto; }
@media (max-width: 760px) { .grade-form-2 { grid-template-columns: 1fr; } }

/* ---------- saldos (Etapa 5) ---------- */
.painel-tabela { padding: 0; overflow: hidden; }
.painel-tabela .nota { margin: 0; padding: 10px 14px; font-size: 12px; color: var(--texto-suave); border-top: 1px solid var(--borda); }
.titulo-secao { font-size: 13px; font-weight: 500; color: var(--texto-suave); margin: 22px 0 8px; }
.tabela-saldos tfoot th, .tabela-saldos tfoot td { background: var(--pendente); font-weight: 600; border-top: 2px solid var(--borda); padding: 10px 12px; text-align: left; }
.tabela-saldos tfoot td.num { text-align: right; }
.btn-expandir { background: none; border: 0; padding: 0; font: inherit; color: var(--texto); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.seta-expandir { color: var(--texto-suave); transition: transform .15s; display: inline-block; }
.btn-expandir[aria-expanded="true"] .seta-expandir { transform: rotate(90deg); }
.linha-composicao td { background: var(--fundo); padding: 6px 12px 10px 34px; border-top: 0; }
.composicao { list-style: none; margin: 0; padding: 0; max-width: 460px; }
.composicao li { display: flex; justify-content: space-between; padding: 3px 0; font-size: 13px; }
.composicao-total { border-top: 1px solid var(--borda); margin-top: 4px; padding-top: 6px !important; font-weight: 600; }
.linha-alerta td { background: var(--pendente); }

/* ---------- importação de extrato (Etapa 6) ---------- */
.alerta-pendente { background: var(--pendente); color: var(--pendente-texto); }
.tabela-extrato td { vertical-align: top; padding: 8px 8px; }
.tabela-extrato select, .tabela-extrato input { margin: 0; padding: 5px 6px; }
.tabela-extrato select[data-campo="irmao"] { min-width: 200px; }
.tabela-extrato input.meses { width: 60px; display: inline-block; }
.tabela-extrato input.valor { width: 100px; display: inline-block; }
.tabela-extrato small { display: block; margin-top: 3px; }
.linha-diferente td, .etiqueta.linha-diferente { background: var(--pendente); }
.linha-ignorada td { color: var(--texto-suave); text-decoration: line-through; }
.linha-ignorada td select, .linha-ignorada td input { text-decoration: none; }
.linha-com-erro td { background: var(--nao-pagou); }
.texto-alerta { color: #9a4a12; font-size: 12px; }
.legenda-extrato { font-size: 12px; margin-top: 8px; }

/* ---------- relatórios (Etapa 7) ---------- */
.nota-cards { font-size: 12px; margin: -6px 0 14px; }
.abas-relatorio { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; margin-bottom: -1px; }
.abas-relatorio a { padding: 6px 14px; border: 1px solid var(--borda); border-bottom: 0; border-radius: 4px 4px 0 0; background: var(--fundo); color: var(--texto); text-decoration: none; font-size: 13px; }
.abas-relatorio a.ativa { background: var(--superficie); font-weight: 600; color: var(--marinho); }
.painel-relatorios { padding: 18px; }
.bloco-relatorio { border: 1px solid var(--borda); border-radius: 6px; padding: 16px 18px; margin-bottom: 12px; }
.bloco-relatorio h2 { margin: 0 0 4px !important; }
.bloco-relatorio p { margin: 0 0 12px; font-size: 13px; }

/* ---------- fechamento (Etapa 8) ---------- */
.lista-verificacao { margin: 6px 0 14px; padding-left: 20px; }
.lista-verificacao li { margin: 4px 0; }
.lista-bloqueios li { color: var(--despesa-texto); }
.lista-avisos li { color: var(--pendente-texto); }
.form-fechar { margin-top: 18px; border-top: 1px solid var(--borda); padding-top: 14px; }
.links-consulta a { margin-right: 10px; font-size: 13px; }
.recibo-link { text-decoration: none; font-size: 14px; margin-left: 6px; }

/* ---------- documentos (Etapa 8A) ---------- */
.cards-4 { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.arvore h2 { margin-bottom: 10px !important; }
details.pasta { border: 1px solid var(--borda); border-radius: 6px; margin: 6px 0; background: var(--superficie); }
details.pasta > summary { display: flex; align-items: center; gap: 8px; padding: 8px 10px; cursor: pointer; list-style: none; }
details.pasta > summary::-webkit-details-marker { display: none; }
details.pasta > summary::before { content: '▸'; color: var(--texto-suave); transition: transform .15s; }
details.pasta[open] > summary::before { transform: rotate(90deg); }
.pasta-nome { font-weight: 500; }
.pasta-conteudo { padding: 0 10px 8px 26px; }
.pasta-vazia { margin: 4px 0 6px; font-size: 12px; }
.acoes-pasta { display: flex; gap: 4px; }
.doc-linha { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-top: 1px solid var(--borda); }
.doc-info { flex: 1; min-width: 0; }
.doc-titulo { font-weight: 500; margin-right: 6px; }
.etiqueta-tag { background: var(--pago-agape); color: var(--marinho); font-size: 11px; padding: 0 6px; }
.etiqueta-grau { background: var(--fundo); color: var(--texto-suave); font-size: 11px; }
.etiqueta-grau.grau-2 { background: #e8e4f7; color: #4b3b8f; }
.etiqueta-grau.grau-3 { background: #f5e6d6; color: #8a4b12; }
.etiqueta-grau.grau-4 { background: #f6efd2; color: #7a5d00; }
.etiqueta-grau.grau-5 { background: #f8dede; color: #8f2424; }
.etiqueta-status-ativo { background: var(--pago); color: var(--pago-texto); }
.etiqueta-status-rascunho { background: var(--pendente); color: var(--pendente-texto); }
.etiqueta-status-arquivado { background: var(--fundo); color: var(--texto-suave); }
.etiqueta-vencido { background: var(--nao-pagou); color: var(--despesa-texto); }
fieldset.gestores { border-top: 1px solid var(--borda); padding-top: 8px; margin-bottom: 10px; }
fieldset.gestores legend { font-weight: 600; font-size: 13px; }
fieldset.gestores label.check { padding: 2px 0; margin: 0; }
@media (max-width: 760px) { .doc-linha { flex-wrap: wrap; } }

/* ---------- biblioteca e trabalhos (Etapa 8B) ---------- */
.biblioteca-inicio { text-align: center; max-width: 900px; margin: 20px auto; }
.biblioteca-marca { font-size: 40px; }
.cards-biblioteca { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin: 24px 0; text-align: left; }
.card-biblioteca { display: flex; flex-direction: column; gap: 6px; padding: 20px; background: var(--superficie); border: 1px solid var(--borda); border-radius: 10px; color: var(--texto); text-decoration: none; }
.card-biblioteca:hover { box-shadow: 0 4px 14px rgba(0,0,0,.08); }
.icone-biblioteca { font-size: 22px; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 8px; }
.icone-biblioteca.verde { background: var(--pago); } .icone-biblioteca.azul { background: var(--pago-agape); } .icone-biblioteca.laranja { background: var(--atraso); }
.card-biblioteca .contagem { font-size: 12px; font-weight: 600; margin-top: 6px; }
.atalhos-biblioteca { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; border-top: 1px solid var(--borda); padding-top: 14px; }
.atalhos-biblioteca a { color: var(--texto); text-decoration: none; font-size: 13px; }
.grade-livros { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; }
.livro { background: var(--superficie); border: 1px solid var(--borda); border-radius: 6px; overflow: hidden; display: flex; flex-direction: column; }
.livro-capa { position: relative; aspect-ratio: 3 / 4; display: grid; place-items: center; color: #fff; padding: 12px; text-align: center; font-weight: 600; font-family: Georgia, serif; }
.livro-capa img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.faixa-disp { position: absolute; left: 0; right: 0; bottom: 0; font-size: 11px; padding: 3px; text-align: center; font-family: system-ui, sans-serif; }
.faixa-disp.ok { background: #2fa36b; } .faixa-disp.zero { background: #9a4a12; } .faixa-disp.ebook { background: #1f3a68; }
.livro-info { padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; font-size: 12px; flex: 1; }
.livro-info strong { font-size: 12px; text-transform: uppercase; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.livro-rodape { display: flex; justify-content: space-between; align-items: center; margin-top: auto; }
.livro-acoes { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 10px 10px; }
.livro-acoes form { margin: 0; }
.titulo-painel { margin: 0; padding: 12px 14px !important; border-bottom: 1px solid var(--borda); font-size: 14px; }
.titulo-escuro { background: var(--marinho); color: #fff; }
.cabecalho-painel { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.cabecalho-painel h2 { margin: 0 !important; font-size: 14px; }
.form-inline { display: flex; gap: 6px; align-items: center; margin: 0; }
.form-inline label { margin: 0; display: flex; align-items: center; gap: 6px; }
.form-inline select, .form-inline input { margin: 0; width: auto; }
input.curto { width: 70px !important; }
.etiqueta-trab-enviado { background: var(--pago-agape); color: var(--marinho); }
.etiqueta-trab-em_avaliacao { background: var(--pendente); color: var(--pendente-texto); }
.etiqueta-trab-aprovado { background: var(--pago); color: var(--pago-texto); }
.etiqueta-trab-devolvido { background: var(--nao-pagou); color: var(--despesa-texto); }
.parecer { border-left: 3px solid var(--dourado); margin: 6px 0; padding: 6px 12px; background: var(--creme); }
.texto-longo { white-space: normal; line-height: 1.6; }
.painel-estreito-largo { max-width: 760px; }
.form-assumir { margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--borda); }

/* ---------- auditoria (Etapa 8C) ---------- */
.filtros-auditoria { margin-bottom: 16px; }
.filtros-auditoria .acoes { align-items: center; }
.filtros-auditoria .acoes .texto-suave { margin-right: auto; }
.filtro-aviso { margin: 0 0 12px; }
.grade-form-auditoria { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px 14px; }
.cards-auditoria { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .cards-auditoria { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.grade-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.auditoria-tops .painel { margin-bottom: 0; }
.auditoria-tops { margin-bottom: 16px; }
.etiqueta-sessao-ativa { background: var(--pago); color: var(--pago-texto); }
.etiqueta-sessao-finalizada { background: #e8eaef; color: #444; }
.etiqueta-sessao-expirada { background: var(--pendente); color: var(--pendente-texto); }
.etiqueta-sessao-falha { background: var(--nao-pagou); color: var(--despesa-texto); }
.etiqueta-acao-excluir, .etiqueta-acao-cancelar, .etiqueta-acao-devolver { background: var(--nao-pagou); color: var(--despesa-texto); }
.etiqueta-acao-criar, .etiqueta-acao-aprovar { background: var(--pago); color: var(--pago-texto); }
.etiqueta-acao-editar { background: var(--pago-agape); color: var(--marinho); }
.sem-quebra { white-space: nowrap; }
.diff summary { cursor: pointer; font-size: 12px; color: var(--marinho); }
.tabela-diff { width: 100%; border-collapse: collapse; margin-top: 6px; font-size: 12px; }
.tabela-diff th, .tabela-diff td { border: 1px solid var(--borda); padding: 4px 6px; text-align: left; vertical-align: top; word-break: break-word; max-width: 360px; }
.diff-alterado .diff-antes, .diff-removido .diff-antes { background: #fde8e8; text-decoration: line-through; text-decoration-color: #c99; }
.diff-alterado .diff-depois, .diff-incluido .diff-depois { background: #e3f5e8; }
.paginacao { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; padding: 10px 14px; border-top: 1px solid var(--borda); font-size: 13px; }
.paginacao-por, .paginacao-nav { display: flex; gap: 6px; align-items: center; }
.alerta-info { background: #eaf1fb; color: var(--marinho); border: 1px solid #c9d8ef; }
.texto-ajuda p { margin: 0 0 8px; line-height: 1.55; } .texto-ajuda p:last-child { margin-bottom: 0; }

/* ---------- WhatsApp (melhoria 2) ---------- */
.btn-whatsapp { border-color: #1f9d55; color: #17733f; }
.btn-whatsapp:hover { background: #e6f6ec; }
.recibo-whatsapp { text-decoration: none; }
.icone-whatsapp { display: inline-flex; vertical-align: middle; margin-left: 6px; color: #1f9d55; }
.icone-whatsapp:hover { color: #17733f; }
.celula-telefone { white-space: nowrap; }
.form-whatsapp label { display: block; margin-bottom: 4px; }
.form-whatsapp textarea { width: 100%; font-family: inherit; }
.form-whatsapp .variaveis { margin: 0 0 14px; font-size: 12px; }
.form-whatsapp .variaveis code { background: var(--creme); padding: 1px 4px; border-radius: 3px; }
.texto-receita { color: var(--pago-texto); }

/* ---------- resumo para o grupo (melhoria 6) ---------- */
.resumo-grupo textarea { width: 100%; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; line-height: 1.5; margin: 10px 0 6px; }
.resumo-acoes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* ---------- busca no texto dos documentos ---------- */
.doc-trecho { flex-basis: 100%; margin: 4px 0 0; font-size: 12px; color: var(--texto); line-height: 1.45; }
.doc-trecho mark { background: #fff1b8; padding: 0 1px; border-radius: 2px; }
.capa-com-imagem { background: #eee; }
.capa-cor-0 { background: #1f3a68; } .capa-cor-1 { background: #7a4b12; } .capa-cor-2 { background: #2e6b2a; }
.capa-cor-3 { background: #5b2a6b; } .capa-cor-4 { background: #8a2a2a; } .capa-cor-5 { background: #2a5b6b; }

/* ---------- logotipo da loja (Configurações) ---------- */
.logo-config { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px; }
.logo-coluna { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.logo-remover { margin: 0; }
.logo-previa { width: 120px; height: 120px; border: 1px dashed var(--borda); border-radius: 6px; display: flex; align-items: center; justify-content: center; background: #fff; }
.logo-previa img { max-width: 110px; max-height: 110px; object-fit: contain; }
.logo-envio { flex: 1; min-width: 260px; }
.logo-envio label { display: flex; flex-direction: column; gap: 4px; }

/* ---------- foto e assinatura do irmão ---------- */
.grade-imagens { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.bloco-imagem { display: flex; flex-direction: column; gap: 8px; }
.bloco-imagem > label:not(.check) { display: flex; flex-direction: column; gap: 4px; }
.imagem-previa { border: 1px dashed var(--borda); border-radius: 6px; background: #fff; display: flex; align-items: center; justify-content: center; }
.imagem-previa img { object-fit: contain; max-width: 100%; max-height: 100%; }
.imagem-previa-foto { width: 120px; height: 150px; }
.imagem-previa-assinatura { width: 260px; height: 90px; }

/* ---------- e-mail (Configurações) ---------- */
.form-email .variaveis { margin: 0; font-size: 12px; }
.form-email .variaveis code { background: var(--creme); padding: 1px 4px; border-radius: 3px; }
.form-email textarea { width: 100%; font-family: inherit; }
.dicas-email { font-size: 13px; }
.dicas-email ul { margin: 6px 0 0; padding-left: 20px; }
.form-email-teste { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--borda); }
.form-email-teste label { display: flex; flex-direction: column; gap: 4px; min-width: 260px; }

/* ---------- comunicados ---------- */
.form-comunicado > label { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.form-comunicado textarea { width: 100%; font-family: inherit; }
.form-comunicado .variaveis code { background: var(--creme); padding: 1px 4px; border-radius: 3px; }
.filtros-destinatarios { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 6px 0; }
.filtros-destinatarios select { width: auto; }
.lista-destinatarios { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 2px 16px; max-height: 360px;
    overflow-y: auto; border: 1px solid var(--borda); border-radius: 6px; padding: 8px 12px; background: #fff; }
.barra-envio { width: 100%; height: 14px; margin-top: 12px; }
.texto-comunicado { white-space: normal; line-height: 1.6; }

/* ---------- Início (painel) ---------- */
.card-texto .card-valor { font-size: 15px; }
.card-detalhe { font-size: 12px; color: var(--texto-suave); margin-top: 4px; }
a.card-link { display: block; color: inherit; text-decoration: none; transition: box-shadow .15s, transform .15s; }
a.card-link:hover { box-shadow: 0 2px 8px rgba(31, 58, 104, .15); transform: translateY(-1px); }
a.card-link .card-valor { color: var(--marinho); }
.pizzas { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; margin-top: 8px; }
.pizza-bloco { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.pizza-bloco figcaption { font-weight: 600; color: var(--marinho); }
.pizza { max-width: 100%; height: auto; }
.pizza a path:hover, .pizza a circle:hover { opacity: .85; }
.legenda-pizza { list-style: none; margin: 0; padding: 0; width: 100%; font-size: 13px; }
.legenda-pizza li { display: flex; align-items: center; gap: 8px; padding: 2px 0; }
.legenda-cor { width: 12px; height: 12px; border-radius: 2px; flex: none; }
.legenda-valor { margin-left: auto; white-space: nowrap; color: var(--texto-suave); }
.painel-atencao { border-left: 4px solid var(--atraso, #f0a35e); }
.lista-atencao, .lista-simples { margin: 0 0 8px; padding-left: 18px; }
.lista-atencao li, .lista-simples li { padding: 3px 0; }
.blocos-inicio { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 0 16px; align-items: start; }
.aniversario-hoje { background: var(--pendente); border-radius: 3px; padding-left: 4px; }
.legenda-cor-0 { background: #1f3a68; }
.legenda-cor-1 { background: #c9a227; }
.legenda-cor-2 { background: #4f7cac; }
.legenda-cor-3 { background: #8a6a10; }
.legenda-cor-4 { background: #7da36b; }
.legenda-cor-5 { background: #a35d5d; }
.legenda-cor-6 { background: #6b5b95; }
.legenda-cor-7 { background: #9aa5b1; }
.total-linha td { border-top: 2px solid var(--borda); }
.pix-loja { margin-top: 10px; padding: 10px 12px; background: var(--creme); border-radius: 6px; }

/* ---------- gráfico de barras (Tronco) ---------- */
.grafico-barras { overflow-x: auto; }
.barras { max-width: 100%; height: auto; display: block; margin: 0 auto; }
.legenda-barras { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: center; font-size: 13px; }
.legenda-barras li { display: flex; align-items: center; gap: 6px; }

/* ---------- gráficos do Painel de Saldos ---------- */
.graficos-saldos-topo { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 12px; }
.graficos-saldos-topo h2 { margin-bottom: 2px; }
.indicadores-saldos { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.indicadores-saldos div { display: flex; flex-direction: column; font-size: 12px; }
.indicadores-saldos strong { font-size: 18px; }
.grafico-linhas { overflow-x: auto; }
.linhas { max-width: 100%; height: auto; display: block; margin: 8px auto 0; }
.graficos-saldos-baixo { display: grid; grid-template-columns: minmax(0, 2fr) minmax(240px, 1fr); gap: 24px; margin-top: 18px;
    border-top: 1px solid var(--borda); padding-top: 14px; }
.graficos-saldos-baixo figure { margin: 0; }
.graficos-saldos-baixo figcaption { font-weight: 600; color: var(--marinho); margin-bottom: 8px; }
@media (max-width: 900px) { .graficos-saldos-baixo { grid-template-columns: 1fr; } }
.form-relatorio-parcial { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.form-relatorio-parcial label { display: flex; flex-direction: column; gap: 4px; }
.lista-lote { list-style: none; margin: 10px 0 0; padding: 0; max-height: 220px; overflow-y: auto; font-size: 13px; }
.lista-lote li { padding: 3px 0; border-bottom: 1px solid var(--borda); }
.lista-lote .lote-ok { color: var(--pago-texto); }
.lista-lote .lote-erro { color: var(--despesa-texto); }

/* ---------- nome do sistema no centro da barra superior ---------- */
.topo { position: relative; }
.topo-sistema { position: absolute; left: 50%; transform: translateX(-50%); color: var(--marinho); font-weight: 700; font-size: 17px;
    letter-spacing: .5px; text-decoration: none; white-space: nowrap; }
.topo-sistema:hover { color: var(--dourado); }
@media (max-width: 1280px) { .topo-sistema { display: none; } }
.sobre { line-height: 1.7; max-width: 860px; }
.sobre h2 { color: var(--marinho); }
.sobre p { text-align: justify; margin: 0 0 12px; }
.sobre blockquote { margin: 4px 0 14px; padding: 8px 16px; border-left: 3px solid var(--dourado); background: var(--creme); font-style: italic; }
.sobre-credito { margin-top: 20px; padding-top: 10px; border-top: 1px solid var(--borda); font-size: 13px; color: var(--texto-suave); }

/* ---------- instalador (public/instalador.php) ---------- */
.instalador { align-items: flex-start; }
.instalador-caixa { max-width: 920px; margin: 24px auto; padding: 0 16px; }
.instalador-caixa h1 { color: var(--marinho); }
.lista-requisitos { list-style: none; padding: 0; margin: 0; columns: 2 280px; font-size: 13px; }
.lista-requisitos li { padding: 2px 0; break-inside: avoid; }
.req-ok { color: var(--pago-texto); } .req-aviso { color: var(--pendente-texto); } .req-erro { color: var(--despesa-texto); font-weight: 600; }
.form-instalador .tabela input[type="text"], .form-instalador .tabela input:not([type]) { width: 100%; }
.btn-grande { font-size: 16px; padding: 10px 22px; }
.aviso-remover { margin: 12px 0; }
.env-conteudo { width: 100%; font-family: monospace; font-size: 12px; }
.campo-codigo { font-family: monospace; letter-spacing: 2px; text-transform: uppercase; max-width: 240px; }
.modo-instalacao { border: 1px solid var(--borda); border-radius: 6px; padding: 8px 14px; margin: 0 0 12px; }
.modo-instalacao legend { font-weight: 600; padding: 0 4px; }
.modo-instalacao label { display: block; margin: 4px 0; }