/* Portal do Condomínio Pioneiro — tema (claro/escuro automático) */
:root {
  --fundo: #F4F5F1; --superficie: #FFFFFF; --borda: #DDE1DA; --borda-suave: #EEF0EC;
  --texto: #1C2321; --texto-2: #5B655F; --verde: #2F6B4F; --verde-esc: #1F4A36; --verde-claro: #E7F0EA;
  --verde-medio: #6FA287; --laranja: #9A4A0A; --laranja-barra: #C9772B; --destaque: #1F4A36; --destaque-txt: #CFE3D7;
  --aviso-fundo: #FFF6E8; --aviso-borda: #F0D9B5; --aviso-txt: #5A3A10;
  --bs-body-bg: var(--fundo); --bs-body-color: var(--texto); --bs-link-color: var(--verde); --bs-link-hover-color: var(--verde-esc);
  --bs-link-color-rgb: 47,107,79; --bs-link-hover-color-rgb: 31,74,54;
  --bs-font-sans-serif: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fundo: #121614; --superficie: #181D1A; --borda: #2A312D; --borda-suave: #222925;
    --texto: #E6EAE7; --texto-2: #9AA59F; --verde: #8CCBA8; --verde-esc: #B5E0C7; --verde-claro: #1E3328;
    --verde-medio: #4C7F65; --laranja: #F0A766; --laranja-barra: #E08B3E; --destaque: #1E4A36; --destaque-txt: #BFDCCB;
    --aviso-fundo: #2B2213; --aviso-borda: #4A3A1E; --aviso-txt: #F2D7AE;
    --bs-link-color-rgb: 140,203,168; --bs-link-hover-color-rgb: 181,224,199;
  }
}
body { background: var(--fundo); color: var(--texto); font-family: var(--bs-font-sans-serif); }
.pular { position: absolute; left: 8px; top: 8px; z-index: 10; background: var(--superficie); padding: 8px 12px; border-radius: 8px; }

.topo { background: var(--superficie); border-bottom: 1px solid var(--borda); }
.marca { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--texto); }
.marca-icone { width: 40px; height: 40px; border-radius: 10px; background: #2F6B4F; color: #fff; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.marca-nome { display: block; font-weight: 800; font-size: 1.1rem; line-height: 1.1; }
.marca-sub { display: block; font-size: .82rem; color: var(--texto-2); }
.menu { display: flex; flex-wrap: wrap; gap: 4px; }
.menu a { padding: 10px 14px; border-radius: 8px; text-decoration: none; font-weight: 600; color: var(--texto); min-height: 44px; display: inline-flex; align-items: center; }
.menu a:hover { background: var(--borda-suave); }
.menu a.ativo { background: var(--verde-claro); color: var(--verde-esc); }

main { padding-top: 28px; padding-bottom: 56px; }
.secao { margin-bottom: 28px; scroll-margin-top: 16px; }
.rotulo { font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-2); }
.valor-condominio { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 6px; background: var(--verde-claro); color: var(--verde-esc); border-radius: 10px; padding: 8px 14px; font-size: 1.05rem; }
.valor-condominio strong { font-size: 1.35rem; font-weight: 800; }
.valor-condominio span { font-size: .9rem; opacity: .85; }
h1.titulo-mes { font-size: clamp(1.6rem, 4vw, 2.2rem); font-weight: 800; margin: 4px 0 0; }
h2 { font-size: 1.2rem; font-weight: 700; }

.cartao { background: var(--superficie); border: 1px solid var(--borda); border-radius: 14px; padding: 20px; height: 100%; }
.cartao-destaque { background: var(--destaque); border-color: var(--destaque); color: #fff; }
.cartao-destaque .kpi-rotulo, .cartao-destaque .kpi-sub { color: var(--destaque-txt); }
.kpi-rotulo { font-size: .9rem; color: var(--texto-2); }
.kpi-valor { white-space: nowrap; font-size: clamp(1.1rem, 5vw, 1.7rem); font-weight: 800; margin-top: 4px; font-variant-numeric: tabular-nums; }
.kpi-sub { font-size: .9rem; color: var(--texto-2); margin-top: 4px; }
.txt-receita { color: var(--verde); } .txt-despesa { color: var(--laranja); }
.cotas { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; margin-top: 12px; }
.cotas span { height: 10px; border-radius: 3px; background: var(--borda); }
.cotas span.paga { background: var(--verde); }

.barra-item { margin-bottom: 14px; }
.barra-item .linha { display: flex; justify-content: space-between; gap: 12px; }
.barra-item .valor { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.barra-item .cat { font-size: .8rem; color: var(--texto-2); }
.barra { height: 8px; background: var(--borda-suave); border-radius: 4px; margin-top: 6px; overflow: hidden; }
.barra > span { display: block; height: 8px; background: var(--laranja-barra); border-radius: 4px; }

.tabela-resumo { width: 100%; }
.tabela-resumo td { padding: 10px 0; border-bottom: 1px solid var(--borda-suave); }
.tabela-resumo td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.tabela-resumo tr:last-child td { border-bottom: 0; font-weight: 800; }

.seletor select, .seletor .btn { min-height: 44px; }
.btn-seta { width: 44px; display: inline-flex; align-items: center; justify-content: center; }

.aviso-faixa { background: var(--aviso-fundo); border: 1px solid var(--aviso-borda); color: var(--aviso-txt); border-radius: 12px; padding: 14px 18px; }
.aviso-faixa a { color: inherit; font-weight: 700; }

.periodos { display: inline-flex; gap: 4px; background: var(--borda-suave); padding: 4px; border-radius: 10px; }
.periodos button { min-height: 36px; padding: 0 12px; border: 0; border-radius: 7px; background: transparent; color: var(--texto); font-size: .9rem; }
.periodos button[aria-pressed="true"] { background: var(--superficie); font-weight: 700; }
.grafico { position: relative; height: 260px; }

.lista-docs { background: var(--superficie); border: 1px solid var(--borda); border-radius: 14px; }
.lista-docs .doc { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--borda-suave); }
.lista-docs .doc:last-child { border-bottom: 0; }
.lista-docs .doc-info { flex: 1 1 240px; min-width: 0; }
.lista-docs .doc-meta { font-size: .85rem; color: var(--texto-2); }
.lista-docs .doc a.baixar { min-height: 44px; display: inline-flex; align-items: center; font-weight: 600; }
.icone-pdf { color: var(--laranja); flex: none; }

.rodape { border-top: 1px solid var(--borda); background: var(--superficie); color: var(--texto-2); font-size: .9rem; }

/* Painel do síndico */
.admin-wrap { display: flex; flex-wrap: wrap; min-height: 100vh; }
.admin-menu { flex: 1 1 220px; max-width: 260px; background: #1C2321; color: #E6EAE7; padding: 20px 14px; display: flex; flex-direction: column; gap: 4px; }
.admin-menu a, .admin-menu button { padding: 12px 10px; border-radius: 8px; text-decoration: none; color: #E6EAE7; text-align: left; background: none; border: 0; width: 100%; }
.admin-menu a:hover, .admin-menu button:hover { background: #2A312D; }
.admin-menu a.ativo { background: #2F6B4F; color: #fff; font-weight: 600; }
.admin-conteudo { flex: 999 1 560px; min-width: 0; padding: 28px clamp(16px, 3vw, 32px); }
.form-control, .form-select { min-height: 42px; }
.tabela-meses td, .tabela-meses th { white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 600px) {
  .admin-menu { max-width: none; flex-direction: row; flex-wrap: wrap; padding: 10px; }
  .admin-menu a, .admin-menu button { width: auto; }
  .admin-menu .titulo-admin { width: 100%; }
}

.anos-admin { display: flex; flex-wrap: wrap; gap: 6px; }
.anos-admin a { min-height: 40px; display: inline-flex; align-items: center; gap: 6px; padding: 0 14px; border: 1px solid var(--borda); border-radius: 20px; background: var(--superficie); color: var(--texto); text-decoration: none; font-weight: 600; font-variant-numeric: tabular-nums; }
.anos-admin a:hover { border-color: var(--verde); }
.anos-admin a.ativo { background: var(--verde-esc); border-color: var(--verde-esc); color: #fff; }
.anos-admin .alerta { font-size: .78rem; font-weight: 700; color: #8A4F0F; background: #FDE9C8; border-radius: 10px; padding: 1px 6px; }

.chip-cotas { align-items: center; }
.chip-cotas .cotas { display: inline-grid; grid-template-columns: repeat(8, 10px); gap: 3px; margin: 0 0 0 4px; }
.chip-cotas .cotas span { height: 10px; width: 10px; border-radius: 3px; }

.grade-cotas th, .grade-cotas td { white-space: nowrap; }
.grade-cotas th a { color: inherit; text-decoration: none; font-weight: 600; font-size: .85rem; }
.cota-ok { display: inline-flex; width: 26px; height: 26px; align-items: center; justify-content: center; border-radius: 6px; background: var(--verde-claro); color: var(--verde-esc); font-weight: 800; }
.cota-aberta { display: inline-flex; width: 26px; height: 26px; align-items: center; justify-content: center; border-radius: 6px; background: #FDE9C8; color: #8A4F0F; font-weight: 800; }
.tabela-cotas td, .tabela-cotas th { white-space: nowrap; }

.grade-aptos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.apto-btn { min-height: 64px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--borda); border-radius: 12px; font-size: 1.4rem; font-weight: 800; color: var(--texto); text-decoration: none; background: var(--superficie); }
.apto-btn:hover { border-color: var(--verde); background: var(--verde-claro); }
.pix-qr { max-width: 260px; background: #fff; padding: 8px; border-radius: 12px; }
.pix-ok { width: 64px; height: 64px; margin: 0 auto; border-radius: 50%; background: var(--verde); color: #fff; font-size: 2rem; display: flex; align-items: center; justify-content: center; }

.aviso-faixa a.btn-success { color: #fff; }
.aviso-faixa a.btn-outline-dark { color: var(--aviso-txt); border-color: currentColor; }

.cota-clique { border: 0; cursor: pointer; padding: 0; }
.cota-clique:hover { outline: 2px solid var(--verde); outline-offset: 1px; }

.marca-sub { max-width: 72ch; }
@media (max-width: 600px) { .marca-sub { font-size: .78rem; } }

/* consulta de cotas: apto como botão de rádio */
.apto-radio { position: relative; margin: 0; cursor: pointer; }
.apto-radio input { position: absolute; opacity: 0; inset: 0; }
.apto-radio .apto-btn { width: 100%; }
.apto-radio input:checked + .apto-btn { border-color: var(--verde); background: var(--verde-claro); color: var(--verde-esc); box-shadow: 0 0 0 2px var(--verde); }
.apto-radio input:focus-visible + .apto-btn { outline: 3px solid var(--verde); outline-offset: 2px; }