/* ══════════════════════════════════════════════════════════════
   estilo.css — Identidade visual AABB Nova Friburgo
   Paleta espelha o dashboard existente (azul marinho + amarelo).
   Mobile-first: Wilton (gerente) usa celular no dia a dia.
   ══════════════════════════════════════════════════════════════ */

:root {
  --blue:#003087; --blue-dark:#002060; --blue-light:#1a4db3; --blue-soft:#E8EEFA;
  --yellow:#FFD100; --yellow-dark:#E6BC00;
  --bg:#F1F5F9; --surface:#fff;
  --border:#E2E8F0; --border-strong:#CBD5E1;
  --text:#0F172A; --text2:#475569; --text3:#94A3B8;
  --shadow-sm:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.04);
  --shadow:0 2px 8px rgba(0,0,0,.08),0 1px 3px rgba(0,0,0,.05);
  --shadow-md:0 4px 16px rgba(0,0,0,.1),0 2px 6px rgba(0,0,0,.06);
  --shadow-lg:0 8px 32px rgba(0,0,0,.12),0 4px 12px rgba(0,0,0,.08);
  --radius:10px; --radius-lg:14px; --radius-xl:18px;
  --sidebar-w:230px; --bottomnav-h:64px;
  --ok:#16A34A; --warn:#D97706; --err:#DC2626;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:'Inter',-apple-system,sans-serif;background:var(--bg);color:var(--text);min-height:100vh;font-size:14px;line-height:1.5}
button,input,select,textarea{font-family:inherit}
button{cursor:pointer;-webkit-tap-highlight-color:transparent}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* ═══════════════ LOGIN ═══════════════ */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;position:relative;overflow:hidden;
  background:linear-gradient(135deg,var(--blue-dark) 0%,var(--blue) 55%,var(--blue-light) 100%);}
.login-bg-foto{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.28;filter:saturate(1.1)}
.login-bg-veu{position:absolute;inset:0;background:linear-gradient(135deg,rgba(0,32,96,.88),rgba(0,48,135,.75) 60%,rgba(26,77,179,.7))}
.login-orb{position:absolute;border-radius:50%;filter:blur(70px);opacity:.35;pointer-events:none}
.login-orb.o1{width:340px;height:340px;background:var(--yellow);top:-120px;right:-90px}
.login-orb.o2{width:280px;height:280px;background:var(--blue-light);bottom:-100px;left:-70px}
.login-card{position:relative;background:var(--surface);border-radius:26px;max-width:400px;width:100%;box-shadow:0 32px 80px rgba(0,0,0,.45);overflow:hidden}
.login-hero{background:var(--blue);padding:34px 32px 26px;position:relative;overflow:hidden}
.login-hero::after{content:'';position:absolute;bottom:-40px;right:-40px;width:170px;height:170px;border-radius:50%;background:rgba(255,209,0,.12)}
.login-logo{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.login-logo-mark{width:50px;height:50px;border-radius:14px;background:var(--yellow);display:flex;align-items:center;justify-content:center;font-weight:900;font-size:14px;color:var(--blue);line-height:1.15;text-align:center;flex-shrink:0;box-shadow:0 4px 12px rgba(0,0,0,.2)}
.login-logo-text h1{font-size:17px;font-weight:800;color:#fff}
.login-logo-text p{font-size:11.5px;color:rgba(255,255,255,.6);margin-top:2px}
.login-tagline{font-size:12.5px;color:rgba(255,255,255,.72);line-height:1.6}
.login-body{padding:28px 32px 30px}
.login-field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.login-field label{font-size:12px;font-weight:600;color:var(--text2)}
.login-field input{padding:11px 13px;border:1.5px solid var(--border);border-radius:var(--radius);font-size:14px;background:var(--bg);color:var(--text)}
.login-field input:focus{outline:none;border-color:var(--blue-light)}
.login-err{display:none;padding:10px 14px;background:#FEF2F2;border:1px solid #FCA5A5;border-radius:var(--radius);font-size:12.5px;color:var(--err);text-align:center;margin-bottom:12px}
.login-err.show{display:block}
.login-btn{width:100%;padding:13px;background:var(--blue);color:#fff;border:none;border-radius:var(--radius);font-size:14px;font-weight:700;letter-spacing:.2px}
.login-btn:hover{background:var(--blue-light)}
.login-btn:disabled{opacity:.6;cursor:default}
.login-hint{text-align:center;font-size:11px;color:var(--text3);margin-top:14px}

/* ═══════════════ SHELL (app.html) ═══════════════ */
#app-shell{display:flex;min-height:100vh}
.sidebar{width:var(--sidebar-w);flex-shrink:0;background:var(--blue-dark);color:#fff;display:flex;flex-direction:column;padding:20px 14px;position:sticky;top:0;height:100vh}
.sidebar-logo{display:flex;align-items:center;gap:10px;padding:6px 8px 22px}
.sidebar-logo-mark{width:38px;height:38px;border-radius:10px;background:var(--yellow);color:var(--blue);font-weight:900;font-size:11px;display:flex;align-items:center;justify-content:center;text-align:center;line-height:1.1;flex-shrink:0}
.sidebar-logo-text{font-size:13px;font-weight:700;color:#fff}
.sidebar-logo-text small{display:block;font-size:10.5px;font-weight:500;color:rgba(255,255,255,.55)}
.nav-item{display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:var(--radius);color:rgba(255,255,255,.72);font-size:13.5px;font-weight:600;margin-bottom:2px;background:transparent;border:none;width:100%;text-align:left}
.nav-item .nav-ico{font-size:16px;width:20px;text-align:center}
.nav-item:hover{background:rgba(255,255,255,.06);color:#fff}
.nav-item.active{background:var(--yellow);color:var(--blue-dark)}
.sidebar-footer{margin-top:auto;padding-top:14px;border-top:1px solid rgba(255,255,255,.12)}
.sidebar-user{display:flex;align-items:center;gap:9px;font-size:12px;color:rgba(255,255,255,.85);margin-bottom:8px;word-break:break-all}
.sidebar-user-av{width:30px;height:30px;border-radius:50%;background:var(--yellow);color:var(--blue-dark);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12px;flex-shrink:0}
.btn-sair{width:100%;padding:9px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:var(--radius);color:#fff;font-size:12.5px;font-weight:600}
.btn-sair:hover{background:rgba(255,255,255,.16)}

.conteudo{flex:1;min-width:0;padding:22px 26px 90px;max-width:1200px}
.topbar-mobile{display:none}

.pagina-header{position:relative;border-radius:var(--radius-xl);overflow:hidden;margin-bottom:22px;min-height:130px;display:flex;align-items:flex-end;background:var(--blue)}
.pagina-header-foto{position:absolute;inset:0;background-size:cover;background-position:center}
.pagina-header-veu{position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,32,96,.88),rgba(0,48,135,.35))}
.pagina-header-txt{position:relative;padding:20px 24px;color:#fff}
.pagina-header-txt h2{font-size:20px;font-weight:800}
.pagina-header-txt p{font-size:12.5px;color:rgba(255,255,255,.8);margin-top:3px}

/* bottom nav mobile */
.bottomnav{display:none}

@media (max-width:880px){
  .sidebar{display:none}
  #app-shell{display:block}
  .topbar-mobile{display:flex;align-items:center;justify-content:space-between;background:var(--blue-dark);color:#fff;padding:14px 16px;position:sticky;top:0;z-index:20}
  .topbar-mobile-logo{display:flex;align-items:center;gap:9px;font-weight:800;font-size:13.5px}
  .topbar-mobile-mark{width:30px;height:30px;border-radius:8px;background:var(--yellow);color:var(--blue-dark);font-weight:900;font-size:9.5px;display:flex;align-items:center;justify-content:center;text-align:center;line-height:1}
  .conteudo{padding:16px 14px calc(var(--bottomnav-h) + 20px)}
  .bottomnav{display:flex;position:fixed;bottom:0;left:0;right:0;background:var(--surface);border-top:1px solid var(--border);z-index:30;box-shadow:0 -4px 16px rgba(0,0,0,.06)}
  .bottomnav-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:9px 2px 8px;background:none;border:none;color:var(--text3);font-size:10px;font-weight:600}
  .bottomnav-item .nav-ico{font-size:18px}
  .bottomnav-item.active{color:var(--blue)}
  .bottomnav-more{position:fixed;bottom:var(--bottomnav-h);left:0;right:0;background:var(--surface);border-top:1px solid var(--border);padding:10px;display:none;gap:6px;flex-wrap:wrap;z-index:29;box-shadow:var(--shadow-lg)}
  .bottomnav-more.show{display:flex}
}

/* ═══════════════ CARDS / KPIs ═══════════════ */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:20px}
.kpi-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:16px;box-shadow:var(--shadow-sm)}
.kpi-card .kpi-num{font-size:26px;font-weight:800;color:var(--blue)}
.kpi-card .kpi-label{font-size:12px;color:var(--text2);font-weight:600;margin-top:2px}

.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:18px;box-shadow:var(--shadow-sm)}

/* ═══════════════ TOOLBAR / FILTROS ═══════════════ */
.toolbar{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:16px;align-items:center}
.toolbar input[type=text],.toolbar input[type=month],.toolbar select{padding:9px 12px;border:1.5px solid var(--border);border-radius:var(--radius);font-size:13px;background:var(--surface);color:var(--text)}
.toolbar input[type=text]{flex:1;min-width:180px}
.btn{padding:10px 16px;border-radius:var(--radius);font-size:13px;font-weight:700;border:none}
.btn-primary{background:var(--blue);color:#fff}
.btn-primary:hover{background:var(--blue-light)}
.btn-secundario{background:var(--bg);color:var(--text);border:1.5px solid var(--border)}
.btn-secundario:hover{background:var(--border)}
.btn-perigo{background:#FEF2F2;color:var(--err);border:1.5px solid #FCA5A5}
.btn-sm{padding:6px 11px;font-size:12px}

/* ═══════════════ LISTA SÓCIOS ═══════════════ */
.lista-socios{display:flex;flex-direction:column;gap:8px}
.socio-item{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:13px 16px;display:flex;align-items:center;gap:12px;box-shadow:var(--shadow-sm)}
.socio-av{width:38px;height:38px;border-radius:50%;background:var(--blue-soft);color:var(--blue);font-weight:800;font-size:13px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.socio-info{flex:1;min-width:0}
.socio-nome{font-weight:700;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.socio-meta{font-size:11.5px;color:var(--text3);margin-top:2px}
.socio-acoes{display:flex;gap:6px;flex-shrink:0}
.chip{display:inline-block;padding:3px 9px;border-radius:20px;font-size:10.5px;font-weight:700;letter-spacing:.2px}
.chip-efetivo{background:var(--blue-soft);color:var(--blue)}
.chip-comunitario{background:#FEF3C7;color:#92400E}
.chip-ativo{background:#DCFCE7;color:#166534}
.chip-inativo{background:#F1F5F9;color:var(--text3)}
.vazio{text-align:center;padding:40px 20px;color:var(--text3);font-size:13px}

/* ═══════════════ MODAL / FORM ═══════════════ */
.modal-veu{position:fixed;inset:0;background:rgba(0,20,50,.55);z-index:100;display:flex;align-items:flex-start;justify-content:center;padding:20px;overflow-y:auto}
.modal-veu.hidden{display:none}
.modal-caixa{background:var(--surface);border-radius:var(--radius-xl);max-width:640px;width:100%;margin:16px 0 40px;box-shadow:var(--shadow-lg)}
.modal-topo{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid var(--border)}
.modal-topo h3{font-size:15.5px;font-weight:800;color:var(--blue)}
.modal-fechar{background:none;border:none;font-size:20px;color:var(--text3);line-height:1;padding:4px}
.modal-corpo{padding:20px 22px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-grid .full{grid-column:1/-1}
@media (max-width:560px){.form-grid{grid-template-columns:1fr}}
.campo{display:flex;flex-direction:column;gap:5px}
.campo label{font-size:11.5px;font-weight:700;color:var(--text2)}
.campo input,.campo select,.campo textarea{padding:9px 11px;border:1.5px solid var(--border);border-radius:var(--radius);font-size:13px;background:var(--bg);color:var(--text)}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:none;border-color:var(--blue-light)}
.form-acoes{display:flex;justify-content:flex-end;gap:10px;margin-top:18px;padding-top:16px;border-top:1px solid var(--border)}

.subsecao{margin-top:22px;padding-top:18px;border-top:1px dashed var(--border)}
.subsecao h4{font-size:13px;font-weight:800;color:var(--blue);margin-bottom:10px;display:flex;align-items:center;justify-content:space-between}
.dep-item{display:flex;align-items:center;gap:10px;padding:9px 12px;border:1px solid var(--border);border-radius:var(--radius);margin-bottom:7px;font-size:12.5px}
.dep-item .dep-info{flex:1}
.dep-item .dep-nome{font-weight:700}
.dep-item .dep-meta{color:var(--text3);font-size:11px}

/* ═══════════════ COMPETÊNCIA / NAVEGAÇÃO DE MÊS ═══════════════ */
.competencia-nav{display:flex;align-items:center;gap:10px;margin-bottom:16px;flex-wrap:wrap}
.competencia-label{font-size:14.5px;font-weight:800;color:var(--blue);min-width:140px;text-align:center}
.subtitulo-secao{font-size:14px;font-weight:800;color:var(--blue);margin:22px 0 10px}

/* ═══════════════ CHIPS EXTRA (mensalidades/locações/financeiro) ═══════════════ */
.chip-pago{background:#DCFCE7;color:#166534}
.chip-pendente{background:#FEF3C7;color:#92400E}

/* ═══════════════ CALENDÁRIO DE LOCAÇÕES ═══════════════ */
.legenda-espacos{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:14px;font-size:11.5px;color:var(--text2)}
.legenda-item{display:flex;align-items:center;gap:5px}
.legenda-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.calendario-cab{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-bottom:6px;text-align:center;font-size:11px;font-weight:700;color:var(--text3)}
.calendario-grade{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.calendario-dia{min-height:78px;border:1px solid var(--border);border-radius:8px;padding:5px;display:flex;flex-direction:column;gap:3px;cursor:pointer;background:var(--surface);overflow:hidden}
.calendario-dia:hover{border-color:var(--blue-light)}
.calendario-dia.vazio{border:none;background:transparent;cursor:default}
.calendario-dia.hoje{border-color:var(--yellow-dark);box-shadow:inset 0 0 0 1.5px var(--yellow-dark)}
.calendario-dia-num{font-size:11px;font-weight:800;color:var(--text3)}
.calendario-dia.hoje .calendario-dia-num{color:var(--blue)}
.locacao-chip{font-size:9.5px;padding:2px 5px;border-radius:5px;color:#fff;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:880px){
  .calendario-dia{min-height:58px;padding:3px}
  .locacao-chip{font-size:8.5px}
}
@media (max-width:560px){
  .calendario-cab,.calendario-grade{gap:3px}
  .calendario-dia{min-height:46px}
  .calendario-dia-num{font-size:9.5px}
}

/* ═══════════════ TABELA FINANCEIRO ═══════════════ */
.tabela-scroll{overflow-x:auto;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}
.tabela-financeiro{width:100%;border-collapse:collapse;font-size:12.5px;min-width:720px}
.tabela-financeiro th{text-align:left;padding:11px 14px;background:var(--bg);color:var(--text2);font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.3px;border-bottom:1px solid var(--border)}
.tabela-financeiro td{padding:10px 14px;border-bottom:1px solid var(--border);white-space:nowrap}
.tabela-financeiro tr:last-child td{border-bottom:none}
.valor-receita{color:var(--ok);font-weight:700}
.valor-despesa{color:var(--err);font-weight:700}
.badge-auto{background:var(--blue-soft);color:var(--blue);font-size:10px;font-weight:700;padding:3px 9px;border-radius:20px;white-space:nowrap}
.badge-manual{background:var(--bg);color:var(--text2);font-size:10px;font-weight:700;padding:3px 9px;border-radius:20px;border:1px solid var(--border)}

/* ═══════════════ RELATÓRIOS (fluxo de caixa / sócios / locações) ═══════════════ */
.relatorio-bloco{margin-bottom:24px}
.aviso-config{background:#FFFBEB;border:1.5px solid #FDE68A;border-radius:var(--radius-lg);padding:16px 18px;margin-bottom:18px}
.aviso-config h4{color:#92400E;font-size:14px;font-weight:800;margin-bottom:6px}
.aviso-config p{font-size:12.5px;color:#78350F;margin-bottom:12px;line-height:1.5}

.fluxo-contas{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}
.fluxo-conta-titulo{font-size:13px;font-weight:800;color:var(--blue);margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid var(--border)}
.fluxo-linha{display:flex;justify-content:space-between;align-items:center;font-size:12.5px;padding:6px 0}
.fluxo-linha.saldo{color:var(--text2);font-weight:700}
.fluxo-linha.total-receita b{color:var(--ok)}
.fluxo-linha.total-despesa b{color:var(--err)}
.fluxo-linha.saldo-final{border-top:1.5px solid var(--border);margin-top:6px;padding-top:10px;font-size:13.5px;font-weight:800;color:var(--blue)}
.fluxo-secao-titulo{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;color:var(--text3);margin:10px 0 4px}
.fluxo-cat-linha{display:flex;justify-content:space-between;font-size:12px;color:var(--text2);padding:3px 0}
.fluxo-cat-vazio{font-size:11.5px;color:var(--text3);padding:3px 0}

.backups-lista{display:flex;flex-direction:column;gap:8px}
.backup-item{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:12px 16px;display:flex;align-items:center;gap:12px;box-shadow:var(--shadow-sm)}
.backup-info{flex:1;min-width:0}
.backup-data{font-weight:700;font-size:13px}
.backup-meta{font-size:11px;color:var(--text3);margin-top:2px;word-break:break-word}

/* ═══════════════ CABEÇALHO DE IMPRESSÃO (só aparece no PDF) ═══════════════ */
.print-cabecalho{display:none}

/* ═══════════════ IMPORTAÇÃO CSV (rota escondida #importar) ═══════════════ */
.imp-tabela{min-width:1080px}
.imp-linha-erro td{background:#FEF2F2}
.imp-badge{font-size:10px;font-weight:700;padding:3px 9px;border-radius:20px;white-space:nowrap;display:inline-block}
.imp-badge-criar{background:#DCFCE7;color:#166534}
.imp-badge-atualizar{background:#FEF3C7;color:#92400E}
.imp-badge-erro{background:#FEE2E2;color:#991B1B}
.imp-badge-verificando{background:var(--bg);color:var(--text3);border:1px solid var(--border)}
.imp-tabela td.imp-erros{color:var(--err);font-size:11.5px;white-space:normal;max-width:220px}

/* ═══════════════ STUB "EM CONSTRUÇÃO" ═══════════════ */
.stub{text-align:center;padding:36px 20px}
.stub-emoji{font-size:34px;margin-bottom:10px}
.stub h3{font-size:16px;font-weight:800;color:var(--blue);margin-bottom:6px}
.stub p{font-size:13px;color:var(--text2);max-width:420px;margin:0 auto}

/* ═══════════════ TOASTS ═══════════════ */
#toasts{position:fixed;bottom:16px;right:16px;z-index:9999;display:flex;flex-direction:column;gap:8px}
@media (max-width:880px){#toasts{bottom:calc(var(--bottomnav-h) + 12px);right:12px;left:12px}}
.toast{padding:11px 16px;border-radius:12px;font-size:12.5px;font-weight:600;box-shadow:var(--shadow-lg);background:var(--surface);border:1px solid var(--border);color:var(--text)}
.toast.ok{border-color:#86EFAC;background:#F0FDF4;color:#166534}
.toast.err{border-color:#FCA5A5;background:#FEF2F2;color:var(--err)}

.carregando{text-align:center;padding:30px;color:var(--text3);font-size:13px}

/* ═══════════════ IMPRESSÃO (botão "Gerar PDF" -> window.print()) ═══════════════
   Layout limpo A4 retrato: esconde navegação/toolbars/backups (.no-print),
   mostra o cabeçalho com logo+clube+mês de referência+data de geração, e evita
   quebra de página no meio de um card/bloco. */
@media print {
  @page { size: A4 portrait; margin: 14mm 12mm; }
  body{background:#fff;font-size:12px}
  .sidebar,.topbar-mobile,.bottomnav,.bottomnav-more,#toasts,#modal-raiz,.no-print,.pagina-header{display:none !important}
  #app-shell{display:block}
  .conteudo{padding:0;max-width:100%}
  .print-cabecalho{display:flex;align-items:center;gap:14px;padding-bottom:14px;margin-bottom:18px;border-bottom:2px solid #003087}
  .print-cabecalho-mark{width:46px;height:46px;border-radius:10px;background:#FFD100;color:#003087;font-weight:900;font-size:12px;display:flex;align-items:center;justify-content:center;text-align:center;line-height:1.15;flex-shrink:0}
  .print-cabecalho-txt h1{font-size:16px;color:#003087;font-weight:800}
  .print-cabecalho-txt p{font-size:11px;color:#334155;margin-top:2px}
  .relatorio-bloco{break-inside:avoid;page-break-inside:avoid;margin-bottom:16px}
  .card,.kpi-card,.fluxo-conta-card,.backup-item{box-shadow:none !important;break-inside:avoid;page-break-inside:avoid}
  .kpis{gap:8px}
  .subtitulo-secao{color:#003087}
}