*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  /* Apple dark mode — macOS Sonoma/iOS 17 */
  --bg-body:    #111111;
  --bg-sidebar: #161617;
  --bg-surface: #1c1c1e;
  --bg-card:    #242426;
  --bg-hover:   #2c2c2e;
  --bg-input:   #1c1c1e;

  /* Separators — Apple usa divisórias ultra-sutis */
  --bd1: rgba(255,255,255,0.055);
  --bd2: rgba(255,255,255,0.095);
  --bd3: rgba(255,255,255,0.15);

  /* Texto — hierarquia Apple */
  --tx1: #f5f5f7;
  --tx2: rgba(235,235,245,0.62);
  --tx3: rgba(235,235,245,0.32);
  --tx4: rgba(235,235,245,0.15);

  /* Brand green — IPPenha */
  --gr:  #30d158;
  --grl: #46e070;
  --grd: #248a3d;
  --gbr: #34c759;
  --glt: #6cd050;
  --gmd: #248a3d;

  /* Semantic — calibrado para Apple dark */
  --blue:   #0a84ff;  --bluebg:   rgba(10,132,255,0.10);
  --teal:   #5ac8fa;  --tealbg:   rgba(90,200,250,0.10);
  --violet: #bf5af2;  --violetbg: rgba(191,90,242,0.10);
  --gold:   #ffd60a;  --goldbg:   rgba(255,214,10,0.10);
  --amber:  #ff9f0a;  --amberbg:  rgba(255,159,10,0.10);
  --rose:   #ff453a;  --rosebg:   rgba(255,69,58,0.10);
  --copper: #ac8e68;  --copperbg: rgba(172,142,104,0.10);
  --sky:    #64d2ff;  --skybg:    rgba(100,210,255,0.10);

  --sw: 256px;
  --th: 52px;
  /* SF Pro em dispositivos Apple; Inter como fallback moderno */
  --sans: -apple-system, 'SF Pro Display', BlinkMacSystemFont, 'Inter', system-ui, sans-serif;
  --mono: 'SF Mono', 'Source Code Pro', ui-monospace, monospace;
  /* Apple usa border-radius generosos e consistentes */
  --r:  10px;
  --rl: 12px;
}

/* ═══ LOGIN SCREEN ══════════════════════ */
#login-screen {
  position:fixed;inset:0;z-index:1000;
  background:var(--bg-body);
  display:flex;align-items:center;justify-content:center;
  flex-direction:column;gap:0;
}
.login-box {
  width:min(400px,92vw);
  background:var(--bg-surface);
  border:1px solid var(--bd1);
  border-radius:16px;
  padding:32px 28px;
  box-shadow:0 20px 60px rgba(0,0,0,0.6);
  -webkit-font-smoothing:antialiased;
}
.login-logo {
  text-align:center;margin-bottom:-80px;
}
.login-logo-img { height:364px;width:auto;display:block;margin:0 auto }
/* tema escuro (padrão): mostra dark, esconde light */
.logo-light-only { display:none }
.logo-dark-only  { display:block }
/* tema claro: inverte */
html[data-theme="light"] .logo-dark-only  { display:none }
html[data-theme="light"] .logo-light-only { display:block }
.login-logo .lc { font-size:10px;color:var(--tx3);margin-top:3px;letter-spacing:.04em }
.login-field { margin-bottom:14px }
.login-field label { display:block;font-size:9.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--tx3);margin-bottom:5px;font-weight:600 }
.login-field input {
  width:100%;background:var(--bg-input);border:1px solid var(--bd2);
  border-radius:6px;color:var(--tx1);font-size:12.5px;padding:10px 12px;
  outline:none;transition:border-color .15s;font-family:var(--sans);
}
.login-field input:focus { border-color:var(--gr) }
.login-btn {
  width:100%;background:var(--gr);border:none;border-radius:7px;
  color:#fff;font-size:13px;font-weight:700;padding:11px;cursor:pointer;
  transition:background .15s;font-family:var(--sans);margin-top:6px;
}
.login-btn:hover { background:var(--grl) }
.login-err { color:var(--rose);font-size:11px;text-align:center;margin-top:8px;min-height:16px }
.login-ver { font-size:9px;color:var(--tx4);text-align:center;margin-top:20px }

/* ═══ ACCESS BADGE ══════════════════════ */
.access-badge {
  display:inline-flex;align-items:center;gap:5px;
  font-size:9.5px;font-weight:600;padding:3px 8px;border-radius:10px;
}

/* ═══ USERS TABLE ═══════════════════════ */
.usr-row {
  display:flex;align-items:center;gap:12px;
  padding:10px 14px;border-bottom:1px solid var(--bd1);
  transition:background .12s;
}
.usr-row:hover { background:var(--bg-hover) }
.usr-av-sm {
  width:32px;height:32px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;color:#fff;flex-shrink:0;
}
.perm-toggle {
  width:32px;height:18px;border-radius:9px;border:none;cursor:pointer;
  position:relative;transition:background .2s;flex-shrink:0;
}
.perm-toggle::after {
  content:"";position:absolute;top:2px;width:14px;height:14px;
  border-radius:50%;background:#fff;transition:left .2s;
}
.perm-toggle.on { background:var(--gr) }
.perm-toggle.on::after { left:16px }
.perm-toggle.off { background:var(--tx4) }
.perm-toggle.off::after { left:2px }

body{font-family:var(--sans);background:var(--bg-body);color:var(--tx1);display:flex;height:calc(100vh / 1.15);overflow:hidden;zoom:1.15;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.12);border-radius:10px}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,0.2)}
::-webkit-scrollbar-track{background:transparent}

/* ═══ SIDEBAR ═════════════════════════════ */
.sb{
  width:var(--sw);flex-shrink:0;
  background:var(--bg-sidebar);
  border-right:1px solid var(--bd1);
  display:flex;flex-direction:column;
  height:100%;overflow:hidden;
  position:relative;z-index:50;
  -webkit-font-smoothing:antialiased;
}

/* Logo */
.sb-logo{
  height:var(--th);flex-shrink:0;
  display:flex;align-items:center;
  padding:0 16px;gap:10px;
  border-bottom:1px solid var(--bd1);
}
.sb-logo img{
  height:28px;width:auto;
  object-fit:contain;
  filter:brightness(1.4);
  flex-shrink:0;
}
.sb-brand{display:flex;flex-direction:column;min-width:0}
.sb-sipen{font-size:14px;font-weight:700;color:var(--tx1);letter-spacing:.04em;line-height:1}
.sb-church{font-size:9.5px;color:var(--tx3);letter-spacing:.03em;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Unit selector */
.sb-unit{
  margin:8px 10px;
  background:var(--bg-surface);
  border:1px solid var(--bd1);
  border-radius:var(--r);
  padding:7px 10px;
  cursor:pointer;transition:border-color .15s;
  flex-shrink:0;
}
.sb-unit:hover{border-color:var(--bd2)}
.sb-uname{font-size:11.5px;font-weight:600;color:var(--tx1)}
.sb-utype{font-size:10px;color:var(--tx3);margin-top:1px}
.sb-uarr{float:right;color:var(--tx3);font-size:9px;margin-top:1px}

/* Nav */
.sb-nav{flex:1;overflow-y:auto;padding:4px 0 10px}

/* L1 item */
.l1{
  display:flex;align-items:center;gap:8px;
  padding:8px 14px;font-size:12.5px;font-weight:500;
  color:var(--tx2);cursor:pointer;
  border-left:3px solid transparent;
  transition:all .13s;
}
.l1:hover{color:var(--tx1);background:var(--bg-hover)}
.l1.on{color:var(--gr);background:rgba(58,170,92,0.08);border-left-color:var(--gr)}
.l1-ic{
  font-size:12px;width:26px;height:26px;
  display:flex;align-items:center;justify-content:center;
  border-radius:var(--r);
  background:var(--bg-card);
  border:1px solid var(--bd2);flex-shrink:0;
}
.l1.on .l1-ic{background:rgba(58,170,92,0.15);border-color:rgba(58,170,92,0.25);color:var(--gr)}

/* Section label */
.slbl{
  padding:16px 14px 4px;font-size:10px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--tx3);user-select:none;
  display:flex;align-items:center;gap:8px;font-weight:600;
}
.slbl::after{display:none}

/* Module wrapper */
.mwrap{margin:1px 8px;border-radius:var(--rl);overflow:hidden}

/* Module header */
.mhdr{
  display:flex;align-items:center;gap:9px;
  padding:6px 10px;font-size:12px;font-weight:500;
  color:var(--tx2);cursor:pointer;
  transition:color .12s,background .12s;border-radius:9px;
  letter-spacing:-0.01em;
}
.mhdr:hover{color:var(--tx1);background:rgba(255,255,255,0.05)}
.mhdr.open{color:var(--tx1);background:rgba(255,255,255,0.05);border-radius:9px 9px 0 0}

.micon{
  width:26px;height:26px;border-radius:7px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;border:none;
  background:rgba(255,255,255,0.07);
}
.mname{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.marr{font-size:9px;color:var(--tx3);transition:transform .2s ease;flex-shrink:0}
.mhdr.open .marr{transform:rotate(90deg)}
.mbadge{
  font-size:9px;padding:2px 5px;border-radius:10px;
  font-family:var(--mono);font-weight:500;flex-shrink:0;
}

/* Sub-items */
.msub{
  background:transparent;border:none;
  border-radius:0 0 9px 9px;
  display:none;padding-bottom:2px;
}
.msub.open{
  display:block;
  animation:sbOpen .2s ease;
}
@keyframes sbOpen{
  from{opacity:0;transform:translateY(-5px)}
  to{opacity:1;transform:translateY(0)}
}
/* Desktop: módulos sem expansão no sidebar (navegação interna via tabs) */
@media(min-width:768px){
  .mhdr-noexpand ~ .msub { display:none !important }
  .mhdr-noexpand .marr    { display:none }
}

.si{
  display:flex;align-items:center;
  padding:5px 10px 5px 38px;font-size:12px;
  color:var(--tx3);cursor:pointer;
  border-left:none;
  transition:color .1s,background .1s;position:relative;
  border-radius:7px;margin:0 4px;
  letter-spacing:-0.01em;
}
.si::before{
  content:"";position:absolute;left:24px;top:50%;
  transform:translateY(-50%);width:3px;height:3px;
  border-radius:50%;background:rgba(255,255,255,0.18);transition:background .1s;
}
.si:hover{color:var(--tx2);background:rgba(255,255,255,0.05)}
.si:hover::before{background:rgba(255,255,255,0.4)}
.si.on{color:var(--tx1)!important;background:rgba(255,255,255,0.09);font-weight:500}
.si.on::before{background:var(--gr);width:4px;height:4px}
.sdiv{height:1px;background:var(--bd1);margin:2px 10px}


/* Sistema (pinned above footer) */
.sb-sys{
  border-top:1px solid var(--bd1);
  padding:4px 0 2px;
  flex-shrink:0;background:var(--bg-sidebar);
}

/* Footer */
.sb-ft{
  border-top:1px solid var(--bd1);padding:10px;
  flex-shrink:0;background:var(--bg-sidebar);
}
.sb-usr{display:flex;align-items:center;gap:8px}
.sb-av{
  width:30px;height:30px;border-radius:50%;
  background:var(--grd);
  display:flex;align-items:center;justify-content:center;
  font-size:10px;color:#fff;font-weight:700;flex-shrink:0;
}
.sb-un{font-size:12px;font-weight:600;color:var(--tx1)}
.sb-ur{font-size:10px;color:var(--tx3);margin-top:1px}
.sb-lo{margin-left:auto;color:var(--tx3);cursor:pointer;font-size:13px;transition:color .15s}
.sb-lo:hover{color:var(--rose)}
.sb-exit-btn{display:none}

/* ═══ MAIN ═════════════════════════════ */
.main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}

.topbar{
  height:var(--th);flex-shrink:0;
  background:var(--bg-sidebar);
  border-bottom:1px solid var(--bd1);
  display:flex;align-items:center;
  padding:0 20px;gap:8px;z-index:40;
  -webkit-font-smoothing:antialiased;
}
.crumb{display:flex;align-items:center;gap:5px}
.c-mod{font-size:10px;color:var(--tx3);text-transform:uppercase;letter-spacing:.07em;font-weight:500}
.c-sep{font-size:10px;color:var(--tx4)}
.c-pg{font-size:13px;font-weight:600;color:var(--tx1);letter-spacing:-0.01em}
.c-sub{font-size:11px;color:var(--tx3)}
.trr{margin-left:auto;display:flex;align-items:center;gap:6px}
.tbt{
  background:rgba(255,255,255,0.07);
  border:1px solid rgba(255,255,255,0.09);
  border-radius:8px;
  color:var(--tx2);padding:5px 12px;font-size:11.5px;cursor:pointer;
  transition:all .12s;font-family:var(--sans);display:flex;align-items:center;gap:5px;
  font-weight:500;letter-spacing:-0.01em;
}
.tbt:hover{background:rgba(255,255,255,0.11);border-color:rgba(255,255,255,0.14);color:var(--tx1)}
.tbt.pri{background:var(--gr);border-color:transparent;color:#fff;font-weight:600;box-shadow:0 1px 4px rgba(48,209,88,0.3)}
.tbt.pri:hover{background:var(--grl);box-shadow:0 2px 8px rgba(48,209,88,0.35)}
.ndot{width:6px;height:6px;background:var(--rose);border-radius:50%}

.band{height:2px;background:var(--mc,var(--gr));flex-shrink:0;transition:background .25s}
.page{flex:1;overflow-y:auto;overflow-x:hidden}
.view{display:none}
.view.on{display:block;animation:fu .18s ease}
@keyframes fu{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}

/* ═══ HERO ═════════════════════════ */
.hero{padding:20px 20px 0;display:flex;align-items:flex-start;gap:14px;margin-bottom:18px}
.hero-ic{
  width:40px;height:40px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  font-size:18px;flex-shrink:0;
  border:none;
  background:rgba(255,255,255,0.07);
}
.hero-lbl{font-size:9.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--tx3);margin-bottom:3px;font-weight:500}
.hero-ttl{font-size:18px;font-weight:600;color:var(--tx1);line-height:1.15;letter-spacing:-0.02em}
.hero-dsc{font-size:11.5px;color:var(--tx3);margin-top:4px;line-height:1.55}
.hero-act{margin-left:auto;display:flex;align-items:center;gap:8px;flex-shrink:0}


/* ═══ BROWSER-STYLE TAB NAV ════════════════════════════════════════ */
.bnav{
  display:flex;align-items:flex-end;gap:2px;
  padding:8px 16px 0;
  border-bottom:1.5px solid var(--bd2);
  margin-bottom:20px;overflow-x:auto;flex-shrink:0;
  -webkit-overflow-scrolling:touch;
}
.bnav::-webkit-scrollbar{height:0}
.bni{
  position:relative;
  display:flex;align-items:center;gap:5px;
  padding:7px 13px 9px;
  font-size:11.5px;font-weight:500;color:var(--tx3);
  cursor:pointer;
  border-radius:7px 7px 0 0;
  border:1.5px solid transparent;border-bottom:none;
  margin-bottom:-1.5px;
  white-space:nowrap;flex-shrink:0;
  transition:color .12s,background .12s,border-color .12s;
  user-select:none;line-height:1;
}
.bni:hover:not(.on){
  color:var(--tx2);
  background:rgba(255,255,255,0.04);
  border-color:var(--bd1);
}
.bni.on{
  color:var(--tx1);font-weight:600;
  background:var(--bg-card);
  border-color:var(--bd2);
  z-index:1;
}
.bni.on::after{
  content:'';position:absolute;
  top:0;left:5px;right:5px;height:2px;
  border-radius:1px 1px 0 0;
  background:var(--mc,var(--teal));
}

/* ═══ SECTION NAV (nível 1 de módulo) ══════ */
.secnav{display:flex;align-items:center;gap:5px;padding:14px 20px 12px;border-bottom:1px solid var(--bd1);margin-bottom:0;}
.sni{padding:6px 15px;font-size:12px;font-weight:600;color:var(--tx3);cursor:pointer;border-radius:var(--r);border:1px solid var(--bd1);transition:all .12s;white-space:nowrap;}
.sni:hover{color:var(--tx1);border-color:var(--bd2);background:var(--bg-card)}
.sni.on{color:var(--tx1);background:var(--bg-card);border-color:rgba(88,152,212,0.5);color:#7db8f0;box-shadow:0 0 0 1px rgba(88,152,212,0.18) inset}
.sni-sep{width:1px;height:16px;background:var(--bd1);margin:0 2px;flex-shrink:0;}

/* ═══ CONTENT ══════════════════════ */
.ct{padding:0 20px 28px}

/* ═══ ALERT ════════════════════════ */
.alr{
  display:flex;align-items:flex-start;gap:9px;
  padding:10px 14px;border-radius:var(--r);border:1px solid;
  margin-bottom:16px;font-size:11.5px;line-height:1.55;
}
.alr-w{background:rgba(224,138,42,0.07);border-color:rgba(224,138,42,0.2);color:var(--tx2)}
.alr-w strong{color:var(--amber);font-weight:600}
.alr-i{font-size:14px;flex-shrink:0;margin-top:1px}
.alr-a{margin-left:auto;font-size:10.5px;color:var(--gr);cursor:pointer;white-space:nowrap;padding-left:10px;font-weight:600}

/* ═══ KPI CARDS (CoreUI style) ══════ */
/* Horizontal card: icon left, value right */
.kpis{display:grid;gap:10px;margin-bottom:18px}
.kpis.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
.kpis.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.kpis.c2{grid-template-columns:repeat(2,minmax(0,1fr))}

.kpi{
  background:var(--bg-card);
  border:1px solid var(--bd1);
  border-radius:var(--rl);
  padding:15px 16px;
  display:flex;align-items:center;gap:13px;
  transition:background .15s,border-color .15s;
}
.kpi:hover{background:var(--bg-hover);border-color:var(--bd2)}
.kpi-ico{
  width:40px;height:40px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  font-size:17px;flex-shrink:0;
}
.kpi-body{flex:1;min-width:0}
.kpi-lbl{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--tx3);margin-bottom:4px;font-weight:500}
.kpi-val{font-size:21px;font-weight:700;color:var(--tx1);line-height:1;font-family:var(--mono);letter-spacing:-0.02em}
.kpi-d{font-size:10.5px;display:flex;align-items:center;gap:3px;font-weight:500;margin-top:4px}
.up{color:#3dc970}.dn{color:var(--rose)}.wa{color:var(--amber)}.nu{color:var(--tx3)}

#v-admin-parking-controls .ce-kpis{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
  margin-bottom:10px;
}
#v-admin-parking-controls .ce-kpi{
  min-height:54px;
  padding:10px 12px;
  border-radius:8px;
  gap:10px;
}
#v-admin-parking-controls .ce-kpi .kpi-ico{
  width:34px;
  height:34px;
  border-radius:8px;
  font-size:15px;
}
#v-admin-parking-controls .ce-kpi .kpi-lbl{
  margin-bottom:2px;
  font-size:9.5px;
  letter-spacing:.08em;
}
#v-admin-parking-controls .ce-kpi .kpi-val{
  font-size:20px;
}
#v-admin-parking-controls .ce-kpi .kpi-d{
  margin-top:2px;
  font-size:10px;
}
@media(max-width:900px){
  #v-admin-parking-controls .ce-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:560px){
  #v-admin-parking-controls .ce-kpis{grid-template-columns:1fr}
}

/* ═══ CARD ══════════════════════════ */
.card{
  background:var(--bg-card);
  border:1px solid var(--bd1);
  border-radius:var(--rl);
  padding:16px 18px;
  box-shadow:0 1px 2px rgba(0,0,0,0.25);
  transition:background .15s,border-color .15s,box-shadow .15s;
}
.card:hover{
  background:var(--bg-hover);
  border-color:var(--bd2);
  box-shadow:0 2px 6px rgba(0,0,0,0.3);
}
.ctit{font-size:12.5px;font-weight:600;color:var(--tx1);margin-bottom:12px;display:flex;align-items:center;gap:7px;letter-spacing:-0.01em}
.csub{font-size:10.5px;color:var(--tx3);font-weight:400;margin-left:2px}
.cact{margin-left:auto;font-size:10.5px;color:var(--gr);cursor:pointer;font-weight:600}

/* ═══ GRIDS ═════════════════════════ */
.g2{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:12px;margin-bottom:14px}
.g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:14px}
.gcol{display:flex;flex-direction:column;gap:12px}

/* ═══ OVERVIEW STRIP ════════════════ */
.ostrip{
  background:var(--bg-card);border:1px solid var(--bd1);border-radius:var(--rl);
  margin-bottom:18px;display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));overflow:hidden;
}
.osi{padding:14px 16px;cursor:pointer;transition:background .12s;position:relative}
.osi:hover{background:var(--bg-hover)}
.osi+.osi::before{content:"";position:absolute;top:12px;left:0;bottom:12px;width:1px;background:var(--bd1)}
.osi-lbl{font-size:9.5px;text-transform:uppercase;letter-spacing:.09em;color:var(--tx3);margin-bottom:4px;font-weight:500}
.osi-val{font-size:20px;font-weight:700;color:var(--tx1);margin-bottom:2px;font-family:var(--mono)}
.osi-sub{font-size:10.5px;font-weight:500}

/* ═══ MODULE CARD ═══════════════════ */
.modcard{
  background:var(--bg-card);border:1px solid var(--bd1);
  border-left:3px solid var(--mc,var(--bd2));
  border-radius:var(--rl);padding:13px 15px;
  cursor:pointer;transition:all .15s;
}
.modcard:hover{background:var(--bg-hover);border-color:var(--bd2)}
.mc-head{display:flex;align-items:center;gap:8px;margin-bottom:9px}
.mc-icon{width:26px;height:26px;border-radius:var(--r);display:flex;align-items:center;justify-content:center;font-size:12px;flex-shrink:0}
.mc-name{font-size:12px;font-weight:700;color:var(--tx1);flex:1}
.mc-open{font-size:10px;color:var(--gr);opacity:.55;font-weight:500}
.modcard:hover .mc-open{opacity:1}
.sr{display:flex;justify-content:space-between;padding:5px 0;border-bottom:1px solid var(--bd1);font-size:11.5px}
.sr:last-child{border-bottom:none}
.sl{color:var(--tx2)}.sv{color:var(--tx1);font-family:var(--mono);font-size:11px}

/* ═══ TASK ROW ═══════════════════════ */
.trow{display:flex;align-items:center;gap:9px;padding:8px 0;border-bottom:1px solid var(--bd1);cursor:pointer;transition:background .1s}
.trow:last-child{border-bottom:none}
.trow:hover{background:rgba(255,255,255,0.02);margin:0 -4px;padding:8px 4px}
.tdot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.tbody{flex:1;min-width:0}
.ttitle{font-size:11.5px;color:var(--tx1);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tmeta{font-size:10.5px;color:var(--tx3);margin-top:2px}
.tright{flex-shrink:0;display:flex;flex-direction:column;align-items:flex-end;gap:2px}

/* ═══ PILLS ═════════════════════════ */
.pill{display:inline-flex;align-items:center;font-size:9.5px;font-weight:600;padding:2px 7px;border-radius:4px;letter-spacing:.03em;font-family:var(--mono)}
.pg{background:rgba(58,170,92,0.12);color:#4dc470;border:1px solid rgba(58,170,92,0.22)}
.po{background:rgba(224,138,42,0.10);color:var(--amber);border:1px solid rgba(224,138,42,0.2)}
.pp{background:rgba(74,156,245,0.10);color:var(--blue);border:1px solid rgba(74,156,245,0.2)}
.pd{background:rgba(58,170,92,0.10);color:#4dc470;border:1px solid rgba(58,170,92,0.2)}
.pl{background:rgba(224,85,85,0.10);color:var(--rose);border:1px solid rgba(224,85,85,0.2)}
.pn{background:rgba(42,181,192,0.10);color:var(--teal);border:1px solid rgba(42,181,192,0.2)}
.ps{background:rgba(224,85,85,0.08);color:var(--rose);border:1px solid rgba(224,85,85,0.18)}
.pv{background:rgba(139,111,212,0.10);color:var(--violet);border:1px solid rgba(139,111,212,0.2)}
.pz{background:rgba(255,255,255,0.04);color:var(--tx3);border:1px solid var(--bd1)}

/* ═══ BARS ═══════════════════════════ */
.bars{display:flex;flex-direction:column;gap:9px}
.bh{display:flex;justify-content:space-between;margin-bottom:3px}
.bn{font-size:11px;color:var(--tx2);font-weight:500}
.bv{font-size:11px;color:var(--tx1);font-family:var(--mono);font-weight:500}
.bt{height:5px;background:var(--bg-hover);border-radius:3px;overflow:hidden}
.bf{height:100%;border-radius:3px;transition:width 1.1s cubic-bezier(.4,0,.2,1)}

/* ═══ DASHBOARD — RESUMO FINANCEIRO ══ */
.gfr{display:flex;flex-direction:column;gap:0}
.gfr-row{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid var(--bd1)}
.gfr-row:last-child{border-bottom:none;padding-top:13px;margin-top:2px}
.gfr-lbl{font-size:12px;color:var(--tx2);font-weight:500}
.gfr-val{font-size:16px;font-weight:700;font-family:var(--mono)}
.gfr-saldo .gfr-lbl{color:var(--tx1);font-weight:700;font-size:12.5px}
.gfr-saldo .gfr-val{font-size:20px}

/* ═══ DASHBOARD — SEPARADOR DE SEÇÃO ═ */
.dash-sec{margin:24px 0 14px;display:flex;align-items:baseline;gap:8px}
.dash-sec-t{font-size:13.5px;font-weight:700;color:var(--tx1)}
.dash-sec-s{font-size:10.5px;color:var(--tx3)}

/* ═══ FEED ═══════════════════════════ */
.feed{display:flex;flex-direction:column}
.fi{display:flex;gap:9px;padding:8px 0;border-bottom:1px solid var(--bd1)}
.fi:last-child{border-bottom:none}
.fl{display:flex;flex-direction:column;align-items:center}
.fdot{width:7px;height:7px;border-radius:50%;margin-top:4px;flex-shrink:0}
.fc{width:1px;flex:1;background:var(--bd1);margin:3px 0}
.fb{flex:1;min-width:0}
.ft{font-size:11.5px;color:var(--tx2);line-height:1.55}
.ft b{color:var(--tx1);font-weight:600}
.ftm{font-size:10px;color:var(--tx3);font-family:var(--mono);margin-top:2px}

/* ═══ TABLE ══════════════════════════ */
.tbl{width:100%;border-collapse:collapse}
.tbl thead tr{background:var(--bg-surface)}
.tbl th{text-align:left;font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--tx1);padding:9px 10px 9px 0;border-bottom:2px solid var(--teal);font-weight:700;white-space:nowrap}
.tbl th:first-child{padding-left:10px;border-radius:6px 0 0 0}
.tbl th:last-child{border-radius:0 6px 0 0}
.tbl td{padding:9px 10px 9px 0;font-size:11.5px;border-bottom:1px solid var(--bd1);color:var(--tx2);vertical-align:middle}
.tbl td:first-child{padding-left:10px}
.tbl tr:last-child td{border-bottom:none}
.tbl tr:hover td{color:var(--tx1);background:rgba(255,255,255,0.03);cursor:pointer}
.tdp{color:var(--tx1)!important;font-weight:600}
.tdc{font-family:var(--mono);font-size:10.5px;color:var(--tx3)!important}

/* ═══ QUICK ACTIONS ══════════════════ */
.qa{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:18px}
.qai{
  background:var(--bg-card);border:1px solid var(--bd1);border-radius:var(--rl);
  padding:12px 13px;cursor:pointer;transition:all .15s;
  display:flex;align-items:center;gap:9px;
}
.qai:hover{border-color:var(--bd2);background:var(--bg-hover)}
.qi{width:28px;height:28px;border-radius:var(--r);display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0}
.ql{font-size:11.5px;font-weight:700;color:var(--tx1)}
.qs{font-size:10px;color:var(--tx3);margin-top:1px}

/* ═══ SEARCH ═════════════════════════ */
.srch{display:flex;align-items:center;gap:7px;background:var(--bg-input);border:1px solid var(--bd2);border-radius:var(--r);padding:7px 11px;margin-bottom:13px}
.srch input{background:none;border:none;outline:none;color:var(--tx1);font-family:var(--sans);font-size:11.5px;flex:1}
.srch input::placeholder{color:var(--tx3)}

/* ═══ SECTION HEAD ═══════════════════ */
.sh{display:flex;align-items:baseline;gap:8px;margin-bottom:12px}
.sh-t{font-size:13.5px;font-weight:700;color:var(--tx1)}
.sh-s{font-size:10.5px;color:var(--tx3)}
.sh-a{margin-left:auto;font-size:10.5px;color:var(--gr);cursor:pointer;font-weight:600}

/* ═══ MODAL ══════════════════════════ */
.mo{position:fixed;inset:0;z-index:300;background:rgba(0,0,0,0.7);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:none;align-items:center;justify-content:center}
.mo.on{display:flex}
.md{background:var(--bg-surface);border:1px solid var(--bd2);border-radius:14px;padding:22px;width:440px;max-width:92vw;animation:fu .16s ease;box-shadow:0 20px 60px rgba(0,0,0,0.6)}
.md-t{font-size:16px;font-weight:600;margin-bottom:3px;color:var(--tx1);letter-spacing:-0.02em}
.md-s{font-size:11.5px;color:var(--tx2);margin-bottom:16px}
.fg{margin-bottom:10px}
.flb{font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--tx3);margin-bottom:5px;display:block;font-weight:500}
.fi2{width:100%;background:var(--bg-hover);border:1px solid var(--bd2);border-radius:8px;color:var(--tx1);font-family:var(--sans);font-size:12px;padding:8px 11px;outline:none;transition:border-color .12s}
.fi2:focus{border-color:rgba(48,209,88,0.5);box-shadow:0 0 0 2px rgba(48,209,88,0.12)}
.fi2 option{background:var(--bg-card)}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.ma{display:flex;gap:7px;justify-content:flex-end;margin-top:16px}
.btn{padding:7px 16px;border-radius:8px;font-size:12px;font-family:var(--sans);cursor:pointer;border:1px solid var(--bd2);background:rgba(255,255,255,0.07);color:var(--tx2);transition:all .12s;font-weight:500}
.btn:hover{background:rgba(255,255,255,0.11);border-color:var(--bd3);color:var(--tx1)}
.btn-p{background:var(--gr);border-color:transparent;color:#fff;font-weight:600;box-shadow:0 1px 4px rgba(48,209,88,0.3)}
.btn-p:hover{background:var(--grl);box-shadow:0 2px 8px rgba(48,209,88,0.35)}

/* ═══ TOAST ══════════════════════════ */
.toast{position:fixed;bottom:18px;right:18px;background:var(--bg-card);border:1px solid var(--bd2);border-left:3px solid var(--gr);border-radius:var(--r);padding:11px 15px;font-size:12.5px;color:var(--tx1);z-index:500;display:none;max-width:280px;animation:fu .16s ease;box-shadow:0 8px 20px rgba(0,0,0,0.4)}
.toast.on{display:block}
.toast-s{font-size:10.5px;color:var(--tx2);margin-top:3px}

.mono{font-family:var(--mono);font-size:11px}
.pos{color:#4dc470;font-weight:600}
.neg{color:var(--rose);font-weight:600}
.wrn{color:var(--amber);font-weight:600}

/* ═══ CONGREGAÇÕES MODULE ════════════════════════ */
.cong-layout{display:grid;grid-template-columns:300px 1fr;height:calc(100vh - var(--th) - 4px);overflow:hidden}
.cong-list-col{border-right:1px solid var(--bd1);overflow-y:auto;padding:14px 12px;display:flex;flex-direction:column}
.cong-detail-col{overflow-y:auto;display:flex;flex-direction:column;min-width:0}
.cong-card{background:var(--bg-card);border:1px solid var(--bd1);border-left:3px solid transparent;border-radius:var(--rl);padding:13px 14px;margin-bottom:8px;cursor:pointer;transition:all .15s;flex-shrink:0}
.cong-card:hover{border-color:var(--bd2);background:var(--bg-hover)}
.cong-card.sel{border-left-color:var(--gr);background:rgba(58,170,92,0.07)}
.cong-card-name{font-size:12.5px;font-weight:700;color:var(--tx1);margin-bottom:4px}
.cong-card-meta{font-size:10.5px;color:var(--tx3);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.cbadge{font-size:9px;font-weight:600;padding:2px 6px;border-radius:10px}
.cbg-a{background:rgba(58,170,92,0.12);color:var(--gr);border:1px solid rgba(58,170,92,0.2)}
.cbg-i{background:rgba(224,85,85,0.08);color:var(--rose);border:1px solid rgba(224,85,85,0.18)}

/* ═══ PRESENÇA BADGES (Conselho / Reuniões) ══════ */
.badge-presente{background:rgba(58,170,92,0.12);color:var(--gr);border:1px solid rgba(58,170,92,0.25);border-radius:20px;font-size:10px;padding:2px 8px;font-weight:600;display:inline-flex;align-items:center;gap:4px}
.badge-online{background:rgba(212,168,67,0.12);color:var(--gold);border:1px solid rgba(212,168,67,0.25);border-radius:20px;font-size:10px;padding:2px 8px;font-weight:600;display:inline-flex;align-items:center;gap:4px}
.badge-ausente{background:rgba(224,85,85,0.10);color:var(--rose);border:1px solid rgba(224,85,85,0.20);border-radius:20px;font-size:10px;padding:2px 8px;font-weight:600;display:inline-flex;align-items:center;gap:4px}
.badge-justif{background:rgba(255,255,255,0.05);color:var(--tx3);border:1px solid var(--bd2);border-radius:20px;font-size:10px;padding:2px 8px;font-weight:600;display:inline-flex;align-items:center;gap:4px}
.cong-inner-tabs{display:flex;gap:0;border-bottom:1px solid var(--bd1);overflow-x:auto;padding:0 20px;flex-shrink:0;background:var(--bg-sidebar)}
.cong-inner-tabs::-webkit-scrollbar{height:0}
.citab{padding:10px 14px;font-size:11.5px;color:var(--tx3);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;font-weight:500;transition:all .12s;flex-shrink:0}
.citab:hover{color:var(--tx2)}.citab.on{color:var(--tx1);border-bottom-color:var(--gr)}
.citab-pane{display:none;padding:20px}.citab-pane.on{display:block}
.culto-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--bd1)}
.culto-row:last-child{border-bottom:none}
.culto-dt{font-family:var(--mono);font-size:10.5px;color:var(--tx3);width:82px;flex-shrink:0}
.culto-num-blk{text-align:center;min-width:38px}
.culto-num-val{font-size:15px;font-weight:700;color:var(--tx1);font-family:var(--mono);line-height:1}
.culto-num-lbl{font-size:8.5px;color:var(--tx3);text-transform:uppercase;letter-spacing:.06em;margin-top:2px}
.culto-obs{flex:1;font-size:11px;color:var(--tx2);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lid-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--bd1)}
.lid-row:last-child{border-bottom:none}
.lid-av{width:30px;height:30px;border-radius:50%;background:var(--grd);display:flex;align-items:center;justify-content:center;font-size:10px;color:#fff;font-weight:700;flex-shrink:0}
.lid-name{font-size:12px;font-weight:600;color:var(--tx1)}
.lid-func{font-size:10.5px;color:var(--tx3);margin-top:1px}
.plan-row{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--bd1)}
.plan-row:last-child{border-bottom:none}
.plan-dt-blk{background:var(--bg-surface);border:1px solid var(--bd1);border-radius:6px;padding:6px 8px;text-align:center;min-width:46px;flex-shrink:0}
.plan-dt-d{font-size:16px;font-weight:700;color:var(--tx1);font-family:var(--mono);line-height:1}
.plan-dt-m{font-size:8.5px;color:var(--teal);text-transform:uppercase;letter-spacing:.06em;font-weight:600}
.plan-body{flex:1;min-width:0}
.plan-ttl{font-size:12px;font-weight:600;color:var(--tx1);margin-bottom:3px}
.plan-meta{font-size:10.5px;color:var(--tx3)}
.cong-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;min-height:320px;color:var(--tx3);padding:40px}
.cong-empty-ico{font-size:36px;opacity:.3;margin-bottom:12px}
.cong-empty-txt{font-size:13px;color:var(--tx2);margin-bottom:4px;font-weight:600}
.cong-empty-sub{font-size:11px;text-align:center;line-height:1.6}
.cong-detail-hero{padding:20px 20px 0;display:flex;align-items:flex-start;gap:14px;margin-bottom:4px;flex-shrink:0}
.cong-stat-row{display:flex;gap:0;padding:0 20px 14px;flex-shrink:0;border-bottom:1px solid var(--bd1)}
.cong-stat{flex:1;text-align:center;padding:10px 8px;border-right:1px solid var(--bd1)}
.cong-stat:last-child{border-right:none}
.cong-stat-val{font-size:20px;font-weight:700;font-family:var(--mono);color:var(--tx1);line-height:1}
.cong-stat-lbl{font-size:9px;text-transform:uppercase;letter-spacing:.08em;color:var(--tx3);margin-top:3px;font-weight:500}
/* ═══ HAMBURGER BUTTON (oculto no desktop) ════ */
.sb-ham{display:none;background:none;border:none;color:var(--tx2);font-size:20px;cursor:pointer;padding:0 10px 0 0;line-height:1;flex-shrink:0}
.sb-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.55);z-index:149}

.dp-cal{background:var(--bg-card);border:1px solid var(--bd2);border-radius:8px;overflow:hidden}
.dp-cal-head,.dp-cal-grid{display:grid;grid-template-columns:repeat(7,1fr)}
.dp-cal-head{background:var(--bg-surface);border-bottom:1px solid var(--bd1)}
.dp-cal-dow{padding:7px 4px;text-align:center;font-size:9.5px;font-weight:700;color:var(--tx3);text-transform:uppercase}
.dp-cal-grid{gap:1px;background:var(--bd1)}
.dp-cal-cell{min-height:122px;background:var(--bg-card);padding:6px;box-sizing:border-box;border-top:2px solid transparent}
.dp-cal-cell.is-weekend{background:rgba(255,255,255,0.02)}
.dp-cal-cell.is-today{background:rgba(58,176,184,0.07);border-top-color:var(--teal)}
.dp-cal-cell.has-slots{box-shadow:inset 0 0 0 1px rgba(58,176,184,0.14)}
.dp-cal-empty{background:var(--bg-body);min-height:122px}
.dp-cal-day{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;font-size:11px;font-weight:700;color:var(--tx3)}
.dp-cal-cell.is-today .dp-cal-day{background:var(--teal);color:#fff}
.dp-slot{margin-top:5px;border:1px solid var(--bd2);border-left-width:3px;border-radius:6px;padding:6px;background:var(--bg-surface);display:flex;flex-direction:column;gap:5px}
.dp-slot.is-disponivel{background:rgba(58,170,92,0.07);border-color:rgba(58,170,92,0.30);border-left-color:#3aaa5c}
.dp-slot.is-indisponivel{background:rgba(208,104,104,0.07);border-color:rgba(208,104,104,0.30);border-left-color:#d06868}
.dp-slot.is-pendente{background:rgba(212,168,67,0.06)}
.dp-slot-top{display:flex;align-items:flex-start;gap:5px;justify-content:space-between}
.dp-slot-title{font-size:9.5px;font-weight:800;line-height:1.25;text-transform:uppercase;letter-spacing:.04em}
.dp-slot-state{font-size:8.5px;font-weight:800;border-radius:8px;padding:2px 6px;white-space:nowrap}
.dp-slot-obs{font-size:9.5px;color:var(--tx3);line-height:1.3;overflow:hidden;text-overflow:ellipsis}
.dp-slot-actions{display:flex;gap:4px;flex-wrap:wrap}
.dp-slot-actions button{border-radius:5px;font-size:9.5px;font-weight:700;cursor:pointer;font-family:var(--sans);padding:4px 7px}
.dp-slot-actions .ok{background:var(--teal);border:none;color:#fff}
.dp-slot-actions .no{background:none;border:1px solid rgba(208,104,104,0.4);color:#d06868}
.dp-slot-actions .edit{background:none;border:1px solid var(--bd2);color:var(--tx2)}
.dp-slot-actions .done{display:inline-flex;align-items:center;gap:4px;border-radius:5px;font-size:9.5px;font-weight:800;padding:4px 7px;background:rgba(58,170,92,0.16);border:1px solid rgba(58,170,92,0.32);color:#4dc470}
.dp-slot-actions .blocked{display:inline-flex;align-items:center;gap:4px;border-radius:5px;font-size:9.5px;font-weight:800;padding:4px 7px;background:rgba(208,104,104,0.12);border:1px solid rgba(208,104,104,0.28);color:#d06868}
.dp-cal-note{margin-top:10px;color:var(--tx3);font-size:10.5px}


/* ─── TABLET + MOBILE (≤ 768px) ─────────────────────── */
@media(max-width:768px){

  /* Base */
  body{zoom:1;height:100dvh;height:100vh}
  *{-webkit-tap-highlight-color:transparent}
  ::-webkit-scrollbar{display:none}
  .dp-cal{border:none;background:transparent;overflow:visible}
  .dp-cal-head{display:none}
  .dp-cal-grid{display:flex;flex-direction:column;gap:8px;background:transparent}
  .dp-cal-empty{display:none}
  .dp-cal-cell{min-height:auto;border:1px solid var(--bd2);border-radius:8px;background:var(--bg-card)}
  .dp-cal-cell:not(.has-slots){display:none}
  .dp-slot{padding:8px}
  .dp-slot-actions button{font-size:10.5px;padding:6px 9px}

  /* Sidebar overlay */
  .sb{
    position:fixed;left:0;top:0;bottom:0;
    width:min(280px,85vw);height:100%;
    transform:translateX(-110%);transition:transform .25s ease;
    z-index:150;box-shadow:4px 0 24px rgba(0,0,0,0.5);
  }
  .sb.sb-open{transform:translateX(0)}
  .sb-backdrop.sb-open{display:block}
  .sb-ft{padding-bottom:max(16px,env(safe-area-inset-bottom,16px))}
  .sb-logo{height:auto;min-height:var(--th);padding-top:max(12px,env(safe-area-inset-top,12px))}
  .sb-lo{display:none}
  .sb-exit-btn{
    display:flex;align-items:center;justify-content:center;gap:8px;
    width:100%;min-height:48px;margin-top:10px;
    padding:12px 16px;box-sizing:border-box;
    border-radius:8px;border:1px solid rgba(239,68,68,.3);
    background:rgba(239,68,68,.1);color:#ef4444;
    font-size:15px;font-weight:600;font-family:var(--ff);
    cursor:pointer;-webkit-tap-highlight-color:transparent;
    transition:background .15s;
  }
  .sb-exit-btn:active{background:rgba(239,68,68,.22)}
  .si{padding:11px 14px;min-height:44px;display:flex;align-items:center}

  /* Main */
  .main{width:100%}

  /* Topbar — safe-area para iPhone com notch/Dynamic Island */
  .sb-ham{display:flex;align-items:center}
  .topbar{
    height:auto;
    min-height:calc(var(--th) + env(safe-area-inset-top,0));
    padding:env(safe-area-inset-top,0) 12px 0;
    gap:6px;
    align-items:flex-end;
    padding-bottom:10px;
  }
  .c-sub{display:none}
  .c-pg{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100vw - 170px)}
  .trr .tbt:not(.pri){display:none}

  /* Hero */
  .hero{flex-wrap:wrap;padding:14px 14px 0;gap:8px}
  .hero-act{width:100%;margin-left:0;margin-top:4px;flex-wrap:wrap}
  .hero-act .tbt{display:flex!important;min-height:40px;align-items:center;flex:1}

  .bnav{padding:6px 12px 0}
  .bni{padding:7px 10px 9px;font-size:11px;min-height:40px}
  .secnav{padding:10px 12px;flex-wrap:wrap;gap:6px}
  .sni{padding:9px 14px;font-size:11.5px;min-height:40px}

  /* Conteúdo */
  .ct{padding:0 12px 28px;font-size:15px}

  /* KPIs */
  .kpis.c4,.kpis.c3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kpi{padding:14px;gap:12px;min-height:72px}
  .kpi-val{font-size:20px}
  .kpi-ico{width:38px;height:38px;font-size:16px}
  .kpi-lbl{font-size:11px}
  .kpi-d{font-size:11px}

  /* Grids */
  .g2{grid-template-columns:1fr}
  .g3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ostrip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .osi{padding:14px 16px}
  .osi-val{font-size:20px}
  .osi-lbl{font-size:11px}
  .osi-sub{font-size:11px}

  /* Tipografia — Cards e seções */
  .card{padding:15px 16px}
  .ctit{font-size:14px;margin-bottom:14px}
  .csub{font-size:11.5px}
  .sh-t{font-size:15px}
  .sh-s{font-size:12px}
  .sh{margin-bottom:14px}

  /* Tipografia — Feed de atividade */
  .ft{font-size:13px;line-height:1.6}
  .ftm{font-size:11px}
  .fi{padding:10px 0}

  /* Tipografia — Module cards */
  .mc-name{font-size:13.5px}
  .sr{padding:6px 0;font-size:12.5px}
  .sl{font-size:12.5px}
  .sv{font-size:12px}

  /* Tipografia — Task rows */
  .ttitle{font-size:13px}
  .tmeta{font-size:11.5px}

  /* Tipografia — Bars */
  .bn{font-size:12px}
  .bv{font-size:12px}
  .bt{height:6px}

  /* Tipografia — Overview strip */
  .osi-lbl{letter-spacing:.06em}

  /* Quick actions */
  .qa{grid-template-columns:repeat(2,1fr)}

  /* Tabelas com rolagem horizontal */
  .card{overflow-x:auto;-webkit-overflow-scrolling:touch}
  table{font-size:11px;min-width:480px}
  th,td{padding:7px 8px!important}

  /* Modal */
  .md{width:96vw;padding:18px 16px;max-height:92dvh;overflow-y:auto;-webkit-overflow-scrolling:touch}
  .frow{grid-template-columns:1fr}
  .ma .btn,.ma .btn-p{flex:1;min-width:calc(50% - 4px);padding:11px;text-align:center;font-size:13px;min-height:44px}

  /* Toast full-width + safe area */
  .toast{left:12px;right:12px;bottom:max(16px,env(safe-area-inset-bottom,16px));max-width:none;width:auto}

  /* Inputs: font-size 16px previne zoom automático no iOS */
  input,select,textarea,.fi2,.login-field input,.srch input{font-size:16px!important}

  /* Login */
  .login-box{padding:28px 20px}

  /* Congregações */
  .cong-layout{grid-template-columns:1fr;height:auto;overflow:visible}
  .cong-list-col{max-height:260px;border-right:none;border-bottom:1px solid var(--bd1)}
  .cong-inner-tabs{padding:0 12px}
  .citab{padding:10px 12px;font-size:11px;min-height:44px;display:flex;align-items:center}
  .citab-pane{padding:14px}

  /* Acesso rápido (Área do Membro) */
  [style*="grid-template-columns:repeat(auto-fill"]{grid-template-columns:repeat(2,1fr)!important}

  /* Dashboard vazio */
  #dash-modcards-empty{font-size:12px;padding:24px 16px}
}

/* ─── CELULAR PEQUENO (≤ 480px) ───────────────────── */
@media(max-width:480px){

  /* Modcards: 1 coluna */
  .g3{grid-template-columns:1fr}

  /* Topbar */
  .c-pg{font-size:12px;max-width:calc(100vw - 130px)}

  .bnav{padding:4px 8px 0;gap:1px}
  .bni{padding:6px 8px 8px;font-size:10.5px;gap:3px}

  /* ostrip compacto */
  .osi{padding:12px 14px}
  .osi-val{font-size:18px}
  .osi-lbl{font-size:10.5px}

  /* KPIs compactos */
  .kpi{padding:12px;gap:10px;min-height:64px}
  .kpi-val{font-size:18px}
  .kpi-lbl{font-size:10.5px}
  .ctit{font-size:13.5px}
  .ft{font-size:12.5px}

  /* Login */
  .login-box{padding:24px 16px}

  /* Hero: oculta ícone, reduz título */
  .hero-ic{display:none}
  .hero-ttl{font-size:16px}
  .hero-act .tbt{width:100%;justify-content:center}

  /* Modal como sheet vindo de baixo */
  .mo.on{align-items:flex-end}
  .md{width:100vw;border-radius:var(--rl) var(--rl) 0 0;align-self:flex-end;max-height:96dvh}

  /* Quick actions */
  .qai{padding:10px 11px}
  .ql{font-size:11px}
  .qs{font-size:9.5px}

}

/* Itens de menu de demandas visíveis apenas para admins */
[data-demanda-admin] { display: none !important; }
body.dem-admin [data-demanda-admin] { display: block !important; }

/* WhatsApp module toggle switch */
.wa-toggle{position:relative;display:inline-flex;cursor:pointer;flex-shrink:0}
.wa-toggle input{opacity:0;width:0;height:0;position:absolute}
.wa-toggle span{display:block;width:36px;height:20px;background:var(--bd2);border-radius:10px;transition:background .2s;position:relative}
.wa-toggle input:checked ~ span{background:var(--gr)}
.wa-toggle span::after{content:"";position:absolute;top:3px;left:3px;width:14px;height:14px;background:#fff;border-radius:50%;transition:transform .2s;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.wa-toggle input:checked ~ span::after{transform:translateX(16px)}


/* ═══════════════════════════════════════════════════════════════════
   PWA — Banners de instalação e atualização
   ═══════════════════════════════════════════════════════════════════ */

.pwa-install-banner,
.pwa-update-banner {
  display: none;
  position: fixed;
  bottom: max(16px, env(safe-area-inset-bottom, 16px));
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-card);
  border: 1px solid var(--gr);
  border-radius: var(--rl);
  padding: 12px 14px;
  z-index: 998;
  gap: 10px;
  align-items: center;
  max-width: min(400px, calc(100vw - 24px));
  width: max-content;
  box-shadow: 0 8px 32px rgba(0,0,0,.5);
  animation: fu .2s ease;
}
.pwa-install-banner.visible,
.pwa-update-banner.visible {
  display: flex;
}
.pwa-install-ico {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: var(--gr);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 900; color: #fff;
  flex-shrink: 0;
}
.pwa-install-txt {
  font-size: 12px;
  color: var(--tx2);
  flex: 1;
  min-width: 0;
}
.pwa-install-txt strong {
  display: block;
  font-size: 12.5px;
  color: var(--tx1);
  margin-bottom: 1px;
}
.pwa-install-btn {
  background: var(--gr);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--sans);
  white-space: nowrap;
  flex-shrink: 0;
  transition: background .15s;
}
.pwa-install-btn:hover  { background: var(--grl) }
.pwa-install-btn:active { background: var(--grd) }
.pwa-install-dismiss {
  background: none;
  border: none;
  color: var(--tx3);
  cursor: pointer;
  font-size: 15px;
  padding: 0 2px;
  line-height: 1;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
.pwa-install-dismiss:hover { color: var(--tx2) }


/* ═══════════════════════════════════════════════════════════════════
   PWA — Modo standalone (instalado como app)
   ═══════════════════════════════════════════════════════════════════ */

@media (display-mode: standalone) {
  /* Evita rubber-band scroll fora das áreas roláveis */
  body { overscroll-behavior: none }

  /* Topbar: respira abaixo da Dynamic Island / notch */
  .topbar {
    padding-top: max(0px, env(safe-area-inset-top));
    min-height: calc(var(--th) + env(safe-area-inset-top, 0px));
    align-items: flex-end;
    padding-bottom: 10px;
  }

  /* Sidebar: espaço para notch e gesto home */
  .sb-logo {
    padding-top: max(12px, env(safe-area-inset-top, 12px));
  }
  .sb-ft {
    padding-bottom: max(16px, env(safe-area-inset-bottom, 16px));
  }

  /* Lateral segura para iPhone com molduras */
  .main {
    padding-left:  env(safe-area-inset-left,  0px);
    padding-right: env(safe-area-inset-right, 0px);
  }
}

/* Atributo injetado pelo pwa.js quando rodando como standalone */
[data-pwa="standalone"] .pwa-install-banner { display: none !important }


/* ═══════════════════════════════════════════════════════════════════
   PWA — Melhorias mobile adicionais
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  /* Evita scroll no body quando sidebar está aberta */
  body.sb-locked { overflow: hidden }

  /* Topbar: botão hamburger com área de toque maior */
  .sb-ham {
    min-width: 44px; min-height: 44px;
    display: flex; align-items: center; justify-content: center;
  }

  /* Toast: não sobrepõe o banner PWA */
  .toast { bottom: max(72px, calc(env(safe-area-inset-bottom, 0px) + 72px)) }

  /* Scroll horizontal suave em tabelas */
  .card { -webkit-overflow-scrolling: touch }

  /* Inputs: font-size >= 16px previne zoom automático iOS */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="search"],
  input[type="tel"],
  select, textarea {
    font-size: 16px !important;
  }

  /* Modais: scroll interno no iOS */
  .md { -webkit-overflow-scrolling: touch }

  /* Botões de ação: área de toque mínima 44px */
  .btn, .btn-p, .btn-d, .tbt { min-height: 44px }
}


/* ═══════════════════════════════════════════════════════════════════
   PWA — Banner de instruções iOS Safari
   ═══════════════════════════════════════════════════════════════════ */

.pwa-ios-banner {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0; right: 0;
  background: var(--bg-card);
  border-top: 1px solid var(--bd2);
  border-radius: 18px 18px 0 0;
  padding: 20px 20px max(20px, env(safe-area-inset-bottom, 20px));
  z-index: 999;
  box-shadow: 0 -8px 32px rgba(0,0,0,.5);
  animation: pwa-slide-up .3s ease;
}
.pwa-ios-banner.visible { display: block }

@keyframes pwa-slide-up {
  from { transform: translateY(100%) }
  to   { transform: translateY(0) }
}

.pwa-ios-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.pwa-ios-icon {
  width: 48px; height: 48px;
  border-radius: 12px;
  background: var(--gr);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 900; color: #fff;
  flex-shrink: 0;
}
.pwa-ios-title {
  flex: 1;
  min-width: 0;
}
.pwa-ios-title strong {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--tx1);
  margin-bottom: 2px;
}
.pwa-ios-title span {
  font-size: 12px;
  color: var(--tx3);
}

.pwa-ios-steps {
  list-style: none;
  counter-reset: ios-step;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0;
  margin-bottom: 4px;
}
.pwa-ios-steps li {
  counter-increment: ios-step;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 13.5px;
  color: var(--tx2);
  line-height: 1.5;
}
.pwa-ios-steps li::before {
  content: counter(ios-step);
  min-width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--bg-surface);
  border: 1px solid var(--bd2);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: var(--gr);
  flex-shrink: 0;
  margin-top: 1px;
}
.pwa-ios-steps li strong { color: var(--tx1) }

/* Ícone do botão Compartilhar do Safari */
.pwa-ios-share {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--bg-surface);
  border: 1px solid var(--bd2);
  border-radius: 5px;
  padding: 1px 7px 1px 5px;
  font-size: 12px;
  color: var(--tx1);
  white-space: nowrap;
}
.pwa-ios-share::before {
  content: "";
  display: inline-block;
  width: 13px; height: 16px;
  background: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l-4 4h3v9h2V6h3L12 2zM5 13v6a1 1 0 001 1h12a1 1 0 001-1v-6h-2v5H7v-5H5z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l-4 4h3v9h2V6h3L12 2zM5 13v6a1 1 0 001 1h12a1 1 0 001-1v-6h-2v5H7v-5H5z'/%3E%3C/svg%3E");
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  flex-shrink: 0;
}

/* Seta apontando para a barra inferior do Safari */
.pwa-ios-arrow {
  width: 20px; height: 20px;
  border-right: 3px solid var(--gr);
  border-bottom: 3px solid var(--gr);
  transform: rotate(45deg);
  margin: 14px auto 0;
  opacity: .6;
}


/* ══════════════════════════════════════════════════════════════════════════
   MODO MEMBRO — gestor acessando como membro
   body.modo-membro: sidebar oculta, conteúdo full-width
   body.modo-gestor: SIPEN normal, botão de troca visível
══════════════════════════════════════════════════════════════════════════ */
body.modo-membro .sb          { display: none }
body.modo-membro .sb-backdrop { display: none }
body.modo-membro .sb-ham      { display: none }

/* Botão Trocar Área — oculto para membros comuns, visível para gestores */
#btn-trocar-area              { display: none }
body.modo-membro #btn-trocar-area { display: flex }
body.modo-gestor #btn-trocar-area { display: flex }

/* ══════════════════════════════════════════════════════════════════════════
   TELA DE ESCOLHA DE ÁREA
══════════════════════════════════════════════════════════════════════════ */
#area-escolha {
  position: fixed;
  inset: 0;
  z-index: 600;
  background: var(--bg-body);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 24px;
  animation: fu .22s ease;
}
.area-escolha-titulo {
  text-align: center;
  margin-bottom: 36px;
}
.area-escolha-titulo .ae-saudacao {
  font-size: 22px;
  font-weight: 800;
  color: var(--tx1);
  margin-bottom: 6px;
}
.area-escolha-titulo .ae-sub {
  font-size: 13px;
  color: var(--tx3);
}
.area-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  width: min(840px, 92vw);
}
.area-card {
  background: var(--bg-card);
  border: 2px solid var(--bd2);
  border-radius: 14px;
  padding: 32px 20px;
  cursor: pointer;
  text-align: center;
  transition: transform .18s, box-shadow .18s, border-color .18s, background .18s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-family: var(--sans);
  color: inherit;
}
.area-card:hover    { transform: translateY(-4px); box-shadow: 0 14px 36px rgba(0,0,0,.3) }
.area-card:active   { transform: translateY(-1px) }
.area-card.membro         { border-color: rgba(58,170,92,.4) }
.area-card.membro:hover   { border-color: var(--gr); background: rgba(58,170,92,.06) }
.area-card.gestor         { border-color: rgba(212,168,67,.4) }
.area-card.gestor:hover   { border-color: var(--gold); background: rgba(212,168,67,.06) }
.area-card.demandas       { border-color: rgba(74,156,245,.4) }
.area-card.demandas:hover { border-color: var(--blue); background: rgba(74,156,245,.06) }
.area-card-icon     { font-size: 38px; line-height: 1; margin-bottom: 2px }
.area-card-titulo   { font-size: 15px; font-weight: 800; color: var(--tx1) }
.area-card-desc     { font-size: 11px; color: var(--tx3); line-height: 1.6; max-width: 180px }

@media (max-width: 680px) {
  .area-cards { grid-template-columns: 1fr; width: min(360px, 92vw); gap: 12px }
  .area-card  { padding: 22px 16px; flex-direction: row; text-align: left; gap: 14px }
  .area-card-icon { font-size: 28px; flex-shrink: 0 }
  .area-card-desc { max-width: none }
  .area-escolha-titulo .ae-saudacao { font-size: 19px }
}

/* ── Área do Membro: cards colapsáveis ──────────────────────────────────── */
.area-col-card { overflow: hidden }

.area-col-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  cursor: pointer;
  user-select: none;
  gap: 8px;
}
.area-col-hdr:hover { background: var(--bg-hover) }

.area-col-chev {
  font-size: 16px;
  color: var(--tx3);
  transition: transform .2s;
  flex-shrink: 0;
}
.area-col-card.open .area-col-chev { transform: rotate(180deg) }

.area-col-badge {
  font-size: 10.5px;
  color: var(--tx3);
  margin-top: 2px;
}

.area-col-body { padding: 0 16px 16px }

/* Mobile: collapsible fecha por padrão; desktop: sempre aberto */
@media (max-width: 768px) {
  .area-col-hdr { padding: 12px 14px }
  .area-col-body { display: none }
  .area-col-card.open .area-col-body { display: block }
  .area-col-card.open .area-col-hdr { border-bottom: 1px solid var(--bd1) }
}
@media (min-width: 769px) {
  .area-col-hdr { cursor: default; pointer-events: none }
  .area-col-chev { display: none }
  .area-col-body { display: block !important }
}

/* ── Área do Membro: atalhos rápidos ────────────────────────────────────── */
.area-atalhos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.area-atalho {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 8px;
  background: var(--bg-surface);
  border-radius: 10px;
  cursor: pointer;
  transition: background .15s, transform .15s;
  text-align: center;
}
.area-atalho:hover  { background: var(--bg-hover); transform: translateY(-2px) }
.area-atalho:active { transform: translateY(0) }
.area-atalho-ico { font-size: 22px; line-height: 1 }
.area-atalho-lbl { font-size: 10.5px; font-weight: 600; color: var(--tx2) }

/* ══════════════════════════════════════════════════════════════════════════
   TEMA CLARO
   Ativado via html[data-theme="light"], definido pelo core/theme.js
   com fallback de inline script no <head> (evita flash).
══════════════════════════════════════════════════════════════════════════ */
html[data-theme="light"] {
  --bg-body:    #f0f2f5;
  --bg-sidebar: #ffffff;
  --bg-surface: #eaecef;
  --bg-card:    #ffffff;
  --bg-hover:   #f2f4f6;
  --bg-input:   #f8f9fa;

  --bd1: rgba(0,0,0,0.08);
  --bd2: rgba(0,0,0,0.13);
  --bd3: rgba(0,0,0,0.21);

  --tx1: #1a1d21;
  --tx2: #3e4755;
  --tx3: #6b7885;
  --tx4: #bdc5cf;
}

/* Scrollbar */
html[data-theme="light"] ::-webkit-scrollbar-thumb { background: #c0c8d4 }

/* Logo IPPenha: cores naturais no tema claro */
html[data-theme="light"] .sb-logo img {
  filter: none;
}
html[data-theme="light"] .login-logo-img {
  filter: none;
}
@media (prefers-color-scheme: light) {
  html:not([data-theme="dark"]) .logo-dark-only  { display:none }
  html:not([data-theme="dark"]) .logo-light-only { display:block }
}

/* Sidebar nav — bullets e hover */
html[data-theme="light"] .si::before          { background: rgba(0,0,0,0.20) }
html[data-theme="light"] .si:hover::before    { background: var(--tx2) }
html[data-theme="light"] .si:hover            { background: rgba(0,0,0,0.04) }
html[data-theme="light"] .slbl::after         { background: rgba(0,0,0,0.10) }

/* Tabelas */
html[data-theme="light"] .tbl tr:hover td     { background: rgba(0,0,0,0.025) }

/* Task rows */
html[data-theme="light"] .trow:hover          { background: rgba(0,0,0,0.03); margin:0; padding:8px 0 }

/* Calendário */
html[data-theme="light"] .dp-cal-cell.is-weekend { background: rgba(0,0,0,0.02) }
html[data-theme="light"] .dp-cal-empty        { background: var(--bg-body) }

/* Sombras mais suaves no tema claro */
html[data-theme="light"] .md                  { box-shadow: 0 16px 48px rgba(0,0,0,0.14) }
html[data-theme="light"] .toast               { box-shadow: 0 8px 20px rgba(0,0,0,0.10) }
html[data-theme="light"] .pwa-install-banner,
html[data-theme="light"] .pwa-update-banner,
html[data-theme="light"] .pwa-ios-banner      { box-shadow: 0 8px 32px rgba(0,0,0,0.12) }

/* Modal backdrop */
html[data-theme="light"] .mo { background: rgba(0,0,0,0.35) }

/* Login */
html[data-theme="light"] .login-box { box-shadow: 0 4px 24px rgba(0,0,0,0.08) }


/* ══════════════════════════════════════════════════════════════════════════
   TOGGLE DE TEMA — barra entre sb-sys e sb-ft
══════════════════════════════════════════════════════════════════════════ */
.sb-theme-bar {
  padding: 8px 10px;
  border-top: 1px solid var(--bd2);
  flex-shrink: 0;
  background: var(--bg-sidebar);
}
.theme-seg {
  display: flex;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--bd2);
  border-radius: 8px;
  overflow: hidden;
  padding: 2px;
  gap: 2px;
}
.theme-btn {
  flex: 1;
  background: none;
  border: none;
  color: var(--tx2);
  font-size: 10px;
  font-family: var(--sans);
  font-weight: 500;
  padding: 5px 3px;
  cursor: pointer;
  border-radius: 6px;
  transition: all .14s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  white-space: nowrap;
  line-height: 1;
}
.theme-btn:hover  { color: var(--tx1); background: rgba(255,255,255,0.08) }
.theme-btn.on     { background: rgba(255,255,255,0.14); color: var(--tx1); font-weight: 600 }

/* ══════════════════════════════════════════════════════════════════════════
   RODAPÉ 70 ANOS — IPPenha
══════════════════════════════════════════════════════════════════════════ */
.sipen-footer {
  background: #2c6b41;
  width: 100%;
  overflow: hidden;
  margin-top: 8px;
}
.sfb-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  padding: 14px 28px;
  max-width: 1100px;
  margin: 0 auto;
  min-height: 72px;
}

/* Badge 70 ANOS */
.sfb-badge {
  position: relative;
  width: 54px;
  height: 62px;
  border: 1.5px solid rgba(228,213,168,.52);
  border-radius: 2px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-bottom: 8px;
  flex-shrink: 0;
}
.sfb-badge::before {
  content: '';
  position: absolute;
  width: 44px;
  height: 44px;
  border: 1.5px solid rgba(228,213,168,.28);
  border-radius: 50%;
  top: 5px;
  left: 50%;
  transform: translateX(-50%);
}
.sfb-badge-num {
  font-size: 27px;
  font-weight: 300;
  color: #e4d5a8;
  line-height: 1;
  letter-spacing: -.02em;
  position: relative;
  z-index: 1;
}
.sfb-badge-anos {
  font-size: 7px;
  font-weight: 700;
  color: rgba(228,213,168,.75);
  letter-spacing: .2em;
  text-transform: uppercase;
  position: relative;
  z-index: 1;
  margin-top: 2px;
}

/* Divisor vertical */
.sfb-sep {
  width: 1px;
  height: 44px;
  background: rgba(228,213,168,.28);
  flex-shrink: 0;
}

/* Igreja + Logo */
.sfb-church {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.sfb-logo {
  height: 38px;
  width: auto;
  filter: brightness(0) invert(1) sepia(.15);
  opacity: .85;
  flex-shrink: 0;
}
.sfb-names { display: flex; flex-direction: column; line-height: 1.15; }
.sfb-ig    { font-size: 9px; color: rgba(228,213,168,.65); letter-spacing: .08em; text-transform: uppercase; }
.sfb-pres  { font-size: 12.5px; font-weight: 700; color: #e4d5a8; letter-spacing: .04em; }
.sfb-penha { font-size: 11.5px; font-weight: 400; color: rgba(228,213,168,.8); letter-spacing: .04em; }

/* Versículo */
.sfb-verse {
  font-size: 11px;
  color: rgba(228,213,168,.82);
  line-height: 1.55;
  max-width: 280px;
}
.sfb-verse em { font-style: italic; color: #e4d5a8; }

/* Desde */
.sfb-desde {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  color: rgba(228,213,168,.75);
}
.sfb-desde-lbl { font-size: 9px; letter-spacing: .12em; text-transform: uppercase; }
.sfb-desde-ano { font-size: 22px; font-weight: 300; color: #e4d5a8; line-height: 1.1; letter-spacing: .02em; }

/* Login footer: posicionado na base da tela de login */
.sipen-footer-login {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}
.sipen-footer-login .sfb-inner { padding: 12px 24px; min-height: 64px; }

/* Responsive */
@media (max-width: 700px) {
  .sfb-badge, .sfb-desde, .sfb-badge + .sfb-sep, .sfb-verse + .sfb-sep { display: none }
  .sfb-inner { gap: 16px; padding: 12px 16px; }
  .sfb-verse { max-width: none; font-size: 10.5px; }
}
@media (max-width: 440px) {
  .sfb-verse { display: none }
  .sfb-verse + .sfb-sep { display: none }
  .sfb-inner { justify-content: center; }
}

/* ── Redes Sociais ──────────────────────────────────── */
.social-links-row { display:flex;gap:10px;flex-wrap:wrap;margin-bottom:22px; }
.social-link { display:flex;align-items:center;gap:10px;padding:12px 14px;background:var(--bg-card);border:1px solid var(--bd2);border-radius:10px;text-decoration:none;flex:1;min-width:130px;transition:border-color .15s; }
.social-link-ico { width:34px;height:34px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0; }
.social-link-ico svg { width:18px;height:18px; }
.social-yt .social-link-ico { background:rgba(255,0,0,.10);color:#FF0000; }
.social-ig .social-link-ico { background:rgba(225,48,108,.10);color:#E1306C; }
.social-fb .social-link-ico { background:rgba(24,119,242,.10);color:#1877F2; }
.social-yt:hover { border-color:rgba(255,0,0,.35); }
.social-ig:hover { border-color:rgba(225,48,108,.35); }
.social-fb:hover { border-color:rgba(24,119,242,.35); }
.social-link-info { display:flex;flex-direction:column;min-width:0; }
.social-link-name { font-size:12px;font-weight:600;color:var(--tx1);line-height:1.2; }
.social-link-handle { font-size:10px;color:var(--tx3);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }

/* Redes Sociais — barra na sidebar */
.sb-social { display:flex;align-items:center;justify-content:center;gap:6px;padding:8px 16px;border-top:1px solid var(--bd1); }
.sb-social-ic { width:30px;height:30px;border-radius:7px;display:flex;align-items:center;justify-content:center;text-decoration:none;transition:background .15s;color:var(--tx3); }
.sb-social-ic svg { width:14px;height:14px;fill:currentColor; }
.sb-social-yt:hover { background:rgba(255,0,0,.12);color:#FF0000; }
.sb-social-ig:hover { background:rgba(225,48,108,.12);color:#E1306C; }
.sb-social-fb:hover { background:rgba(24,119,242,.12);color:#1877F2; }


/* ══ Apple-style pill badges ═══════════════════════════════════ */
.pill{display:inline-flex;align-items:center;padding:2px 9px;border-radius:20px;font-size:10.5px;font-weight:600;letter-spacing:.01em}
.pill.pv{background:rgba(48,209,88,0.12);color:var(--gr);border:1px solid rgba(48,209,88,0.2)}
.pill.pa{background:rgba(255,69,58,0.10);color:var(--rose);border:1px solid rgba(255,69,58,0.18)}
.pill.pw{background:rgba(255,214,10,0.10);color:var(--gold);border:1px solid rgba(255,214,10,0.18)}
.pill.pz{background:rgba(255,255,255,0.06);color:var(--tx3);border:1px solid var(--bd2)}
.pill.pb{background:rgba(10,132,255,0.10);color:var(--blue);border:1px solid rgba(10,132,255,0.18)}

/* ══ Apple-style form inputs ════════════════════════════════════ */
.fi{width:100%;background:var(--bg-hover);border:1px solid var(--bd2);border-radius:8px;
  color:var(--tx1);font-family:var(--sans);font-size:12px;padding:8px 11px;outline:none;
  transition:border-color .12s,box-shadow .12s}
.fi:focus{border-color:rgba(48,209,88,0.5);box-shadow:0 0 0 2px rgba(48,209,88,0.12)}
.fi option{background:var(--bg-card)}
textarea.fi{resize:vertical;line-height:1.5}