/* App dos sócios (/socios) — mobile-first, CSS próprio (não depende do Tailwind compilado). */
:root{--bg:#211720;--card:#392737;--card2:#372635;--fg:#fff;--mut:rgba(255,255,255,.6);--y:#fbc213;--g:#00d084;--m:#cc034f;--o:#fb9502;--nav-h:64px}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--bg);color:var(--fg);font-family:Poppins,system-ui,sans-serif;font-size:15px;line-height:1.45}
body{padding-bottom:calc(var(--nav-h) + env(safe-area-inset-bottom) + 16px);overscroll-behavior-y:contain}
a{color:inherit;text-decoration:none}
.topo{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:10px;padding:calc(10px + env(safe-area-inset-top)) 16px 10px;background:rgba(33,23,32,.92);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.08)}
.topo h1{margin:0;font:400 24px/1 "Bebas Neue",sans-serif;letter-spacing:.03em;text-transform:uppercase;flex:1}
.topo img{width:30px;height:30px;border-radius:50%}
.topo .voltar,.topo .ico{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.08);font-size:18px}
main{padding:16px;display:grid;gap:14px;max-width:560px;margin:0 auto}
.card{background:var(--card);border-radius:20px;padding:16px}
.card h2{margin:0 0 10px;font:600 12px/1 Poppins;letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.hero-num{font:400 52px/1 "Bebas Neue",sans-serif;color:var(--y)}
.sub{color:var(--mut);font-size:13px}
.grade{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mini{background:var(--card2);border-radius:16px;padding:12px}
.mini b{display:block;font:400 28px/1.1 "Bebas Neue",sans-serif}
.mini span{font-size:12px;color:var(--mut)}
.up{color:var(--g)}.down{color:var(--o)}
.barras{display:flex;align-items:flex-end;gap:4px;height:70px}
.barras i{flex:1;background:var(--y);border-radius:4px 4px 0 0;min-height:3px;opacity:.85}
.barras i:last-child{opacity:1;background:var(--g)}
.lista{display:grid;gap:8px}
.item{display:flex;align-items:center;gap:12px;background:var(--card);border-radius:16px;padding:12px 14px}
.item .corpo{flex:1;min-width:0}
.item b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pill{display:inline-block;border-radius:99px;padding:2px 10px;font-size:11px;font-weight:600;background:rgba(255,255,255,.12)}
.pill.pago{background:var(--g);color:#211720}.pill.pend{background:var(--y);color:#211720}.pill.cancel{background:var(--m)}
.filtros{display:flex;gap:8px;overflow-x:auto;padding:2px 0 4px;scrollbar-width:none}
.filtros a{flex:none;border-radius:99px;padding:7px 14px;background:var(--card);font-size:13px;font-weight:600}
.filtros a.on{background:var(--y);color:#211720}
input[type=search],textarea{width:100%;border:0;border-radius:14px;background:var(--card);color:#fff;padding:12px 14px;font:inherit}
textarea{min-height:130px;resize:vertical}
.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;border:0;border-radius:99px;padding:14px 18px;font:600 15px Poppins;background:var(--y);color:#211720;cursor:pointer}
.btn.wa{background:var(--g)}.btn.sec{background:rgba(255,255,255,.12);color:#fff}
.btn[disabled]{opacity:.5}
.modelo{background:var(--card2);border-radius:16px;padding:12px;display:grid;gap:8px}
.modelo p{margin:0;font-size:13px;color:var(--mut);white-space:pre-wrap}
.modelo .feito{font-size:12px;color:var(--g)}
.linha{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px solid rgba(255,255,255,.07)}
.linha:last-child{border:0}
.vazio{text-align:center;color:var(--mut);padding:28px 8px}
.nav{position:fixed;inset:auto 0 0;z-index:30;display:grid;grid-template-columns:repeat(4,1fr);height:calc(var(--nav-h) + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);background:#2b1d2a;border-top:1px solid rgba(255,255,255,.1)}
.nav a{display:grid;place-items:center;align-content:center;gap:2px;font-size:11px;color:var(--mut);position:relative}
.nav a svg{width:22px;height:22px}
.nav a.on{color:var(--y)}
.nav .badge{position:absolute;top:6px;left:calc(50% + 6px);background:var(--m);color:#fff;border-radius:99px;font-size:10px;font-weight:700;padding:1px 6px}
.toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0}
.toggle input{width:22px;height:22px;accent-color:var(--y)}
.aviso{font-size:13px;background:rgba(251,194,19,.12);border:1px solid rgba(251,194,19,.4);border-radius:14px;padding:10px 12px}
.toast{position:fixed;left:16px;right:16px;top:calc(12px + env(safe-area-inset-top));z-index:50;background:var(--g);color:#211720;font-weight:600;border-radius:14px;padding:12px 14px}
.toast.erro{background:var(--m);color:#fff}
@media (min-width:700px){body::before{content:"Este app foi pensado para o celular.";display:block;text-align:center;padding:8px;background:var(--y);color:#211720;font-size:13px}}
input.campo{width:100%;border:0;border-radius:14px;background:var(--card2);color:#fff;padding:13px 14px;font:inherit}
.topo .site{width:auto;padding:0 12px;font-size:13px;font-weight:600;border-radius:99px}