/* Inter (OFL), servida pelo próprio sistema: funciona sem internet e dentro de um APK */
@font-face { font-family: "Inter"; src: url("/static/fonts/inter-latin.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap; }

/* ============================================================
   SAFE AREA (PWA em tela cheia no iOS): evita conteúdo colado
   na status bar ou cortado pela barra inferior/home indicator
   ============================================================ */
:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* ============================================================
   Tomelin Gestão Financeira: Design System
   Paleta da marca: navy + dourado + verde
   ============================================================ */
:root{
  /* paleta extraída pixel a pixel da logo Tomelin */
  --navy:#082D51;      --navy-2:#0E3A63;   --navy-soft:#305C74;
  --steel:#305C74;     --blue-ink:#38648A;
  --gold:#C9A94E;      --gold-2:#B8963B;   --gold-soft:#CDBB84;
  --teal:#2DD4BF;      --green:#4ADE80;    --green-2:#15803D;  --green-deep:#14532D;
  --red:#DC2626;       --red-soft:#FEF2F2;
  --amber:#D97706;     --amber-soft:#FFFBEB;
  --purple:#7C3AED;    --purple-soft:#F5F3FF;
  --blue:#0284C7;      --blue-soft:#EFF6FF;

  --bg:#F1F5F9;        --bg-2:#F8FAFC;
  --card:#ffffff;      --line:#E2E8F0;     --line-2:#F1F5F9;
  --ink:#0F172A;       --ink-2:#475569;    --ink-3:#94A3B8;

  --shadow-sm:0 1px 2px rgba(8,45,81,.06);
  --shadow:0 6px 22px rgba(8,45,81,.08);
  --shadow-lg:0 18px 50px rgba(8,45,81,.16);
  --r:14px; --r-lg:20px; --r-sm:10px;
  --sidebar:248px;
  --sidebar-mini:64px;
  --topbar:54px;
  --font:"Inter","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow-x:hidden;scrollbar-width:none;-ms-overflow-style:none}
body{
  font-family:var(--font); background:var(--bg); color:var(--ink);
  -webkit-font-smoothing:antialiased; font-size:15px; line-height:1.5;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}
svg{display:block}
input,select,textarea{font-family:inherit;font-size:14px}

/* ---------- utilidades ---------- */
.hidden{display:none !important}
.spin{animation:sp 1s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.mono-num{font-variant-numeric:tabular-nums;letter-spacing:-.02em}


/* ══════════════════════════════════════════════════════
   LOGIN: estilo app mobile
   ══════════════════════════════════════════════════════ */
.login-app {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: linear-gradient(160deg, #05203A 0%, #0E3A63 50%, #082D51 100%);
  padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px);
}

/* ── topo com logo ── */
.login-app-top {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px 32px;
  text-align: center;
}
.login-app-logo-wrap {
  width: 100px;
  height: 100px;
  background: #fff;
  border-radius: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  box-shadow: 0 12px 40px rgba(0,0,0,.25);
}
.login-app-logo-img {
  width: 74px;
  height: 74px;
  object-fit: contain;
}
.login-app-brand {
  font-size: 32px;
  font-weight: 900;
  color: #fff;
  letter-spacing: -.02em;
  line-height: 1;
  margin-bottom: 6px;
}
.login-app-sub {
  font-size: 14px;
  color: rgba(255,255,255,.55);
  font-weight: 500;
  letter-spacing: .01em;
}

/* ── card do formulário ── */
.login-app-card {
  width: 100%;
  max-width: 480px;
  background: var(--card);
  border-radius: 28px 28px 0 0;
  padding: 32px 28px 28px;
  box-shadow: 0 -8px 40px rgba(0,0,0,.15);
}
.login-app-titulo {
  font-size: 22px;
  font-weight: 800;
  color: var(--navy);
  margin: 0 0 22px;
}
html.dark .login-app-titulo { color: var(--ink); }

/* ── campos ── */
.login-campo { display: flex; flex-direction: column; gap: 7px; }
.login-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.login-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.login-input-ic {
  position: absolute;
  left: 14px;
  color: var(--ink-3);
  display: flex;
  align-items: center;
  pointer-events: none;
}
.login-input-ic svg { width: 18px; height: 18px; }
.login-input {
  width: 100%;
  padding: 14px 14px 14px 44px;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  background: var(--bg);
  font-size: 15px;
  color: var(--ink);
  box-sizing: border-box;
  transition: border-color .15s, box-shadow .15s;
  -webkit-appearance: none;
}
.login-input:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(8,45,81,.1);
  background: var(--card);
}
.btn-ver-senha {
  position: absolute;
  right: 12px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ink-3);
  padding: 4px;
  display: flex;
  align-items: center;
}
.btn-ver-senha svg { width: 20px; height: 20px; }

/* ── botão entrar ── */
.btn-login {
  width: 100%;
  justify-content: center;
  padding: 15px;
  font-size: 16px;
  font-weight: 800;
  border-radius: 14px;
  margin-top: 4px;
  gap: 10px;
  box-shadow: 0 6px 20px rgba(8,45,81,.3);
}
.btn-login svg { width: 20px; height: 20px; }

/* ── último acesso ── */
.lf-ultimo-acesso {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--ink-3);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 9px 12px;
  margin-bottom: 18px;
}
.lf-ultimo-acesso svg { width: 14px; height: 14px; flex-shrink: 0; }

/* ── erro ── */
.login-erro {
  font-size: 13px;
  color: var(--red);
  background: rgba(180,80,62,.08);
  border: 1px solid rgba(180,80,62,.2);
  padding: 10px 14px;
  border-radius: 10px;
}

/* ── rodapé ── */


/* desktop: centraliza o card, mostra os dois lados */
@media(min-width: 768px) {
  .login-app {
    justify-content: center;
    padding: 0;
  }
  .login-app-top {
    flex: none;
    padding: 40px 24px 24px;
  }
  .login-app-logo-wrap { width: 80px; height: 80px; border-radius: 22px; }
  .login-app-logo-img { width: 58px; height: 58px; }
  .login-app-brand { font-size: 26px; }
  .login-app-card {
    border-radius: 24px;
    max-width: 400px;
    box-shadow: 0 24px 64px rgba(0,0,0,.2);
    margin-bottom: 32px;
  }
}

/* ============================================================
   LAYOUT
   ============================================================ */
.app{display:flex;min-height:100dvh;overflow-x:hidden}

/* --- sidebar (estilo NaPista) --- */
.sidebar{
  width:var(--sidebar); flex-shrink:0; background:linear-gradient(180deg,#051C34 0%,#082D51 40%,#0A3666 100%);
  color:#cfe0f0; display:flex; flex-direction:column; position:fixed; inset:0 auto 0 0;
  z-index:40; transition:width .2s ease, transform .25s ease;
}
.sb-brand{display:flex;align-items:center;gap:10px;padding:calc(18px + var(--safe-top)) 18px 16px;border-bottom:1px solid rgba(255,255,255,.08)}
.sb-logo{width:40px;height:40px;border-radius:12px;background:#fff;display:grid;place-items:center;flex-shrink:0;box-shadow:0 2px 8px rgba(0,0,0,.18)}
.sb-logo img{width:30px;height:30px;object-fit:contain;display:block}
.sb-brand .t{font-weight:800;font-size:15px;color:#fff;letter-spacing:-.01em;line-height:1.1}
.sb-brand .s{font-size:11px;color:var(--gold-2);font-weight:600}
.sb-nav{flex:1;overflow-y:auto;padding:14px 12px;display:flex;flex-direction:column;gap:3px;scrollbar-width:none;-ms-overflow-style:none}
.sb-nav::-webkit-scrollbar{display:none;width:0}
.sb-sec{font-size:10.5px;text-transform:uppercase;letter-spacing:.09em;color:#6d87a3;padding:14px 12px 6px;font-weight:700}
.nav-item{
  display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:10px;
  color:#b9cde0;font-weight:500;font-size:13.5px;transition:background .15s,color .15s;position:relative;
}
.nav-item svg{width:19px;height:19px;flex-shrink:0;stroke-width:1.7}
.nav-item:hover{background:rgba(255,255,255,.06);color:#fff}
.nav-item.on{background:linear-gradient(90deg,rgba(55,176,110,.22),rgba(55,176,110,.05));color:#fff}
.nav-item.on::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:3px;background:var(--green-2)}
.nav-badge{margin-left:auto;background:var(--red);color:#fff;font-size:11px;font-weight:700;padding:1px 7px;border-radius:20px}
.sb-foot{padding:14px 16px;border-top:1px solid rgba(255,255,255,.08);display:flex;align-items:center;gap:11px}
.sb-avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--gold),var(--green));display:grid;place-items:center;color:#fff;font-weight:700;font-size:14px}
.sb-foot .nm{font-size:13px;font-weight:600;color:#fff;line-height:1.2}
.sb-foot .em{font-size:11px;color:#7f9ab5}
.sb-foot button{margin-left:auto;color:#8fa8c1;padding:6px;border-radius:8px}
.sb-foot button:hover{background:rgba(255,255,255,.08);color:#fff}

/* --- conteúdo --- */
.main{flex:1;margin-left:var(--sidebar);min-width:0;display:flex;flex-direction:column;overflow-x:hidden;transition:margin-left .2s}
.topbar{
  position:sticky;top:var(--safe-top);z-index:30;background:rgba(246,248,251,.95);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);padding:0 24px;display:flex;align-items:center;gap:12px;
  height:var(--topbar);min-height:var(--topbar);box-sizing:border-box;
}
.topbar .menu-btn{display:none;color:var(--navy);padding:6px}
.topbar h2{font-size:14px;font-weight:700;color:var(--navy);letter-spacing:-.01em;line-height:1.2}
.topbar .sub{font-size:11.5px;color:var(--ink-3);margin-top:0}
.topbar .grow{flex:1}
.content{padding:22px 28px calc(60px + var(--safe-bottom));max-width:none;width:100%;overflow-x:hidden;scrollbar-width:none;-ms-overflow-style:none}

/* ============================================================
   COMPONENTES
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;gap:7px;padding:10px 18px;
  border-radius:12px;font-weight:600;font-size:13.5px;cursor:pointer;border:none;
  transition:all .15s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden;
  letter-spacing:.2px;
}
.btn svg{width:16px;height:16px;stroke-width:2;flex-shrink:0}
.btn:active{transform:scale(.97)}
.btn::after{content:"";position:absolute;inset:0;background:rgba(255,255,255,0);transition:background .15s}
.btn:hover::after{background:rgba(255,255,255,.08)}

/* Primary: navy gradiente com brilho */
.btn-primary{
  background:linear-gradient(135deg,#0E3A63 0%,#082D51 100%);
  color:#fff;
  box-shadow:0 2px 8px rgba(8,45,81,.3),inset 0 1px 0 rgba(255,255,255,.12);
}
.btn-primary:hover{
  background:linear-gradient(135deg,#1A4A7A 0%,#0E3A63 100%);
  box-shadow:0 6px 20px rgba(8,45,81,.35),inset 0 1px 0 rgba(255,255,255,.15);
  transform:translateY(-1px);
}

/* Gold: dourado da marca */
.btn-gold{
  background:linear-gradient(135deg,#C9A94E 0%,#B8963B 100%);
  color:#2a1f00;
  box-shadow:0 2px 8px rgba(201,169,78,.35),inset 0 1px 0 rgba(255,255,255,.2);
}
.btn-gold:hover{
  box-shadow:0 6px 20px rgba(201,169,78,.4);
  transform:translateY(-1px);
}

/* Green: teal da marca */
.btn-green{
  background:linear-gradient(135deg,#3E9079 0%,#2F817A 100%);
  color:#fff;
  box-shadow:0 2px 8px rgba(47,129,122,.3);
}
.btn-green:hover{box-shadow:0 6px 20px rgba(47,129,122,.35);transform:translateY(-1px)}

/* Ghost: contorno sutil */
.btn-ghost{
  background:transparent;
  color:var(--navy);
  border:1.5px solid var(--line);
  box-shadow:none;
}
.btn-ghost:hover{
  background:var(--bg);
  border-color:var(--blue-ink);
  color:var(--blue-ink);
}
.btn-ghost::after{display:none}

/* Danger */
.btn-danger{background:rgba(180,80,62,.1);color:var(--red);border:1.5px solid rgba(180,80,62,.2)}
.btn-danger:hover{background:rgba(180,80,62,.18)}
.btn-danger::after{display:none}

/* Tamanhos */
.btn-sm{padding:6px 12px;font-size:12.5px;border-radius:9px;gap:5px}
.btn-sm svg{width:14px;height:14px}
.btn-lg{padding:13px 24px;font-size:15px;border-radius:14px}

/* Icon button: quadrado com ícone */
.btn-icon{
  padding:8px;border-radius:10px;
  background:transparent;
  border:1.5px solid var(--line);
  color:var(--ink-3);
  transition:all .15s;
}
.btn-icon:hover{
  background:var(--bg);
  border-color:var(--blue-ink);
  color:var(--navy);
  transform:scale(1.08);
}
.btn-icon svg{width:16px;height:16px}
.btn-icon:active{transform:scale(.95)}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-sm)}
.card-pad{padding:22px}
.card-h{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.card-h h3{font-size:15px;font-weight:700;color:var(--navy)}
.card-h .grow{flex:1}
.card-ico{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;flex-shrink:0}
.card-ico svg{width:20px;height:20px}

/* --- KPIs --- */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;margin-bottom:22px}
.kpi{position:relative;overflow:hidden;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px;box-shadow:var(--shadow-sm)}
.kpi::after{content:"";position:absolute;right:-30px;top:-30px;width:120px;height:120px;border-radius:50%;opacity:.06}
.kpi .lab{font-size:12.5px;color:var(--ink-3);font-weight:600;display:flex;align-items:center;gap:8px}
.kpi .lab .i{width:30px;height:30px;border-radius:9px;display:grid;place-items:center}
.kpi .lab .i svg{width:16px;height:16px}
.kpi .val{font-size:27px;font-weight:800;margin-top:12px;letter-spacing:-.03em}
.kpi .meta{font-size:12px;color:var(--ink-3);margin-top:5px}
.kpi.navy .val{color:var(--navy)} .kpi.navy::after{background:var(--navy)}
.kpi.green .val{color:var(--green-deep)} .kpi.green::after{background:var(--green)}
.kpi.gold .val{color:var(--gold-2)} .kpi.gold::after{background:var(--gold)}
.kpi.teal .val{color:var(--green-deep)} .kpi.teal::after{background:var(--teal)}
.kpi.red .val{color:var(--red)} .kpi.red::after{background:var(--red)}
.i-navy{background:rgba(48,92,116,.12);color:var(--navy)}
.i-green{background:rgba(62,144,121,.14);color:var(--green-deep)}
.i-teal{background:rgba(47,129,122,.14);color:var(--teal)}
.i-gold{background:rgba(201,169,78,.18);color:var(--gold-2)}
.i-red{background:var(--red-soft);color:var(--red)}
.i-amber{background:var(--amber-soft);color:var(--amber)}

.grid-2{display:grid;grid-template-columns:1.55fr 1fr;gap:18px;margin-bottom:22px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}

/* --- chart svg --- */
.chart-legend{display:flex;flex-wrap:wrap;gap:14px;margin-top:14px}
.chart-legend .lg{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink-2)}
.chart-legend .dot{width:11px;height:11px;border-radius:3px}
.bar-tip{font-size:11px}

/* --- tabela --- */
.tbl-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:14px}
thead th{
  text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;
  color:var(--ink-3);font-weight:700;padding:11px 14px;border-bottom:1.5px solid var(--line);white-space:nowrap;
}
tbody td{padding:13px 14px;border-bottom:1px solid var(--line-2);vertical-align:middle}
tbody tr:hover{background:var(--bg-2)}
tbody tr:last-child td{border-bottom:none}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
.cell-desc{font-weight:600;color:var(--ink)}
.cell-sub{font-size:12px;color:var(--ink-3);margin-top:2px}
.cat-chip{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink-2)}
.cat-chip .dot{width:9px;height:9px;border-radius:3px}

.tag{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;padding:4px 10px;border-radius:20px}
.tag.pago{background:rgba(62,144,121,.12);color:var(--green-deep)}
.tag.pendente{background:var(--amber-soft);color:var(--amber)}
.tag.atrasado{background:var(--red-soft);color:var(--red)}
.tag.rec{background:rgba(62,144,121,.1);color:var(--green-deep)}
.tag.desp{background:rgba(201,169,78,.16);color:var(--gold-2)}
.val-rec{color:var(--green-deep);font-weight:700}
.val-desp{color:var(--gold-2);font-weight:700}

/* toolbar de filtros */
.toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:18px}
.toolbar .search{position:relative}
.toolbar .search svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--ink-3)}
.toolbar input.search-i{padding:9px 12px 9px 34px;border:1.5px solid var(--line);border-radius:9px;background:#fff;min-width:230px}
.toolbar select{padding:9px 12px;border:1.5px solid var(--line);border-radius:9px;background:#fff;color:var(--ink-2)}
.toolbar input:focus,.toolbar select:focus{outline:none;border-color:var(--navy-soft)}
.toolbar .grow{flex:1}
.seg{display:inline-flex;background:#fff;border:1.5px solid var(--line);border-radius:10px;padding:3px}
.seg button{padding:7px 14px;border-radius:7px;font-size:13px;font-weight:600;color:var(--ink-2)}
.seg button.on{background:var(--navy);color:#fff}

/* lista de vencimentos (card lateral) */
.venc-list{display:flex;flex-direction:column;gap:2px}
.venc-item{display:flex;align-items:center;gap:12px;padding:11px 6px;border-bottom:1px solid var(--line-2)}
.venc-item:last-child{border-bottom:none}
.venc-ico{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex-shrink:0}
.venc-ico svg{width:17px;height:17px}
.venc-item .d{flex:1;min-width:0}
.venc-item .d .n{font-weight:600;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.venc-item .d .w{font-size:11.5px;color:var(--ink-3);margin-top:1px}
.venc-item .vv{font-weight:700;font-size:13.5px;white-space:nowrap}
.empty{text-align:center;padding:34px 16px;color:var(--ink-3)}
.empty svg{width:44px;height:44px;margin:0 auto 10px;color:var(--line);stroke-width:1.5}
.empty p{font-size:13.5px}

/* ============================================================
   MODAL
   ============================================================ */
@keyframes fade{from{opacity:0}}

.frm{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.frm .full{grid-column:1/-1}
.frm .campo{display:flex;flex-direction:column;gap:6px}
.frm label{font-size:12.5px;font-weight:600;color:var(--ink-2)}
.frm input,.frm select,.frm textarea{
  padding:10px 12px;border:1.5px solid var(--line);border-radius:9px;background:var(--bg-2);width:100%;
}
.frm input:focus,.frm select:focus,.frm textarea:focus{outline:none;border-color:var(--navy-soft);box-shadow:0 0 0 3px rgba(29,76,120,.1);background:#fff}
.frm textarea{resize:vertical;min-height:64px}

/* popup de vencimentos */
.popup-venc .popup-hero{background:linear-gradient(135deg,var(--navy),var(--navy-2));color:#fff;padding:24px;display:flex;align-items:center;gap:16px}
.popup-hero svg{width:40px;height:40px;flex-shrink:0;color:var(--gold)}
.popup-hero .t{font-size:17px;font-weight:800}
.popup-hero .s{font-size:13px;opacity:.9;margin-top:2px}
.popup-body{padding:8px 20px 20px;max-height:44dvh;overflow:auto}

/* toast */
.toast-wrap{position:fixed;bottom:24px;right:24px;z-index:80;display:flex;flex-direction:column;gap:10px}
.toast{display:flex;align-items:center;gap:11px;background:var(--navy);color:#fff;padding:13px 18px;border-radius:12px;box-shadow:var(--shadow-lg);font-size:14px;font-weight:500;animation:slide .2s ease}
.toast svg{width:19px;height:19px}
.toast.ok{background:var(--green-deep)} .toast.err{background:var(--red)}
@keyframes slide{from{transform:translateX(20px);opacity:0}}

/* config whatsapp */
.wa-card{display:flex;align-items:center;gap:16px;padding:18px;border-radius:var(--r);background:linear-gradient(135deg,#e9f8f0,#f3fbf6);border:1px solid #cdeede}
.wa-ico{width:52px;height:52px;border-radius:14px;background:#25d366;display:grid;place-items:center;flex-shrink:0}
.wa-ico svg{width:28px;height:28px;color:#fff}
.wa-card .t{font-weight:800;color:var(--navy);font-size:15px}
.wa-card .s{font-size:13px;color:var(--ink-2);margin-top:2px}
.status-dot{width:9px;height:9px;border-radius:50%;display:inline-block;margin-right:6px}
.status-dot.on{background:var(--green);box-shadow:0 0 0 3px rgba(62,144,121,.2)}
.status-dot.off{background:var(--ink-3)}
.cmd-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-top:6px}
.cmd{display:flex;align-items:center;gap:10px;padding:11px 13px;border:1px solid var(--line);border-radius:11px;background:var(--bg-2)}
.cmd .n{width:26px;height:26px;border-radius:8px;background:var(--navy);color:#fff;display:grid;place-items:center;font-weight:800;font-size:13px;flex-shrink:0}
.cmd .c{font-family:ui-monospace,monospace;font-size:13px;font-weight:700;color:var(--navy)}
.cmd .dsc{font-size:11px;color:var(--ink-3)}

/* ============================================================
   RESPONSIVO
   ============================================================ */
.backdrop{display:none}
@media(max-width:1024px){
  .grid-2{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr}
}
@media(max-width:820px){
  .sidebar{transform:translateX(-100%)}
  .sidebar.open{transform:translateX(0);box-shadow:var(--shadow-lg)}
  .main{margin-left:0}
  .topbar .menu-btn{display:grid;place-items:center;min-width:40px;min-height:40px;position:relative;z-index:31}
  .content{padding:18px 16px 80px}
  .topbar{padding:14px 16px}
  .backdrop.show{display:block;position:fixed;inset:0;background:rgba(9,24,42,.4);z-index:35}
  .frm{grid-template-columns:1fr}
  .kpi .val{font-size:24px}
}
@media(max-width:520px){
  .toolbar input.search-i{min-width:0;width:100%}
  .toolbar .search{flex:1}
  /* toolbar: botões empilham */
  .toolbar{flex-wrap:wrap;gap:8px}
  .toolbar .btn{font-size:12px;padding:7px 10px}
  /* tabela: esconde colunas menos importantes, mostra só desc+valor+ações */
  .tbl-wrap table thead th:nth-child(2),
  .tbl-wrap table tbody td:nth-child(2),
  .tbl-wrap table thead th:nth-child(3),
  .tbl-wrap table tbody td:nth-child(3){display:none}
  /* ações em coluna mais estreita */
  .tbl-wrap table thead th:last-child,
  .tbl-wrap table tbody td:last-child{min-width:80px}
  /* cards de KPI: valor menor */
  .kpi .val{font-size:22px}
  /* cards de juros/patrimônio: layout compacto */
  .grid-2 .card-pad .card-h{flex-wrap:wrap}
  .grid-2 .card-pad .meta{font-size:11px;line-height:1.5}
  .grid-2 .card-pad .val.mono-num{font-size:20px !important}
  /* filtros de status (Todos/Pendentes/Atrasados/Pagos) */
  .tabs{flex-wrap:wrap;gap:4px}
  .tabs .tab{font-size:12px;padding:5px 10px}
  /* modal full-width */
      /* configurações */
  .cfg-grid{grid-template-columns:1fr}
  .cfg-row{flex-direction:column;align-items:flex-start;gap:6px}
  .cfg-input{width:100%;flex:none}
}
/* respeita quem prefere menos movimento */
@media (prefers-reduced-motion: reduce){*{animation:none !important;transition:none !important}}

/* ============================================================
   TEMA ESCURO: mesma paleta da logo, superfícies escuras
   ============================================================ */
html.dark{
  --bg:#0A1B2E;        --bg-2:#0E2438;
  --card:#122A42;      --line:#20364E;     --line-2:#1A2E44;
  --ink:#E9F0F7;       --ink-2:#AFC2D6;    --ink-3:#7F94A9;
  /* matizes da marca: leve realce p/ contraste no escuro */
  --gold:#D6B65E;      --gold-2:#E4C778;   --gold-soft:#8A7A45;
  --teal:#3E9E95;      --green:#4FA98D;    --green-2:#6FB89E;  --green-deep:#8EC7B2;
  --red:#D2705C;       --red-soft:#3A221D;
  --amber:#D9A94F;     --amber-soft:#3A2F16;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --shadow:0 8px 26px rgba(0,0,0,.42);
  --shadow-lg:0 20px 54px rgba(0,0,0,.55);
}
html.dark .topbar{background:rgba(10,27,46,.86)}
html.dark .topbar h2, html.dark .topbar .menu-btn,
html.dark .card-h h3, html.dark .modal-h h3,
html.dark .wa-card .t, html.dark .cmd .c,
html.dark .kpi.navy .val{color:var(--ink)}
html.dark .i-navy{background:rgba(140,170,200,.14);color:var(--ink)}
html.dark .btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
html.dark .btn-ghost:hover{background:var(--card);border-color:var(--blue-ink)}
html.dark .btn-icon{background:transparent;border-color:var(--line-2);color:var(--ink-3)}
html.dark .btn-icon:hover{background:var(--card);border-color:var(--blue-ink);color:var(--ink)}
html.dark .toolbar input.search-i,
html.dark .toolbar select,
html.dark .seg{background:var(--bg-2);border-color:var(--line);color:var(--ink)}
html.dark .modal, html.dark .modal-h, html.dark html.dark .frm input, html.dark .frm select, html.dark .frm textarea{background:var(--bg-2);border-color:var(--line);color:var(--ink)}
html.dark .frm input:focus, html.dark .frm select:focus, html.dark .frm textarea:focus{background:var(--bg-2)}
html.dark .wa-card{background:linear-gradient(135deg,#123528,#0F2A20);border-color:#1C4736}
html.dark .cmd{background:var(--bg-2);border-color:var(--line)}
html.dark input[type=color]{background:var(--bg-2);border-color:var(--line)}

/* ---------- Logos / avatares (contatos, contas, lançamentos) ---------- */
.lg-av{display:inline-flex;align-items:center;justify-content:center;border-radius:10px;
  border:1px solid var(--line);background:#fff;overflow:hidden;flex:0 0 auto}
.lg-av img{width:100%;height:100%;object-fit:contain;display:block}
.lg-ini{background:var(--navy);color:#fff;font-weight:700;border-color:transparent;letter-spacing:.5px}
.lg-big{width:56px;height:56px;border-radius:14px}
.lg-ph{font-size:11px;color:var(--steel)}
html.dark .lg-av{background:#0F2740;border-color:var(--line)}
html.dark .lg-ini{background:var(--blue-ink)}

/* ---------- Login: slogan e último acesso ---------- */
.login-slogan {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--gold);
  margin-top: 6px;
  text-align: center;
  line-height: 1.6;
}
.login-slogan-sep {
  color: var(--steel);
  font-weight: 400;
}
.login-last {
  text-align: center;
  font-size: 11.5px;
  color: var(--steel);
  margin: 10px 0 2px;
  padding: 8px 12px;
  background: var(--bg);
  border-radius: 8px;
  border: 1px solid var(--line);
}
html.dark .login-last {
  background: rgba(255,255,255,0.04);
  border-color: var(--line);
}

/* ---------- Configurações ---------- */
.cfg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 18px; margin-top: 0; }
.cfg-campos { display: flex; flex-direction: column; gap: 0; margin-top: 14px; }
.cfg-row { display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 10px 0; border-bottom: 1px solid var(--line); }
.cfg-row:last-child { border-bottom: none; }
.cfg-label { font-size: 13px; color: var(--ink); flex: 1; min-width: 0; line-height: 1.4; }
.cfg-input { width: 220px; flex: 0 0 220px; font-size: 13px; padding: 6px 10px;
  border: 1.5px solid var(--line); border-radius: 8px; background: var(--bg);
  color: var(--ink); outline: none; }
.cfg-input:focus { border-color: var(--navy); }

/* Toggle switch */
.toggle { position: relative; display: inline-block; width: 44px; height: 24px; flex: 0 0 44px; }
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle-sl { position: absolute; inset: 0; background: var(--line-2); border-radius: 24px;
  cursor: pointer; transition: .2s; }
.toggle-sl:before { content: ""; position: absolute; height: 18px; width: 18px; left: 3px; bottom: 3px;
  background: #fff; border-radius: 50%; transition: .2s; box-shadow: 0 1px 3px #0003; }
.toggle input:checked + .toggle-sl { background: var(--teal); }
.toggle input:checked + .toggle-sl:before { transform: translateX(20px); }

html.dark .cfg-input { background: var(--card); border-color: var(--line); }
@media (max-width: 600px) {
  .cfg-grid { grid-template-columns: 1fr; }
  .cfg-input { width: 140px; flex: 0 0 140px; }
}

/* ---------- Utilitários mobile ---------- */
.hide-mob { }
.show-mob { display:none }
@media(max-width:820px){
  .hide-mob { display:none !important }
  .show-mob { display:flex !important }
}

/* ---------- Tabela mobile: fix overflow de valor e ações ---------- */
@media(max-width:820px){
  .tbl-wrap table { table-layout: fixed; width: 100%; }
  .tbl-wrap table thead th:first-child,
  .tbl-wrap table tbody td:first-child { width: auto; }
  .tbl-wrap table thead th:nth-child(5),
  .tbl-wrap table tbody td:nth-child(5) { width: 90px; text-align: right; padding-right: 6px; }
  .tbl-wrap table thead th:last-child,
  .tbl-wrap table tbody td:last-child { width: 72px; padding: 4px 4px; }
  .tbl-wrap table tbody td:last-child .btn-icon { padding: 4px; }
  .tbl-wrap table tbody td:last-child .btn-icon svg { width: 14px; height: 14px; }
  /* esconde botões de recibo/whatsapp no mobile, mantém editar e excluir */
  .tbl-wrap table tbody td:last-child .btn-icon:nth-child(1),
  .tbl-wrap table tbody td:last-child .btn-icon:nth-child(2) { display: none; }
  .content { padding: 14px 10px 80px; }
}

/* ---------- Tabela → Cards no mobile ---------- */
@media(max-width:820px){
  .tbl-wrap table,
  .tbl-wrap thead,
  .tbl-wrap tbody,
  .tbl-wrap th,
  .tbl-wrap td,
  .tbl-wrap tr { display: block; }
  .tbl-wrap thead { display: none; }
  .tbl-wrap tbody tr {
    display: flex;
    flex-direction: column;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 10px;
    margin-bottom: 10px;
    padding: 12px 14px;
    gap: 6px;
  }
  /* linha 1: descrição full */
  .tbl-wrap tbody td:first-child { font-weight: 600; padding: 0; border: none; }
  /* linha 2: status + valor lado a lado (hide-mob oculta cat/venc/sit: mantemos só o td de valor e ações) */
  .tbl-wrap tbody td.hide-mob { display: none !important; }
  .tbl-wrap tbody td:nth-child(5) {
    padding: 0; border: none;
    font-size: 16px; font-weight: 700;
    text-align: left;
  }
  /* ações: linha separada */
  .tbl-wrap tbody td:last-child {
    padding: 4px 0 0; border-top: 1px solid var(--line); border-radius: 0;
    display: flex; gap: 8px; flex-wrap: wrap;
  }
  .tbl-wrap tbody td:last-child .btn-icon { padding: 6px 10px; }
  /* oculta recibo/whatsapp, mantém editar+excluir */
  .tbl-wrap tbody td:last-child .btn-icon:nth-child(1),
  .tbl-wrap tbody td:last-child .btn-icon:nth-child(2) { display: none; }
  /* sub-info inline */
  .cell-sub { font-size: 11.5px; color: var(--ink-2); font-weight: 400; }
}

/* ---------- Fix: esconde td vazio de vencimento no card mobile ---------- */
@media(max-width:820px){
  /* td de vencimento (3ª col): aparece como bloco vazio sem hide-mob */
  .tbl-wrap tbody td:nth-child(4) { display: none !important; }
  /* tag de status fica no td da situação que mostramos via show-mob inline */
  .tbl-wrap tbody td:nth-child(5) { padding-top: 0; }
}

/* ---------- Remove o traço ( - ) do td de vencimento nos cards mobile ---------- */
@media(max-width:820px){
  /* o td de situação (4ª col) estava sendo exibido como "-" */
  .tbl-wrap tbody td:nth-child(4),
  .tbl-wrap tbody td:nth-child(3) { display: none !important; }
}

/* ---------- mob-meta: status + data dentro do card mobile ---------- */
.mob-meta { display: none; margin-top: 5px; gap: 6px; align-items: center; flex-wrap: wrap; }
.mob-sub  { font-size: 11.5px; color: var(--ink-2); }
@media(max-width:820px){
  .mob-meta { display: flex; }
}

/* ============================================================
   REDESIGN: Mais cor, mais vida, mais família
   ============================================================ */

/* KPI cards com gradiente vibrante */
.kpi.navy  { background: linear-gradient(135deg, #082D51 0%, #0E3A63 100%); color: #fff; border: none; }
.kpi.green { background: linear-gradient(135deg, #2F817A 0%, #3E9079 100%); color: #fff; border: none; }
.kpi.gold  { background: linear-gradient(135deg, #B8963B 0%, #C9A94E 100%); color: #fff; border: none; }
.kpi.teal  { background: linear-gradient(135deg, #256B64 0%, #2F817A 100%); color: #fff; border: none; }
.kpi.navy .lab, .kpi.green .lab, .kpi.gold .lab, .kpi.teal .lab { color: rgba(255,255,255,.75); }
.kpi.navy .val, .kpi.green .val, .kpi.gold .val, .kpi.teal .val { color: #fff; }
.kpi.navy .meta, .kpi.green .meta, .kpi.gold .meta, .kpi.teal .meta { color: rgba(255,255,255,.65); }
.kpi.navy .i,.kpi.green .i,.kpi.gold .i,.kpi.teal .i { background: rgba(255,255,255,.15); color: #fff; }

/* KPI ilustração SVG decorativa */
.kpi { position: relative; overflow: hidden; }
.kpi-deco { position: absolute; right: -10px; bottom: -10px; opacity: .12; pointer-events: none; }
.kpi-deco svg { width: 90px; height: 90px; }

/* Cards com borda colorida à esquerda por tipo */
.card-accent-green { border-left: 4px solid var(--green) !important; }
.card-accent-gold   { border-left: 4px solid var(--gold) !important; }
.card-accent-red    { border-left: 4px solid var(--red) !important; }
.card-accent-navy   { border-left: 4px solid var(--navy) !important; }

/* Header de seção com ilustração */
.sec-header { display: flex; align-items: center; gap: 12px; margin: 24px 0 12px; }
.sec-header .sec-ic { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sec-header h2 { font-size: 15px; font-weight: 700; color: var(--navy); margin: 0; }
.sec-header .sub { font-size: 12px; color: var(--ink-2); margin: 0; }

/* Usuários: avatares de família */
.familia-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; margin-top: 8px; }
.familia-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 20px 16px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; position: relative; transition: box-shadow .15s; }
.familia-card:hover { box-shadow: var(--shadow-lg); }
.familia-avatar { width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 30px; line-height: 1; flex-shrink: 0; border: 3px solid rgba(255,255,255,.5); box-shadow: 0 2px 12px rgba(0,0,0,.18); }
.familia-nome { font-weight: 700; font-size: 15px; color: var(--ink); }
.familia-email { font-size: 12px; color: var(--ink-2); }
.familia-papel { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .8px; padding: 2px 8px; border-radius: 20px; }
.familia-papel.admin { background: #082D5120; color: var(--navy); }
.familia-papel.membro { background: #2F817A18; color: var(--teal); }
.familia-acesso { font-size: 11px; color: var(--ink-3); }
.familia-card .card-actions { display: flex; gap: 6px; margin-top: 4px; }

/* Emoji picker inline */
.emoji-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; margin-top: 8px; }
.emoji-opt { font-size: 22px; line-height: 1; padding: 6px; border-radius: 8px; cursor: pointer; text-align: center; transition: background .1s; border: 2px solid transparent; }
.emoji-opt:hover { background: var(--bg); }
.emoji-opt.sel { border-color: var(--navy); background: var(--bg); }

/* Cor picker inline */
.cor-grid { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.cor-opt { width: 28px; height: 28px; border-radius: 50%; cursor: pointer; border: 3px solid transparent; transition: transform .1s; }
.cor-opt:hover { transform: scale(1.15); }
.cor-opt.sel { border-color: var(--ink); transform: scale(1.15); }

/* Faixa de boas-vindas no dashboard */
.dash-boas-vindas { background: linear-gradient(135deg, #082D51 0%, #0E3A63 60%, #305C74 100%);
  border-radius: var(--r-lg); padding: 24px 28px; color: #fff; display: flex; align-items: center;
  gap: 20px; margin-bottom: 20px; position: relative; overflow: hidden; }
.dash-boas-vindas .bv-text h2 { font-size: 20px; font-weight: 800; color: #fff; margin: 0 0 4px; }
.dash-boas-vindas .bv-text p  { font-size: 13.5px; color: rgba(255,255,255,.75); margin: 0; }
.dash-boas-vindas .bv-deco { position: absolute; right: 0; bottom: 0; opacity: .12; }
.dash-boas-vindas .bv-avatar { width: 52px; height: 52px; border-radius: 50%; font-size: 24px;
  display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.15);
  border: 2px solid rgba(255,255,255,.3); flex-shrink: 0; }

/* Dica rápida colorida */
.dica { border-radius: var(--r); padding: 12px 16px; font-size: 13px; display: flex; gap: 10px; align-items: flex-start; }
.dica > svg, .dica > span > svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px; }
.dica.verde { background: #2F817A14; border-left: 3px solid var(--green); color: var(--green-deep); }
.dica.azul  { background: #082D5112; border-left: 3px solid var(--navy); color: var(--navy); }
.dica.ouro  { background: #C9A94E14; border-left: 3px solid var(--gold); color: #7A6020; }
.dica.vermelho { background: #B4503E14; border-left: 3px solid var(--red); color: var(--red); }

html.dark .dica.verde { background: #2F817A22; color: var(--green-2); }
html.dark .dica.azul  { background: #305C7422; color: var(--blue-ink); }
html.dark .dica.ouro  { background: #C9A94E22; color: var(--gold); }
html.dark .dica.vermelho { background: #B4503E22; color: #E07060; }

/* Tags de status mais coloridas */
.tag.pago     { background: #2F817A18; color: var(--green-deep); border: 1px solid var(--green)33; }
.tag.pendente { background: #C9A94E14; color: #7A6020; border: 1px solid var(--gold)44; }
.tag.atrasado { background: #B4503E18; color: var(--red); border: 1px solid var(--red)44; font-weight: 700; }

/* Nav items com hover colorido */
.nav-item { border-radius: 8px; transition: background .12s, color .12s; }
.nav-item:hover:not(.on) { background: rgba(255,255,255,.08); }
.nav-item.on { background: linear-gradient(90deg, rgba(201,169,78,.22), rgba(201,169,78,.08)); border-left: 3px solid var(--gold); }

/* Animação suave nos cards */
.card { transition: box-shadow .15s, transform .12s; }
.card:hover { box-shadow: 0 4px 20px rgba(8,45,81,.10); }

/* Linha de resumo da família no topbar */
.topbar-familia { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-2); }
.topbar-familia .av-mini { width: 22px; height: 22px; border-radius: 50%; font-size: 12px; display: flex; align-items: center; justify-content: center; margin-left: -8px; border: 2px solid var(--bg); }

html.dark .familia-card { background: var(--card); }
html.dark .familia-nome { color: var(--ink); }
html.dark .familia-papel.admin { background: #305C7430; color: #AFC2D6; }
html.dark .familia-papel.membro { background: #2F817A22; color: var(--green-2); }

/* ============================================================
   LOGIN SPLIT-SCREEN (foto + formulário)
   ============================================================ */


/* ---- Lado esquerdo: foto ---- */















/* ---- Lado direito: formulário ---- */






.lf-ultimo-acesso {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--steel);
  background: var(--bg); border: 1px solid var(--line);
  border-radius: 8px; padding: 8px 12px;
  margin-bottom: 18px;
}
.lf-ultimo-acesso svg { width: 14px; height: 14px; flex-shrink: 0; }

.btn-login { width: 100%; justify-content: center; padding: 13px; font-size: 15px; margin-top: 4px; }

.btn-ver-senha {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer; color: var(--ink-3); padding: 4px;
  margin-top: 10px;
}
.btn-ver-senha svg { width: 18px; height: 18px; }



/* (bloco @media sem fechamento removido: prendia 31 regras ao celular) */



/* Status inline */



/* lp-card icon */


/* Login form tweaks */

.btn-login { width: 100%; justify-content: center; padding: 12px; font-size: 14.5px; margin-top: 6px; gap: 8px; }
.btn-login svg { width: 18px; height: 18px; }


/* ============================================================
   BUSCA GLOBAL
   ============================================================ */
.busca-global-wrap {
  position: relative;
  flex: 1; max-width: 380px; margin: 0 16px;
}
.busca-ic {
  position: absolute; left: 10px; top: 50%;
  transform: translateY(-50%);
  color: var(--ink-3); pointer-events: none;
}
.busca-ic svg { width: 16px; height: 16px; }
.busca-input {
  width: 100%; padding: 8px 12px 8px 34px;
  border: 1.5px solid var(--line); border-radius: 10px;
  background: var(--bg); color: var(--ink); font-size: 13.5px;
  transition: border-color .15s;
}
.busca-input:focus { border-color: var(--navy); outline: none; }
.busca-box {
  display: none; position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 12px; box-shadow: var(--shadow-lg); z-index: 200;
  max-height: 320px; overflow-y: auto;
}
.busca-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; cursor: pointer; font-size: 13px;
  border-bottom: 1px solid var(--line);
}
.busca-item:last-child { border-bottom: none; }
.busca-item:hover { background: var(--bg); }
.busca-nome { font-weight: 600; color: var(--ink); }
.busca-sub { font-size: 11.5px; color: var(--ink-2); }
@media(max-width:820px) {
  .busca-global-wrap { max-width: none; flex: 1; }
  .busca-input { font-size: 12.5px; padding: 7px 10px 7px 30px; }
}

/* ============================================================
   MELHORIAS GERAIS: KPIs, cards, estados
   ============================================================ */
.kpi.red   { background: linear-gradient(135deg,#B4503E,#C74B4B); color:#fff; border:none; }
.kpi.red .lab,.kpi.red .val,.kpi.red .meta { color:#fff; }
.kpi.red .i { background:rgba(255,255,255,.18); color:#fff; }

/* Opacidade para itens concluídos */
.op-6 { opacity: .6; }

/* Card de meta: hover destaca */
.card { transition: box-shadow .15s, transform .1s; }

/* Barra de progresso das metas */
.meta-progress-bar { background: var(--bg); border-radius: 6px; height: 10px; overflow: hidden; }
.meta-progress-fill { height: 100%; border-radius: 6px; transition: width .4s ease; }

/* Tag "Concluída" */
.tag.concluida { background: #2F817A18; color: var(--green-deep); border: 1px solid #2F817A33; }

/* Ajusta topbar no mobile pra não ficar apertado */
@media(max-width:480px) {
  .busca-global-wrap { max-width: 120px; }
  .busca-input::placeholder { font-size:11px; color:var(--ink-3); }
}

/* ══════════════════════════════════════════════════════════════
   REDESIGN COMPLETO: MODAIS, BOTÕES, INPUTS
   ══════════════════════════════════════════════════════════════ */

/* ── OVERLAY atualizado ── */
@keyframes ovIn{from{opacity:0}}

/* ── MODAL redesenhado ── */




.frm{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.frm .full{grid-column:1/-1}
.frm .campo{display:flex;flex-direction:column;gap:6px}
.frm label{
  font-size:11.5px;font-weight:700;color:var(--ink-2);
  text-transform:uppercase;letter-spacing:.06em;
}
.frm input,.frm select,.frm textarea{
  padding:11px 14px;
  border:1.5px solid var(--line);
  border-radius:11px;
  background:var(--bg);
  color:var(--ink);
  width:100%;
  transition:all .15s;
  font-size:13.5px;
}
.frm input:focus,.frm select:focus,.frm textarea:focus{
  outline:none;
  border-color:var(--navy);
  box-shadow:0 0 0 3px rgba(8,45,81,.10);
  background:var(--card);
}
.frm input::placeholder,.frm textarea::placeholder{color:var(--ink-3)}
.frm textarea{resize:vertical;min-height:72px}

.inp-wrap .inp-ic svg{width:16px;height:16px}
.inp-wrap input{padding-left:38px}
.inp-wrap input:focus + .inp-ic,.inp-wrap input:focus ~ .inp-ic{color:var(--navy)}

/* ── BOTÕES REDESENHADOS com ripple ── */
.btn{
  display:inline-flex;align-items:center;gap:7px;
  padding:10px 18px;border-radius:12px;
  font-weight:700;font-size:13.5px;
  cursor:pointer;border:none;
  transition:all .15s cubic-bezier(.4,0,.2,1);
  position:relative;overflow:hidden;
  letter-spacing:.01em;
  user-select:none;
}
.btn svg{width:16px;height:16px;stroke-width:2;flex-shrink:0;transition:transform .2s}
.btn:hover svg{transform:scale(1.12)}
.btn:active{transform:scale(.97)}

/* Ripple effect */
.btn .ripple{
  position:absolute;border-radius:50%;
  background:rgba(255,255,255,.35);
  transform:scale(0);animation:ripple .5s linear;
  pointer-events:none;
}
@keyframes ripple{to{transform:scale(4);opacity:0}}

/* Primary */
.btn-primary{
  background:linear-gradient(135deg,#0E3A63 0%,#082D51 100%);
  color:#fff;
  box-shadow:0 2px 10px rgba(8,45,81,.32),inset 0 1px 0 rgba(255,255,255,.14);
}
.btn-primary:hover{
  background:linear-gradient(135deg,#1A4A7A 0%,#0E3A63 100%);
  box-shadow:0 6px 22px rgba(8,45,81,.38),inset 0 1px 0 rgba(255,255,255,.18);
  transform:translateY(-1px);
}

/* Gold */
.btn-gold{
  background:linear-gradient(135deg,#C9A94E 0%,#B8963B 100%);
  color:#2a1f00;
  box-shadow:0 2px 10px rgba(201,169,78,.4),inset 0 1px 0 rgba(255,255,255,.22);
}
.btn-gold:hover{box-shadow:0 6px 22px rgba(201,169,78,.45);transform:translateY(-1px)}

/* Green */
.btn-green{
  background:linear-gradient(135deg,#3E9079 0%,#2F817A 100%);
  color:#fff;
  box-shadow:0 2px 10px rgba(47,129,122,.35);
}
.btn-green:hover{box-shadow:0 6px 22px rgba(47,129,122,.4);transform:translateY(-1px)}

/* Ghost */
.btn-ghost{
  background:transparent;color:var(--navy);
  border:1.5px solid var(--line);
}
.btn-ghost:hover{background:var(--bg);border-color:var(--navy);color:var(--navy)}

/* Danger */
.btn-danger,.btn-red{
  background:rgba(180,80,62,.1);color:var(--red);
  border:1.5px solid rgba(180,80,62,.25);
}
.btn-danger:hover,.btn-red:hover{background:rgba(180,80,62,.18);border-color:var(--red)}

/* Tamanhos */
.btn-sm{padding:6px 12px;font-size:12.5px;border-radius:9px;gap:5px}
.btn-sm svg{width:14px;height:14px}
.btn-lg{padding:13px 28px;font-size:15px;border-radius:14px;gap:9px}
.btn-lg svg{width:18px;height:18px}
.btn-full{width:100%;justify-content:center}

/* Icon button */
.btn-icon{
  padding:8px;border-radius:10px;
  background:transparent;border:1.5px solid var(--line);
  color:var(--ink-3);transition:all .15s;
}
.btn-icon:hover{
  background:var(--bg);border-color:var(--navy);color:var(--navy);
  transform:scale(1.1);
}
.btn-icon svg{width:16px;height:16px}
.btn-icon:active{transform:scale(.93)}

/* Dark mode */
html.dark html.dark html.dark html.dark html.dark html.dark html.dark .frm input,html.dark .frm select,html.dark .frm textarea{background:var(--bg);color:var(--ink)}
html.dark .frm input:focus,html.dark .frm select:focus{background:var(--card)}
html.dark .btn-ghost{border-color:var(--line-2);color:var(--ink)}
html.dark .btn-ghost:hover{background:var(--card);border-color:var(--blue-ink)}
html.dark .btn-icon{border-color:var(--line-2);color:var(--ink-3)}
html.dark .btn-icon:hover{background:var(--card);border-color:var(--blue-ink)}

/* ── CARD-ICO redesenhado ── */
.card-ico{
  width:38px;height:38px;border-radius:11px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.card-ico svg{width:18px;height:18px}
.i-navy{background:rgba(8,45,81,.10);color:var(--navy)}
.i-green{background:rgba(47,129,122,.12);color:var(--teal)}
.i-gold{background:rgba(201,169,78,.14);color:var(--gold-2)}
.i-red{background:rgba(180,80,62,.10);color:var(--red)}
.i-amber{background:rgba(192,138,46,.12);color:var(--amber)}
html.dark .i-navy{background:rgba(48,92,116,.25);color:#AFC2D6}
html.dark .i-green{background:rgba(47,129,122,.2);color:var(--green-2)}
html.dark .i-gold{background:rgba(201,169,78,.18);color:var(--gold)}
html.dark .i-red{background:rgba(180,80,62,.2);color:#E07060}

/* ── TAGS estilizadas ── */
.tag{
  display:inline-flex;align-items:center;gap:4px;
  padding:3px 9px;border-radius:20px;font-size:11.5px;font-weight:600;
}
.tag.pago{background:#2F817A15;color:#1A6B63;border:1px solid #2F817A30}
.tag.pendente{background:#C9A94E14;color:#8A6A1A;border:1px solid #C9A94E35}
.tag.atrasado{background:#B4503E16;color:var(--red);border:1px solid #B4503E35}
.tag.rec{background:#2F817A14;color:#1A6B63;border:1px solid #2F817A28}
.tag.desp{background:#B4503E12;color:var(--red);border:1px solid #B4503E28}

/* ── TOAST notification ── */
.toast-wrap{position:fixed;bottom:24px;right:24px;z-index:9999;display:flex;flex-direction:column;gap:8px}
.toast-item{
  display:flex;align-items:center;gap:10px;
  padding:12px 16px;border-radius:14px;min-width:220px;
  box-shadow:0 8px 24px rgba(0,0,0,.18);
  animation:toastIn .25s cubic-bezier(.4,0,.2,1);
  font-size:13.5px;font-weight:600;
}
@keyframes toastIn{from{transform:translateX(40px);opacity:0}}
.toast-ok{background:#2F817A;color:#fff}
.toast-err{background:#B4503E;color:#fff}
.toast-info{background:var(--navy);color:#fff}
.toast-item svg{width:18px;height:18px;flex-shrink:0}

/* ── FORMULÁRIO RÁPIDO DE LANÇAMENTO (aprimorado) ── */
.tipo-selector{
  display:grid;grid-template-columns:1fr 1fr;
  gap:8px;margin-bottom:4px;
}
.tipo-btn{
  padding:12px;border-radius:12px;border:2px solid var(--line);
  display:flex;flex-direction:column;align-items:center;gap:6px;
  cursor:pointer;transition:all .15s;background:var(--bg);
  font-size:12px;font-weight:700;color:var(--ink-2);
}
.tipo-btn svg{width:22px;height:22px}
.tipo-btn.sel-rec{border-color:var(--teal);background:rgba(47,129,122,.08);color:var(--teal)}
.tipo-btn.sel-desp{border-color:var(--red);background:rgba(180,80,62,.08);color:var(--red)}

/* ── STATUS BADGE ── */
.status-badge{
  display:inline-flex;align-items:center;gap:5px;
  padding:4px 10px;border-radius:20px;font-size:11.5px;font-weight:700;
}
.status-badge::before{content:"";width:6px;height:6px;border-radius:50%;flex-shrink:0}
.status-badge.pago{background:#2F817A15;color:#1A6B63}
.status-badge.pago::before{background:#2F817A}
.status-badge.pendente{background:#C9A94E15;color:#8A6A1A}
.status-badge.pendente::before{background:#C9A94E}
.status-badge.atrasado{background:#B4503E15;color:var(--red)}
.status-badge.atrasado::before{background:var(--red);animation:pulse 1.5s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}


/* ══════════════════════════════════════════════════════════════
   BOTTOM TAB BAR: menu fixo no celular (estilo app nativo)
   ══════════════════════════════════════════════════════════════ */
.btab{display:none} /* oculto no desktop */

/* ── Sidebar compacta (1024px-1280px) ── */
@media(min-width:821px) and (max-width:1280px){
  :root{--sidebar:var(--sidebar-mini)}
  .sidebar{width:var(--sidebar-mini);overflow:hidden}
  .sb-brand .t,.sb-brand .s,.sb-brand 
  .sb-brand{padding:calc(16px + var(--safe-top)) 12px 16px;justify-content:center}
  .sb-logo{width:40px;height:40px}
  .sb-nav{padding:10px 8px}
  .sb-sec{display:none}
  .nav-item{padding:10px;justify-content:center;gap:0;border-radius:10px}
  .nav-item span{display:none}
  .nav-item svg{width:22px;height:22px}
  .nav-badge{position:absolute;top:4px;right:4px;padding:0;width:16px;height:16px;display:flex;align-items:center;justify-content:center;font-size:9px}
  .sb-foot{flex-direction:column;align-items:center;padding:10px 8px;gap:6px}
  .sb-foot .nm,.sb-foot .em{display:none}
  .sb-foot button{margin-left:0}
  /* tooltip ao hover no modo compacto */
  .nav-item{position:relative}
  .nav-item::after{
    content:attr(data-nome);
    position:absolute;left:calc(100% + 8px);top:50%;transform:translateY(-50%);
    background:#0E3A63;color:#fff;font-size:12px;font-weight:600;
    padding:5px 10px;border-radius:8px;white-space:nowrap;
    opacity:0;pointer-events:none;transition:opacity .15s;z-index:100;
    box-shadow:0 4px 12px rgba(0,0,0,.2);
  }
  .nav-item:hover::after{opacity:1}
}

@media(max-width:820px){
  /* Esconde o hamburger: navegação vira bottom tab */
  .topbar .menu-btn{display:none !important}

  /* Barra fixa embaixo */
  .btab{
    display:flex;
    position:fixed;bottom:0;left:0;right:0;
    height:calc(60px + var(--safe-bottom));
    padding-bottom:var(--safe-bottom);
    background:var(--card);
    border-top:1px solid var(--line);
    box-shadow:0 -4px 20px rgba(8,30,58,.10);
    z-index:50;
    align-items:stretch;
  }

  /* Tab individual */
  .btab-item{
    flex:1;display:flex;flex-direction:column;
    align-items:center;justify-content:center;
    gap:3px;cursor:pointer;border:none;
    background:transparent;padding:0;
    color:var(--ink-3);font-size:10px;font-weight:600;
    letter-spacing:.02em;transition:color .15s;
    position:relative;
    -webkit-tap-highlight-color:transparent;
  }
  .btab-item svg{width:22px;height:22px;stroke-width:1.8;transition:transform .15s}
  .btab-item.on{color:var(--navy)}
  .btab-item.on svg{transform:scale(1.12)}
  .btab-item:active svg{transform:scale(.9)}

  /* Pill indicador no item ativo */
  .btab-item::before{
    content:"";position:absolute;top:0;left:20%;right:20%;height:2px;
    background:transparent;border-radius:0 0 4px 4px;transition:background .2s;
  }
  .btab-item.on::before{background:var(--navy)}

  /* Botão central FAB (+) */
  .btab-fab{
    flex:1;display:flex;flex-direction:column;
    align-items:center;justify-content:center;gap:3px;
    cursor:pointer;border:none;background:transparent;
    padding:0;color:var(--ink-3);font-size:10px;font-weight:600;
    -webkit-tap-highlight-color:transparent;
  }
  .btab-fab-inner{
    width:46px;height:46px;border-radius:16px;
    background:linear-gradient(135deg,#0E3A63,#082D51);
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 4px 14px rgba(8,45,81,.38);
    transition:transform .15s,box-shadow .15s;
    margin-bottom:1px;
  }
  .btab-fab:active .btab-fab-inner{transform:scale(.92)}
  .btab-fab-inner svg{width:22px;height:22px;color:#fff;stroke-width:2.2}

  /* Badge de notificação */
  .btab-badge{
    position:absolute;top:6px;right:calc(50% - 18px);
    background:var(--red);color:#fff;
    font-size:9px;font-weight:800;
    min-width:16px;height:16px;border-radius:10px;
    display:flex;align-items:center;justify-content:center;
    padding:0 4px;border:2px solid var(--card);
    pointer-events:none;
  }

  /* Conteúdo não fica atrás da barra */
  .content{padding-bottom:calc(76px + var(--safe-bottom)) !important}

  /* Esconde sidebar lateral no mobile: usa bottom tab no lugar */
  .sidebar{display:none}
  .backdrop{display:none !important}
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVIDADE GERAL: fixes de overflow
   ══════════════════════════════════════════════════════════════ */

/* Tudo que pode estourar horizontalmente fica contido */
*{min-width:0}
img,svg,video{max-width:100%}

/* Topbar não estoura */
.topbar{min-width:0;overflow:hidden}
.topbar>*{flex-shrink:0}
.busca-global-wrap{flex-shrink:1;min-width:0}

/* Tabelas: scroll horizontal, nunca estouram */
.tbl-wrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.tbl-wrap table{min-width:480px}

/* Cards de KPI não deixam valor estourar */
.kpi{overflow:hidden;min-width:0}
.kpi .val{overflow-wrap:anywhere;font-size:clamp(18px,5.2vw,28px)}
.kpi-grid{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}

/* Toolbar não estoura: botões menores no mobile */
.toolbar{flex-wrap:wrap;gap:8px;min-width:0}
.toolbar h2{font-size:clamp(15px,4vw,20px)}

/* Modais: nunca saem da tela */
@media(max-width:520px){
      /* Faixa gradiente segue o border-radius novo */
  }

/* Cards da lista de compras/metas não estouram */
.card{overflow:hidden;min-width:0}
.card-pad{overflow:hidden}

/* Gráficos de barras do dashboard */
.chart-wrap{overflow-x:auto;min-width:0}

/* Inputs e selects nunca estouram */
input,select,textarea{max-width:100%}

/* Grid de metas responsivo */
@media(max-width:520px){
  .kpi-grid{grid-template-columns:1fr 1fr}
  .kpi .val{font-size:18px !important}
  .kpi .lab{font-size:10.5px}
  .kpi .meta{font-size:10px}

  /* Botões na toolbar: só ícone */
  .toolbar .btn span{display:none}
  .toolbar .btn{padding:8px 10px;gap:0}
  .toolbar .btn svg{margin:0}

  /* Formulário: 1 coluna */
  .frm{grid-template-columns:1fr !important}
  .frm .full{grid-column:1}

  /* Busca no topbar: compacta */
  .busca-input{font-size:12px;padding:7px 10px 7px 30px}
  .busca-global-wrap{flex:1;max-width:none}

  /* Títulos das seções */
  .toolbar h2{font-size:17px}

  /* Tabela vira lista de cards no mobile */
  .tbl-wrap table{min-width:0}
  .tbl-wrap thead{display:none}
  .tbl-wrap tr{
    display:flex;flex-wrap:wrap;
    padding:10px 12px;border-bottom:1px solid var(--line);
    align-items:center;gap:4px;
  }
  .tbl-wrap td{border:none;padding:2px 4px}

  /* Cards de metas: 1 coluna */
  div[style*="repeat(auto-fill,minmax(280px"]{
    grid-template-columns:1fr !important;
  }
}

/* Dark mode: bottom tab escuro */
html.dark .btab{
  background:var(--card);border-top-color:var(--line-2);
}
html.dark .btab-item.on{color:#AFC2D6}
html.dark .btab-item.on::before{background:#AFC2D6}

/* ── Auto-fix geral (auditoria) ── */
.brand-mark{width:100%;height:auto;object-fit:contain;display:block}
/* textos longos (URLs, e-mails, IDs de grupo) nunca estouram o card */
.card td, .card .sub, .card code, .busca-nome { overflow-wrap:anywhere; word-break:normal }
.card table td[style*="monospace"], .card td[style*="font-family:monospace"]{ word-break:break-all }
/* tabelas de itens da compra: inputs encolhem no mobile */
@media(max-width:520px){
  .modal table input{ font-size:12px !important; padding:3px !important }
      .modal-f .btn{ flex:1; justify-content:center }
}

/* ── WhatsApp: chips de comando e switch ── */
.wa-chips{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px;margin-top:6px}
.wa-chip{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:9px 12px;display:flex;flex-direction:column;gap:2px;min-width:0}
.wa-chip code{font-size:12.5px;font-weight:700;overflow-wrap:anywhere}
.wa-chip span{font-size:11.5px;color:var(--ink-2)}
.wa-grupo:hover{background:var(--bg)}
.hidden{display:none !important}
.switch{position:relative;display:inline-block;width:42px;height:24px;flex-shrink:0}
.switch input{opacity:0;width:0;height:0}
.switch .slider{position:absolute;inset:0;background:var(--line);border-radius:24px;transition:.2s;cursor:pointer}
.switch .slider::before{content:"";position:absolute;width:18px;height:18px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.switch input:checked + .slider{background:var(--teal)}
.switch input:checked + .slider::before{transform:translateX(18px)}
@media(max-width:520px){.wa-chips{grid-template-columns:1fr 1fr}.wa-chip span{font-size:11px}}
@keyframes spin{to{transform:rotate(360deg)}}

/* Scrollbar discreta: não estoura o layout */
/* Scrollbar invisível em todo o sistema */
*::-webkit-scrollbar { width: 0; height: 0; background: transparent }
* { scrollbar-width: none; -ms-overflow-style: none }
/* Exceção: tabelas e listas longas que precisam de indicação */
.tbl-wrap::-webkit-scrollbar { width: 4px; height: 4px }
.tbl-wrap { scrollbar-width: thin; scrollbar-color: var(--line) transparent }

/* ══════════════════════════════════════════════════════
   TOUR INTERATIVO
   ══════════════════════════════════════════════════════ */
#tour-overlay {
  position: fixed;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  width: calc(100% - 32px);
  max-width: 480px;
  animation: tourIn .25s cubic-bezier(.4,0,.2,1);
}
@keyframes tourIn {
  from { transform: translateX(-50%) translateY(20px); opacity: 0; }
  to   { transform: translateX(-50%) translateY(0);    opacity: 1; }
}
.tour-card {
  background: var(--card);
  border-radius: 20px;
  box-shadow: 0 8px 40px rgba(8,45,81,.22), 0 2px 8px rgba(8,45,81,.1);
  border: 1.5px solid var(--line);
  overflow: hidden;
}
.tour-prog {
  height: 3px;
  background: var(--line);
}
.tour-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--navy), var(--teal));
  transition: width .3s ease;
  border-radius: 0 3px 3px 0;
}
.tour-step {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 12px 18px 0;
}
.tour-titulo {
  font-size: 17px;
  font-weight: 800;
  color: var(--navy);
  padding: 6px 18px 4px;
  line-height: 1.3;
}
.tour-texto {
  font-size: 13.5px;
  color: var(--ink-2);
  padding: 0 18px 16px;
  line-height: 1.6;
}
.tour-texto b { color: var(--ink); }
.tour-btns {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  border-top: 1px solid var(--line);
  background: var(--bg);
}
.tour-btn-pular {
  font-size: 13px;
  color: var(--ink-3);
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px 0;
}
.tour-btn-pular:hover { color: var(--red); }
.tour-btn-nav {
  padding: 8px 14px;
  border-radius: 10px;
  border: 1.5px solid var(--line);
  background: var(--card);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-2);
  cursor: pointer;
}
.tour-btn-prox {
  padding: 8px 18px;
  border-radius: 10px;
  border: none;
  background: linear-gradient(135deg, var(--navy), #0E3A63);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(8,45,81,.3);
}
.tour-btn-prox:active { transform: scale(.97); }

/* Destaque do elemento sendo explicado */
.tour-destaque {
  outline: 3px solid var(--gold) !important;
  outline-offset: 4px !important;
  border-radius: 10px;
  animation: tourPulse 1.2s infinite;
  position: relative;
  z-index: 500;
}
@keyframes tourPulse {
  0%, 100% { outline-color: var(--gold); }
  50%       { outline-color: var(--teal); }
}

/* Mobile: card sobe mais */
@media(max-width: 820px) {
  #tour-overlay { bottom: 90px; }
}

.content::-webkit-scrollbar{display:none}
.sb-nav::-webkit-scrollbar{display:none}

/* ── Login form: campo, label, input ── */





.login-form-wrap .campo[style*="position:relative"] input { padding-right: 44px; }

/* ── Modais: borda gradiente colorida no topo ── */

/* ── Toolbar melhorada ── */
.toolbar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:16px; }
.search { display:flex; align-items:center; gap:8px; background:var(--card);
  border:1.5px solid var(--line); border-radius:12px; padding:0 12px; flex:1; min-width:160px;
  transition:border-color .15s; box-shadow:0 1px 3px rgba(8,45,81,.04); }
.search:focus-within { border-color:var(--navy); box-shadow:0 0 0 3px rgba(8,45,81,.08); }
.search-i { border:none; background:transparent; outline:none; flex:1; padding:10px 0; font-size:14px; }

/* ── Seg buttons ── */
.seg { display:flex; gap:4px; background:var(--bg); border-radius:12px; padding:4px; }
.seg button { padding:7px 14px; border:none; background:transparent; border-radius:9px;
  font-size:13px; font-weight:600; color:var(--ink-3); cursor:pointer; transition:all .15s; white-space:nowrap; }
.seg button:hover { background:var(--card); color:var(--ink); }
.seg button.on { background:linear-gradient(135deg,var(--navy),var(--navy-2)); color:#fff;
  box-shadow:0 2px 8px rgba(8,45,81,.25); font-weight:700; }

/* ── Empty state ── */
.empty { display:flex; flex-direction:column; align-items:center; gap:12px;
  padding:48px 24px; color:var(--ink-3); text-align:center; }
.empty svg { opacity:.3; width:48px; height:48px; }
.empty p { font-size:14px; }

/* ── Badge de vencimentos mais visível ── */
.nav-badge { background:linear-gradient(135deg,#DC2626,#B91C1C) !important;
  box-shadow:0 2px 6px rgba(220,38,38,.4); }

/* ══════════════════════════════════════════════════════
   MELHORIAS VISUAIS GLOBAIS
   ══════════════════════════════════════════════════════ */

/* Botões: efeito de press + ripple */
.btn { position:relative; overflow:hidden; }
.btn:active { transform:scale(.97); }
.btn-primary:hover { filter:brightness(1.1); }
.btn-green:hover { filter:brightness(1.1); }

/* Cards: sombra ao hover */
.card:hover { box-shadow:0 6px 20px rgba(8,45,81,.1); }

/* KPIs com ícone emoji decorativo */
.kpi .kpi-emoji {
  position:absolute; right:16px; top:14px;
  font-size:32px; opacity:.12; line-height:1;
  pointer-events:none; user-select:none;
}

/* Vencimentos: linha com hover colorido */
.venc-item {
  display:flex; align-items:center; gap:12px;
  padding:12px 14px; border-radius:14px;
  border:1.5px solid var(--line);
  background:var(--card); margin-bottom:8px;
  cursor:pointer; transition:all .15s;
}
.venc-item:hover { transform:translateX(4px); border-color:var(--navy); }

/* Badge de status: mais moderno */
.status-badge {
  display:inline-flex; align-items:center; gap:5px;
  font-size:11px; font-weight:800; padding:4px 10px;
  border-radius:99px; text-transform:uppercase; letter-spacing:.04em;
}
.status-badge::before {
  content:""; width:6px; height:6px; border-radius:50%; flex-shrink:0;
}
.status-badge.pago { background:#DCFCE7; color:#15803D; border:1px solid #86EFAC; }
.status-badge.pago::before { background:#16A34A; }
.status-badge.pendente { background:#FEF9C3; color:#854D0E; border:1px solid #FDE047; }
.status-badge.pendente::before { background:#CA8A04; }
.status-badge.atrasado { background:#FEE2E2; color:#991B1B; border:1px solid #FCA5A5; animation:pulse-badge 2s infinite; }
.status-badge.atrasado::before { background:#DC2626; }
@keyframes pulse-badge { 0%,100%{opacity:1} 50%{opacity:.7} }

/* Progresso de metas: mais colorida */
.meta-bar-wrap { background:var(--line); border-radius:99px; height:8px; overflow:hidden; }
.meta-bar {
  height:100%; border-radius:99px;
  background:linear-gradient(90deg,var(--teal),var(--green));
  transition:width .6s cubic-bezier(.4,0,.2,1);
  position:relative; overflow:hidden;
}
.meta-bar::after {
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.3) 50%,transparent 100%);
  animation:shimmer 2s infinite;
}
@keyframes shimmer { from{transform:translateX(-100%)} to{transform:translateX(100%)} }

/* Float action button melhorado */
.btab-fab {
  box-shadow:0 6px 20px rgba(8,45,81,.35) !important;
  transition:all .2s !important;
}
.btab-fab:active { transform:scale(.92) !important; }

/* Sidebar avatar melhorado */
.sb-avatar {
  box-shadow:0 0 0 3px rgba(201,169,78,.4);
  transition:box-shadow .2s;
}
.sb-avatar:hover { box-shadow:0 0 0 4px rgba(201,169,78,.6); }

/* Input focus melhorado */
input:focus, select:focus, textarea:focus {
  outline:none;
  border-color:var(--navy) !important;
  box-shadow:0 0 0 3px rgba(8,45,81,.1) !important;
}

/* Tooltip nos nav items compactos */
.nav-item::after {
  box-shadow:0 4px 16px rgba(0,0,0,.25) !important;
  border:1px solid rgba(255,255,255,.1) !important;
}

/* Hero card: círculos decorativos animados */
.hero-circle-1 {
  position:absolute; width:200px; height:200px; border-radius:50%;
  background:rgba(201,169,78,.06); right:-60px; top:-60px;
  animation:heroFloat 6s ease-in-out infinite;
}
.hero-circle-2 {
  position:absolute; width:120px; height:120px; border-radius:50%;
  background:rgba(47,129,122,.08); left:30%; bottom:-40px;
  animation:heroFloat 8s ease-in-out infinite reverse;
}
@keyframes heroFloat {
  0%,100% { transform:translateY(0) scale(1); }
  50% { transform:translateY(-12px) scale(1.04); }
}

/* Card do lançamento: linha lateral colorida */
.lanc-card-pago { border-left:4px solid #16A34A !important; }
.lanc-card-pendente { border-left:4px solid #CA8A04 !important; }
.lanc-card-atrasado { border-left:4px solid #DC2626 !important; }

/* Select melhorado */
select {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 10px center;
  -webkit-appearance:none; appearance:none;
  padding-right:32px !important;
}


/* Toast melhorado */
.toast {
  border-radius:14px !important;
  box-shadow:0 8px 32px rgba(0,0,0,.2) !important;
  font-weight:700 !important;
  backdrop-filter:blur(8px) !important;
}

/* Número de badge mais visível */
.nav-badge {
  min-width:18px; height:18px;
  font-size:10px; font-weight:800;
}

/* ── Autocomplete de descrição ── */
.auto-item {
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--line);
  transition: background .1s;
}
.auto-item:last-child { border-bottom: none; }
.auto-item:hover { background: var(--bg); }
.auto-item:active { background: var(--line); }

/* Destaque do texto buscado */
.auto-item mark {
  background: #FEF9C3;
  border-radius: 3px;
  padding: 0 1px;
  color: inherit;
}

/* ══════════════════════════════════════════════════════
   OVERLAY + MODAL: sistema unificado
   ══════════════════════════════════════════════════════ */

/* Overlay: fundo escuro que cobre tudo */
.overlay {
  position: fixed; inset: 0; z-index: 900;
  background: rgba(8,30,58,.58);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  backdrop-filter: blur(4px);
  animation: ov-in .18s ease;
}
@keyframes ov-in { from{opacity:0} to{opacity:1} }

/* Modal: caixa branca centralizada */
.modal {
  background: var(--card);
  border-radius: 22px;
  width: 100%; max-width: 520px;
  max-height: 92dvh; overflow-y: auto; overflow-x: hidden;
  box-shadow: 0 24px 64px rgba(8,30,58,.24), 0 2px 8px rgba(8,30,58,.08);
  animation: modal-pop .22s cubic-bezier(.4,0,.2,1);
  border: 1px solid var(--line);
  position: relative;
}
@keyframes modal-pop {
  from { transform: translateY(16px) scale(.97); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

/* Faixa decorativa no topo */
.modal::before {
  content: ""; display: block; height: 4px;
  background: linear-gradient(90deg, var(--navy), var(--teal), var(--gold));
  border-radius: 22px 22px 0 0;
  flex-shrink: 0;
}

/* Cabeçalho */
.modal-h {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 22px 16px;
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 2;
  background: var(--card);
}
.modal-h h3 {
  font-size: 16px; font-weight: 800; color: var(--navy); flex: 1;
  letter-spacing: -.01em;
}
.modal-h .close-btn {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg); border: 1.5px solid var(--line);
  color: var(--ink-3); cursor: pointer; transition: all .15s;
}
.modal-h .close-btn:hover {
  background: #FEE2E2; color: #DC2626;
  border-color: #FECACA; transform: rotate(90deg);
}
.modal-h .close-btn svg { width: 15px; height: 15px; }

/* Corpo */
.modal-b { padding: 20px 22px; }

/* Rodapé com botões */
.modal-f {
  padding: 14px 22px;
  border-top: 1px solid var(--line);
  display: flex; gap: 8px; justify-content: flex-end;
  position: sticky; bottom: 0; background: var(--card);
}

/* ── FORMULÁRIO ── */
.frm { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.frm .full { grid-column: 1 / -1; }
.frm .campo { display: flex; flex-direction: column; gap: 6px; }
.frm label {
  font-size: 11px; font-weight: 800; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: .07em;
}
.frm input, .frm select, .frm textarea {
  padding: 11px 14px;
  border: 1.5px solid var(--line);
  border-radius: 11px;
  background: var(--bg);
  color: var(--ink);
  font-size: 13.5px;
  width: 100%; box-sizing: border-box;
  transition: border-color .15s, box-shadow .15s;
  -webkit-appearance: none;
}
.frm input:focus, .frm select:focus, .frm textarea:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(8,45,81,.10);
  background: var(--card);
}
.frm input::placeholder, .frm textarea::placeholder { color: var(--ink-3); }
.frm textarea { resize: vertical; min-height: 72px; }

/* Input com ícone embutido */
.inp-wrap { position: relative; }
.inp-wrap .inp-ic {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--ink-3); pointer-events: none;
  display: flex; align-items: center;
}
.inp-wrap .inp-ic svg { width: 16px; height: 16px; }
.inp-wrap input { padding-left: 40px !important; }

/* Variantes de tamanho */
.popup-venc .modal { max-width: 460px; }
.popup-wide .modal  { max-width: 680px; }

/* Dark mode */
html.dark .modal,
html.dark .modal-h,
html.dark .modal-f { background: var(--card); }
html.dark .modal-h h3 { color: var(--ink); }
html.dark .frm input,
html.dark .frm select,
html.dark .frm textarea { background: var(--bg-2); border-color: var(--line); color: var(--ink); }
html.dark .frm input:focus,
html.dark .frm select:focus,
html.dark .frm textarea:focus { background: var(--bg-2); }

/* Mobile: modal sobe do rodapé */
@media (max-width: 820px) {
  .overlay { align-items: flex-end; padding: 0; }
  .modal {
    max-width: 100% !important;
    border-radius: 22px 22px 0 0;
    max-height: 90dvh;
  }
  .frm { grid-template-columns: 1fr; }
}

/* ── Dashboard 2 colunas no desktop ── */
.dash-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: start;
}
@media (max-width: 1024px) {
  .dash-grid { grid-template-columns: 1fr; }
}

/* ── Topbar título discreto ── */
#tb-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}

/* campo apontado pelo servidor como inválido */
.campo-erro { border-color: var(--red, #dc2626) !important; box-shadow: 0 0 0 3px rgba(220,38,38,.15) !important; }
.campo-erro-msg { display:block; margin-top:4px; font-size:11.5px; line-height:1.35; color: var(--red, #dc2626); font-weight:500; }
.toast.err { cursor: pointer; max-width: min(440px, calc(100vw - 32px)); }
.toast.err span { white-space: normal; }

/* ══════════════════════════════════════════════════════
   ILUSTRAÇÕES SVG (estados vazios, buscas, sugestões)
   ══════════════════════════════════════════════════════ */
.empty svg.ilus { opacity:1; width:auto; height:auto; margin:0 auto 4px; color:inherit; stroke-width:initial; }
.ilus { display:block; flex-shrink:0; overflow:visible; }
.ilus-brilho { animation: ilusBrilho 2.4s ease-in-out infinite; transform-box:fill-box; transform-origin:center; }
.ilus-brilho.b2 { animation-delay: 1.2s; }
@keyframes ilusBrilho { 0%,100%{ opacity:.35; transform:scale(.8) } 50%{ opacity:1; transform:scale(1.15) } }

.ilus-scan .lupa { animation: ilusLupa 1.8s ease-in-out infinite; }
@keyframes ilusLupa { 0%,100%{ transform:translate(0,0) } 25%{ transform:translate(9px,-4px) } 50%{ transform:translate(16px,6px) } 75%{ transform:translate(4px,10px) } }

.ilus-pin .pin { animation: ilusPin .9s ease-in-out infinite; }
.ilus-pin .sombra { animation: ilusSombra .9s ease-in-out infinite; transform-box:fill-box; transform-origin:center; }
@keyframes ilusPin { 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-6px) } }
@keyframes ilusSombra { 0%,100%{ transform:scale(1); opacity:.25 } 50%{ transform:scale(.6); opacity:.12 } }

.ilus-pop { animation: ilusPop .45s cubic-bezier(.34,1.56,.64,1); }
@keyframes ilusPop { from{ transform:scale(.6); opacity:0 } to{ transform:scale(1); opacity:1 } }

.ilus-bars .b { transform-box:fill-box; transform-origin:bottom; animation: ilusBar 1s ease-in-out infinite alternate; }
.ilus-bars .b2 { animation-delay:.2s } .ilus-bars .b3 { animation-delay:.4s }
@keyframes ilusBar { from{ transform:scaleY(.35) } to{ transform:scaleY(1) } }

@media (prefers-reduced-motion: reduce) {
  .ilus *, .ilus { animation:none !important; }
}

/* cartão de resultado das buscas (CNPJ, CEP) */
.busca-card { display:flex; align-items:center; gap:12px; margin-top:10px; padding:10px 12px;
  background:var(--card); border:1.5px solid var(--line); border-radius:14px; animation: fade .2s; }
.busca-card > div { min-width:0; display:flex; flex-direction:column; gap:2px; }
.busca-card b { font-size:13px; font-weight:700; color:var(--ink); line-height:1.3; overflow-wrap:anywhere; }
.busca-card span { font-size:11.5px; color:var(--ink-3); line-height:1.35; }
.busca-card.ok { border-color: rgba(22,163,74,.35); background: linear-gradient(135deg, rgba(22,163,74,.06), transparent 60%), var(--card); }
.busca-card.aviso { border-color: rgba(202,138,4,.45); background: linear-gradient(135deg, rgba(202,138,4,.07), transparent 60%), var(--card); }
.busca-card.erro { border-color: rgba(220,38,38,.35); background: linear-gradient(135deg, rgba(220,38,38,.06), transparent 60%), var(--card); }
.busca-card.erro b { color: var(--red); }
.busca-card.mini { margin-top:6px; padding:6px 10px; gap:8px; border-radius:12px; }
.busca-chips { display:flex; flex-wrap:wrap; gap:5px; margin-top:5px; }
.busca-chips .chip { display:inline-flex; align-items:center; gap:4px; font-style:normal; font-size:10.5px; font-weight:700;
  padding:3px 8px; border-radius:99px; background:var(--bg); color:var(--ink-2); border:1px solid var(--line); }
.busca-chips .chip svg { width:11px; height:11px; }
.busca-chips .chip.ver { background:rgba(22,163,74,.12); color:#15803D; border-color:transparent; }
.busca-chips .chip.amb { background:rgba(202,138,4,.14); color:#A16207; border-color:transparent; }
.busca-chips .chip.link { cursor:pointer; color:var(--navy); font-family:inherit; }
.busca-chips .chip.link:hover { border-color:var(--navy); }

/* autocomplete */
.auto-cab { display:flex; align-items:center; gap:6px; padding:8px 12px 6px; font-size:10.5px; font-weight:700;
  text-transform:uppercase; letter-spacing:.05em; color:var(--ink-3); border-bottom:1px solid var(--line); }
.auto-cab svg { width:13px; height:13px; }
.auto-item { display:flex !important; align-items:center; gap:10px; }
.auto-txt { min-width:0; flex:1; }
.auto-ic { width:30px; height:30px; border-radius:50%; display:grid; place-items:center; flex-shrink:0; }
.auto-ic svg { width:15px; height:15px; }
.auto-ic.rec { background:rgba(22,163,74,.12); color:#15803D; }
.auto-ic.desp { background:rgba(220,38,38,.1); color:var(--red); }
.auto-vazio { display:flex; align-items:center; gap:10px; padding:10px 14px; }
.auto-vazio > div { display:flex; flex-direction:column; gap:2px; }
.auto-vazio b { font-size:13px; color:var(--ink); }
.auto-vazio span { font-size:11.5px; color:var(--ink-3); }

/* ícone SVG no meio do texto (substitui emojis da interface) */
.ic-inline { display:inline-flex; vertical-align:-2px; }
.ic-inline svg { width:14px; height:14px; }

/* ══════════════════════════════════════════════════════
   TEXTO JUSTIFICADO + NADA SAINDO DOS QUADROS
   ══════════════════════════════════════════════════════ */

/* Textos corridos justificados, com hifenização em português.
   A última linha fica à esquerda para não esticar palavras soltas. */
p, .dica > div, .dica > span, .modal-b p, .tour-texto, .tour-card p,
.busca-card span, .auto-vazio span, .ct-end, .obs-txt {
  text-align: justify; text-justify: inter-word; text-align-last: left;
  hyphens: auto; -webkit-hyphens: auto;
}
/* centralizados continuam centralizados */
.empty p, .login-app-footer, .login-wrap p, [style*="text-align:center"] p { text-align: center; text-align-last: center; }

/* Nada sai do quadro: palavras longas (e-mails, endereços) quebram dentro da caixa */
.card, .kpi, .modal, .dica, .busca-card, .lanc, .venc-item, .auto-item, .ct-card {
  overflow-wrap: break-word; word-break: normal; min-width: 0;
}
.grow, .d, .auto-txt, .busca-card > div { min-width: 0; }
.mono-num, .money, .kpi .val { white-space: nowrap; }

/* Valores grandes diminuem para caber no quadro em vez de partir o número */
.kpi { container-type: inline-size; }
.kpi .val { font-size: clamp(13px, 8.5cqi, 27px) !important; }
.hero-mini { container-type: inline-size; }
.hero-mini-val { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap;
  font-size: clamp(10px, 11cqi, 13px); letter-spacing: -.01em; }

.grid-2-igual { grid-template-columns: 1fr 1fr; }

@media (min-width: 1800px) {
  .grid-2:not(.grid-2-igual) { grid-template-columns: minmax(380px, 1.1fr) minmax(380px, 0.9fr); }
  .grid-3 { grid-template-columns: minmax(320px, 1fr) minmax(320px, 1fr) minmax(320px, 1fr); }
}
@media (max-width: 1024px) {
  .dash-grid, .grid-2-igual { grid-template-columns: 1fr !important; }
}

@media (max-width: 640px) {
  .so-desktop { display: none; }

  /* botões de filtro (Todos / Pendentes / Atrasados / Pagos) sem sobrepor */
  .seg { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .seg::-webkit-scrollbar { display: none; }
  .seg button { white-space: nowrap; flex: 1 0 auto; padding: 7px 9px; font-size: 12.5px; }

  /* busca ocupa a linha inteira; categoria e botões descem juntos */
  .lanc-filtros { flex-wrap: wrap; }
  .lanc-filtros .search { flex: 1 1 100% !important; }
  .lanc-filtros select { flex: 1 1 auto !important; max-width: none !important; min-width: 0; }
  .toolbar input.search-i, .search-i { min-width: 0 !important; width: 100%; }

  /* itens de vencimento: nome inteiro, valor e botão na linha de baixo */
  .venc-item { flex-wrap: wrap; row-gap: 6px; }
  .venc-item .d { flex: 1 1 calc(100% - 56px); }
  .venc-item .d .n { white-space: normal; overflow: visible; }
  .venc-item .vv { margin-left: auto; }

  /* títulos de cartão não empurram o botão para fora */
  .card h3 { min-width: 0; overflow-wrap: break-word; }
}

/* linhas do patrimônio: texto encolhe, valor fica inteiro */
.pat-linha { gap: 10px; }
.pat-linha > div:first-child, .pat-linha > span:first-child { min-width: 0; flex: 1; }
.pat-linha > div:last-child { flex-shrink: 0; }
@media (max-width: 640px) {
  .pat-linha .mono-num { font-size: clamp(12.5px, 3.8vw, 15px) !important; }
  .pat-linha { padding: 11px 12px !important; }
}
@media (max-width: 640px) { .pat-total .mono-num { font-size: clamp(13px, 3.5vw, 20px) !important; } }

/* legendas curtas não justificam (abriria buracos entre as palavras) */
.meta, .sub, .kpi .meta, .campo-erro-msg, label { text-align: left; text-align-last: auto; hyphens: manual; }

/* seletor da barra de filtros com o mesmo visual dos campos */
.lanc-filtros select { padding: 9px 12px; border: 1.5px solid var(--line); border-radius: 9px;
  background: var(--card); color: var(--ink-2); font: inherit; font-size: 13px; height: 38px; }

/* painel: duas colunas no computador, uma no celular
   em telas grandes, gráficos ocupam mais espaço; vencimentos/patrimônio compactos */
.dash-grid { grid-template-columns: minmax(480px, 0.65fr) minmax(450px, 1.35fr); }
.dash-col { min-width: 0; display: flex; flex-direction: column; }
.dash-col > .card:last-child, .dash-col > .grid-2:last-child { margin-bottom: 0 !important; }

/* subtítulo padrão dos cartões (antes herdava o tamanho do texto normal) */
.sub { font-size: 12px; color: var(--ink-3); line-height: 1.4; }

/* Em telas grandes, reduzir margens horizontais dentro dos cards para aproveitar melhor */
@media (min-width: 1600px) {
  .card-pad { padding: 16px 18px; }
}

/* Vencimentos em tela grande: mais compacto */
@media (min-width: 1200px) {
  .venc-item { padding: 10px 4px; }
}

/* Grid de patrimônio + juros: mantém 50/50 mesmo em tela grande */
.grid-2-igual { grid-template-columns: 1fr 1fr !important; }

@media (max-width: 640px) {
  .kpi .val { font-size: clamp(12px, 8cqi, 24px) !important; }
  .pat-linha .mono-num { font-size: clamp(11.5px, 3.2vw, 15px) !important; }
  .nm { font-size: clamp(12.5px, 3vw, 14px) !important; }
  /* patrimônio e juros no celular: seus estilos inline clamp passam por cima do CSS */
  .pat-total .mono-num { font-size: 14px !important; }
  /* dashboard cards patrimônio/juros no celular: encolhem bastante */
  .dash-kpi { font-size: clamp(12px, 3.5vw, 22px) !important; }
  @media (max-width: 480px) { .dash-kpi { font-size: clamp(12px, 3.2vw, 18px) !important; } }
}

/* ══ Família: ícones dos membros e formulário ══ */
.familia-avatar { color: #fff; }
.familia-avatar.av-grande { width: 72px; height: 72px; }
.familia-card.inativo { opacity: .65; }
.fam-voce { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--teal); background: #2F817A18; padding: 1px 7px; border-radius: 20px; margin-left: 4px; vertical-align: 2px; }
.fam-tags { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.familia-papel.bloq { background: #B4503E18; color: var(--red); }

.av-topo { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; padding: 12px 14px;
  background: var(--bg); border-radius: 14px; }
.av-topo-nome { font-weight: 700; font-size: 15px; color: var(--ink); overflow-wrap: anywhere; }

.av-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; margin-top: 6px; }
.av-opt { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; padding: 0;
  border-radius: 10px; border: 2px solid transparent; background: var(--bg); color: var(--ink-2);
  cursor: pointer; transition: background .12s, border-color .12s, color .12s; }
.av-opt:hover { color: var(--ink); border-color: var(--line); }
.av-opt.sel { border-color: var(--navy); color: var(--navy); background: var(--card); }
.cor-opt { padding: 0; }

.campo-dica { font-size: 11.5px; color: var(--ink-3); margin-top: 5px; line-height: 1.4; }

.senha-wrap { position: relative; }
.senha-wrap input { width: 100%; padding-right: 44px; }
.senha-olho { position: absolute; right: 6px; top: 6px; width: 32px; height: 32px; display: flex;
  align-items: center; justify-content: center; border: none; border-radius: 8px;
  background: transparent; color: var(--ink-3); cursor: pointer; }
.senha-olho:hover { background: var(--bg); color: var(--ink); }
.senha-olho svg { width: 18px; height: 18px; }

/* interruptor "Acesso liberado" */
.campo label.sw-card { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  border: 1.5px solid var(--line); border-radius: 12px; background: var(--card); cursor: pointer;
  text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 400; color: var(--ink); }
.campo label.sw-card.off { opacity: .6; cursor: not-allowed; }
.sw-card input { position: absolute; opacity: 0; width: 0; height: 0; }
.sw-trilho { position: relative; flex-shrink: 0; width: 40px; height: 22px; border-radius: 20px;
  background: #C4CEDA; transition: background .15s; }
.sw-trilho::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .15s; }
.sw-card input:checked + .sw-trilho { background: var(--teal); }
.sw-card input:checked + .sw-trilho::after { transform: translateX(18px); }
.sw-card input:focus-visible + .sw-trilho { outline: 2px solid var(--navy); outline-offset: 2px; }
.sw-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sw-txt b { font-size: 13.5px; font-weight: 700; }
.sw-txt small { font-size: 11.5px; color: var(--ink-3); line-height: 1.35; }

@media (max-width: 640px) { .av-grid { grid-template-columns: repeat(6, 1fr); } }
.campo label .av-nome { text-transform: none; letter-spacing: 0; font-weight: 600; color: var(--navy); margin-left: 6px; font-size: 12px; }

/* telas grandes: conteúdo usa toda a largura ao lado do menu, com respiro proporcional */
@media (min-width: 1600px) { .content { padding-left: 32px; padding-right: 32px; } }
@media (min-width: 2200px) { .content { padding-left: 40px; padding-right: 40px; } }

/* Metas: pré-visualização do ícone na cor da meta */
.meta-prev { width: 64px; height: 64px; border-radius: 18px; display: flex; align-items: center;
  justify-content: center; margin: 0 auto 6px; transition: background .15s, color .15s; }
#meta-prev-nome { text-align: center; }
#mt-ic-grid { grid-template-columns: repeat(9, 1fr); }
@media (max-width: 640px) { #mt-ic-grid { grid-template-columns: repeat(6, 1fr); } }

/* Transferências */
.tr-troca { display: flex; justify-content: center; margin: -6px 0; }
.tr-prev { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 12px; background: var(--bg); }
.tr-prev:empty { display: none; }
.tr-linha { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--ink-2); flex-wrap: wrap; }
.tr-linha b { color: var(--ink); }
.tr-linha b.neg { color: var(--red); }
.tr-seta { color: var(--ink-3); margin: 0 2px; }
.tr-aviso { font-size: 12px; font-weight: 600; color: var(--red); }
.tr-item { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.tr-item:first-of-type { border-top: none; }
.tr-rota { flex: 1; min-width: 0; font-size: 13.5px; color: var(--ink); overflow-wrap: anywhere; }
.tr-val { font-weight: 700; color: var(--navy); white-space: nowrap; }
.tr-troca .btn { width: auto !important; flex: 0 0 auto; }

/* Orçamento */
.toast.warn { background: var(--gold-2, #9A7A22); cursor: pointer; max-width: min(440px, calc(100vw - 32px)); }
.toast.warn span { white-space: normal; }
.mes-nav { display: flex; align-items: center; gap: 6px; }
.mes-nome { min-width: 140px; text-align: center; font-weight: 700; color: var(--navy); font-size: 14px; }
.orc-kpis { margin-bottom: 14px; }
.orc-item { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.card-h + .orc-item { border-top: none; }
.orc-meio { flex: 1; min-width: 0; }
.orc-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 14px; color: var(--ink); }
.orc-topo b { font-weight: 600; overflow-wrap: anywhere; }
.orc-pct { font-weight: 800; font-size: 13px; font-variant-numeric: tabular-nums; }
.orc-barra { height: 7px; border-radius: 6px; background: var(--line); overflow: hidden; margin: 6px 0 5px; }
.orc-barra > div { height: 100%; border-radius: 6px; transition: width .4s ease; }
.orc-info { font-size: 12px; color: var(--ink-3); }
.orc-item.st-estourado .orc-info { color: var(--red); font-weight: 600; }
.orc-ritmo { font-size: 11.5px; color: var(--gold-2, #9A7A22); font-weight: 600; margin-top: 2px; }
.orc-limite { width: 140px; flex-shrink: 0; }
.orc-limite label { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 3px; }
.orc-limite input { width: 100%; padding: 8px 10px; border: 1.5px solid var(--line); border-radius: 9px; background: var(--card); color: var(--ink); font: inherit; font-size: 13.5px; }
.orc-limite input:focus { outline: none; border-color: var(--navy); }
.orc-rodape { font-size: 12px; color: var(--ink-3); margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.orc-cta { display: flex; align-items: center; gap: 12px; }
.orc-cta b { color: var(--ink); font-size: 14px; }
.dica.amarela { background: #C9A94E18; border-left-color: var(--gold); }
.dica.vermelha { background: #B4503E14; border-left-color: var(--red); }
@media (max-width: 640px) {
  .orc-item { flex-wrap: wrap; }
  .orc-limite { width: 100%; padding-left: 48px; }
  .mes-nome { min-width: 0; }
  .orc-cta { flex-wrap: wrap; }
}

/* Previsão de saldo */
.pv-seg { flex: 0 0 auto; }
.pv-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.pv-chip { flex: 1 1 130px; padding: 10px 12px; border-radius: 12px; background: var(--bg); display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pv-chip span { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.pv-chip b { font-size: 16px; color: var(--navy); white-space: nowrap; }
.pv-chip.dest { background: #2F817A14; box-shadow: inset 0 0 0 1.5px #2F817A55; }
.pv-chip b.neg { color: var(--red); }
.pv-chips.mini .pv-chip { padding: 8px 10px; }
.pv-chips.mini .pv-chip b { font-size: 13.5px; }
.pv-grafico { margin: 14px 0 6px; }
.pv-svg { width: 100%; height: auto; display: block; overflow: visible; }
.pv-svg .pv-eixo { font-size: 12px; fill: var(--ink-3); font-family: inherit; }
.pv-svg .pv-min { font-size: 12.5px; font-weight: 700; fill: var(--ink-2); font-family: inherit; }
.pv-mini { margin: 6px 0 10px; }
.pv-legenda { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 11.5px; color: var(--ink-3); }
.pv-legenda span { display: flex; align-items: center; gap: 6px; }
.pv-l { display: inline-block; width: 18px; height: 0; border-top: 2.5px solid var(--teal); flex-shrink: 0; }
.pv-l.lan { border-top: 2px dashed var(--navy); opacity: .6; }
.pv-h4 { margin: 16px 0 4px; font-size: 13px; color: var(--ink-2); font-weight: 700; }
.pv-ev { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 13px; }
.pv-ev-data { width: 64px; flex-shrink: 0; color: var(--ink-3); font-variant-numeric: tabular-nums; font-size: 12px; }
.pv-ev-desc { flex: 1; min-width: 0; color: var(--ink); overflow-wrap: anywhere; }
.pv-ev b { white-space: nowrap; }
.pv-ev b.neg { color: var(--red); } .pv-ev b.pos { color: var(--green-deep, #256B64); }
.pv-tag { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); background: var(--bg); padding: 1px 6px; border-radius: 10px; }
.pv-card { cursor: pointer; margin-top: 16px; transition: box-shadow .15s, transform .15s; }
.pv-card:hover { box-shadow: 0 6px 20px rgba(8,45,81,.12); transform: translateY(-2px); }
.pv-alerta { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--red); }
.pv-alerta svg { width: 15px; height: 15px; }
@media (max-width: 640px) {
  .pv-seg { width: 100%; margin-top: 8px; }
  .card-h:has(.pv-seg) { flex-wrap: wrap; }
  .pv-chip { flex-basis: calc(50% - 4px); }
  .pv-ev-data { width: 52px; }
}

/* Comprovantes */
.anx-lista { display: flex; flex-direction: column; gap: 6px; }
.anx-lista:empty { display: none; }
.anx-item { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border: 1.5px solid var(--line); border-radius: 10px; background: var(--card); }
.anx-item.pend { border-style: dashed; }
.anx-th { width: 44px; height: 44px; border-radius: 8px; overflow: hidden; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--bg); color: var(--ink-3); }
.anx-th img { width: 100%; height: 100%; object-fit: cover; }
.anx-th svg { width: 22px; height: 22px; }
.anx-nome { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.anx-nome b { font-size: 13px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.anx-nome span { font-size: 11.5px; color: var(--ink-3); }
.anx-add { align-self: flex-start; margin-top: 6px; width: auto !important; }
.anx-ind { display: inline-flex; vertical-align: -2px; margin-right: 5px; color: var(--ink-3); }
.anx-ind svg { width: 14px; height: 14px; }
.anx-viewer { position: fixed; inset: 0; z-index: 9999; background: rgba(6,18,32,.86); display: flex; align-items: center; justify-content: center; padding: 24px; cursor: zoom-out; }
.anx-viewer img { max-width: 100%; max-height: 100%; border-radius: 10px; box-shadow: 0 10px 40px rgba(0,0,0,.5); }
.anx-fechar { position: absolute; top: calc(14px + env(safe-area-inset-top, 0px)); right: 14px; width: 40px; height: 40px; border-radius: 50%; border: none; background: rgba(255,255,255,.15); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; }

/* Importar extrato */
.imp-modal { max-width: 980px !important; width: min(980px, calc(100vw - 24px)); }
.imp-resumo { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13px; color: var(--ink-2); margin-bottom: 8px; }
.imp-resumo .pos { color: var(--green-deep, #256B64); font-weight: 700; } .imp-resumo .neg { color: var(--red); font-weight: 700; }
.imp-contagem { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 13px; color: var(--ink-2); padding: 10px 12px; background: var(--bg); border-radius: 10px; margin-bottom: 8px; }
.imp-contagem .grow { flex: 1; }
.imp-lista { display: flex; flex-direction: column; }
.imp-linha { display: grid; grid-template-columns: 22px 52px minmax(0,1fr) 180px 120px; gap: 10px; align-items: center; padding: 10px 2px; border-top: 1px solid var(--line); }
.imp-linha.trava { opacity: .5; }
.imp-ck { width: 18px; height: 18px; accent-color: var(--navy); }
.imp-data { font-size: 12.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.imp-desc { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.imp-desc b { font-size: 13.5px; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.imp-chip { align-self: flex-start; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 1px 7px; border-radius: 10px; }
.imp-chip.verde { background: #2F817A1c; color: var(--teal); }
.imp-chip.amarelo { background: #C9A94E26; color: var(--gold-2, #9A7A22); }
.imp-chip.cinza { background: var(--bg); color: var(--ink-3); }
.imp-obs { font-size: 11.5px; color: var(--ink-3); }
.imp-acao, .imp-cat { width: 100%; padding: 6px 8px; border: 1.5px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink); font: inherit; font-size: 12.5px; }
.imp-val { text-align: right; font-weight: 700; white-space: nowrap; font-size: 13.5px; }
.imp-val.pos { color: var(--green-deep, #256B64); } .imp-val.neg { color: var(--red); }
@media (max-width: 760px) {
  .imp-linha { grid-template-columns: 22px minmax(0,1fr) auto; grid-template-areas: "ck desc val" "ck data data" "ck cat cat"; row-gap: 6px; }
  .imp-ck { grid-area: ck; align-self: start; margin-top: 2px; } .imp-desc { grid-area: desc; } .imp-val { grid-area: val; align-self: start; }
  .imp-data { grid-area: data; } .imp-cat { grid-area: cat; }
}

/* ══════════════════════════════════════════════════════
   REFINAMENTO VISUAL (mesmo estilo, mais acabamento)
   ══════════════════════════════════════════════════════ */

/* Modo escuro: textos que usavam azul-marinho fixo sumiam no fundo escuro */
html.dark .toolbar h2 { color: var(--ink) !important; }
html.dark .val[style*="var(--navy)"],
html.dark .mono-num[style*="color:var(--navy)"] { color: var(--ink) !important; }
html.dark .mes-nome, html.dark .pv-chip b, html.dark .tr-val, html.dark .av-topo-nome { color: var(--ink); }
html.dark .pv-chip b.neg { color: #E07060; }
html.dark .pv-chip.dest { background: #2F817A26; }
html.dark .av-opt.sel { color: var(--ink); border-color: var(--ink-2); }
html.dark .dica.azul { color: var(--ink-2); }
html.dark .toast.warn { background: #8A6D1E; }
/* cartões de lançamento tinham fundo claro fixo: no escuro usam o fundo do tema
   e mantêm a faixa colorida de status à esquerda */
html.dark .lanc-card { background: var(--card) !important; }

/* Foco visível para quem navega pelo teclado (o mouse não mostra o contorno) */
button:focus-visible, a:focus-visible, [onclick]:focus-visible, .av-opt:focus-visible, .cor-opt:focus-visible {
  outline: 2px solid var(--teal); outline-offset: 2px;
}
button:focus:not(:focus-visible) { outline: none; }

/* Campos de valor sem as setinhas de número */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; appearance: textfield; }

/* Valores com dígitos de largura igual: alinham em colunas e não "pulam" */
.mono-num, .orc-pct, .pv-chip b, .imp-val, .tr-val, .kpi .val { font-variant-numeric: tabular-nums; }

/* Seleção de texto na cor da marca */
::selection { background: #2F817A40; }

/* Botões: transição suave, resposta ao toque e estado desabilitado claro */
.btn { transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s, transform .08s; }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
button, a, [onclick], label { -webkit-tap-highlight-color: transparent; }

/* Quem pediu menos movimento no aparelho não vê animações */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* ══ Campo de data ══ */
.dp-wrap { position: relative; display: block; width: 100%; }
.dp-wrap.dp-inline { display: inline-block; width: 168px; vertical-align: middle; }
.dp-original { position: absolute !important; left: 0; bottom: 0; width: 1px !important; height: 1px !important;
  opacity: 0 !important; pointer-events: none !important; padding: 0 !important; border: 0 !important; }
.dp-campo { width: 100%; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 10px;
  background: var(--card); color: var(--ink); font: inherit; font-size: 14px; font-variant-numeric: tabular-nums; }
.dp-wrap .dp-campo { padding-right: 76px; cursor: pointer; }
.dp-campo:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px #082D5114; }
html.dark .dp-campo:focus { border-color: var(--ink-2); }
.dp-campo.dp-invalido, .dp-wrap:has(.dp-original.campo-erro) .dp-campo { border-color: var(--red); box-shadow: 0 0 0 3px #B4503E1f; }
.dp-campo:disabled { opacity: .6; cursor: not-allowed; }
.dp-semana { position: absolute; right: 40px; top: 0; height: 100%; max-height: 42px; display: flex; align-items: center;
  font-size: 11.5px; color: var(--ink-3); pointer-events: none; text-transform: lowercase; }
.dp-bt { position: absolute; right: 4px; top: 4px; width: 32px; height: 32px; border: none; border-radius: 8px;
  background: transparent; color: var(--ink-3); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.dp-bt:hover { background: var(--bg); color: var(--navy); }
html.dark .dp-bt:hover { color: var(--ink); }
.dp-bt svg { width: 18px; height: 18px; }
.dp-wrap .campo-erro-msg { display: block; }
.dp-inline .dp-semana { display: none; }
.dp-inline .dp-campo { padding-right: 40px; padding-top: 7px; padding-bottom: 7px; }
.dp-inline .dp-bt { top: 50%; transform: translateY(-50%); }

.dp-pop { position: fixed; z-index: 10050; width: 304px; padding: 12px; border-radius: 16px; background: var(--card);
  border: 1px solid var(--line); box-shadow: 0 18px 50px rgba(8,45,81,.22), 0 2px 8px rgba(8,45,81,.08);
  animation: dpEntra .14s ease-out; user-select: none; }
@keyframes dpEntra { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.dp-cab { display: flex; align-items: center; gap: 4px; margin-bottom: 8px; }
.dp-nav { width: 34px; height: 34px; border: none; border-radius: 10px; background: transparent; color: var(--ink-2);
  font-size: 22px; line-height: 1; cursor: pointer; }
.dp-nav:hover, .dp-titulo:hover { background: var(--bg); }
.dp-titulo { flex: 1; height: 34px; border: none; border-radius: 10px; background: transparent; color: var(--navy);
  font: inherit; font-weight: 700; font-size: 14.5px; cursor: pointer; }
.dp-titulo span { font-size: 10px; margin-left: 6px; color: var(--ink-3); }
html.dark .dp-titulo { color: var(--ink); }
.dp-sem, .dp-grade { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.dp-sem span { text-align: center; font-size: 11px; font-weight: 700; color: var(--ink-3); padding: 4px 0; }
.dp-d { aspect-ratio: 1; border: none; border-radius: 10px; background: transparent; color: var(--ink); font: inherit;
  font-size: 13.5px; font-variant-numeric: tabular-nums; cursor: pointer; position: relative; }
.dp-d:hover:not(:disabled) { background: var(--bg); }
.dp-d.fora { color: var(--ink-3); opacity: .55; }
.dp-d.hoje { box-shadow: inset 0 0 0 1.5px var(--teal); font-weight: 700; }
.dp-d.foco { background: var(--bg); }
.dp-d.sel { background: var(--navy); color: #fff; font-weight: 700; }
html.dark .dp-d.sel { background: var(--teal); }
.dp-d:disabled { opacity: .25; cursor: not-allowed; text-decoration: line-through; }
.dp-meses { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 4px 0; }
.dp-meses button { height: 44px; border: none; border-radius: 10px; background: var(--bg); color: var(--ink); font: inherit;
  font-size: 13.5px; font-weight: 600; text-transform: capitalize; cursor: pointer; }
.dp-meses button:hover { background: var(--line); }
.dp-meses button.sel { background: var(--navy); color: #fff; }
.dp-atalhos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.dp-atalhos button { flex: 1 1 auto; padding: 6px 8px; border: 1.5px solid var(--line); border-radius: 20px; background: var(--card);
  color: var(--ink-2); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.dp-atalhos button:hover:not(:disabled) { border-color: var(--teal); color: var(--teal); }
.dp-atalhos button:disabled { opacity: .35; cursor: not-allowed; }
.dp-atalhos .dp-limpar { color: var(--red); flex-grow: 0; }

/* celular: calendário como folha na parte de baixo, dias grandes */
.dp-fundo { position: fixed; inset: 0; z-index: 10049; background: rgba(6,18,32,.45); animation: dpFundo .15s; }
@keyframes dpFundo { from { opacity: 0; } }
.dp-pop.folha { left: 0 !important; right: 0; bottom: 0; top: auto !important; width: auto; border-radius: 20px 20px 0 0;
  padding: 14px 16px calc(16px + env(safe-area-inset-bottom, 0px)); animation: dpSobe .2s ease-out; }
@keyframes dpSobe { from { transform: translateY(100%); } }
.dp-folha-cab { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; font-size: 13px; color: var(--ink-2); }
.dp-x { width: 36px; height: 36px; border: none; border-radius: 50%; background: var(--bg); color: var(--ink-2); display: flex; align-items: center; justify-content: center; }
.dp-x svg { width: 18px; height: 18px; }
.dp-pop.folha .dp-d { font-size: 15px; }
.dp-pop.folha .dp-atalhos button { padding: 9px 10px; font-size: 13px; }

/* ══ Campo de data: visual moderno e colorido ══ */
:root { --dp-grad: linear-gradient(135deg, #082D51 0%, #305C74 45%, #2F817A 100%); }

/* campo: borda em gradiente ao focar, botão do calendário em pílula colorida */
.dp-wrap .dp-campo:focus, .dp-wrap:has(.dp-pop) .dp-campo {
  border-color: transparent;
  background: linear-gradient(var(--card), var(--card)) padding-box,
              linear-gradient(120deg, #082D51, #2F817A 55%, #C9A94E) border-box;
  box-shadow: 0 4px 16px rgba(47,129,122,.16);
}
.dp-bt { background: var(--dp-grad); color: #fff; border-radius: 9px; box-shadow: 0 3px 10px rgba(8,45,81,.25);
  transition: transform .12s, box-shadow .12s, filter .12s; }
.dp-bt:hover { background: var(--dp-grad); color: #fff; filter: brightness(1.12); transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(8,45,81,.3); }
html.dark .dp-bt:hover { color: #fff; }
.dp-inline .dp-bt { width: 30px; height: 30px; }
.dp-semana { font-weight: 700; color: var(--teal); }

/* janela do calendário */
.dp-pop { padding: 0; overflow: hidden; border-radius: 20px; width: 316px; border: none;
  box-shadow: 0 24px 60px rgba(8,45,81,.28), 0 4px 14px rgba(8,45,81,.12); }
.dp-corpo { padding: 10px 12px 12px; }

/* topo em gradiente com a data por extenso */
.dp-topo { position: relative; padding: 16px 18px 14px; color: #fff; background: var(--dp-grad); overflow: hidden; }
.dp-topo::before, .dp-topo::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
.dp-topo::before { width: 150px; height: 150px; right: -40px; top: -70px; background: radial-gradient(circle, rgba(201,169,78,.55), transparent 70%); }
.dp-topo::after { width: 110px; height: 110px; left: -30px; bottom: -60px; background: radial-gradient(circle, rgba(255,255,255,.18), transparent 70%); }
.dp-topo-rot { position: relative; font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; opacity: .75; }
.dp-topo-data { position: relative; font-size: 20px; font-weight: 800; letter-spacing: -.01em; margin-top: 4px; line-height: 1.2; }
.dp-topo-ano { position: relative; font-size: 13px; font-weight: 600; opacity: .8; margin-top: 2px; }
.dp-topo .dp-x { position: absolute; right: 12px; top: 12px; background: rgba(255,255,255,.18); color: #fff; z-index: 1; }

/* navegação do mês */
.dp-titulo { color: var(--navy); }
.dp-nav { color: var(--teal); font-weight: 700; }
.dp-nav:hover { background: #2F817A18; }

/* dias */
.dp-sem span:first-child, .dp-sem span:last-child { color: var(--gold-2, #9A7A22); }
.dp-d { border-radius: 12px; transition: background .12s, transform .1s; }
.dp-d.fds:not(.sel):not(.fora) { color: var(--teal); font-weight: 600; }
.dp-d:hover:not(:disabled):not(.sel) { background: linear-gradient(135deg, #2F817A1c, #C9A94E1c); transform: scale(1.06); }
.dp-d.hoje:not(.sel) { box-shadow: inset 0 0 0 2px var(--gold); color: var(--ink); font-weight: 800; }
.dp-d.foco:not(.sel) { background: #2F817A14; }
.dp-d.sel { background: var(--dp-grad); color: #fff; box-shadow: 0 6px 14px rgba(8,45,81,.32); transform: scale(1.04); }
html.dark .dp-d.sel { background: linear-gradient(135deg, #2F817A, #C9A94E); }
.dp-meses button.sel { background: var(--dp-grad); color: #fff; box-shadow: 0 6px 14px rgba(8,45,81,.28); }
html.dark .dp-meses button.sel { background: linear-gradient(135deg, #2F817A, #C9A94E); }

/* atalhos coloridos */
.dp-atalhos { border-top: none; padding-top: 4px; }
.dp-atalhos button { border: none; font-weight: 700; transition: transform .1s, filter .12s; }
.dp-atalhos button:hover:not(:disabled) { transform: translateY(-1px); filter: saturate(1.3); }
.dp-atalhos [data-a="hoje"]   { background: #2F817A1f; color: #22706A; }
.dp-atalhos [data-a="amanha"] { background: #305C741f; color: #305C74; }
.dp-atalhos [data-a="sete"]   { background: #C9A94E2b; color: #8A6D1E; }
.dp-atalhos [data-a="fim"]    { background: #7F3F981c; color: #7F3F98; }
.dp-atalhos .dp-limpar        { background: #B4503E14; color: var(--red); }
html.dark .dp-atalhos [data-a="hoje"]   { color: #5FC2B6; }
html.dark .dp-atalhos [data-a="amanha"] { color: #8FB4CF; }
html.dark .dp-atalhos [data-a="sete"]   { color: #E2C46E; }
html.dark .dp-atalhos [data-a="fim"]    { color: #C59BDB; }
html.dark .dp-titulo { color: var(--ink); }

/* celular: o topo em gradiente vira o cabeçalho da folha */
.dp-pop.folha { padding: 0 0 env(safe-area-inset-bottom, 0px); border-radius: 22px 22px 0 0; }
.dp-pop.folha .dp-topo { padding: 20px 20px 16px; }
.dp-pop.folha .dp-topo-data { font-size: 23px; }
.dp-pop.folha .dp-corpo { padding: 10px 16px 16px; }

/* ══════════════════════════════════════════════════════
   ACABAMENTO: animações, modais, botões e avisos
   (mesmo layout; só movimento, cor e profundidade)
   ══════════════════════════════════════════════════════ */
:root { --mola: cubic-bezier(.2,.9,.3,1.15); --suave: cubic-bezier(.2,.8,.2,1);
  --grad-marca: linear-gradient(120deg, #082D51, #2F817A 55%, #C9A94E); }

/* ── Telas entram em cascata ── */
/* o espaço de cada tela não muda o layout: os filhos ficam como filhos diretos de #view */
.view-alvo { display: contents; }
.view-alvo > * { animation: telaEntra .4s var(--suave) backwards; }
.view-alvo > *:nth-child(2) { animation-delay: .05s; } .view-alvo > *:nth-child(3) { animation-delay: .1s; }
.view-alvo > *:nth-child(4) { animation-delay: .15s; } .view-alvo > *:nth-child(5) { animation-delay: .2s; }
.view-alvo > *:nth-child(n+6) { animation-delay: .25s; }
@keyframes telaEntra { from { opacity: 0; transform: translateY(12px); } }
.grid-3 > *, .kpi-grid > *, .familia-grid > *, .dash-col > * { animation: telaEntra .45s var(--suave) backwards; }
.grid-3 > *:nth-child(2), .kpi-grid > *:nth-child(2), .familia-grid > *:nth-child(2), .dash-col > *:nth-child(2) { animation-delay: .07s; }
.grid-3 > *:nth-child(3), .kpi-grid > *:nth-child(3), .familia-grid > *:nth-child(3), .dash-col > *:nth-child(3) { animation-delay: .14s; }
.grid-3 > *:nth-child(n+4), .kpi-grid > *:nth-child(n+4), .familia-grid > *:nth-child(n+4), .dash-col > *:nth-child(n+4) { animation-delay: .2s; }
#lanc-lista > * { animation: itemEntra .32s ease backwards; }
#lanc-lista > *:nth-child(2) { animation-delay: .03s; } #lanc-lista > *:nth-child(3) { animation-delay: .06s; }
#lanc-lista > *:nth-child(4) { animation-delay: .09s; } #lanc-lista > *:nth-child(5) { animation-delay: .12s; }
#lanc-lista > *:nth-child(n+6) { animation-delay: .15s; }
@keyframes itemEntra { from { opacity: 0; transform: translateY(8px); } }

/* ── Modal ── */
.overlay {
  background: radial-gradient(1100px 600px at 50% -10%, rgba(47,129,122,.30), transparent 60%),
              radial-gradient(700px 400px at 100% 110%, rgba(201,169,78,.16), transparent 60%),
              rgba(6,22,42,.56);
  backdrop-filter: blur(7px) saturate(1.15); -webkit-backdrop-filter: blur(7px) saturate(1.15);
  animation: ovEntra .24s ease backwards;
}
@keyframes ovEntra { from { opacity: 0; } }
.modal { animation: modalEntra .38s var(--mola) backwards; box-shadow: 0 30px 80px rgba(6,22,42,.35), 0 2px 10px rgba(6,22,42,.1); }
@keyframes modalEntra { from { opacity: 0; transform: translateY(26px) scale(.94); } }
.modal::before { height: 5px; background: linear-gradient(90deg, #082D51, #2F817A, #C9A94E, #2F817A, #082D51);
  background-size: 300% 100%; animation: faixaCorre 9s linear infinite; }
@keyframes faixaCorre { to { background-position: 300% 0; } }
.modal-h { background: linear-gradient(180deg, rgba(47,129,122,.09), rgba(47,129,122,0) 90%), var(--card); }
html.dark .modal-h { background: linear-gradient(180deg, rgba(47,129,122,.16), rgba(47,129,122,0) 90%), var(--bg-2); }
.modal-h .card-ico { color: #fff; border-radius: 12px; animation: icoPop .55s var(--mola) .08s backwards;
  background: linear-gradient(135deg, #082D51, #305C74); box-shadow: 0 8px 18px -6px rgba(8,45,81,.55); }
.modal-h .card-ico svg { stroke: #fff; }
.modal-h .card-ico.i-red   { background: linear-gradient(135deg, #A2412F, #E07A5F); box-shadow: 0 8px 18px -6px rgba(180,80,62,.6); }
.modal-h .card-ico.i-green { background: linear-gradient(135deg, #1F6F5C, #3EA88A); box-shadow: 0 8px 18px -6px rgba(47,129,122,.6); }
.modal-h .card-ico.i-gold  { background: linear-gradient(135deg, #A9852F, #E2C46E); box-shadow: 0 8px 18px -6px rgba(201,169,78,.65); }
@keyframes icoPop { from { opacity: 0; transform: scale(.4) rotate(-14deg); } }
.modal-b .campo, .modal-b .dica, .modal-b .av-topo { animation: campoEntra .38s var(--suave) backwards; }
.modal-b .campo:nth-child(2) { animation-delay: .04s; } .modal-b .campo:nth-child(3) { animation-delay: .07s; }
.modal-b .campo:nth-child(4) { animation-delay: .1s; }  .modal-b .campo:nth-child(5) { animation-delay: .13s; }
.modal-b .campo:nth-child(6) { animation-delay: .16s; } .modal-b .campo:nth-child(n+7) { animation-delay: .19s; }
@keyframes campoEntra { from { opacity: 0; transform: translateY(10px); } }
.modal-f { box-shadow: 0 -12px 24px -20px rgba(8,45,81,.45); }
.modal::-webkit-scrollbar { width: 8px; } .modal::-webkit-scrollbar-thumb { background: var(--line); border-radius: 8px; }
/* saída */
.overlay.saindo { animation: ovSai .22s ease forwards; pointer-events: none; }
.overlay.saindo .modal { animation: modalSai .22s ease forwards; }
@keyframes ovSai { to { opacity: 0; } }
@keyframes modalSai { to { opacity: 0; transform: translateY(16px) scale(.96); } }
@keyframes modalSobe { from { transform: translateY(100%); } }
@keyframes modalDesce { to { transform: translateY(100%); } }
@media (max-width: 640px) {
  .modal { animation: modalSobe .36s cubic-bezier(.2,.9,.3,1) backwards; }
  .overlay.saindo .modal { animation: modalDesce .24s ease forwards; }
}

/* ── Botões principais: gradiente e brilho que atravessa ── */
.btn-primary { background: linear-gradient(135deg, #082D51, #1D4C78 55%, #305C74); border-color: transparent;
  box-shadow: 0 8px 18px -8px rgba(8,45,81,.6); position: relative; overflow: hidden; }
.btn-green { background: linear-gradient(135deg, #1F6F5C, #2F817A 55%, #3EA88A); border-color: transparent;
  box-shadow: 0 8px 18px -8px rgba(47,129,122,.65); position: relative; overflow: hidden; }
.btn-primary::after, .btn-green::after { content: ""; position: absolute; top: 0; left: -70%; width: 45%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent); transform: skewX(-18deg);
  transition: left .6s ease; pointer-events: none; }
.btn-primary:hover::after, .btn-green:hover::after { left: 135%; }
.btn-primary:hover:not(:disabled), .btn-green:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.06); }
.btn-primary:hover:not(:disabled) { box-shadow: 0 12px 24px -10px rgba(8,45,81,.7); }
.btn-green:hover:not(:disabled) { box-shadow: 0 12px 24px -10px rgba(47,129,122,.75); }
.btn-ghost:hover:not(:disabled) { border-color: var(--teal); color: var(--teal); }
html.dark .btn-ghost:hover:not(:disabled) { color: #5FC2B6; }

/* ── Avisos (toasts) ── */
.toast { position: relative; overflow: hidden; background: linear-gradient(135deg, #082D51, #305C74);
  animation: toastEntra .5s var(--mola) backwards !important; }
.toast.ok   { background: linear-gradient(135deg, #1F6F5C, #2F9E7E); }
.toast.err  { background: linear-gradient(135deg, #9E3A2C, #D0624E); }
.toast.warn { background: linear-gradient(135deg, #8A6D1E, #C9A94E); }
.toast svg { animation: icoPop .55s var(--mola) .12s backwards; }
@keyframes toastEntra { from { opacity: 0; transform: translateX(36px) scale(.9); } }
.toast-barra { position: absolute; left: 0; bottom: 0; width: 100%; height: 3px; background: rgba(255,255,255,.55);
  transform-origin: left; animation: barraTempo var(--dur, 3200ms) linear forwards; }
@keyframes barraTempo { to { transform: scaleX(0); } }

/* ── Cartões: profundidade ao passar o mouse ── */
.card, .kpi, .familia-card { transition: transform .22s var(--suave), box-shadow .22s var(--suave); }
.card[onclick]:hover, .kpi[onclick]:hover, .familia-card:hover, .pv-card:hover {
  transform: translateY(-3px); box-shadow: 0 16px 34px -16px rgba(8,45,81,.4); }

/* ── Menu lateral ── */
.nav-item { transition: background .2s, color .2s, transform .2s var(--suave); }
.nav-item:hover { transform: translateX(3px); }
.nav-item.on { background: linear-gradient(90deg, rgba(201,169,78,.24), rgba(47,129,122,.14) 70%, transparent) !important; }
.nav-badge { animation: pulse-badge 2.4s ease-in-out infinite; }

/* ── Campos de texto: borda em gradiente ao digitar (como o de data) ── */
.frm input:focus:not([type=checkbox]):not([type=radio]):not([type=file]):not(.dp-campo), .frm textarea:focus {
  border-color: transparent;
  background: linear-gradient(var(--card), var(--card)) padding-box, var(--grad-marca) border-box;
  box-shadow: 0 4px 16px rgba(47,129,122,.14);
}
html.dark .frm input:focus:not([type=checkbox]):not([type=radio]):not([type=file]):not(.dp-campo), html.dark .frm textarea:focus {
  background: linear-gradient(var(--bg-2), var(--bg-2)) padding-box, var(--grad-marca) border-box;
}
.frm select:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(47,129,122,.15); }

/* ══════════════════════════════════════════════════════
   NÚMEROS E CARTÕES
   ══════════════════════════════════════════════════════ */
/* Manrope (OFL, servida pelo próprio sistema): números com dígitos de largura igual */
@font-face { font-family: "Numeros"; src: url("/static/fonts/manrope-latin.woff2") format("woff2");
  font-weight: 200 800; font-style: normal; font-display: swap; }
.mono-num, .kpi .val, .hero-saldo, .hero-mini-val, .dash-kpi, .pv-chip b, .tr-val, .imp-val, .orc-pct,
[style*="font-family:monospace"], .dp-campo, .dp-d, .pv-ev-data, .imp-data {
  font-family: "Numeros", var(--font) !important;
  font-feature-settings: "tnum" 1, "lnum" 1; font-variant-numeric: tabular-nums lining-nums;
}
.mono-num, .kpi .val, .hero-saldo, .hero-mini-val, .dash-kpi, .pv-chip b, [style*="font-family:monospace"] {
  font-weight: 800; letter-spacing: -.025em;
}
/* "R$" e centavos menores e mais leves; o número inteiro em destaque */
.rs { font-size: .62em; font-weight: 700; opacity: .72; letter-spacing: 0; margin-right: .06em; vertical-align: .22em; }
.cent { font-size: .7em; font-weight: 700; opacity: .78; letter-spacing: -.01em; }
.sn { margin-right: .12em; }
.hero-saldo { font-size: clamp(28px, 4vw, 42px) !important; letter-spacing: -.035em !important;
  text-shadow: 0 4px 18px rgba(0,0,0,.25); }
.hero-saldo .rs { font-size: .5em; vertical-align: .55em; }
.kpi .val { font-size: 30px; text-shadow: 0 2px 12px rgba(0,0,0,.14); }

/* ── Indicadores coloridos: gradiente mais rico, brilho, sombra da própria cor ── */
.kpi.navy, .kpi.teal, .kpi.green, .kpi.gold, .kpi.red { border: 1px solid rgba(255,255,255,.12) !important; }
.kpi.navy  { background: radial-gradient(120% 140% at 100% 0%, rgba(47,129,122,.55), transparent 55%),
                         linear-gradient(135deg, #061E38 0%, #0B3A63 55%, #1D4C78 100%) !important;
             box-shadow: 0 18px 36px -18px rgba(8,45,81,.75); }
.kpi.teal, .kpi.green { background: radial-gradient(120% 140% at 100% 0%, rgba(201,169,78,.45), transparent 55%),
                         linear-gradient(135deg, #14594C 0%, #2F817A 60%, #3EA88A 100%) !important;
             box-shadow: 0 18px 36px -18px rgba(47,129,122,.8); }
.kpi.gold  { background: radial-gradient(120% 140% at 100% 0%, rgba(255,255,255,.35), transparent 55%),
                         linear-gradient(135deg, #8A6D1E 0%, #C9A94E 55%, #E2C46E 100%) !important;
             box-shadow: 0 18px 36px -18px rgba(201,169,78,.85); }
.kpi.red   { background: radial-gradient(120% 140% at 100% 0%, rgba(255,200,170,.35), transparent 55%),
                         linear-gradient(135deg, #7E2C20 0%, #B4503E 55%, #E07A5F 100%) !important;
             box-shadow: 0 18px 36px -18px rgba(180,80,62,.8); color: #fff; }
.kpi.red .lab { color: rgba(255,255,255,.8) !important; } .kpi.red .val { color: #fff !important; } .kpi.red .meta { color: rgba(255,255,255,.7) !important; }
/* bolha do ícone em vidro */
.kpi.navy .i, .kpi.teal .i, .kpi.green .i, .kpi.gold .i, .kpi.red .i {
  background: rgba(255,255,255,.18) !important; color: #fff !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.22);
  backdrop-filter: blur(4px); }
/* brilho que atravessa ao passar o mouse */
.kpi { isolation: isolate; }
.kpi.navy::before, .kpi.teal::before, .kpi.green::before, .kpi.gold::before, .kpi.red::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.18) 45%, transparent 60%);
  background-size: 250% 100%; background-position: 130% 0; transition: background-position .9s ease; }
.kpi:hover::before { background-position: -30% 0; }
.kpi.navy:hover, .kpi.teal:hover, .kpi.green:hover, .kpi.gold:hover, .kpi.red:hover { transform: translateY(-3px); }
.kpi .kpi-deco { opacity: .16; }

/* ── Ícones dos cartões em gradiente (como nos modais) ── */
.card .card-ico.i-navy, .card .card-ico.i-green, .card .card-ico.i-gold, .card .card-ico.i-red { color: #fff; border-radius: 12px; }
.card .card-ico.i-navy  { background: linear-gradient(135deg, #082D51, #305C74); box-shadow: 0 8px 16px -8px rgba(8,45,81,.6); }
.card .card-ico.i-green { background: linear-gradient(135deg, #1F6F5C, #3EA88A); box-shadow: 0 8px 16px -8px rgba(47,129,122,.65); }
.card .card-ico.i-gold  { background: linear-gradient(135deg, #A9852F, #E2C46E); box-shadow: 0 8px 16px -8px rgba(201,169,78,.7); }
.card .card-ico.i-red   { background: linear-gradient(135deg, #A2412F, #E07A5F); box-shadow: 0 8px 16px -8px rgba(180,80,62,.65); }
.card .card-ico svg { stroke: currentColor; }

/* ── Cartões comuns: mais profundidade e borda em gradiente quando clicáveis ── */
.card { box-shadow: 0 1px 2px rgba(8,45,81,.04), 0 10px 28px -18px rgba(8,45,81,.28); }
.card[onclick]:hover, .familia-card:hover, .pv-card:hover {
  border-color: transparent;
  background: linear-gradient(var(--card), var(--card)) padding-box, var(--grad-marca) border-box; }
.card h3 { letter-spacing: -.01em; }

/* modo escuro: títulos dos cartões usavam azul-marinho fixo */
html.dark .card h3:not([style*="color"]), html.dark .card-h h3:not([style*="color"]) { color: var(--ink); }

/* modo escuro: títulos com azul-marinho escrito direto no elemento */
html.dark h2[style*="var(--navy)"], html.dark h3[style*="var(--navy)"], html.dark h4[style*="var(--navy)"] { color: var(--ink) !important; }
/* botões dos cartões de conta: quebram em duas linhas em vez de cortar o texto */
.conta-acoes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.conta-acoes .btn { flex: 1 1 auto; justify-content: center; white-space: nowrap; }

/* ══════════════════════════════════════════════════════
   INTERATIVIDADE E DESENHOS
   ══════════════════════════════════════════════════════ */
/* gráfico de barras: crescem ao abrir; coluna com resumo ao passar/tocar */
.bc .bc-barra { transform-box: fill-box; transform-origin: 50% 100%; animation: barraCresce .8s cubic-bezier(.2,.9,.3,1.1) backwards;
  animation-delay: calc(var(--i) * 70ms + .1s); transition: opacity .2s, filter .2s; }
@keyframes barraCresce { from { transform: scaleY(0); } }
.bc .bc-tip { opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s; }
.bc .bc-col:hover .bc-tip { opacity: 1; }
.bc:hover .bc-col:not(:hover) .bc-barra { opacity: .38; }
.bc .bc-col:hover .bc-barra { filter: brightness(1.12) drop-shadow(0 4px 6px rgba(8,45,81,.25)); }
.bc .bc-col { cursor: pointer; }

/* rosca: fatias entram girando; fatia em foco cresce e as outras apagam */
.dn .dn-seg { transform-box: view-box; transform-origin: 100px 100px; cursor: pointer;
  animation: fatiaEntra .7s cubic-bezier(.2,.9,.3,1.1) backwards; animation-delay: calc(var(--i) * 80ms);
  transition: transform .25s var(--mola), opacity .2s; }
@keyframes fatiaEntra { from { transform: rotate(-90deg) scale(.4); opacity: 0; } }
.dn.foco .dn-seg { opacity: .35; }
.dn.foco .dn-seg.on { opacity: 1; transform: scale(1.07); filter: drop-shadow(0 4px 8px rgba(8,45,81,.3)); }
.dn .dn-rot, .dn .dn-val { transition: opacity .15s; }
.dn-leg { cursor: pointer; border-radius: 8px; padding: 2px 6px; margin: -2px -6px; transition: background .15s; }
.dn-leg.on, .dn-leg:hover { background: var(--bg); }

/* topo do painel: linha do resultado se desenha e a área aparece */
.hero-spark { opacity: .7; pointer-events: none; }
/* espessura fixa na tela (non-scaling-stroke): o traço é medido em pixels, por isso 3000 */
.hero-spark .hs-linha { stroke-dasharray: 3000; stroke-dashoffset: 3000; animation: desenha 2s .3s cubic-bezier(.4,0,.2,1) forwards;
  filter: drop-shadow(0 0 3px rgba(226,196,110,.6)); }
.hero-spark .hs-area { opacity: 0; animation: aparece 1.2s 1.2s ease forwards; }
@keyframes desenha { to { stroke-dashoffset: 0; } }
@keyframes aparece { to { opacity: 1; } }
/* ícone do período do dia */
.hero-per { width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.22), rgba(255,255,255,.06)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.per { width: 30px; height: 30px; overflow: visible; }
.per-raios { transform-origin: 16px 16px; animation: gira 14s linear infinite; }
.per-tarde .per-raios { transform-origin: 12px 12px; }
.per-nuvem { animation: nuvem 4s ease-in-out infinite; }
.per-estrela { animation: pisca 2.4s ease-in-out infinite; } .per-estrela.e2 { animation-delay: .8s; } .per-estrela.e3 { animation-delay: 1.5s; }
@keyframes gira { to { transform: rotate(360deg); } }
@keyframes nuvem { 50% { transform: translateX(2.5px); } }
@keyframes pisca { 50% { opacity: .2; transform: scale(.7); } }
.per-estrela { transform-box: fill-box; transform-origin: center; }

/* ilustrações: cartão flutua, órbita gira, moeda balança */
.ilus-cena .il-flutua { transform-box: fill-box; animation: flutua 3.4s ease-in-out infinite; }
.ilus-cena .il-sombra { transform-box: fill-box; transform-origin: center; animation: sombraFlutua 3.4s ease-in-out infinite; }
.ilus-cena .il-orbita, .ilus-cena .il-orbita-ponto { transform-origin: 60px 48px; animation: gira 16s linear infinite; }
.ilus-cena .il-moeda { transform-box: fill-box; transform-origin: center; animation: moeda 2.8s ease-in-out infinite; }
@keyframes flutua { 50% { transform: translateY(-5px); } }
@keyframes sombraFlutua { 50% { transform: scaleX(.82); opacity: .08; } }
@keyframes moeda { 0%,100% { transform: translateY(0) rotateY(0); } 50% { transform: translateY(-4px) rotateY(180deg); } }
.ilus-load .ld-b { transform-box: fill-box; transform-origin: 50% 100%; animation: ldBarra 1.3s ease-in-out infinite; }
.ilus-load .ld-b2 { animation-delay: .15s; } .ilus-load .ld-b3 { animation-delay: .3s; }
@keyframes ldBarra { 0%,100% { transform: scaleY(.45); } 50% { transform: scaleY(1); } }
.ilus-load .ld-linha { stroke-dasharray: 100; animation: ldLinha 1.8s ease-in-out infinite; }
@keyframes ldLinha { 0% { stroke-dashoffset: 100; } 60%,100% { stroke-dashoffset: 0; opacity: 1; } 100% { opacity: 0; } }
.ilus-load .ld-moeda { transform-box: fill-box; transform-origin: center; animation: moedaPula 1.3s ease-in-out infinite; }
@keyframes moedaPula { 0%,100% { transform: translateY(0); } 40% { transform: translateY(-6px) rotate(15deg); } }

/* barras de progresso enchem ao aparecer */
.orc-barra > div, .meta-progress-fill { transform-origin: left center; animation: encher 1s cubic-bezier(.2,.8,.2,1) .15s backwards; }
@keyframes encher { from { transform: scaleX(0); } }

/* comemoração */
.festa { position: fixed; inset: 0; z-index: 10070; pointer-events: none; display: flex; align-items: center; justify-content: center; }
.festa i { position: absolute; left: 50%; top: 50%; width: 8px; height: 14px; border-radius: 2px; opacity: 0;
  animation: confete 1.4s cubic-bezier(.15,.7,.3,1) forwards; }
@keyframes confete {
  0% { opacity: 1; transform: translate(-50%, -50%) rotate(0) scale(.6); }
  75% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y) + 140px)) rotate(var(--r)) scale(1); } }
.festa-centro { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 22px 30px; border-radius: 26px;
  background: var(--card); box-shadow: 0 30px 70px rgba(6,22,42,.35); animation: festaPop 1.7s var(--mola) forwards; }
.festa-centro svg { width: 64px; height: 64px; }
.festa-centro b { font-size: 16px; font-weight: 800; color: var(--ink); letter-spacing: -.01em; }
.fc-fundo { fill: #2F817A; opacity: 0; animation: fcFundo .3s .5s forwards; }
.fc-circ { fill: none; stroke: #2F817A; stroke-width: 3; stroke-dasharray: 145; stroke-dashoffset: 145; transform-origin: center; transform: rotate(-90deg);
  animation: desenha .5s ease forwards; }
.fc-check { fill: none; stroke: #fff; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 34; stroke-dashoffset: 34;
  animation: desenha .35s .55s ease forwards; }
@keyframes fcFundo { to { opacity: 1; } }
@keyframes festaPop { 0% { opacity: 0; transform: scale(.5); } 14% { opacity: 1; transform: scale(1); } 80% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(.92); } }

/* ilustrações no modo escuro: ícone e borda mais claros para contrastar */
html.dark .ilus-cena .il-flutua g { stroke: #7FD3C2; }
html.dark .ilus-cena .il-flutua rect:first-child { stroke: #3E9C8C; }
html.dark .ilus-load .ld-linha { stroke: #5FC2B6; }

/* ══ Saúde financeira ══ */
.sd-corpo { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.sd { width: 230px; max-width: 100%; flex-shrink: 0; overflow: visible; }
.sd-trilho { fill: none; stroke: var(--line); stroke-width: 14; stroke-linecap: round; }
.sd-arco { fill: none; stroke-width: 14; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: var(--fim);
  animation: sdEnche 1s cubic-bezier(.2,.8,.2,1) backwards; animation-delay: calc(var(--i) * 120ms + .15s);
  cursor: pointer; transition: opacity .2s, stroke-width .2s; }
@keyframes sdEnche { from { stroke-dashoffset: 100; } }
.sd-card.foco .sd-arco:not(.on) { opacity: .3; }
.sd-arco.on { stroke-width: 17; }
.sd-marca { fill: var(--ink-3); opacity: .5; }
.sd-ponteiro { transform-origin: 110px 112px; transform: rotate(var(--ang)); animation: sdPonteiro 1.6s cubic-bezier(.3,1.5,.5,1) .2s backwards; }
@keyframes sdPonteiro { from { transform: rotate(0deg); } }
.sd-nota { font-family: "Numeros", var(--font); font-size: 30px; font-weight: 800; fill: var(--ink); letter-spacing: -.03em; }
.sd-faixa { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.sd-pulso { transform-origin: 110px 112px; animation: sdPulso 3s ease-in-out infinite; }
@keyframes sdPulso { 50% { transform: scale(1.12); opacity: .6; } }
.sd-fatores { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 6px; }
.sd-fator { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border-radius: 12px; border: 1.5px solid transparent;
  background: var(--bg); text-align: left; cursor: pointer; transition: border-color .2s, transform .2s var(--mola), opacity .2s; }
.sd-fator:hover, .sd-fator.on { border-color: var(--line); transform: translateX(3px); background: var(--card); }
.sd-card.foco .sd-fator:not(.on) { opacity: .55; }
.sd-f-ic { width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  color: #fff; background: var(--c); box-shadow: 0 6px 12px -6px var(--c); }
.sd-f-ic svg { width: 16px; height: 16px; }
.sd-f-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sd-f-txt b { font-size: 13px; color: var(--ink); font-weight: 700; }
.sd-f-txt small { font-size: 11.5px; color: var(--ink-3); }
.sd-f-pts { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; font-family: "Numeros", var(--font); font-size: 11.5px;
  font-weight: 800; color: var(--ink-2); flex-shrink: 0; }
.sd-f-pts i { display: block; width: 46px; height: 5px; border-radius: 4px; background: linear-gradient(90deg, var(--c) var(--w), var(--line) var(--w)); }

/* ══ Previsão: linha guia ══ */
.pv-toque { cursor: crosshair; touch-action: pan-y; }
.pv-guia .pv-g-linha { stroke: var(--ink-3); stroke-width: 1.2; stroke-dasharray: 4 4; }
.pv-guia .pv-g-est { fill: var(--card); stroke: var(--teal); stroke-width: 3; }
.pv-guia .pv-g-lan { fill: var(--card); stroke: var(--navy); stroke-width: 2; opacity: .7; }
html.dark .pv-guia .pv-g-lan { stroke: #8FB4CF; }
.pv-guia .pv-g-rot rect { fill: #0B2540; opacity: .94; }
.pv-guia .pv-g-rot text { font-family: "Numeros", var(--font); font-size: 12.5px; fill: #fff; }
.pv-guia .pv-g-rot .t1 { font-weight: 800; font-size: 12px; fill: #E9CF86; }
.pv-guia .pv-g-rot .t2 { font-weight: 800; }
.pv-guia .pv-g-rot .t3 { fill: #AFC2D6; font-size: 11.5px; }

/* ══ Metas: anel de progresso ══ */
.meta-anel { position: relative; width: 60px; height: 60px; flex-shrink: 0; transition: transform .35s var(--mola); }
.card:hover .meta-anel { transform: scale(1.08) rotate(-6deg); }
.meta-anel > svg { width: 100%; height: 100%; transform: rotate(-90deg); }   /* só o anel, não o ícone de dentro */
.ma-ic svg { width: 22px; height: 22px; }
.ma-trilho { fill: none; stroke: var(--line); stroke-width: 5; }
.ma-prog { fill: none; stroke: var(--cor); stroke-width: 5; stroke-linecap: round; stroke-dasharray: var(--c); stroke-dashoffset: var(--fim);
  animation: anelEnche 1.3s cubic-bezier(.2,.8,.2,1) .2s backwards; filter: drop-shadow(0 2px 4px rgba(8,45,81,.15)); }
@keyframes anelEnche { from { stroke-dashoffset: var(--c); } }
.ma-ic { position: absolute; inset: 9px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.meta-anel.cheio .ma-ic { animation: metaBrilha 2.2s ease-in-out infinite; }
@keyframes metaBrilha { 50% { box-shadow: 0 0 0 6px rgba(201,169,78,.25); } }

/* ══ Tema: troca em círculo + ícone girando ══ */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-new(root) { z-index: 9999; }
.btn-tema svg { animation: temaGira .6s var(--mola); }
@keyframes temaGira { from { transform: rotate(-120deg) scale(.4); opacity: 0; } }
.btn-tema:hover svg { transform: rotate(18deg); transition: transform .3s var(--mola); }

@media (max-width: 640px) {
  .sd-corpo { justify-content: center; }
  .sd { width: 250px; }
}

/* ══ Cartão de crédito desenhado ══ */
.cc-secao:empty { display: none; }
.cc-secao { margin-bottom: 18px; }
.cc-faixa-cab { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 2px 0 10px; }
.cc-faixa-cab h3 { margin: 0; font-size: 15px; color: var(--navy); }
html.dark .cc-faixa-cab h3 { color: var(--ink); }
.cc-faixa { display: flex; gap: 18px; overflow-x: auto; padding: 6px 4px 14px; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.cc-item { flex: 0 0 auto; scroll-snap-align: start; display: flex; flex-direction: column; gap: 8px; }
.cc-acoes { display: flex; gap: 6px; justify-content: center; }

.cc { --rx: 0deg; --ry: 0deg; --mx: 30%; --my: 20%; width: 330px; max-width: 82vw; aspect-ratio: 1.586; perspective: 1000px;
  cursor: pointer; outline: none; animation: ccEntra .6s var(--mola) backwards; }
.cc.mini { width: 280px; }
.cc-item:nth-child(2) .cc { animation-delay: .08s; } .cc-item:nth-child(3) .cc { animation-delay: .16s; } .cc-item:nth-child(n+4) .cc { animation-delay: .22s; }
@keyframes ccEntra { from { opacity: 0; transform: translateY(18px) rotateX(18deg) scale(.94); } }
.cc-giro { position: relative; width: 100%; height: 100%; transform-style: preserve-3d;
  transform: rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.cc:hover .cc-giro { transition: transform .12s ease-out; }
.cc.virado .cc-giro { transform: rotateX(var(--rx)) rotateY(calc(180deg + var(--ry))); transition: transform .7s cubic-bezier(.3,1.3,.5,1); }
.cc:focus-visible .cc-giro { outline: 3px solid var(--teal); outline-offset: 4px; border-radius: 18px; }
.cc-face { position: absolute; inset: 0; border-radius: 18px; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  color: #fff; padding: 18px 20px; display: flex; flex-direction: column;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(255,255,255,.22), transparent 55%),
    radial-gradient(70% 70% at 0% 100%, rgba(0,0,0,.28), transparent 60%),
    linear-gradient(135deg, var(--cc), color-mix(in srgb, var(--cc) 55%, #000));
  box-shadow: 0 22px 40px -18px color-mix(in srgb, var(--cc) 70%, #000), inset 0 0 0 1px rgba(255,255,255,.14); }
.cc-face::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background: radial-gradient(circle at 115% 120%, transparent 38%, rgba(255,255,255,.07) 39%, rgba(255,255,255,.07) 46%, transparent 47%),
              radial-gradient(circle at 115% 120%, transparent 54%, rgba(255,255,255,.05) 55%, rgba(255,255,255,.05) 62%, transparent 63%); }
.cc-brilho { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(circle at var(--mx) var(--my), rgba(255,255,255,.35), transparent 45%); mix-blend-mode: soft-light; }
.cc:hover .cc-brilho { opacity: 1; }
.cc-topo { display: flex; justify-content: space-between; align-items: center; gap: 10px; position: relative; }
.cc-banco { font-size: 13px; font-weight: 800; letter-spacing: .02em; opacity: .92; text-shadow: 0 1px 3px rgba(0,0,0,.25);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-logo { max-height: 28px; max-width: 90px; object-fit: contain; filter: drop-shadow(0 1px 3px rgba(0,0,0,.25)); }
.cc-meio { display: flex; align-items: center; gap: 12px; margin-top: auto; position: relative; }
.cc-chip { width: 46px; height: 36px; filter: drop-shadow(0 2px 3px rgba(0,0,0,.25)); }
.cc-aprox { width: 22px; height: 22px; opacity: .85; transform: rotate(0deg); }
.cc-num { font-family: "Numeros", var(--font); font-size: 18px; font-weight: 700; letter-spacing: .14em; margin: 12px 0 10px;
  text-shadow: 0 1px 2px rgba(0,0,0,.35); position: relative; white-space: nowrap; }
.cc-base { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; position: relative; }
.cc-nome { min-width: 0; display: flex; flex-direction: column; }
.cc-nome small, .cc-dados small { font-size: 9.5px; text-transform: uppercase; letter-spacing: .12em; opacity: .7; font-weight: 700; }
.cc-nome b { font-size: 13.5px; font-weight: 700; letter-spacing: .03em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-band { flex-shrink: 0; font-size: 12px; font-weight: 800; letter-spacing: .02em; padding: 5px 10px; border-radius: 20px;
  background: rgba(255,255,255,.18); box-shadow: inset 0 0 0 1px rgba(255,255,255,.28); backdrop-filter: blur(6px); }
/* verso */
.cc-verso { transform: rotateY(180deg); padding: 0 0 14px; }
.cc-tarja { height: 38px; margin-top: 20px; background: linear-gradient(90deg, #111, #2a2a2a 60%, #111); opacity: .85; }
.cc-dados { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px 20px 0; }
.cc-dados div { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cc-dados b { font-family: "Numeros", var(--font); font-size: 17px; font-weight: 800; white-space: nowrap; }
.cc-uso { margin: 10px 20px 0; height: 6px; border-radius: 6px; background: rgba(255,255,255,.2); overflow: hidden; }
.cc-uso i { display: block; height: 100%; width: var(--w); border-radius: 6px; background: var(--uc, #E9CF86); }
.cc-uso-rot { padding: 6px 20px 0; font-size: 11px; opacity: .8; }
/* adicionar cartão */
.cc-novo { flex: 0 0 auto; width: 240px; aspect-ratio: 1.586; border-radius: 18px; border: 2px dashed var(--line); background: var(--card);
  color: var(--ink-2); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; cursor: pointer;
  transition: border-color .2s, color .2s, transform .25s var(--mola); scroll-snap-align: start; }
.cc-novo:hover { border-color: var(--teal); color: var(--teal); transform: translateY(-3px); }
.cc-novo svg { width: 26px; height: 26px; } .cc-novo small { font-size: 11.5px; color: var(--ink-3); }
.c-prev-cartao { display: flex; justify-content: center; padding: 4px 0 6px; }
.c-prev-cartao:empty { display: none; }
.c-prev-cartao .cc { width: 300px; animation: none; }
@media (max-width: 640px) { .cc { width: 290px; } .cc-num { font-size: 16px; } }
/* seletor de cor mostra a cor (antes virava uma linha fina) */
.frm input[type=color] { height: 42px; padding: 4px; cursor: pointer; background: var(--bg); }
.frm input[type=color]::-webkit-color-swatch-wrapper { padding: 0; }
.frm input[type=color]::-webkit-color-swatch { border: none; border-radius: 7px; }
.frm input[type=color]::-moz-color-swatch { border: none; border-radius: 7px; }


/* ══════════════════════════════════════════════════════
   FUNDOS ANIMADOS
   ══════════════════════════════════════════════════════ */
/* ── Login: cena financeira com profundidade ── */
.login-app { position: relative; overflow: hidden; --px: 0; --py: 0;
  background: radial-gradient(900px 500px at 15% 10%, rgba(47,129,122,.35), transparent 60%),
              radial-gradient(700px 500px at 90% 30%, rgba(201,169,78,.22), transparent 60%),
              linear-gradient(160deg, #05203A 0%, #0E3A63 50%, #082D51 100%);
  background-size: 140% 140%; animation: loginAurora 18s ease-in-out infinite alternate; }
@keyframes loginAurora { to { background-position: 100% 60%; } }
.login-app-top, .login-app-card { position: relative; z-index: 2; }
.cena-fin { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.cf-item { position: absolute; left: var(--x); top: var(--y); opacity: .85;
  transform: translate(calc(var(--px) * var(--z) * -40px), calc(var(--py) * var(--z) * -40px)) rotate(var(--rot, 0deg));
  transition: transform .4s cubic-bezier(.2,.8,.2,1); }
.cf-item > svg { width: 100%; height: auto; display: block; overflow: visible; animation: cfFlutua 7s ease-in-out infinite; }
.cf-item:nth-child(2n) > svg { animation-duration: 8.5s; animation-delay: -2s; }
.cf-item:nth-child(3n) > svg { animation-duration: 9.5s; animation-delay: -4s; }
@keyframes cfFlutua { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-14px) rotate(3deg); } }
/* caderno: página vira e o gráfico se desenha */
.cf-folha { transform-origin: 18px 75px; animation: cfFolha 6s ease-in-out infinite; }
@keyframes cfFolha { 0%,35% { transform: scaleX(1); opacity: 1; } 55% { transform: scaleX(-.15); opacity: .6; } 60%,100% { transform: scaleX(0); opacity: 0; } }
.cf-cad-linha, .cf-linha { stroke-dasharray: 100; animation: cfDesenha 6s ease-in-out infinite; }
@keyframes cfDesenha { 0% { stroke-dashoffset: 100; } 45%,85% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
.cf-cad-b, .cf-barra { transform-box: fill-box; transform-origin: 50% 100%; animation: cfBarra 3.6s ease-in-out infinite; }
.cf-cad-b.b2, .cf-barra.c1 { animation-delay: .3s; } .cf-cad-b.b3, .cf-barra.c2 { animation-delay: .6s; } .cf-barra.c3 { animation-delay: .9s; }
@keyframes cfBarra { 0%,100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }
.cf-ponto { transform-box: fill-box; transform-origin: center; animation: cfPonto 6s ease-in-out infinite; }
.cf-ponto.p1 { animation-delay: .8s; } .cf-ponto.p2 { animation-delay: 1.6s; }
@keyframes cfPonto { 0%,30% { transform: scale(0); } 40%,85% { transform: scale(1); } 100% { transform: scale(0); } }
/* moeda cai na pilha; moeda entra no cofrinho */
.cf-moeda-cai { animation: cfCai 3.2s cubic-bezier(.5,0,.75,0) infinite; }
@keyframes cfCai { 0% { transform: translateY(-40px); opacity: 0; } 15% { opacity: 1; } 60% { transform: translateY(24px); } 70% { transform: translateY(18px); } 80%,100% { transform: translateY(24px); opacity: 0; } }
.cf-cofre-moeda { animation: cfCofre 3.8s ease-in infinite; }
@keyframes cfCofre { 0% { transform: translateY(-30px); opacity: 0; } 20% { opacity: 1; } 60% { transform: translateY(16px); opacity: 1; } 70%,100% { transform: translateY(22px); opacity: 0; } }
/* calculadora: teclas piscam */
.cf-tecla { animation: cfTecla 2.4s steps(1) infinite; }
.cf-tecla.t1 { animation-delay: .4s; } .cf-tecla.t2 { animation-delay: .9s; } .cf-tecla.t3 { animation-delay: 1.3s; } .cf-tecla.t4 { animation-delay: 1.8s; }
@keyframes cfTecla { 0%,85% { fill: rgba(255,255,255,.14); } 90% { fill: rgba(226,196,110,.85); } }
/* símbolos e brilhos */
.cf-simb > svg { animation: cfSimb 6s ease-in-out infinite; }
@keyframes cfSimb { 0%,100% { transform: translateY(0); opacity: .5; } 50% { transform: translateY(-22px); opacity: 1; } }
.cf-brilho > svg { animation: cfBrilho 2.6s ease-in-out infinite; }
.cf-brilho.b2 > svg { animation-delay: .9s; } .cf-brilho.b3 > svg { animation-delay: 1.7s; }
@keyframes cfBrilho { 0%,100% { transform: scale(.3) rotate(0); opacity: .2; } 50% { transform: scale(1) rotate(45deg); opacity: 1; } }
/* logo do login flutua com um halo */
.login-app-logo-wrap { animation: logoFlutua 5s ease-in-out infinite; position: relative; }
.login-app-logo-wrap::after { content: ""; position: absolute; inset: -10px; border-radius: 34px; border: 2px solid rgba(226,196,110,.45);
  animation: logoHalo 2.8s ease-out infinite; }
@keyframes logoFlutua { 50% { transform: translateY(-6px); } }
@keyframes logoHalo { from { transform: scale(.9); opacity: .9; } to { transform: scale(1.25); opacity: 0; } }
.login-app-brand, .login-app-sub { animation: telaEntra .7s var(--suave) .15s backwards; }
.login-app-card { animation: loginCard .7s var(--mola) .2s backwards; }
@keyframes loginCard { from { transform: translateY(60px); opacity: 0; } }
/* celular: menos desenhos e menores, longe do formulário */
@media (max-width: 640px) {
  .cf-item { transform: rotate(var(--rot, 0deg)) scale(.62); transform-origin: top left; }
  .cf-barras, .cf-recibo, .cf-cofrinho, .cf-calc, .cf-moedas, .s3 { display: none; }
  .cf-caderno { left: 2%; top: 4%; } .cf-grafico { left: auto; right: -2%; top: 3%; }
  .cf-cartao { left: 4%; top: 30%; }
}

/* ── Sistema: folha de caderno quadriculado com rabiscos financeiros deslizando ── */
.main::before, .main::after { content: ""; position: fixed; z-index: -1; pointer-events: none; }
.main::before { inset: 0;
  background-image:
    linear-gradient(90deg, transparent calc(var(--sidebar) + 42px), rgba(180,80,62,.10) calc(var(--sidebar) + 42px), rgba(180,80,62,.10) calc(var(--sidebar) + 43.5px), transparent calc(var(--sidebar) + 43.5px)),
    linear-gradient(rgba(8,45,81,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(8,45,81,.035) 1px, transparent 1px);
  background-size: 100% 100%, 26px 26px, 26px 26px; }
.main::after { inset: -320px; opacity: .045; background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22320%22%20viewBox%3D%220%200%20320%20320%22%20fill%3D%22none%22%20stroke%3D%22%23082D51%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%0A%3Ccircle%20cx%3D%2246%22%20cy%3D%2252%22%20r%3D%2215%22%2F%3E%3Ccircle%20cx%3D%2246%22%20cy%3D%2252%22%20r%3D%229%22%2F%3E%0A%3Cpath%20d%3D%22M150%2070h50M150%2070V30M156%2062l12-12%2010%206%2016-18%22%2F%3E%0A%3Crect%20x%3D%22250%22%20y%3D%2230%22%20width%3D%2234%22%20height%3D%2244%22%20rx%3D%225%22%2F%3E%3Cpath%20d%3D%22M244%2038h8M244%2050h8M244%2062h8M258%2044h18M258%2054h18%22%2F%3E%0A%3Cpath%20d%3D%22M60%20150v-22M74%20150v-34M88%20150v-14M54%20150h42%22%2F%3E%0A%3Crect%20x%3D%22150%22%20y%3D%22128%22%20width%3D%2246%22%20height%3D%2230%22%20rx%3D%225%22%2F%3E%3Cpath%20d%3D%22M158%20140h8M158%20150h22%22%2F%3E%0A%3Cpath%20d%3D%22M262%20128l-18%2026M247%20130a4%204%200%201%200%200.1%200M259%20152a4%204%200%201%200%200.1%200%22%2F%3E%0A%3Cpath%20d%3D%22M44%20236c0-8%2014-8%2014-1%200%208-15%206-15%2014%200%207%2015%207%2015-1M51%20228v28%22%2F%3E%0A%3Crect%20x%3D%22140%22%20y%3D%22222%22%20width%3D%2230%22%20height%3D%2240%22%20rx%3D%225%22%2F%3E%3Cpath%20d%3D%22M146%20230h18M146%20240h4M154%20240h4M162%20240h4M146%20248h4M154%20248h4M162%20248h4%22%2F%3E%0A%3Cpath%20d%3D%22M240%20250c0-12%2010-20%2024-20s22%208%2022%2018-10%2018-24%2018c-6%200-10-1-14-3l-6%205v-8c-1-3-2-6-2-10z%22%2F%3E%3Cpath%20d%3D%22M262%20238h6%22%2F%3E%0A%3C%2Fsvg%3E"); background-size: 320px 320px;
  animation: fundoDesliza 140s linear infinite; }
@keyframes fundoDesliza { to { transform: translate3d(320px, 320px, 0); } }
html.dark .main::before { background-image:
    linear-gradient(90deg, transparent calc(var(--sidebar) + 42px), rgba(224,122,95,.12) calc(var(--sidebar) + 42px), rgba(224,122,95,.12) calc(var(--sidebar) + 43.5px), transparent calc(var(--sidebar) + 43.5px)),
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px); }
html.dark .main::after { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22320%22%20viewBox%3D%220%200%20320%20320%22%20fill%3D%22none%22%20stroke%3D%22%23E9F0F7%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%0A%3Ccircle%20cx%3D%2246%22%20cy%3D%2252%22%20r%3D%2215%22%2F%3E%3Ccircle%20cx%3D%2246%22%20cy%3D%2252%22%20r%3D%229%22%2F%3E%0A%3Cpath%20d%3D%22M150%2070h50M150%2070V30M156%2062l12-12%2010%206%2016-18%22%2F%3E%0A%3Crect%20x%3D%22250%22%20y%3D%2230%22%20width%3D%2234%22%20height%3D%2244%22%20rx%3D%225%22%2F%3E%3Cpath%20d%3D%22M244%2038h8M244%2050h8M244%2062h8M258%2044h18M258%2054h18%22%2F%3E%0A%3Cpath%20d%3D%22M60%20150v-22M74%20150v-34M88%20150v-14M54%20150h42%22%2F%3E%0A%3Crect%20x%3D%22150%22%20y%3D%22128%22%20width%3D%2246%22%20height%3D%2230%22%20rx%3D%225%22%2F%3E%3Cpath%20d%3D%22M158%20140h8M158%20150h22%22%2F%3E%0A%3Cpath%20d%3D%22M262%20128l-18%2026M247%20130a4%204%200%201%200%200.1%200M259%20152a4%204%200%201%200%200.1%200%22%2F%3E%0A%3Cpath%20d%3D%22M44%20236c0-8%2014-8%2014-1%200%208-15%206-15%2014%200%207%2015%207%2015-1M51%20228v28%22%2F%3E%0A%3Crect%20x%3D%22140%22%20y%3D%22222%22%20width%3D%2230%22%20height%3D%2240%22%20rx%3D%225%22%2F%3E%3Cpath%20d%3D%22M146%20230h18M146%20240h4M154%20240h4M162%20240h4M146%20248h4M154%20248h4M162%20248h4%22%2F%3E%0A%3Cpath%20d%3D%22M240%20250c0-12%2010-20%2024-20s22%208%2022%2018-10%2018-24%2018c-6%200-10-1-14-3l-6%205v-8c-1-3-2-6-2-10z%22%2F%3E%3Cpath%20d%3D%22M262%20238h6%22%2F%3E%0A%3C%2Fsvg%3E"); opacity: .05; }
@media (max-width: 1024px) {
  .main::before { background-image: linear-gradient(rgba(8,45,81,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(8,45,81,.035) 1px, transparent 1px);
    background-size: 26px 26px, 26px 26px; }
  html.dark .main::before { background-image: linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px); }
}

/* Repetições */
.rep-info { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: #2F817A12; color: var(--ink-2); font-size: 13px; }
.rep-info svg { width: 18px; height: 18px; color: var(--teal); flex-shrink: 0; } .rep-info span { flex: 1; }
.rep-item { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); animation: itemEntra .3s ease backwards; }
.rep-item:first-child { border-top: none; }
.rep-item.pausada { opacity: .55; }
.rep-ic { width: 32px; height: 32px; border-radius: 10px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #fff; }
.rep-ic.despesa { background: linear-gradient(135deg, #A2412F, #E07A5F); } .rep-ic.receita { background: linear-gradient(135deg, #1F6F5C, #3EA88A); }
.rep-ic svg { width: 16px; height: 16px; }
.rep-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rep-txt b { font-size: 13.5px; color: var(--ink); overflow-wrap: anywhere; } .rep-txt small { font-size: 11.5px; color: var(--ink-3); }
.rep-valor { width: 110px; padding: 7px 9px; border: 1.5px solid var(--line); border-radius: 9px; background: var(--card); color: var(--ink);
  font-family: "Numeros", var(--font); font-weight: 700; font-size: 13px; text-align: right; }
.rep-valor:focus { outline: none; border-color: var(--teal); }
.rep-ind { color: var(--teal); }
@media (max-width: 640px) { .rep-item { flex-wrap: wrap; } .rep-txt { flex-basis: calc(100% - 44px); } .rep-valor { margin-left: 42px; } }

/* ══════════════════════════════════════════════════════
   CARA DE APP: leque do "+", deslizar, cenas do topo
   ══════════════════════════════════════════════════════ */
/* ── leque ── */
.leque { position: fixed; inset: 0; z-index: 9500; pointer-events: none; }
.leque-fundo { position: absolute; inset: 0; pointer-events: auto; background: rgba(6,22,42,0);
  backdrop-filter: blur(0); transition: background .25s, backdrop-filter .25s; }
.leque.aberto .leque-fundo { background: rgba(6,22,42,.45); backdrop-filter: blur(4px); }
.leque-bt { position: absolute; left: 50%; bottom: calc(46px + env(safe-area-inset-bottom, 0px)); pointer-events: auto;
  display: flex; flex-direction: column; align-items: center; gap: 6px; border: none; background: none; cursor: pointer; padding: 0;
  transform: translate(-50%, 0) scale(.3); opacity: 0;
  transition: transform .45s cubic-bezier(.2,1.4,.4,1), opacity .25s; transition-delay: calc(var(--i) * 35ms); }
.leque.aberto .leque-bt { transform: translate(calc(-50% + var(--dx)), var(--dy)) scale(1); opacity: 1; }
.leque.fechando .leque-bt { transition-delay: 0s; transition-duration: .2s; }
.leque-ic { width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff;
  background: radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--c) 60%, #fff), var(--c) 60%);
  box-shadow: 0 10px 22px -6px var(--c), inset 0 0 0 2px rgba(255,255,255,.25); transition: transform .2s var(--mola); }
.leque-ic svg { width: 24px; height: 24px; }
.leque-bt:hover .leque-ic, .leque-bt:active .leque-ic { transform: scale(1.12); }
.leque-rot { font-size: 12px; font-weight: 800; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.6); white-space: nowrap; }
.btab-fab { position: relative; z-index: 9600; }
.btab-fab-inner { transition: transform .35s var(--mola), background .25s; }
.btab-fab.aberto .btab-fab-inner { transform: rotate(135deg); background: linear-gradient(135deg, #A2412F, #E07A5F) !important; }

/* ── deslizar os lançamentos ── */
#lanc-lista { position: relative; }
.lanc-card { touch-action: pan-y; user-select: none; -webkit-user-select: none; position: relative; z-index: 1; }
.swipe-fundo { position: absolute; left: 0; right: 0; border-radius: 16px; z-index: 0; display: flex; align-items: center;
  justify-content: space-between; padding: 0 22px; color: #fff; overflow: hidden; background: var(--line); }
.swipe-fundo.dir { background: linear-gradient(90deg, #1F6F5C, #3EA88A); }
.swipe-fundo.esq { background: linear-gradient(270deg, #082D51, #305C74); }
.sw-a { display: flex; align-items: center; gap: 8px; font-size: 14px; opacity: 0; transform: scale(calc(.6 + var(--p, 0) * .4)); transition: opacity .15s; }
.swipe-fundo.dir .sw-a.dir, .swipe-fundo.esq .sw-a.esq { opacity: calc(.35 + var(--p, 0) * .65); }
.sw-a svg { width: 22px; height: 22px; }
.swipe-fundo.pronto .sw-a svg { animation: swPronto .35s var(--mola); }
@keyframes swPronto { 50% { transform: scale(1.35); } }
.swipe-dica { display: flex; align-items: center; gap: 12px; padding: 10px 12px; margin-bottom: 4px; border-radius: 14px;
  background: linear-gradient(135deg, #2F817A14, #C9A94E14); border: 1.5px dashed #2F817A55; font-size: 12.5px; color: var(--ink-2);
  animation: telaEntra .4s var(--suave) backwards; }
.swipe-dica svg { width: 96px; flex-shrink: 0; color: var(--ink-2); }
.swipe-dica span { flex: 1; } .swipe-dica .btn-icon { flex-shrink: 0; }
.swipe-dica .sd-c { fill: var(--card); stroke: var(--line); stroke-width: 1.5; animation: dicaCartao 2.4s ease-in-out infinite; }
.swipe-dica .sd-l { fill: var(--line); animation: dicaCartao 2.4s ease-in-out infinite; }
.swipe-dica .sd-mao { animation: dicaMao 2.4s ease-in-out infinite; }
@keyframes dicaCartao { 0%,20% { transform: translateX(0); } 55%,70% { transform: translateX(22px); } 100% { transform: translateX(0); } }
@keyframes dicaMao { 0%,20% { transform: translateX(0); } 55%,70% { transform: translateX(22px); } 100% { transform: translateX(0); } }
@media (min-width: 1025px) { .swipe-dica { display: none; } }   /* no computador o clique continua o caminho principal */

/* ── cena do topo de cada tela ── */
.tb-cena { display: flex; align-items: center; gap: 8px; color: var(--navy); flex-shrink: 0; }
html.dark .tb-cena { color: var(--ink); }
.tb-cena .tc { width: 30px; height: 30px; overflow: visible; animation: tcEntra .5s var(--mola); }
@keyframes tcEntra { from { transform: scale(.3) rotate(-25deg); opacity: 0; } }
.tc-nome { display: none; font-size: 14px; font-weight: 800; color: var(--navy); letter-spacing: -.01em; }
html.dark .tc-nome { color: var(--ink); }
@media (max-width: 767px) { .tc-nome { display: inline; } }
.tc-b { transform-box: fill-box; transform-origin: 50% 100%; animation: tcBarra 2.4s ease-in-out infinite; animation-delay: calc(var(--i) * .15s); }
@keyframes tcBarra { 0%,100% { transform: scaleY(.55); } 50% { transform: scaleY(1); } }
.tc-folha { transform-box: fill-box; transform-origin: 50% 0; animation: tcFolha 3s ease-in-out infinite; }
@keyframes tcFolha { 0%,40% { transform: scaleY(1); } 60% { transform: scaleY(0); } 61%,100% { transform: scaleY(1); } }
.tc-pisca { animation: pisca 1.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.tc-fatia { transform-box: view-box; transform-origin: 16px 16px; animation: tcFatia 3s ease-in-out infinite; }
.tc-fatia.f2 { animation-delay: .4s; }
@keyframes tcFatia { 0%,100% { transform: scale(1); } 50% { transform: scale(1.12); } }
.tc-flecha { animation: tcFlecha 2.6s cubic-bezier(.5,0,.2,1) infinite; }
@keyframes tcFlecha { 0% { transform: translate(10px,-10px); opacity: 0; } 30% { opacity: 1; } 45%,80% { transform: translate(0,0); opacity: 1; } 100% { opacity: 0; } }
.tc-brilho { transform-box: fill-box; transform-origin: center; animation: pisca 1.8s ease-in-out infinite; }
.tc-moeda { animation: tcMoeda 2.2s ease-in infinite; }
@keyframes tcMoeda { 0% { transform: translateY(-6px); opacity: 0; } 25% { opacity: 1; } 65% { transform: translateY(9px); opacity: 1; } 75%,100% { transform: translateY(11px); opacity: 0; } }
.tc-setas path:nth-child(-n+2) { animation: tcSetaD 2s ease-in-out infinite; } .tc-setas path:nth-child(n+3) { animation: tcSetaE 2s ease-in-out infinite; }
@keyframes tcSetaD { 50% { transform: translateX(3px); } } @keyframes tcSetaE { 50% { transform: translateX(-3px); } }
.tc-sacola { animation: tcPula 1.8s var(--mola) infinite; }
@keyframes tcPula { 0%,60%,100% { transform: translateY(0); } 30% { transform: translateY(-3px); } }
.tc-roda { transform-box: fill-box; transform-origin: center; animation: gira .8s linear infinite; }
.tc-carro { animation: tcCarro 1.2s ease-in-out infinite; } @keyframes tcCarro { 50% { transform: translateY(-1px); } }
.tc-vento { animation: tcVento .8s linear infinite; } @keyframes tcVento { from { transform: translateX(2px); opacity: 1; } to { transform: translateX(-3px); opacity: 0; } }
.tc-tag { transform-origin: 6px 6px; animation: tcTag 2.4s ease-in-out infinite; } @keyframes tcTag { 50% { transform: rotate(-12deg); } }
.tc-aceno { transform-origin: 24px 16px; animation: tcAceno 1.4s ease-in-out infinite; } @keyframes tcAceno { 50% { transform: rotate(18deg); } }
.tc-coracao { transform-box: fill-box; transform-origin: center; animation: tcBate 1.2s ease-in-out infinite; }
@keyframes tcBate { 0%,100% { transform: scale(1); } 15% { transform: scale(1.15); } 30% { transform: scale(.95); } 45% { transform: scale(1.08); } }
.tc-engrenagem { transform-origin: 16px 16px; animation: gira 6s linear infinite; }
.tc-ponto { transform-box: fill-box; transform-origin: center; animation: tcDigita 1.2s ease-in-out infinite; animation-delay: calc(var(--i) * .18s); }
@keyframes tcDigita { 0%,60%,100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-2.5px); opacity: 1; } }

/* ── barra de baixo: indicador e ícone com pulinho ── */
.btab-item { position: relative; }
.btab-item::before { content: ""; position: absolute; top: 0; left: 50%; width: 26px; height: 3px; border-radius: 0 0 4px 4px;
  background: linear-gradient(90deg, var(--teal), var(--gold)); transform: translateX(-50%) scaleX(0); transition: transform .35s var(--mola); }
.btab-item.on::before { transform: translateX(-50%) scaleX(1); }
.btab-item.on svg { animation: tabPulo .5s var(--mola); }
@keyframes tabPulo { 40% { transform: translateY(-4px) scale(1.12); } }

/* aviso de sem internet */
.sem-rede { position: fixed; left: 50%; top: calc(10px + env(safe-area-inset-top, 0px)); transform: translateX(-50%); z-index: 9800;
  display: flex; align-items: center; gap: 10px; max-width: min(520px, calc(100vw - 24px)); padding: 10px 14px; border-radius: 14px;
  background: linear-gradient(135deg, #3A2A10, #6B4E15); color: #FBE7B0; font-size: 12.5px; font-weight: 600;
  box-shadow: 0 12px 30px -10px rgba(0,0,0,.5); animation: semRede .45s var(--mola); }
.sem-rede svg { width: 20px; height: 20px; flex-shrink: 0; animation: pisca 2s ease-in-out infinite; }
@keyframes semRede { from { transform: translate(-50%, -30px); opacity: 0; } }
/* barra de status do Android/iOS: já tratada por --safe-top no topo */

/* ══ Janelas do sistema (no lugar das caixas do navegador) ══ */
.dlg { position: fixed; inset: 0; z-index: 10085; display: flex; align-items: center; justify-content: center; padding: 18px; }
.dlg-fundo { position: absolute; inset: 0; background: rgba(6,22,42,.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: ovEntra .22s ease backwards; }
.dlg-caixa { position: relative; width: 100%; max-width: 400px; max-height: calc(100dvh - 36px); overflow: auto; border-radius: 24px; background: var(--card);
  box-shadow: 0 30px 80px rgba(6,22,42,.45); animation: dlgEntra .45s var(--mola) backwards; }
@keyframes dlgEntra { from { opacity: 0; transform: translateY(24px) scale(.88); } }
.dlg.saindo .dlg-fundo { animation: ovSai .22s ease forwards; }
.dlg.saindo .dlg-caixa { animation: modalSai .22s ease forwards; }
.dlg-caixa.tremer { animation: dlgTreme .4s ease; }
@keyframes dlgTreme { 20%, 60% { transform: translateX(-7px); } 40%, 80% { transform: translateX(7px); } }
/* topo colorido com o desenho */
.dlg-topo { position: relative; height: 128px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.dlg-topo::before, .dlg-topo::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
.dlg-topo::before { width: 190px; height: 190px; right: -50px; top: -90px; background: radial-gradient(circle, rgba(255,255,255,.28), transparent 70%); }
.dlg-topo::after { width: 140px; height: 140px; left: -40px; bottom: -80px; background: radial-gradient(circle, rgba(255,255,255,.16), transparent 70%); }
.dlg-perigo .dlg-topo { background: linear-gradient(135deg, #8E3326, #C9573F 55%, #E8836A); }
.dlg-aviso  .dlg-topo { background: linear-gradient(135deg, #8A6D1E, #C9A94E 55%, #E9C863); }
.dlg-info   .dlg-topo { background: linear-gradient(135deg, #082D51, #305C74 50%, #2F817A); }
.fg { width: 124px; height: 100px; position: relative; z-index: 1; overflow: visible; filter: drop-shadow(0 6px 12px rgba(0,0,0,.18));
  animation: dlgFig .6s var(--mola) .1s backwards; }
@keyframes dlgFig { from { transform: scale(.4) rotate(-12deg); opacity: 0; } }
/* animações de cada desenho */
.fg-tampa { transform-origin: 34px 34px; animation: fgTampa 2.4s ease-in-out infinite; }
@keyframes fgTampa { 0%,100% { transform: rotate(0); } 30%,60% { transform: rotate(-24deg) translateY(-4px); } }
.fg-papel { animation: fgPapel 2.4s ease-in infinite; }
@keyframes fgPapel { 0%,25% { transform: translateY(-10px); opacity: 0; } 35% { opacity: 1; } 62% { transform: translateY(26px); opacity: 1; } 75%,100% { transform: translateY(40px); opacity: 0; } }
.fg-tri { transform-origin: 60px 82px; animation: fgBalanca 1.8s ease-in-out infinite; }
@keyframes fgBalanca { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-5deg); } 75% { transform: rotate(5deg); } }
.fg-raios { animation: pisca 1.4s ease-in-out infinite; }
.fg-balao { transform-origin: 60px 80px; animation: fgBalanca 2.2s ease-in-out infinite; }
.fg-moeda { animation: fgCai 2.2s cubic-bezier(.5,0,.75,0) infinite; }
@keyframes fgCai { 0% { transform: translateY(-16px); opacity: 0; } 15% { opacity: 1; } 60%,100% { transform: translateY(26px); opacity: 0; } }
.fg-alvo { transform-origin: 86px 42px; animation: tcFatia 2s ease-in-out infinite; }
.fg-giro { transform-origin: 60px 52px; animation: fgVolta 2.6s cubic-bezier(.5,0,.3,1) infinite; }
@keyframes fgVolta { 0%,30% { transform: rotate(0); } 70%,100% { transform: rotate(-360deg); } }
.fg-giro2 { transform-origin: 60px 48px; animation: gira 6s linear infinite; }
.fg-pare { transform-origin: 60px 48px; animation: tcBate 1.6s ease-in-out infinite; }
.fg-menos { transform-origin: 90px 34px; animation: tcBate 1.6s ease-in-out infinite; }
.fg-copia { animation: fgCopia 2s ease-in-out infinite; }
@keyframes fgCopia { 50% { transform: translate(-4px, -4px); } }
/* conteúdo */
.dlg-corpo { padding: 18px 22px 20px; text-align: center; }
.dlg-tit { margin: 0 0 6px; font-size: 18px; font-weight: 800; color: var(--ink); letter-spacing: -.01em; overflow-wrap: anywhere; }
.dlg-txt { margin: 0 0 10px; font-size: 13.5px; color: var(--ink-2); line-height: 1.5; text-align: center !important; text-align-last: center !important; }
.dlg-det { display: flex; align-items: flex-start; gap: 8px; margin: 10px 0 2px; padding: 9px 12px; border-radius: 12px; background: var(--bg);
  font-size: 12px; color: var(--ink-2); text-align: left; }
.dlg-det svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; }
.dlg-perigo .dlg-det { background: #B4503E14; color: var(--red); }
.dlg-itens { display: flex; flex-direction: column; gap: 6px; margin: 12px 0 6px; text-align: left; max-height: 300px; overflow: auto; padding: 2px; }
.dlg-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; border: 1.5px solid var(--line); cursor: pointer;
  transition: border-color .15s, background .15s, transform .15s; animation: itemEntra .35s var(--suave) backwards; animation-delay: calc(var(--i) * 45ms + .15s); }
.dlg-item:hover { transform: translateX(2px); }
.dlg-item input { position: absolute; opacity: 0; width: 0; height: 0; }
.dlg-ck { width: 22px; height: 22px; border-radius: 7px; border: 2px solid var(--line); display: flex; align-items: center; justify-content: center;
  color: #fff; flex-shrink: 0; transition: background .15s, border-color .15s, transform .2s var(--mola); }
.dlg-ck svg { width: 14px; height: 14px; opacity: 0; transform: scale(.4); transition: opacity .15s, transform .2s var(--mola); }
.dlg-item:has(input:checked) { border-color: #2F817A88; background: #2F817A0f; }
.dlg-item:has(input:checked) .dlg-ck { background: linear-gradient(135deg, #1F6F5C, #3EA88A); border-color: transparent; transform: scale(1.05); }
.dlg-item:has(input:checked) .dlg-ck svg { opacity: 1; transform: scale(1); }
.dlg-item:has(input:focus-visible) { outline: 2px solid var(--teal); outline-offset: 2px; }
.dlg-rot { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; color: var(--ink); }
.dlg-item b { font-size: 14.5px; color: var(--navy); white-space: nowrap; }
html.dark .dlg-item b { color: var(--ink); }
.dlg-todos { display: flex; gap: 14px; justify-content: center; margin-bottom: 4px; }
.dlg-todos button { border: none; background: none; color: var(--teal); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; padding: 4px; }
.dlg-campo { width: 100%; margin: 8px 0; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--ink);
  font: inherit; font-size: 13px; }
.dlg-bts { display: flex; gap: 10px; margin-top: 16px; }
.dlg-bts .btn { flex: 1; justify-content: center; padding: 12px; font-size: 14px; }
.dlg-sim { color: #fff; border: none; position: relative; overflow: hidden; }
.dlg-perigo .dlg-sim { background: linear-gradient(135deg, #A2412F, #D0624E); box-shadow: 0 10px 20px -10px rgba(180,80,62,.8); }
.dlg-aviso  .dlg-sim { background: linear-gradient(135deg, #8A6D1E, #C9A94E); box-shadow: 0 10px 20px -10px rgba(201,169,78,.85); }
.dlg-info   .dlg-sim { background: linear-gradient(135deg, #082D51, #2F817A); box-shadow: 0 10px 20px -10px rgba(8,45,81,.7); }
.dlg-sim:disabled { opacity: .45; box-shadow: none; }
.dlg-sim:hover:not(:disabled) { filter: brightness(1.08); transform: translateY(-1px); }
@media (max-width: 640px) {
  .dlg { align-items: flex-end; padding: 0; }
  .dlg-caixa { max-width: none; border-radius: 26px 26px 0 0; padding-bottom: env(safe-area-inset-bottom, 0px); animation: modalSobe .38s cubic-bezier(.2,.9,.3,1) backwards; }
  .dlg.saindo .dlg-caixa { animation: modalDesce .24s ease forwards; }
}

/* ══════════════════════════════════════════════════════
   GESTOS COM O DEDO, MAIS BOTÕES E MAIS COR
   ══════════════════════════════════════════════════════ */
/* o puxar para atualizar do navegador recarregaria a página inteira: usamos o nosso */
html, body { overscroll-behavior-y: contain; }

/* ── atalhos do painel ── */
.atalhos { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 16px; }
.atalho { position: relative; overflow: hidden; border: none; cursor: pointer; border-radius: 18px; padding: 14px 6px 12px;
  display: flex; flex-direction: column; align-items: center; gap: 8px; color: #fff;
  background: radial-gradient(120% 100% at 100% 0%, rgba(255,255,255,.28), transparent 55%), linear-gradient(135deg, var(--c1), var(--c2));
  box-shadow: 0 10px 22px -12px var(--c1), inset 0 0 0 1px rgba(255,255,255,.12);
  transition: transform .2s var(--mola), box-shadow .2s; animation: telaEntra .45s var(--suave) backwards; animation-delay: calc(var(--i) * 35ms); }
.atalho::after { content: ""; position: absolute; width: 70px; height: 70px; right: -24px; bottom: -30px; border-radius: 50%; background: rgba(255,255,255,.1); }
.atalho:hover { transform: translateY(-3px); box-shadow: 0 16px 26px -12px var(--c1); }
.atalho:active { transform: scale(.93); }
.atalho-ic { width: 40px; height: 40px; border-radius: 13px; display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.2); box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); transition: transform .3s var(--mola); position: relative; z-index: 1; }
.atalho:hover .atalho-ic { transform: rotate(-8deg) scale(1.08); }
.atalho-ic svg { width: 20px; height: 20px; }
.atalho-rot { font-size: 11.5px; font-weight: 800; letter-spacing: .01em; position: relative; z-index: 1; text-shadow: 0 1px 2px rgba(0,0,0,.2); }
@media (max-width: 640px) {
  .atalhos { grid-template-columns: none; grid-auto-flow: column; grid-template-rows: repeat(2, auto); grid-auto-columns: calc(25% - 8px);
    overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; scrollbar-width: none; }
  .atalhos::-webkit-scrollbar { display: none; }
  .atalho { scroll-snap-align: start; padding: 12px 4px 10px; }
  .atalho-ic { width: 36px; height: 36px; }
}

/* ── anel que enche ao segurar o dedo ── */
.anel-toque { position: fixed; width: 54px; height: 54px; margin: -27px 0 0 -27px; z-index: 9700; pointer-events: none; }
.anel-toque svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.anel-toque circle { fill: rgba(47,129,122,.12); stroke: #2F817A; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 113; stroke-dashoffset: 113;
  animation: anelSegura .48s linear forwards; }
@keyframes anelSegura { to { stroke-dashoffset: 0; } }
.lanc-card.pulsou { animation: pulsou .4s var(--mola); }
@keyframes pulsou { 40% { transform: scale(.97); } }
.lanc-card.destaque, .campo.destaque { animation: destaque 1.6s ease; }
@keyframes destaque { 0%, 60% { box-shadow: 0 0 0 4px rgba(201,169,78,.55); } 100% { box-shadow: 0 0 0 0 rgba(201,169,78,0); } }

/* ── folha de ações do lançamento ── */
.folha { position: fixed; inset: 0; z-index: 9750; display: flex; align-items: flex-end; justify-content: center; }
.folha-fundo { position: absolute; inset: 0; background: rgba(6,22,42,0); transition: background .25s; }
.folha.aberta .folha-fundo { background: rgba(6,22,42,.5); backdrop-filter: blur(4px); }
.folha-caixa { position: relative; width: 100%; max-width: 560px; border-radius: 26px 26px 0 0; background: var(--card); overflow: hidden;
  padding: 8px 16px calc(18px + env(safe-area-inset-bottom, 0px)); transform: translateY(100%); transition: transform .38s cubic-bezier(.2,.9,.3,1);
  box-shadow: 0 -20px 60px rgba(6,22,42,.3); }
.folha-caixa::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 110px; pointer-events: none;
  background: linear-gradient(180deg, color-mix(in srgb, var(--cat) 22%, transparent), transparent); }
.folha.aberta .folha-caixa { transform: translateY(0); }
.folha.saindo .folha-caixa { transform: translateY(100%); transition-duration: .24s; }
@media (min-width: 900px) { .folha { align-items: center; } .folha-caixa { border-radius: 24px; transform: translateY(30px) scale(.95); opacity: 0; transition: transform .35s var(--mola), opacity .2s; }
  .folha.aberta .folha-caixa { transform: none; opacity: 1; } .folha.saindo .folha-caixa { opacity: 0; } }
.folha-alca { width: 42px; height: 5px; border-radius: 4px; background: var(--line); margin: 4px auto 12px; position: relative; }
.folha-cab { display: flex; align-items: center; gap: 12px; position: relative; padding-bottom: 14px; }
.folha-ic { width: 44px; height: 44px; border-radius: 14px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #fff; }
.folha-ic.desp { background: linear-gradient(135deg, #A2412F, #E07A5F); } .folha-ic.rec { background: linear-gradient(135deg, #1F6F5C, #3EC28F); }
.folha-ic svg { width: 22px; height: 22px; }
.folha-tit { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.folha-tit b { font-size: 15.5px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.folha-tit small { font-size: 12px; color: var(--ink-3); display: flex; align-items: center; gap: 5px; }
.folha-tit small i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.folha-valor { font-size: 19px; color: var(--ink); white-space: nowrap; }
.folha-grade { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px 8px; position: relative; }
.folha-bt { display: flex; flex-direction: column; align-items: center; gap: 7px; border: none; background: none; cursor: pointer; padding: 6px 2px;
  font: inherit; font-size: 11.5px; font-weight: 700; color: var(--ink-2); text-align: center; line-height: 1.2;
  animation: folhaBt .45s var(--mola) backwards; animation-delay: calc(var(--i) * 35ms + .08s); }
@keyframes folhaBt { from { opacity: 0; transform: translateY(14px) scale(.7); } }
.folha-bt-ic { width: 54px; height: 54px; border-radius: 18px; display: flex; align-items: center; justify-content: center; color: #fff;
  background: radial-gradient(120% 100% at 100% 0%, rgba(255,255,255,.3), transparent 55%), linear-gradient(135deg, var(--c1), var(--c2));
  box-shadow: 0 10px 18px -10px var(--c1); transition: transform .2s var(--mola); }
.folha-bt-ic svg { width: 22px; height: 22px; }
.folha-bt:hover .folha-bt-ic { transform: translateY(-3px) rotate(-6deg); }
.folha-bt:active .folha-bt-ic { transform: scale(.88); }

/* ── períodos rápidos ── */
.periodos { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 10px; scrollbar-width: none; }
.periodos::-webkit-scrollbar { display: none; }
.periodo { flex-shrink: 0; border: 1.5px solid var(--line); background: var(--card); color: var(--ink-2); border-radius: 20px; padding: 7px 14px;
  font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; transition: all .2s var(--mola); }
.periodo:hover { border-color: var(--teal); color: var(--teal); }
.periodo:active { transform: scale(.94); }
.periodo.on { color: #fff; border-color: transparent; background: linear-gradient(135deg, #082D51, #2F817A); box-shadow: 0 6px 14px -8px #082D51; }

/* ── mais cor nos lançamentos e nas contas ── */
.lanc-card::after { content: ""; position: absolute; top: 0; right: 0; width: 120px; height: 100%; pointer-events: none; border-radius: 0 16px 16px 0;
  background: radial-gradient(90% 80% at 100% 0%, color-mix(in srgb, var(--cat, #7E8C9A) 26%, transparent), transparent 70%); }
.lanc-card { box-shadow: inset 0 3px 0 var(--cat, transparent); }
.conta-card { position: relative; overflow: hidden; }
.conta-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 76px; pointer-events: none;
  background: radial-gradient(70% 120% at 100% 0%, color-mix(in srgb, var(--cor) 40%, transparent), transparent 70%),
              linear-gradient(180deg, color-mix(in srgb, var(--cor) 18%, transparent), transparent); }
.conta-card > * { position: relative; }
.conta-card .card-ico { background: linear-gradient(135deg, var(--cor), color-mix(in srgb, var(--cor) 60%, #fff)) !important; color: #fff !important;
  box-shadow: 0 8px 16px -8px var(--cor); }

/* ── puxar para atualizar ── */
.puxa { position: fixed; left: 50%; top: calc(6px + env(safe-area-inset-top, 0px)); z-index: 9650; transform: translate(-50%, -70px);
  display: flex; align-items: center; gap: 8px; padding: 7px 14px 7px 8px; border-radius: 22px; background: var(--card); color: var(--ink-2);
  font-size: 12.5px; font-weight: 700; box-shadow: 0 10px 26px -8px rgba(8,45,81,.35); transition: transform .25s cubic-bezier(.2,.9,.3,1); }
.puxa svg { width: 30px; height: 30px; transition: transform .05s linear; }
.pu-moeda { fill: #E2C46E; stroke: #8C6D24; stroke-width: 2; }
.puxa text { font-family: "Numeros", var(--font); font-size: 11px; font-weight: 800; fill: #6B4E15; }
.puxa.pronto { color: var(--teal); }
.puxa.girando svg { animation: puxaGira .7s linear infinite; }
@keyframes puxaGira { to { transform: rotateY(360deg); } }
.puxa.ok { color: #1F6F5C; }

/* ══════════════════════════════════════════════════════
   MAIS COR E DESENHOS INTERATIVOS
   ══════════════════════════════════════════════════════ */
/* ── mascote ── */
.mascote { position: relative; width: 74px; height: 62px; border: none; background: none; padding: 0; cursor: pointer; flex-shrink: 0; }
.mascote .mc { width: 100%; height: 100%; overflow: visible; }
.mc-corpo { transform-origin: 58px 90px; animation: mcRespira 3.2s ease-in-out infinite; }
@keyframes mcRespira { 50% { transform: scale(1.03, .97); } }
.mascote.pula .mc-corpo { animation: mcPula .6s var(--mola); }
@keyframes mcPula { 30% { transform: translateY(-14px) rotate(-6deg); } 60% { transform: translateY(0) scale(1.08, .92); } }
.mc-palpebra { animation: mcPisca 4.5s infinite; }
@keyframes mcPisca { 0%, 92%, 100% { height: 0; } 95% { height: 16px; } }
.mc-rabo { transform-origin: 96px 52px; animation: mcRabo 1.4s ease-in-out infinite; }
@keyframes mcRabo { 50% { transform: rotate(14deg); } }
.mc-moeda { animation: mcMoeda 2.6s ease-in infinite; }
@keyframes mcMoeda { 0% { transform: translateY(-12px); opacity: 0; } 25% { opacity: 1; } 60% { transform: translateY(18px); opacity: 1; } 70%, 100% { transform: translateY(20px); opacity: 0; } }
.mc-preocupado .mc-moeda { display: none; }
.mc-gota { animation: mcGota 1.8s ease-in infinite; }
@keyframes mcGota { 0% { transform: translateY(-3px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(10px); opacity: 0; } }
.mc-pupila { transition: transform .12s ease-out; }
.mc-fala { position: absolute; right: 4px; top: calc(100% + 6px); width: max-content; max-width: 240px; padding: 9px 12px; border-radius: 14px 4px 14px 14px;
  background: linear-gradient(135deg, #082D51, #2F817A); color: #fff; font-size: 12.5px; font-weight: 600; line-height: 1.35; text-align: left; z-index: 5;
  box-shadow: 0 10px 24px -8px rgba(8,45,81,.5); opacity: 0; transform: translateY(-6px) scale(.9); transform-origin: top right; pointer-events: none;
  transition: opacity .2s, transform .3s var(--mola); }
.mc-fala.mostra { opacity: 1; transform: none; animation: mcFalaSome 6s forwards; }
@keyframes mcFalaSome { 0%, 85% { opacity: 1; } 100% { opacity: 0; } }

/* ── calendário de vencimentos ── */
.cal-faixa { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 12px; scroll-snap-type: x proximity; scrollbar-width: thin; }
.cal-dia { flex: 0 0 58px; scroll-snap-align: start; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px 10px; border-radius: 16px;
  border: 1.5px solid var(--line); background: var(--card); cursor: pointer; font: inherit; transition: transform .2s var(--mola), border-color .2s, background .2s;
  animation: itemEntra .35s var(--suave) backwards; animation-delay: calc(min(var(--i), 12) * 25ms); }
.cal-dia:hover { transform: translateY(-3px); }
.cal-dia:active { transform: scale(.94); }
.cal-dia.vazio { opacity: .55; }
.cal-dia.fds .cal-rot { color: var(--teal); }
.cal-dia.especial { background: linear-gradient(160deg, #B4503E1c, transparent); border-color: #C9573F55; }
.cal-dia.on { border-color: transparent; background: linear-gradient(160deg, #082D51, #2F817A); color: #fff; box-shadow: 0 10px 20px -10px #082D51; }
.cal-dia.on .cal-rot, .cal-dia.on .cal-num { color: #fff; }
.cal-rot { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); }
.cal-num { font-family: "Numeros", var(--font); font-size: 19px; font-weight: 800; color: var(--ink); }
.cal-bolha-area { height: 36px; display: flex; align-items: center; justify-content: center; }
.cal-bolha { width: var(--t); height: var(--t); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 10.5px; font-weight: 800;
  animation: calBolha .5s var(--mola) backwards; animation-delay: calc(min(var(--i), 12) * 25ms + .2s); }
@keyframes calBolha { from { transform: scale(0); } }
.cal-bolha.pagar { background: radial-gradient(circle at 30% 30%, #F4D27A, #C9A94E); box-shadow: 0 4px 10px -4px #C9A94E; }
.cal-bolha.receber { background: radial-gradient(circle at 30% 30%, #7FE0B7, #2F9E7E); }
.cal-bolha.atras { background: radial-gradient(circle at 30% 30%, #F2A08F, #C9573F); animation: calBolha .5s var(--mola) backwards, tcBate 1.6s 1s ease-in-out infinite; }
.cal-det-tit { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); margin: 4px 0 8px; }
.cal-item { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); animation: itemEntra .3s var(--suave) backwards; animation-delay: calc(var(--j) * 40ms); }
.cal-item-ic { width: 32px; height: 32px; border-radius: 10px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #fff; }
.cal-item-ic.despesa { background: linear-gradient(135deg, #A2412F, #E07A5F); } .cal-item-ic.receita { background: linear-gradient(135deg, #1F6F5C, #3EC28F); }
.cal-item-ic svg { width: 16px; height: 16px; }
.cal-item-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cal-item-txt b { font-size: 13.5px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-item-txt small { font-size: 11.5px; color: var(--ink-3); }
.cal-item-val { font-size: 14px; white-space: nowrap; } .cal-item-val.despesa { color: var(--red); } .cal-item-val.receita { color: #1F6F5C; }
.cal-vazio { display: flex; align-items: center; gap: 8px; color: var(--ink-3); font-size: 13px; padding: 8px 0; }
.cal-vazio svg { width: 18px; height: 18px; color: var(--teal); }
@media (max-width: 640px) { .cal-item { flex-wrap: wrap; } .cal-item .btn { margin-left: 42px; } }

/* ── banner das listas ── */
.lanc-banner:empty { display: none; }
.lanc-banner { position: relative; overflow: hidden; border-radius: 22px; padding: 16px 18px; margin-bottom: 14px; color: #fff;
  display: grid; grid-template-columns: 1fr auto; grid-template-areas: "txt fig" "chips chips"; gap: 6px 10px;
  box-shadow: 0 16px 34px -18px rgba(8,45,81,.6); animation: telaEntra .45s var(--suave) backwards; }
.lanc-banner::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 90% at 100% 0%, rgba(255,255,255,.25), transparent 60%), radial-gradient(50% 70% at 0% 100%, rgba(0,0,0,.18), transparent 60%); }
.lb-despesa { background: linear-gradient(135deg, #7E2C20, #C9573F 50%, #E59A4B); }
.lb-receita { background: linear-gradient(135deg, #14594C, #2F9E7E 55%, #7FD3C2); }
.lb-todos   { background: linear-gradient(135deg, #061E38, #305C74 50%, #2F817A); }
.lb-txt { grid-area: txt; display: flex; flex-direction: column; gap: 2px; position: relative; }
.lb-txt b { font-size: 19px; font-weight: 800; letter-spacing: -.01em; } .lb-txt span { font-size: 12px; opacity: .85; }
.lb-fig { grid-area: fig; width: 120px; height: 80px; position: relative; overflow: visible; margin: -6px -4px -10px 0; }
.lb-m { animation: lbVoa 2.6s ease-out infinite; } .lb-m.m1 { animation-delay: .5s; } .lb-m.m2 { animation-delay: 1s; }
@keyframes lbVoa { 0% { transform: translate(-30px, 34px) scale(.5); opacity: 0; } 25% { opacity: 1; } 100% { transform: translate(10px, -26px) scale(1); opacity: 0; } }
.lb-c { animation: lbCai 2.4s cubic-bezier(.5,0,.75,0) infinite; } .lb-c.c1 { animation-delay: .8s; } .lb-c.c2 { animation-delay: 1.6s; }
@keyframes lbCai { 0% { transform: translateY(-10px); opacity: 0; } 15% { opacity: 1; } 80% { transform: translateY(58px); opacity: 1; } 100% { transform: translateY(62px); opacity: 0; } }
.lb-b { transform-box: fill-box; transform-origin: 50% 100%; animation: tcBarra 2.6s ease-in-out infinite; }
.lb-b.b1 { animation-delay: .2s; } .lb-b.b2 { animation-delay: .4s; } .lb-b.b3 { animation-delay: .6s; }
.lb-linha { stroke-dasharray: 100; animation: cfDesenha 4s ease-in-out infinite; }
.lb-chips { grid-area: chips; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; position: relative; }
.lb-chip { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 10px 12px; border-radius: 14px; border: none; cursor: pointer; text-align: left;
  color: #fff; font: inherit; background: rgba(255,255,255,.16); box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); backdrop-filter: blur(6px);
  transition: transform .2s var(--mola), background .2s; }
.lb-chip:hover { background: rgba(255,255,255,.26); transform: translateY(-2px); } .lb-chip:active { transform: scale(.95); }
.lb-chip small { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; opacity: .85; }
.lb-chip b { font-size: 17px; white-space: nowrap; } .lb-chip span { font-size: 11px; opacity: .8; }
.lb-chip.c-atr b { color: #FFE0D6; }
@media (max-width: 640px) { .lb-chip b { font-size: 14px; } .lb-chip { padding: 8px 9px; } .lb-fig { width: 96px; height: 66px; } }

/* ── categorias em mosaico ── */
.cat-mosaico { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 6px; }
.cat-tile { position: relative; overflow: hidden; border-radius: 18px; padding: 14px 14px 12px; min-height: 118px; cursor: pointer; color: #fff;
  display: flex; flex-direction: column; gap: 3px;
  background: radial-gradient(90% 80% at 100% 0%, rgba(255,255,255,.3), transparent 60%), linear-gradient(140deg, var(--cor), color-mix(in srgb, var(--cor) 55%, #000));
  box-shadow: 0 12px 24px -14px var(--cor); transition: transform .25s var(--mola), box-shadow .25s;
  animation: telaEntra .45s var(--suave) backwards; animation-delay: calc(min(var(--i, 0), 12) * 35ms); }
.cat-tile::after { content: ""; position: absolute; width: 90px; height: 90px; right: -30px; bottom: -40px; border-radius: 50%; background: rgba(255,255,255,.12); }
.cat-tile:hover { transform: translateY(-4px) rotate(-.6deg); box-shadow: 0 18px 30px -14px var(--cor); }
.cat-tile:active { transform: scale(.96); }
.cat-tile-ic { width: 38px; height: 38px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.22);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); margin-bottom: 4px; transition: transform .3s var(--mola); }
.cat-tile:hover .cat-tile-ic { transform: rotate(-10deg) scale(1.1); }
.cat-tile-ic svg { width: 20px; height: 20px; }
.cat-tile b { font-size: 14px; font-weight: 800; line-height: 1.2; overflow-wrap: anywhere; position: relative; z-index: 1; }
.cat-tile small { font-size: 12px; opacity: .9; position: relative; z-index: 1; }
.cat-barra { height: 6px; border-radius: 6px; background: rgba(255,255,255,.25); overflow: hidden; margin-top: 6px; position: relative; z-index: 1; }
.cat-barra i { display: block; height: 100%; border-radius: 6px; background: #fff; transform-origin: left; animation: encher 1s cubic-bezier(.2,.8,.2,1) .3s backwards; }
.cat-pct { font-size: 10.5px; font-weight: 700; opacity: .85; position: relative; z-index: 1; }
.cat-tile-acoes { position: absolute; top: 8px; right: 8px; display: flex; gap: 4px; z-index: 2; opacity: 0; transition: opacity .2s; }
.cat-tile:hover .cat-tile-acoes, .cat-tile:focus-within .cat-tile-acoes { opacity: 1; }
@media (hover: none) { .cat-tile-acoes { opacity: 1; } }
.cat-bt { width: 28px; height: 28px; border-radius: 9px; border: none; background: rgba(255,255,255,.22); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.cat-bt:hover { background: rgba(255,255,255,.38); } .cat-bt svg { width: 14px; height: 14px; }
.cat-prev { cursor: default; max-width: 220px; margin: 0 auto; min-height: 104px; animation: none; }
#k-ic-grade { grid-template-columns: repeat(8, 1fr); }
@media (max-width: 640px) { .cat-mosaico { grid-template-columns: repeat(2, 1fr); } #k-ic-grade { grid-template-columns: repeat(6, 1fr); } }

/* celular e tablet: grades de 2 colunas viram 1 (uma regra de tela cheia forçava 2 colunas
   em qualquer largura e espremia Categorias e outros blocos no celular) */
@media (max-width: 1024px) { .grid-2-igual { grid-template-columns: 1fr !important; } }

/* ══ Barra de baixo do celular: um gradiente por botão ══ */
.btab-item[data-tab="dashboard"]   { --c1: #1F6F5C; --c2: #3EC28F; }
.btab-item[data-tab="vencimentos"] { --c1: #C2742A; --c2: #E9B84E; }
.btab-item[data-tab="lancamentos"] { --c1: #5B3FA0; --c2: #9B7BE8; }
.btab-item[data-tab="mais"]        { --c1: #1C6E8C; --c2: #45B3DA; }
@media (max-width: 1024px) {
  .btab { border-top: none !important; box-shadow: 0 -10px 30px -12px rgba(8,45,81,.28); }
  .btab::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, #3EC28F, #E9B84E, #E07A5F, #9B7BE8, #45B3DA); background-size: 200% 100%; animation: faixaCorre 10s linear infinite; }
  .btab-item { color: color-mix(in srgb, var(--c1) 75%, #6B7A89) !important; transition: color .2s; }
  .btab-item svg { box-sizing: border-box; width: 46px !important; height: 30px !important; padding: 5px 12px; border-radius: 14px; stroke-width: 2.2;
    color: var(--c1); background: color-mix(in srgb, var(--c2) 18%, transparent);
    transition: background .25s, color .25s, transform .3s var(--mola), box-shadow .25s; }
  .btab-item:active svg { transform: scale(.88); }
  .btab-item.on { color: var(--c1) !important; font-weight: 800; }
  .btab-item.on svg { color: #fff; background: linear-gradient(135deg, var(--c1), var(--c2)); transform: translateY(-3px) scale(1.05);
    box-shadow: 0 8px 16px -6px var(--c1); animation: tabPulo .5s var(--mola); }
  .btab-item::before { display: none; }
  html.dark .btab-item { color: color-mix(in srgb, var(--c2) 80%, #AFC2D6) !important; }
  html.dark .btab-item svg { color: var(--c2); background: color-mix(in srgb, var(--c2) 16%, transparent); }
  html.dark .btab-item.on { color: var(--c2) !important; }
  html.dark .btab-item.on svg { color: #fff; }
  /* botão + */
  .btab-fab-inner { background: radial-gradient(120% 100% at 30% 20%, rgba(255,255,255,.3), transparent 55%), linear-gradient(135deg, #082D51, #2F817A 60%, #3EC28F) !important;
    box-shadow: 0 10px 22px -6px rgba(47,129,122,.75), 0 0 0 3px var(--card), 0 0 0 5px #E9B84E !important; animation: fabBrilho 2.8s ease-in-out infinite; }
  @keyframes fabBrilho { 50% { box-shadow: 0 12px 26px -4px rgba(47,129,122,.9), 0 0 0 3px var(--card), 0 0 0 6px #F4D27A, 0 0 22px 6px rgba(233,184,78,.35); } }
  .btab-fab.aberto .btab-fab-inner { animation: none; }
  .btab-fab-rot { font-weight: 800; background: linear-gradient(90deg, #2F817A, #C9A94E); -webkit-background-clip: text; background-clip: text; color: transparent; }
  /* contador de vencidas */
  .btab-badge { background: linear-gradient(135deg, #C9573F, #F07A5F) !important; color: #fff !important; box-shadow: 0 0 0 2px var(--card), 0 4px 8px -2px rgba(201,87,63,.7);
    animation: tcBate 1.8s ease-in-out infinite; }
}
@media (max-width: 1024px) { .btab-fab { background: transparent !important; box-shadow: none !important; } }

/* ══ Orçamento: limite como etiqueta + editor dentro da linha ══ */
.orc-item { position: relative; border-radius: 14px; padding: 12px 10px; margin: 0 -10px; transition: background .2s; }
.orc-item.editando { background: color-mix(in srgb, var(--cc) 8%, transparent); }
.orc-ic { background: linear-gradient(135deg, var(--cc), color-mix(in srgb, var(--cc) 55%, #fff)) !important; color: #fff !important;
  box-shadow: 0 8px 14px -8px var(--cc); }
.orc-barra { height: 9px; }
.orc-barra > div { background-image: linear-gradient(90deg, color-mix(in srgb, currentColor 0%, transparent), rgba(255,255,255,.35)) !important; }
.orc-pct { padding: 2px 8px; border-radius: 20px; background: color-mix(in srgb, currentColor 14%, transparent); }
.orc-chip { flex-shrink: 0; min-width: 150px; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 8px 38px 8px 12px; position: relative;
  border-radius: 14px; border: 1.5px solid color-mix(in srgb, var(--cc) 35%, var(--line)); background: color-mix(in srgb, var(--cc) 8%, var(--card));
  cursor: pointer; font: inherit; text-align: left; transition: transform .2s var(--mola), border-color .2s, box-shadow .2s; }
.orc-chip:hover { transform: translateY(-2px); border-color: var(--cc); box-shadow: 0 8px 16px -10px var(--cc); }
.orc-chip:active { transform: scale(.96); }
.orc-chip small { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); }
.orc-chip b { font-size: 15px; color: var(--ink); white-space: nowrap; }
.orc-chip-ic { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center; color: #fff; background: var(--cc); }
.orc-chip-ic svg { width: 13px; height: 13px; }
.orc-chip.vazio { border-style: dashed; background: transparent; padding-right: 12px; align-items: center; }
.orc-chip-mais { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 800; color: var(--cc); }
.orc-chip-mais svg { width: 15px; height: 15px; }
.orc-chip.vazio small { text-transform: none; letter-spacing: 0; font-weight: 600; font-size: 11px; }
/* editor */
.orc-editor { margin: 0 -10px 6px; padding: 0 12px; border-radius: 0 0 16px 16px; overflow: hidden; max-height: 0; opacity: 0;
  background: color-mix(in srgb, var(--cc, #2F817A) 8%, var(--card)); transition: max-height .35s cubic-bezier(.2,.9,.3,1), opacity .25s, padding .35s; }
.orc-editor.aberto { max-height: 360px; opacity: 1; padding: 4px 12px 14px; }
.orc-item.editando + .orc-editor { --cc: inherit; }
.oe-tit { font-size: 12.5px; color: var(--ink-2); margin-bottom: 8px; }
.oe-campo { display: flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 14px; background: var(--card);
  border: 2px solid transparent; background-image: linear-gradient(var(--card), var(--card)), var(--grad-marca); background-origin: border-box; background-clip: padding-box, border-box; }
.oe-campo.erro { background-image: linear-gradient(var(--card), var(--card)), linear-gradient(90deg, #C9573F, #E07A5F); }
.oe-campo span { font-family: "Numeros", var(--font); font-size: 16px; font-weight: 800; color: var(--ink-3); }
.oe-campo input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; color: var(--ink); padding: 6px 0;
  font-family: "Numeros", var(--font); font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.oe-rapidos { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.oe-chip { display: flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 20px; border: 1.5px solid var(--line); background: var(--card);
  color: var(--ink-2); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; transition: all .2s var(--mola); }
.oe-chip svg { width: 14px; height: 14px; } .oe-chip b { color: var(--ink); }
.oe-chip:hover { transform: translateY(-1px); } .oe-chip:active { transform: scale(.94); }
.oe-chip.media { border-color: #2F817A66; } .oe-chip.gasto { border-color: #C9A94E88; }
.oe-chip.on { color: #fff; border-color: transparent; background: linear-gradient(135deg, #082D51, #2F817A); } .oe-chip.on b { color: #fff; }
.oe-bts { display: flex; align-items: center; gap: 8px; }
.oe-tirar { color: var(--red) !important; }
@media (max-width: 640px) {
  .orc-item { flex-wrap: wrap; }
  .orc-chip { margin-left: 48px; flex: 1 1 auto; min-width: 0; }
  .oe-bts { flex-wrap: wrap; }
}
.oe-campo input, .oe-campo input:focus { border: none !important; box-shadow: none !important; background: transparent !important; padding: 6px 0 !important; outline: none; }
@media (max-width: 640px) {
  .orc-item .orc-meio { flex: 1 1 calc(100% - 60px); min-width: 0; }
  .orc-item .orc-chip { flex: 0 0 calc(100% - 48px); margin-left: 48px; }
}

/* ══════════════════════════════════════════════════════
   COMPUTADOR: menu lateral e topo coloridos
   ══════════════════════════════════════════════════════ */
.nav-item[data-id="dashboard"]     { --c1: #1F6F5C; --c2: #3EC28F; }
.nav-item[data-id="vencimentos"]   { --c1: #C2742A; --c2: #E9B84E; }
.nav-item[data-id="relatorios"]    { --c1: #3F3D9E; --c2: #8C8AF0; }
.nav-item[data-id="orcamento"]     { --c1: #8A6D1E; --c2: #E2C46E; }
.nav-item[data-id="receber"]       { --c1: #1F7A55; --c2: #4FD39A; }
.nav-item[data-id="pagar"]         { --c1: #A2412F; --c2: #F08A6E; }
.nav-item[data-id="lancamentos"]   { --c1: #5B3FA0; --c2: #A68AF0; }
.nav-item[data-id="compras"]       { --c1: #7F3F98; --c2: #D07BE8; }
.nav-item[data-id="metas"]         { --c1: #A0285F; --c2: #F06AA8; }
.nav-item[data-id="veiculos"]      { --c1: #24507A; --c2: #62A0E0; }
.nav-item[data-id="contas"]        { --c1: #1C6E8C; --c2: #4FC3EA; }
.nav-item[data-id="categorias"]    { --c1: #B35C1E; --c2: #F4A85A; }
.nav-item[data-id="contatos"]      { --c1: #2F5D50; --c2: #5CC0A0; }
.nav-item[data-id="usuarios"]      { --c1: #B4503E; --c2: #F59A8C; }
.nav-item[data-id="configuracoes"] { --c1: #4A5A6A; --c2: #A8B8C8; }
.nav-item[data-id="whatsapp"]      { --c1: #1E7A4A; --c2: #3FCB7E; }

/* menu lateral: fundo com brilhos de cor */
.sidebar::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(300px 240px at 0% 0%, rgba(62,194,143,.20), transparent 70%),
              radial-gradient(280px 300px at 100% 55%, rgba(155,123,232,.14), transparent 70%),
              radial-gradient(260px 260px at 0% 100%, rgba(233,184,78,.16), transparent 70%); }
.sidebar > * { position: relative; z-index: 1; }
.sb-sec { display: flex; align-items: center; gap: 7px; color: #8FB4CF; }
.sb-sec::before { content: ""; width: 14px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, #3EC28F, #E9B84E); }
/* itens: ícone em pílula da própria cor */
.sidebar .nav-item { padding: 5px 10px; gap: 10px; border-left: 3px solid transparent !important; transition: background .2s, color .2s, transform .2s var(--mola); }
.sidebar .nav-item svg { box-sizing: border-box; width: 30px !important; height: 30px !important; padding: 6px; border-radius: 10px; stroke-width: 2;
  color: var(--c2, #8FB4CF); background: color-mix(in srgb, var(--c2, #8FB4CF) 16%, transparent);
  transition: background .25s, color .25s, transform .3s var(--mola), box-shadow .25s; }
.sidebar .nav-item:hover { background: rgba(255,255,255,.06) !important; transform: translateX(3px); }
.sidebar .nav-item:hover svg { color: #fff; background: linear-gradient(135deg, var(--c1), var(--c2)); transform: rotate(-6deg) scale(1.06); }
.sidebar .nav-item.on { color: #fff; font-weight: 700; border-left-color: var(--c2) !important;
  background: linear-gradient(90deg, color-mix(in srgb, var(--c2) 30%, transparent), color-mix(in srgb, var(--c2) 4%, transparent)) !important; }
.sidebar .nav-item.on svg { color: #fff; background: linear-gradient(135deg, var(--c1), var(--c2)); box-shadow: 0 6px 14px -6px var(--c2); }
.sidebar .nav-item.on::before { display: none; }
.sidebar .nav-badge { background: linear-gradient(135deg, #C9573F, #F07A5F); box-shadow: 0 4px 10px -3px rgba(201,87,63,.7); animation: tcBate 1.8s ease-in-out infinite; }
@media (min-width: 821px) and (max-width: 1280px) { .sidebar .nav-item { padding: 6px; justify-content: center; } .sidebar .nav-item:hover { transform: none; } }

/* topo: linha com as cores da marca e botões coloridos */
@media (min-width: 821px) {
  .topbar::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none;
    background: linear-gradient(90deg, #3EC28F, #E9B84E, #F08A6E, #A68AF0, #4FC3EA); background-size: 200% 100%; animation: faixaCorre 12s linear infinite; opacity: .85; }
}
.topbar .btn-icon { border: none; transition: transform .25s var(--mola), box-shadow .2s, filter .2s; }
.topbar .btn-icon:hover { transform: translateY(-2px) rotate(-6deg); filter: brightness(1.08); }
.topbar .btn-icon:active { transform: scale(.9); }
.topbar .tb-tour { color: #fff; background: linear-gradient(135deg, #8A6D1E, #E2C46E); box-shadow: 0 6px 14px -6px #C9A94E; }
.topbar .btn-tema { color: #fff; background: linear-gradient(135deg, #3F3D9E, #8C8AF0); box-shadow: 0 6px 14px -6px #5B5AD0; }
html.dark .topbar .btn-tema { background: linear-gradient(135deg, #C2742A, #F4C25A); box-shadow: 0 6px 14px -6px #E9B84E; }
.topbar .tb-atualizar { color: #fff; background: linear-gradient(135deg, #1F6F5C, #3EC28F); box-shadow: 0 6px 14px -6px #2F9E7E; }
.topbar .tb-atualizar.gira svg { animation: gira .7s cubic-bezier(.4,0,.2,1); }
.topbar .btn-icon.show-mob { color: #fff; background: linear-gradient(135deg, #1C6E8C, #4FC3EA); }
/* busca do topo com borda em gradiente ao digitar */
.busca-input:focus { border-color: transparent !important; outline: none;
  background: linear-gradient(var(--card), var(--card)) padding-box, var(--grad-marca) border-box !important; box-shadow: 0 4px 16px rgba(47,129,122,.16); }

/* ══ Calendário: dias e contas redesenhados (nome inteiro, duas linhas) ══ */
.cal-faixa { padding: 6px 4px 18px; gap: 7px; }
.cal-dia { flex: 0 0 62px; }
.cal-dia.especial { flex-basis: 80px; }
.cal-rot { font-size: 9.5px; letter-spacing: .03em; white-space: nowrap; }
.cal-dia.on { box-shadow: 0 6px 12px -8px #082D51; }
.cal-dia.vazio .cal-bolha-area::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--line); }
.cal-bolha-area { height: 34px; }
.cal-item { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; grid-template-areas: "ic nome val" "ic meta bt";
  column-gap: 12px; row-gap: 6px; align-items: center; padding: 12px 14px; margin-bottom: 8px; border: none !important; border-radius: 16px;
  --tc: #C9573F; background: color-mix(in srgb, var(--tc) 7%, var(--card)); box-shadow: inset 4px 0 0 var(--tc); }
.cal-item.receita { --tc: #2F9E7E; }
.cal-item-ic { grid-area: ic; width: 38px; height: 38px; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: #fff;
  background: linear-gradient(135deg, color-mix(in srgb, var(--tc) 75%, #000), var(--tc)); box-shadow: 0 6px 12px -6px var(--tc); }
.cal-item-ic svg { width: 18px; height: 18px; }
.cal-item-nome { grid-area: nome; font-size: 14.5px; font-weight: 800; color: var(--ink); line-height: 1.25; overflow-wrap: anywhere; }
.cal-item-val { grid-area: val; font-size: 16px; font-weight: 800; white-space: nowrap; color: var(--tc); justify-self: end; }
.cal-item.receita .cal-item-val { color: #1F7A55; }
.cal-item-meta { grid-area: meta; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 12px; color: var(--ink-3); min-width: 0; }
.cal-atras { display: inline-flex; align-items: center; gap: 4px; font-style: normal; font-weight: 700; font-size: 11px; color: #B4503E;
  background: #C9573F1a; padding: 2px 8px; border-radius: 20px; white-space: nowrap; }
.cal-atras svg { width: 12px; height: 12px; }
.cal-item-bt { grid-area: bt; justify-self: end; display: inline-flex; align-items: center; gap: 5px; border: none; cursor: pointer; white-space: nowrap;
  padding: 7px 13px; border-radius: 20px; font: inherit; font-size: 12.5px; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, color-mix(in srgb, var(--tc) 70%, #000), var(--tc)); box-shadow: 0 6px 14px -8px var(--tc);
  transition: transform .2s var(--mola); }
.cal-item-bt svg { width: 14px; height: 14px; }
.cal-item-bt:hover { transform: translateY(-1px); } .cal-item-bt:active { transform: scale(.94); }
html.dark .cal-item { background: color-mix(in srgb, var(--tc) 12%, var(--card)); }
@media (max-width: 640px) { .cal-item .btn { margin-left: 0; } .cal-item { flex-wrap: nowrap; } }

/* ══ Relatórios: cartões para gerar os PDFs ══ */
.pdf-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.pdf-card { position: relative; overflow: hidden; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: none; border-radius: 16px; cursor: pointer;
  text-align: left; color: #fff; font: inherit;
  background: radial-gradient(90% 120% at 100% 0%, rgba(255,255,255,.25), transparent 60%), linear-gradient(135deg, var(--c1), var(--c2));
  box-shadow: 0 12px 22px -14px var(--c1); transition: transform .25s var(--mola), box-shadow .25s; }
.pdf-card:hover { transform: translateY(-3px); box-shadow: 0 16px 26px -14px var(--c1); }
.pdf-card:active { transform: scale(.96); }
.pdf-card > span { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pdf-card b { font-size: 14px; } .pdf-card small { font-size: 11.5px; opacity: .85; line-height: 1.3; }
.pdf-card > svg:last-child { width: 20px; height: 20px; flex-shrink: 0; opacity: .9; transition: transform .3s var(--mola); }
.pdf-card:hover > svg:last-child { transform: translateY(3px); }
.pdf-doc { width: 38px; height: 46px; flex-shrink: 0; filter: drop-shadow(0 4px 6px rgba(0,0,0,.25)); transition: transform .3s var(--mola); }
.pdf-card:hover .pdf-doc { transform: rotate(-8deg) scale(1.06); }
.pdf-b { transform-box: fill-box; transform-origin: 50% 100%; animation: tcBarra 2.4s ease-in-out infinite; }
.pdf-b.b2 { animation-delay: .25s; } .pdf-b.b3 { animation-delay: .5s; }
.pdf-anel { animation: pdfAnel 3s ease-in-out infinite; }
@keyframes pdfAnel { 50% { stroke-dasharray: 22 57; } }
@media (max-width: 900px) { .pdf-cards { grid-template-columns: 1fr; } }

/* ── baixa: a linha fica verde, recolhe e some ── */
.baixou { position: relative; background: linear-gradient(90deg, #2F9E7E26, #2F9E7E0d) !important; box-shadow: inset 4px 0 0 #2F9E7E !important; transition: background .2s; }
.baixou::after { content: "✓"; position: absolute; right: 14px; top: 50%; transform: translateY(-50%) scale(.4); width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-weight: 900; color: #fff; background: linear-gradient(135deg, #1F6F5C, #3EC28F);
  animation: baixouCheck .3s var(--mola) forwards; z-index: 3; }
@keyframes baixouCheck { to { transform: translateY(-50%) scale(1); } }
.saindo-baixa { overflow: hidden; opacity: 0; transform: translateX(40px); margin-top: 0 !important; margin-bottom: 0 !important;
  padding-top: 0 !important; padding-bottom: 0 !important; transition: height .4s cubic-bezier(.4,0,.2,1), opacity .25s, transform .35s, margin .4s, padding .4s; }
/* atualização silenciosa: conteúdo novo aparece já pronto, sem repetir animações de entrada */
.view-alvo.sem-anim *, .view-alvo.sem-anim::before, .view-alvo.sem-anim::after { animation-duration: 0s !important; animation-delay: 0s !important; }

/* ══ Configurações: dados de exemplo ══ */
.ex-card { position: relative; overflow: hidden; }
.ex-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 90px; pointer-events: none;
  background: linear-gradient(120deg, #2F817A1f, #C9A94E1c 50%, #C9573F14); }
.ex-card > * { position: relative; }
.ex-topo { display: flex; gap: 14px; align-items: center; margin-bottom: 10px; }
.ex-topo h3 { margin: 0 0 2px; }
.ex-fig { width: 96px; height: 64px; flex-shrink: 0; overflow: visible; }
.ex-cx { transform-box: fill-box; transform-origin: 50% 100%; animation: exCaixa 2.6s ease-in-out infinite; }
.ex-cx.c2 { animation-delay: .3s; } .ex-cx.c3 { animation-delay: .6s; }
@keyframes exCaixa { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.ex-moeda { animation: moedaPula 1.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.ex-status { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); padding: 9px 12px; border-radius: 12px; background: var(--bg); margin-bottom: 10px; }
.ex-ponto { width: 9px; height: 9px; border-radius: 50%; background: var(--line); flex-shrink: 0; }
.ex-ponto.on { background: #3EC28F; box-shadow: 0 0 0 4px #3EC28F33; animation: pisca 2s ease-in-out infinite; }
.ex-bts { display: flex; gap: 8px; flex-wrap: wrap; }
.ex-perigo { margin-top: 14px; padding: 12px 14px; border-radius: 14px; border: 1.5px dashed #C9573F66; background: #C9573F0a;
  display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.ex-perigo > div:first-child { display: flex; flex-direction: column; gap: 2px; flex: 1 1 260px; }
.ex-perigo b { color: var(--red); font-size: 13.5px; } .ex-perigo small { font-size: 12px; color: var(--ink-3); line-height: 1.4; }
.ex-zerar { color: #fff !important; border: none !important; background: linear-gradient(135deg, #A2412F, #D0624E) !important; box-shadow: 0 8px 16px -10px #A2412F; }
.dlg-digitar { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; font-size: 12.5px; color: var(--ink-2); text-align: left; }
.dlg-digitar b { color: var(--red); letter-spacing: .08em; }
.dlg-digitar input { text-transform: uppercase; letter-spacing: .12em; font-weight: 800; text-align: center; }

/* ══ Bandeiras: imagens enviadas, recorte e forma de pagamento ══ */
.xadrez { background-color: #fff; background-image: linear-gradient(45deg, #E6EAEE 25%, transparent 25%), linear-gradient(-45deg, #E6EAEE 25%, transparent 25%),
  linear-gradient(45deg, transparent 75%, #E6EAEE 75%), linear-gradient(-45deg, transparent 75%, #E6EAEE 75%);
  background-size: 14px 14px; background-position: 0 0, 0 7px, 7px -7px, -7px 0; }
.band-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.band-item { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px; border-radius: 14px; border: 1.5px dashed var(--line); text-align: center; }
.band-item.tem { border-style: solid; }
.band-item b { font-size: 12.5px; color: var(--ink); }
.band-prev { width: 100%; height: 64px; border-radius: 10px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.band-prev img { max-width: 88%; max-height: 52px; object-fit: contain; }
.band-prev span { font-size: 12px; color: var(--ink-3); background: rgba(255,255,255,.85); padding: 2px 8px; border-radius: 8px; }
.band-bts { display: flex; gap: 4px; }
/* recorte */
.rc-dica { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-2); padding: 8px 12px; border-radius: 12px; background: #2F817A12; margin-bottom: 10px; }
.rc-dica svg { width: 18px; height: 18px; color: var(--teal); flex-shrink: 0; }
.rc-area { display: flex; justify-content: center; background: #0B2540; border-radius: 14px; padding: 10px; }
.rc-area canvas { max-width: 100%; height: auto; cursor: crosshair; touch-action: none; border-radius: 6px; }
.rc-ctrl { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; margin: 12px 0; font-size: 13px; color: var(--ink-2); }
.rc-fundo, .rc-tol { display: flex; align-items: center; gap: 8px; }
.rc-tol input { width: 140px; accent-color: var(--teal); }
.rc-res { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.rc-res > span { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); }
.rc-prev-box { padding: 10px; border-radius: 12px; border: 1px solid var(--line); display: flex; }
.rc-res small { font-size: 11.5px; color: var(--ink-3); }
/* no cartão desenhado */
.cc-band.img { background: rgba(255,255,255,.94); padding: 4px 8px; display: flex; align-items: center; height: 26px; box-shadow: 0 2px 6px rgba(0,0,0,.18); }
.cc-band.img img { max-height: 18px; max-width: 70px; object-fit: contain; display: block; }
/* forma de pagamento */
.forma-grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.forma-chip { display: flex; align-items: center; justify-content: center; gap: 6px; height: 40px; padding: 0 8px; border-radius: 12px; border: 1.5px solid var(--line);
  background: var(--card); color: var(--ink-2); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; transition: all .2s var(--mola); }
.forma-chip svg { width: 16px; height: 16px; } .forma-chip img { max-height: 18px; max-width: 46px; object-fit: contain; }
.forma-chip:active { transform: scale(.94); }
.forma-chip.on { border-color: transparent; color: #fff; background: linear-gradient(135deg, #082D51, #2F817A); box-shadow: 0 6px 14px -8px #082D51; }
.forma-chip.on img { background: #fff; border-radius: 6px; padding: 2px 4px; }
.forma-selo { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; padding: 2px 8px; border-radius: 20px; background: var(--card);
  border: 1px solid var(--line); font-size: 11px; font-weight: 700; color: var(--ink-2); vertical-align: middle; height: 22px; }
.forma-selo svg { width: 12px; height: 12px; } .forma-selo img { max-height: 14px; max-width: 44px; object-fit: contain; }
.forma-grade { grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); }
.forma-chip span { white-space: nowrap; }
@media (max-width: 440px) { .forma-grade { grid-template-columns: repeat(2, 1fr); } }

/* ══ Lista de lançamentos no estilo extrato ══ */
#lanc-lista { gap: 0 !important; }
.lc-dia { display: flex; align-items: center; justify-content: space-between; padding: 14px 4px 6px; font-size: 12px; font-weight: 800;
  text-transform: capitalize; color: var(--ink-3); letter-spacing: .02em; position: sticky; top: calc(var(--topbar) + var(--safe-top)); z-index: 2;
  background: linear-gradient(var(--bg) 70%, transparent); }
.lc-dia b { font-size: 12.5px; } .lc-dia b.pos { color: #1F7A55; } .lc-dia b.neg { color: var(--ink-2); }
.lanc-card.lc { display: flex; align-items: center; gap: 12px; padding: 11px 12px; margin-bottom: 6px; border-radius: 16px; cursor: pointer;
  background: var(--card); border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(8,45,81,.04); transition: transform .15s, box-shadow .2s, border-color .2s; }
.lanc-card.lc::after { display: none; }
.lanc-card.lc:hover { border-color: color-mix(in srgb, var(--cat) 45%, var(--line)); box-shadow: 0 8px 18px -12px rgba(8,45,81,.35); }
.lanc-card.lc:active { transform: scale(.985); }
.lc-ic { width: 40px; height: 40px; border-radius: 13px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #fff;
  background: linear-gradient(135deg, color-mix(in srgb, var(--cat) 75%, #000), var(--cat)); box-shadow: 0 6px 12px -7px var(--cat); }
.lc-ic svg { width: 19px; height: 19px; }
.lc-meio { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.lc-desc { font-size: 14.5px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lc-sub { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; font-size: 11.5px; color: var(--ink-3); line-height: 1.3; }
.lc-st { font-weight: 800; }
.lc-cat::before { content: "·"; margin-right: 8px; color: var(--line); }
.lc.st-pendente .lc-st { color: #9A7A22; } .lc.st-atrasado .lc-st { color: var(--red); } .lc.st-pago .lc-st { color: #1F7A55; }
.lc.st-atrasado { border-color: #C9573F55; background: linear-gradient(90deg, #C9573F0d, var(--card) 40%); }
.lc-mini { display: inline-flex; color: var(--teal); } .lc-mini svg { width: 13px; height: 13px; }
.lc-sub .forma-selo { margin-left: 0; height: 18px; }
.lc-dir { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; }
.lc-val { font-size: 15px; font-weight: 800; white-space: nowrap; }
.lc.desp .lc-val { color: var(--ink); } .lc.rec .lc-val { color: #1F7A55; }
.lc.st-pago { opacity: .82; } .lc.st-pago .lc-val { color: var(--ink-3); }
.lc-bt { display: inline-flex; align-items: center; gap: 4px; border: none; cursor: pointer; padding: 5px 11px; border-radius: 20px; font: inherit;
  font-size: 12px; font-weight: 800; color: #fff; background: linear-gradient(135deg, #1F6F5C, #3EA88A); box-shadow: 0 6px 12px -8px #1F6F5C;
  transition: transform .2s var(--mola); }
.lc.desp .lc-bt { background: linear-gradient(135deg, #082D51, #305C74); box-shadow: 0 6px 12px -8px #082D51; }
.lc-bt svg { width: 13px; height: 13px; } .lc-bt:active { transform: scale(.92); }
.lc-mais { padding: 16px; text-align: center; font-size: 12px; color: var(--ink-3); }
/* esqueleto enquanto carrega */
.lc-esq-linha { display: flex; align-items: center; gap: 12px; padding: 12px; margin-bottom: 6px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); }
.lc-esq-linha i, .lc-esq-linha b, .lc-esq-linha small, .lc-esq-linha em { display: block; border-radius: 8px;
  background: linear-gradient(90deg, var(--bg) 25%, color-mix(in srgb, var(--line) 70%, var(--bg)) 50%, var(--bg) 75%); background-size: 200% 100%; animation: esq 1.2s linear infinite; }
.lc-esq-linha i { width: 40px; height: 40px; border-radius: 13px; } .lc-esq-linha span { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.lc-esq-linha b { height: 13px; width: 60%; } .lc-esq-linha small { height: 10px; width: 40%; } .lc-esq-linha em { width: 76px; height: 14px; }
@keyframes esq { to { background-position: -200% 0; } }

/* ══ Fatura do cartão ══ */
.cc-virar { position: absolute; right: 10px; bottom: 44%; width: 28px; height: 28px; border-radius: 50%; border: none; cursor: pointer; z-index: 3;
  background: rgba(255,255,255,.18); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); }
.cc-virar svg { width: 14px; height: 14px; } .cc-virar:hover { background: rgba(255,255,255,.32); }
.fatura-modal { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.fatura-modal::before { display: none; }
.fat-topo { position: relative; color: #fff; padding: 18px 18px 16px; touch-action: pan-y; user-select: none;
  background: radial-gradient(70% 120% at 100% 0%, rgba(255,255,255,.22), transparent 60%), linear-gradient(135deg, color-mix(in srgb, var(--cc) 70%, #000), var(--cc)); }
.fat-x { position: absolute; right: 12px; top: 12px; background: rgba(255,255,255,.18) !important; color: #fff !important; z-index: 2; }
.fat-cab { display: flex; gap: 16px; align-items: center; }
.fat-mini { flex-shrink: 0; width: 150px; } .fat-mini .cc { width: 150px; animation: none; cursor: default; }
.fat-mini .cc-face { padding: 9px 11px; border-radius: 12px; } .fat-mini .cc-num { font-size: 9px; margin: 5px 0 4px; } .fat-mini .cc-chip { width: 24px; height: 19px; }
.fat-mini .cc-aprox { width: 13px; height: 13px; } .fat-mini .cc-banco, .fat-mini .cc-nome b { font-size: 8.5px; } .fat-mini .cc-nome small { font-size: 6.5px; }
.fat-mini .cc-band { font-size: 7.5px; padding: 2px 6px; } .fat-mini .cc-band.img { height: 15px; } .fat-mini .cc-band.img img { max-height: 10px; }
.fat-resumo { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.fat-nav { display: flex; align-items: center; gap: 6px; }
.fat-seta { width: 30px; height: 30px; border-radius: 50%; border: none; background: rgba(255,255,255,.18); color: #fff; font-size: 20px; line-height: 1; cursor: pointer; }
.fat-seta:disabled { opacity: .3; cursor: default; }
.fat-mes { display: flex; flex-direction: column; } .fat-mes small { font-size: 10px; opacity: .8; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.fat-mes b { font-size: 16px; }
.fat-st { font-size: 11px; font-weight: 800; padding: 3px 10px; border-radius: 20px; background: #fff; color: var(--sc); }
.fat-total { font-size: 28px; font-weight: 800; letter-spacing: -.02em; text-shadow: 0 2px 10px rgba(0,0,0,.2); }
.fat-datas { font-size: 12px; opacity: .85; }
.fat-meses { display: flex; gap: 6px; overflow-x: auto; padding: 10px 14px; border-bottom: 1px solid var(--line); scrollbar-width: none; flex-shrink: 0; }
.fat-meses::-webkit-scrollbar { display: none; }
.fat-mes-bt { flex-shrink: 0; border: 1.5px solid var(--line); background: var(--card); color: var(--ink-2); border-radius: 20px; padding: 5px 12px; font: inherit;
  font-size: 12.5px; font-weight: 700; cursor: pointer; position: relative; }
.fat-mes-bt small { font-size: 9.5px; margin-left: 3px; opacity: .7; }
.fat-mes-bt.atual::after { content: ""; position: absolute; top: 3px; right: 5px; width: 6px; height: 6px; border-radius: 50%; background: #E9B84E; }
.fat-mes-bt.on { color: #fff; border-color: transparent; background: var(--cc); }
.fat-corpo { max-height: 50vh; overflow-y: auto; padding-top: 4px !important; }
.fat-dia { font-size: 11.5px; font-weight: 800; color: var(--ink-3); text-transform: capitalize; padding: 12px 0 4px; }
.fat-item { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); animation: itemEntra .3s var(--suave) backwards; }
.fat-item.pago { opacity: .6; }
.fat-ic { width: 34px; height: 34px; border-radius: 11px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #fff;
  background: linear-gradient(135deg, color-mix(in srgb, var(--cat) 75%, #000), var(--cat)); }
.fat-ic svg { width: 16px; height: 16px; }
.fat-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fat-txt b { font-size: 13.5px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fat-txt small { font-size: 11.5px; color: var(--ink-3); }
.fat-parc { font-weight: 800; color: var(--cc); }
.fat-val { font-size: 14px; font-weight: 800; color: var(--ink); white-space: nowrap; }
.fat-ok { width: 20px; height: 20px; border-radius: 50%; background: #2F9E7E; color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.fat-ok svg { width: 12px; height: 12px; }
.fat-pe { flex-wrap: wrap; gap: 10px; }
.fat-falta { display: flex; flex-direction: column; } .fat-falta small { font-size: 10.5px; color: var(--ink-3); font-weight: 700; text-transform: uppercase; }
.fat-falta b { font-size: 18px; color: var(--ink); }
.fat-paga, .fat-futura { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: 13px; }
.fat-paga { color: #1F7A55; } .fat-futura { color: var(--ink-3); } .fat-paga svg, .fat-futura svg { width: 18px; height: 18px; }
.fat-pagar { display: flex; gap: 10px; flex-wrap: wrap; flex: 1 1 100%; }
.fat-pagar label { display: flex; flex-direction: column; gap: 4px; font-size: 11px; font-weight: 700; color: var(--ink-3); text-transform: uppercase; flex: 1 1 160px; }
.fat-pagar select, .fat-pagar input { padding: 9px 10px; border: 1.5px solid var(--line); border-radius: 10px; background: var(--card); color: var(--ink); font: inherit; font-size: 13px; text-transform: none; }
@media (max-width: 640px) { .fat-mini { width: 112px; } .fat-mini .cc { width: 112px; } .fat-total { font-size: 24px; } .fat-corpo { max-height: none; } }
.lc-dia, .fat-dia { text-transform: none !important; }
@media (max-width: 640px) { .fat-pagar label { flex: 1 1 100%; } }

/* ══ Fatura em tela própria ══ */
.fv { display: flex; flex-direction: column; gap: 14px; }
.fv-volta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fv-cartoes { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.fv-cc { flex-shrink: 0; display: flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 20px; border: 1.5px solid var(--line); background: var(--card);
  color: var(--ink-2); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.fv-cc i { width: 10px; height: 10px; border-radius: 3px; background: var(--c); }
.fv-cc.on { color: #fff; border-color: transparent; background: var(--c); }
.fv-cc.on i { background: #fff; }
.fv-topo { display: flex; gap: 22px; align-items: center; padding: 20px; border-radius: 24px; color: #fff; touch-action: pan-y; user-select: none;
  background: radial-gradient(60% 120% at 100% 0%, rgba(255,255,255,.22), transparent 60%), radial-gradient(50% 80% at 0% 100%, rgba(0,0,0,.25), transparent 60%),
              linear-gradient(135deg, color-mix(in srgb, var(--cc) 65%, #000), var(--cc));
  box-shadow: 0 20px 40px -22px color-mix(in srgb, var(--cc) 70%, #000); animation: telaEntra .4s var(--suave) backwards; }
.fv-cartao { flex-shrink: 0; } .fv-cartao .cc { width: 300px; cursor: default; }
.fv-resumo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.fv-resumo .fat-nav { flex-wrap: wrap; }
.fv-resumo .fat-total { font-size: 36px; }
.fat-datas { display: flex; align-items: center; gap: 6px; } .fat-datas svg { width: 14px; height: 14px; }
.fv-numeros { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.fv-numeros div { display: flex; flex-direction: column; padding: 8px 12px; border-radius: 14px; background: rgba(255,255,255,.15); box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); }
.fv-numeros small { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; opacity: .85; }
.fv-numeros b { font-size: 15px; }
/* barras dos meses */
.fv-hist-tit { font-size: 13px; font-weight: 800; color: var(--ink); margin-bottom: 8px; }
.fv-hist-tit small { font-weight: 600; color: var(--ink-3); margin-left: 6px; }
.fv-barras { display: flex; gap: 6px; align-items: flex-end; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.fv-barra { flex: 1 0 48px; display: flex; flex-direction: column; align-items: center; gap: 4px; border: none; background: none; cursor: pointer; padding: 4px 2px; border-radius: 12px; font: inherit; }
.fv-barra:hover { background: var(--bg); }
.fv-b-val { font-size: 10px; font-weight: 700; color: var(--ink-3); white-space: nowrap; height: 13px; }
.fv-b-col { position: relative; width: 24px; height: 90px; border-radius: 8px; background: var(--bg); display: flex; align-items: flex-end; overflow: hidden; }
.fv-b-col i { display: block; width: 100%; border-radius: 8px; background: color-mix(in srgb, var(--cc) 35%, var(--line)); transform-origin: bottom; animation: barraCresce .7s var(--mola) backwards; }
.fv-b-col em { position: absolute; left: 0; right: 0; bottom: 0; border-radius: 8px; background: repeating-linear-gradient(45deg, #E9B84E, #E9B84E 4px, #F4D27A 4px, #F4D27A 8px); opacity: .9; }
.fv-barra.on .fv-b-col i { background: linear-gradient(180deg, color-mix(in srgb, var(--cc) 60%, #fff), var(--cc)); }
.fv-barra.on .fv-b-val { color: var(--ink); }
.fv-b-mes { font-size: 11px; font-weight: 700; color: var(--ink-3); }
.fv-barra.on .fv-b-mes { color: var(--ink); }
.fv-barra.atual .fv-b-mes::after { content: ""; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: #E9B84E; margin-left: 3px; vertical-align: middle; }
/* grade */
.fv-grade { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); gap: 14px; align-items: start; }
.fv-lado { display: flex; flex-direction: column; gap: 14px; position: sticky; top: calc(var(--topbar) + 14px); }
.fv-itens .fat-item:last-child { border-bottom: none; }
.fv-pagar { display: flex; flex-direction: column; gap: 10px; }
.fv-pagar .fat-falta b { font-size: 26px; }
.fv-campo { display: flex; flex-direction: column; gap: 4px; font-size: 11px; font-weight: 700; color: var(--ink-3); text-transform: uppercase; }
.fv-campo select, .fv-campo input { padding: 10px 11px; border: 1.5px solid var(--line); border-radius: 11px; background: var(--card); color: var(--ink); font: inherit; font-size: 13.5px; text-transform: none; }
.fv-pagar-bt { justify-content: center; padding: 12px; font-size: 14.5px; }
.fat-paga.grande, .fat-futura.grande { display: flex; gap: 10px; align-items: center; }
.fat-paga.grande svg, .fat-futura.grande svg { width: 34px; height: 34px; flex-shrink: 0; }
.fat-paga.grande span, .fat-futura.grande span { display: flex; flex-direction: column; }
.fat-paga.grande b, .fat-futura.grande b { font-size: 15px; } .fat-paga.grande small, .fat-futura.grande small { font-size: 12px; color: var(--ink-3); font-weight: 500; }
.fv-cat { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; padding: 7px 0; }
.fv-cat-nome { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--ink); }
.fv-cat-nome i { width: 9px; height: 9px; border-radius: 3px; background: var(--cat); }
.fv-cat b { font-size: 13px; color: var(--ink); }
.fv-cat-barra { grid-column: 1 / -1; height: 6px; border-radius: 6px; background: var(--bg); overflow: hidden; }
.fv-cat-barra em { display: block; height: 100%; border-radius: 6px; background: var(--cat); transform-origin: left; animation: encher .9s var(--suave) backwards; }
@media (max-width: 900px) {
  .fv-topo { flex-direction: column; align-items: stretch; padding: 16px; }
  .fv-cartao { display: flex; justify-content: center; } .fv-cartao .cc { width: min(300px, 82vw); }
  .fv-resumo .fat-total { font-size: 30px; }
  .fv-grade { grid-template-columns: 1fr; } .fv-lado { position: static; order: -1; }
}

/* ══════════════════════════════════════════════════════════════
   Cards mais coloridos, brilho que segue o mouse e WhatsApp desenhado
   ══════════════════════════════════════════════════════════════ */

/* cor de destaque de cada card vem do ícone do cabeçalho */
.card { --acc: #305C74; --acc2: #082D51;
  background-image: radial-gradient(460px circle at var(--mx, -999px) var(--my, -999px), color-mix(in srgb, var(--acc) 11%, transparent), transparent 45%);
  transition: transform .25s var(--suave), box-shadow .25s; }
.card-ico.i-navy,  .card:has(> .card-h > .card-ico.i-navy)  { --acc: #3F86C4; --acc2: #082D51; }
.card-ico.i-green, .card:has(> .card-h > .card-ico.i-green) { --acc: #3EC28F; --acc2: #1F6F5C; }
.card-ico.i-teal,  .card:has(> .card-h > .card-ico.i-teal)  { --acc: #38B9C9; --acc2: #1C6E8C; }
.card-ico.i-gold,  .card:has(> .card-h > .card-ico.i-gold)  { --acc: #E2B84E; --acc2: #8A6D1E; }
.card-ico.i-red,   .card:has(> .card-h > .card-ico.i-red)   { --acc: #E07A5F; --acc2: #9E3A2C; }
.card:has(> .card-h > .card-ico) {
  box-shadow: inset 0 3px 0 0 var(--acc), var(--shadow-sm);
  background-image:
    radial-gradient(460px circle at var(--mx, -999px) var(--my, -999px), color-mix(in srgb, var(--acc) 12%, transparent), transparent 45%),
    linear-gradient(180deg, color-mix(in srgb, var(--acc) 7%, transparent), transparent 110px);
}
.card-ico.i-navy, .card-ico.i-green, .card-ico.i-teal, .card-ico.i-gold, .card-ico.i-red {
  color: #fff;
  background: radial-gradient(120% 100% at 100% 0%, rgba(255,255,255,.35), transparent 55%), linear-gradient(135deg, var(--acc2), var(--acc));
  box-shadow: 0 8px 16px -8px var(--acc2), inset 0 0 0 1px rgba(255,255,255,.18);
  transition: transform .35s var(--mola);
}
.card:hover > .card-h > .card-ico { transform: rotate(-8deg) scale(1.07); }
/* cards que abrem algo: sobem um pouco e afundam no toque */
.card[onclick] { cursor: pointer; }
@media (hover: hover) { .card[onclick]:hover { transform: translateY(-3px); box-shadow: inset 0 3px 0 0 var(--acc), 0 18px 32px -18px color-mix(in srgb, var(--acc2) 60%, transparent); } }
.card[onclick]:active { transform: scale(.985); }

/* KPIs e atalhos: faixa de luz ao passar */
.kpi::before, .atalho::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.28) 50%, transparent 65%);
  transform: translateX(-120%); transition: transform .8s var(--suave); }
.kpi:hover::before, .atalho:hover::before { transform: translateX(120%); }
.kpi > * { position: relative; z-index: 1; }
.kpi { transition: transform .25s var(--mola), box-shadow .25s; }
@media (hover: hover) { .kpi:hover { transform: translateY(-3px) rotate(-.4deg); box-shadow: 0 18px 30px -18px rgba(8,45,81,.5); } }
.kpi:active { transform: scale(.97); }

/* ondinha nos botões claros */
.btn-ghost .ripple { background: color-mix(in srgb, var(--navy) 16%, transparent); }
html.dark .btn-ghost .ripple { background: rgba(255,255,255,.18); }

/* ── desenho do WhatsApp ── */
.wa-desenho { display: block; overflow: visible; flex-shrink: 0; }
.wa-desenho .wa-fone { transform-box: fill-box; transform-origin: center; }
svg.wa-desenho:not([width]) { width: 20px; height: 20px; }
.nav-item:hover .wa-desenho .wa-fone, .card:hover .wa-desenho .wa-fone { animation: waToca .7s ease-in-out; }
@keyframes waToca { 0%,100% { transform: rotate(0); } 20% { transform: rotate(-16deg); } 40% { transform: rotate(14deg); } 60% { transform: rotate(-8deg); } 80% { transform: rotate(5deg); } }

/* botão verde */
.btn-wa { color: #fff !important; text-decoration: none; justify-content: center; gap: 9px;
  background: linear-gradient(135deg, #0B7A5C 0%, #1DB45F 55%, #3EDB82 100%);
  box-shadow: 0 10px 20px -12px #0B7A5C, inset 0 0 0 1px rgba(255,255,255,.2);
  transition: transform .2s var(--mola), box-shadow .2s, filter .2s, background .3s; }
.btn-wa::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform .75s var(--suave); }
.btn-wa:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 14px 26px -12px #0B7A5C; filter: saturate(1.12); }
.btn-wa:hover::before { transform: translateX(120%); }
.btn-wa:disabled { opacity: .45; cursor: not-allowed; filter: grayscale(.5); }
.btn-wa .wa-ic, .hero-zap .wa-ic { width: 26px; height: 26px; border-radius: 50%; background: #fff; display: grid; place-items: center; flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0,0,0,.2); transition: transform .35s var(--mola); position: relative; z-index: 1; }
.btn-wa .wa-ic svg, .hero-zap .wa-ic svg { width: 20px; height: 20px; }
.btn-wa.btn-sm .wa-ic { width: 22px; height: 22px; } .btn-wa.btn-sm .wa-ic svg { width: 17px; height: 17px; }
.btn-wa:hover .wa-ic { transform: rotate(-12deg) scale(1.12); }
.btn-wa .wa-rot { position: relative; z-index: 1; }
.btn-wa .wa-ticks, .hero-zap .wa-ticks { display: none; color: #8EDCFF; }
.btn-wa.enviando, .hero-zap.enviando { pointer-events: none; }
.btn-wa.enviando .wa-ic, .hero-zap.enviando .wa-ic, .zap-bt.enviando .folha-bt-ic { animation: waBalanca .55s ease-in-out infinite; }
.btn-wa.enviando .wa-rot::after { content: "…"; }
.btn-wa.enviado { background: linear-gradient(135deg, #075E54, #128C7E); }
.btn-wa.enviado .wa-ticks, .hero-zap.enviado .wa-ticks { display: inline-flex; animation: icoPop .5s var(--mola); }
.btn-wa.falhou, .hero-zap.falhou, .zap-bt.falhou .folha-bt-ic { animation: waTreme .4s; }
@keyframes waBalanca { 0%,100% { transform: rotate(0) scale(1); } 25% { transform: rotate(-14deg) scale(1.08); } 75% { transform: rotate(14deg) scale(1.08); } }
@keyframes waTreme { 0%,100% { transform: none; } 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }

/* versão clara e só-ícone */
.btn-wa-claro { background: #E4F9EC; color: #0B7A55 !important; text-decoration: none; gap: 8px; box-shadow: inset 0 0 0 1.5px #A6EBC4; }
.btn-wa-claro:hover { background: #D2F5E0; transform: translateY(-1px); }
.btn-wa-claro .wa-ic { display: grid; place-items: center; } .btn-wa-claro .wa-ic svg { width: 18px; height: 18px; }
html.dark .btn-wa-claro { background: rgba(37,211,102,.12); color: #7FE3AE !important; box-shadow: inset 0 0 0 1.5px rgba(37,211,102,.35); }
.btn-wa-mini { padding: 5px 8px; }
.btn-wa-mini .wa-ic { width: 22px; height: 22px; }

/* toast verde com ✓✓ */
.toast.wa { background: linear-gradient(135deg, #075E54, #128C7E 60%, #25D366); }
.toast-wa-ic { width: 26px; height: 26px; border-radius: 50%; background: #fff; display: grid; place-items: center; flex-shrink: 0; animation: icoPop .55s var(--mola) .1s backwards; }
.toast-wa-ic svg { width: 20px; height: 20px; animation: none; }
.toast-ticks { display: inline-flex; color: #8EDCFF; animation: icoPop .5s var(--mola) .45s backwards; }
.toast-ticks svg { width: 20px; height: 13px; }

/* balão voando até o canto */
.wa-voo { position: fixed; z-index: 10000; pointer-events: none; width: 30px; height: 30px; filter: drop-shadow(0 6px 10px rgba(7,94,84,.35)); }

/* logo com ondas (folha e tela do WhatsApp) */
.zap-logo { position: relative; width: 54px; height: 54px; border-radius: 18px; background: #fff; display: grid; place-items: center; flex-shrink: 0;
  box-shadow: 0 10px 22px -10px #128C7E, inset 0 0 0 1px rgba(18,140,126,.15); }
.zap-logo .wa-desenho { position: relative; z-index: 1; filter: drop-shadow(0 3px 4px rgba(7,94,84,.25)); animation: waFlutua 3.2s ease-in-out infinite; }
.wa-onda { position: absolute; inset: 0; border-radius: inherit; border: 2px solid #25D366; opacity: 0; animation: waOnda 2.6s ease-out infinite; }
.wa-onda.o2 { animation-delay: 1.3s; }
@keyframes waOnda { 0% { transform: scale(1); opacity: .55; } 100% { transform: scale(1.55); opacity: 0; } }
@keyframes waFlutua { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.wa-hero-logo { box-shadow: 0 10px 24px -8px rgba(0,0,0,.35); }
.wa-hero-logo .wa-onda { border-color: rgba(255,255,255,.7); }

/* folha "Mandar no WhatsApp" */
.zap-cab { display: flex; align-items: center; gap: 14px; margin: 4px 2px 18px; }
.folha-zap .folha-caixa { background-image: linear-gradient(180deg, rgba(37,211,102,.10), transparent 140px); }
.folha-zap .folha-grade { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 520px) { .folha-zap .folha-grade { grid-template-columns: repeat(4, 1fr); } }
.zap-bt .folha-bt-ic { position: relative; }
.zap-mini { position: absolute; left: -6px; top: -6px; width: 22px; height: 22px; border-radius: 50%; background: #fff; display: grid; place-items: center;
  box-shadow: 0 2px 6px rgba(0,0,0,.2); }
.zap-mini svg { width: 16px; height: 16px; }
.zap-ok { position: absolute; right: -7px; bottom: -7px; width: 26px; height: 22px; border-radius: 11px; background: #fff; color: #34B7F1;
  display: none; place-items: center; box-shadow: 0 2px 6px rgba(0,0,0,.2); }
.zap-ok svg { width: 18px; height: 12px; }
.zap-bt.enviado .zap-ok { display: grid; animation: icoPop .5s var(--mola); }
.zap-bt.enviado > span:last-child { color: #128C7E; }
.zap-config { width: 100%; justify-content: center; margin-top: 16px; }
/* item "Recibo no WhatsApp" do menu do lançamento: balão sobre fundo claro */
.folha-bt-ic .wa-desenho { width: 30px !important; height: 30px !important; filter: drop-shadow(0 2px 3px rgba(7,94,84,.3)); }

/* faixa de envio (Vencimentos) */
.wa-faixa { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; padding: 14px 16px; border-radius: 16px;
  background: linear-gradient(135deg, rgba(37,211,102,.14), rgba(18,140,126,.06)); border: 1.5px solid rgba(37,211,102,.35); }
.wa-faixa-txt { flex: 1; min-width: 180px; display: flex; flex-direction: column; gap: 2px; }
.wa-faixa-txt b { color: #0B6E52; font-size: 14px; } .wa-faixa-txt small { color: var(--ink-3); font-size: 12px; }
html.dark .wa-faixa-txt b { color: #7FE3AE; }

/* contato */
.wa-contato { display: flex; gap: 8px; flex-wrap: wrap; margin: -4px 0 16px; }

/* botão do resumo no topo do painel */
.hero-zap { position: absolute; top: 12px; right: 12px; z-index: 3; display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  padding: 4px 11px 4px 4px; border-radius: 20px; border: none; font: inherit; font-size: 12px; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, #128C7E, #25D366); box-shadow: 0 8px 18px -8px #25D366, inset 0 0 0 1px rgba(255,255,255,.25);
  transition: transform .2s var(--mola), box-shadow .2s; }
.hero-zap:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 12px 22px -8px #25D366; }
.hero-zap:active { transform: scale(.94); }
.hero-zap.enviado { background: linear-gradient(135deg, #075E54, #128C7E); }
.atalho[data-acao="zap"] .atalho-ic { background: #fff; }
.atalho[data-acao="zap"] .atalho-ic svg { width: 26px; height: 26px; }
.atalho[data-acao="zap"]:hover .atalho-ic .wa-fone { animation: waToca .7s ease-in-out; }

@media (prefers-reduced-motion: reduce) {
  .card, .kpi, .btn-wa, .hero-zap { transform: none !important; }
  .wa-onda { display: none; }
}
/* o balão do WhatsApp não leva contorno e fica sobre fundo branco nos ícones de cabeçalho */
svg.wa-desenho, .card .card-ico svg.wa-desenho, .modal-h .card-ico svg.wa-desenho { stroke: none; }
.card-ico:has(.wa-desenho) { background: #fff !important; box-shadow: 0 8px 16px -8px #128C7E, inset 0 0 0 1px rgba(18,140,126,.18); }
.card-ico .wa-desenho { width: 24px !important; height: 24px !important; }
.wa-diag-ic { display: inline-flex; } .wa-diag-ic svg { width: 20px; height: 20px; }
/* 12 atalhos: duas linhas de 6 no computador */
@media (min-width: 900px) { .atalhos { grid-template-columns: repeat(6, 1fr); } }
/* no celular o botão do resumo vira só o balão, para não cobrir a data */
@media (max-width: 640px) {
  .hero-zap { padding: 4px; top: 10px; right: 10px; }
  .hero-zap .hero-zap-rot { display: none; }
  .hero-zap.enviado .wa-ticks { position: absolute; right: -8px; bottom: -8px; background: #fff; border-radius: 9px; padding: 2px 3px; color: #34B7F1; }
}

/* ── crédito: UniController · Dev Jackson Tomelin ── */
.credito-dev { font-size: 11.5px; color: var(--ink-3); letter-spacing: .01em; line-height: 1.4; }
.credito-dev b { font-weight: 800; color: var(--navy); }
html.dark .credito-dev b { color: #E9F0F7; }
.cd-login { color: rgba(255,255,255,.62); margin-bottom: 4px; }
.cd-login b { color: #E2C46E; }
html.dark .cd-login b { color: #E2C46E; }
.cd-mais { text-align: center; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.sb-cred { font-size: 9.5px; opacity: .45; margin-top: 2px; font-weight: 600; letter-spacing: .03em; white-space: nowrap; }
.sobre-card { display: flex; align-items: center; gap: 16px; margin-top: 16px; }
.sobre-card h3 { font-size: 15px; font-weight: 800; color: var(--navy); margin: 0 0 3px; }
html.dark .sobre-card h3 { color: #E9F0F7; }
.sobre-card .credito-dev { font-size: 13px; }
.sobre-logo { width: 46px; height: 46px; border-radius: 14px; background: #fff; display: grid; place-items: center; flex-shrink: 0;
  box-shadow: 0 8px 18px -10px rgba(8,45,81,.5), inset 0 0 0 1px var(--line); }
.sobre-logo img { width: 26px; height: auto; }

/* ── backups automáticos ── */
.bk-auto { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--line); }
.bk-topo { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.bk-topo > div { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 3px; }
.bk-topo b { color: var(--navy); font-size: 14px; } html.dark .bk-topo b { color: var(--ink); }
.bk-topo small { color: var(--ink-3); font-size: 12px; }
.bk-st { font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 99px; background: var(--line-2); color: var(--ink-3); margin-left: 4px; }
.bk-st.on { background: rgba(47,158,126,.14); color: #1F7A5C; } html.dark .bk-st.on { color: #7FD8B6; }
.bk-erro { display: flex; gap: 8px; align-items: center; margin-top: 10px; padding: 9px 12px; border-radius: 10px; font-size: 12.5px;
  background: rgba(201,87,63,.1); color: var(--red); } .bk-erro svg { width: 16px; height: 16px; flex-shrink: 0; }
.bk-lista { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.bk-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: var(--bg); }
.bk-item b { font-size: 13px; } .bk-item small { display: block; font-size: 11.5px; color: var(--ink-3); }
.bk-ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: #fff; flex-shrink: 0;
  background: linear-gradient(135deg, #1F6F5C, #3EC28F); } .bk-ic svg { width: 16px; height: 16px; }

/* ── Imposto de Renda ── */
.ir-anos { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.ir-ano { border: 0; cursor: pointer; padding: 7px 14px; border-radius: 99px; font: inherit; font-weight: 800; font-size: 13px;
  background: var(--bg); color: var(--ink-2); box-shadow: inset 0 0 0 1.5px var(--line); }
.ir-ano.on { background: linear-gradient(135deg, #14594C, #3EC28F); color: #fff; box-shadow: none; }
.ir-total { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 16px; border-radius: 16px; margin-bottom: 12px; color: #fff;
  background: radial-gradient(120% 100% at 100% 0%, rgba(255,255,255,.22), transparent 55%), linear-gradient(135deg, #14594C, #2F9E7E); }
.ir-total small { opacity: .8; font-size: 12px; } .ir-total b { font-size: 28px; } .ir-total span { font-size: 12px; opacity: .85; }
.ir-alerta { display: flex; gap: 9px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; margin-bottom: 8px; font-size: 13px;
  background: rgba(201,87,63,.1); color: var(--red); } .ir-alerta svg { width: 17px; height: 17px; flex-shrink: 0; margin-top: 1px; }
.ir-alerta.amarelo { background: rgba(201,169,78,.16); color: #8A6D1E; } html.dark .ir-alerta.amarelo { color: #E2C46E; }
.ir-grupo { border-radius: 14px; overflow: hidden; margin: 10px 0; box-shadow: inset 0 0 0 1px var(--line); }
.ir-g-topo { display: flex; justify-content: space-between; padding: 10px 14px; color: #fff; font-size: 14px; background: linear-gradient(135deg, var(--c1), var(--c2)); }
.ir-prest { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-top: 1px solid var(--line); font-size: 13px; }
.ir-prest small { display: block; color: var(--ink-3); font-size: 11.5px; } .ir-prest em { color: var(--red); font-style: normal; font-weight: 700; }
.ir-cats { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; font-size: 12px; color: var(--ink-3); }
.ir-cats small { width: 100%; }
.ir-chip { padding: 3px 10px; border-radius: 99px; background: rgba(47,158,126,.12); color: #1F7A5C; font-weight: 700; }
html.dark .ir-chip { color: #7FD8B6; }

/* ── quem paga ── */
.quem-grade { display: flex; flex-wrap: wrap; gap: 6px; }
.quem-opt { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 6px; border: 0; cursor: pointer; border-radius: 99px;
  font: inherit; font-size: 13px; font-weight: 700; color: var(--ink-2); background: var(--bg); box-shadow: inset 0 0 0 1.5px var(--line);
  transition: transform .15s var(--mola), background .15s; }
.quem-opt svg { width: 20px; height: 20px; padding: 3px; border-radius: 50%; color: #fff; background: var(--c); box-sizing: content-box; }
.quem-opt.on { background: color-mix(in srgb, var(--c) 16%, var(--card)); color: var(--ink); box-shadow: inset 0 0 0 2px var(--c); }
.quem-opt:active { transform: scale(.94); }
.lc-quem { display: inline-flex; align-items: center; gap: 3px; font-weight: 700; color: var(--teal); }
.lc-quem svg { width: 11px; height: 11px; }
.filtro-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.filtro-chips:not(:empty) { margin: -4px 0 10px; }
.filtro-chip { display: inline-flex; align-items: center; gap: 6px; border: 0; cursor: pointer; padding: 6px 10px; border-radius: 99px; font: inherit;
  font-size: 12.5px; font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--navy), #305C74); }
.filtro-chip svg { width: 14px; height: 14px; } .filtro-chip svg:last-child { opacity: .75; }
.pp-linha { display: flex; align-items: center; gap: 12px; padding: 10px 6px; border-radius: 12px; cursor: pointer; transition: background .15s; }
.pp-linha:hover { background: var(--bg); }
.pp-av { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: #fff; flex-shrink: 0;
  background: var(--c); box-shadow: 0 6px 12px -6px var(--c); } .pp-av svg { width: 20px; height: 20px; }
.pp-linha b { font-size: 13.5px; } .pp-linha small { display: block; font-size: 11.5px; color: var(--ink-3); margin-top: 3px; }
.pp-barra { display: flex; height: 7px; border-radius: 4px; background: var(--line-2); overflow: hidden; margin-top: 5px; }
.pp-barra i { background: var(--c); } .pp-barra em { background: repeating-linear-gradient(45deg, var(--c), var(--c) 3px, transparent 3px, transparent 6px); opacity: .55; }
.pp-tot { font-weight: 800; font-size: 13.5px; }

/* ── documentos emitidos ── */
.doc-topo { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.doc-info { display: flex; gap: 10px; align-items: flex-start; padding: 11px 14px; border-radius: 14px; margin-bottom: 14px; font-size: 12.5px;
  color: var(--ink-2); background: linear-gradient(135deg, rgba(47,158,126,.12), rgba(48,92,116,.06)); }
.doc-info svg { width: 18px; height: 18px; color: #2F9E7E; flex-shrink: 0; }
.doc-lista { display: flex; flex-direction: column; gap: 8px; }
.doc-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: var(--card);
  box-shadow: inset 0 0 0 1px var(--line), var(--shadow-sm); animation: telaEntra .4s var(--suave) backwards; animation-delay: calc(var(--i) * 30ms); }
.doc-ic { position: relative; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; color: #fff; flex-shrink: 0;
  background: radial-gradient(120% 100% at 100% 0%, rgba(255,255,255,.3), transparent 55%), linear-gradient(135deg, var(--c1), var(--c2));
  box-shadow: 0 8px 16px -8px var(--c1); } .doc-ic svg { width: 21px; height: 21px; }
.doc-ic em { position: absolute; bottom: -6px; font-style: normal; font-size: 9px; font-weight: 800; padding: 1px 5px; border-radius: 6px; background: #3A4654; }
.doc-txt { min-width: 0; } .doc-txt b { display: block; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doc-txt small { display: block; font-size: 12px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doc-cod code { font-size: 11px; letter-spacing: .04em; }
.doc-val { font-weight: 800; font-size: 14px; white-space: nowrap; }
.doc-bts { display: flex; gap: 4px; flex-shrink: 0; } .doc-bts .btn { padding: 6px 8px; } .doc-bts svg { width: 16px; height: 16px; }
@media (max-width: 640px) {
  .doc-item { flex-wrap: wrap; } .doc-txt { flex: 1 1 calc(100% - 60px); }
  .doc-val { margin-left: 56px; } .doc-bts { margin-left: auto; }
}

/* ── histórico de alterações ── */
.hi-lista { display: flex; flex-direction: column; position: relative; }
.hi-lista::before { content: ""; position: absolute; left: 17px; top: 18px; bottom: 18px; width: 2px; background: var(--line); }
.hi { position: relative; display: flex; gap: 12px; padding: 8px 0; }
.hi-ic { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: #fff; flex-shrink: 0; z-index: 1;
  background: linear-gradient(135deg, var(--c1), var(--c2)); box-shadow: 0 0 0 3px var(--card), 0 6px 12px -6px var(--c1); }
.hi-ic svg { width: 16px; height: 16px; }
.hi-top { font-size: 13px; line-height: 1.45; } .hi-top span { color: var(--ink-3); }
.hi-top a { color: var(--c1); font-weight: 700; cursor: pointer; } html.dark .hi-top a { color: var(--c2); }
.hi-top small { display: block; color: var(--ink-3); font-size: 11.5px; }
.hi-mud { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; font-size: 12px; padding: 5px 9px; border-radius: 9px;
  background: var(--bg); width: fit-content; max-width: 100%; }
.hi-mud span { color: var(--ink-3); font-weight: 700; } .hi-mud s { color: var(--red); opacity: .8; } .hi-mud b { color: #1F7A5C; }
html.dark .hi-mud b { color: #7FD8B6; } .hi-mud em { color: var(--red); font-style: normal; }

/* ── bandeira no cartão: sem fundo e maior ── */
.cc-band.img { background: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; padding: 0; border-radius: 0; height: 46px; }
.cc-band.img img { max-height: 44px; max-width: 112px; filter: drop-shadow(0 2px 5px rgba(0,0,0,.35)); transition: transform .3s var(--mola); }
.cc:hover .cc-band.img img { transform: scale(1.06); }
.cc.mini .cc-band.img { height: 36px; } .cc.mini .cc-band.img img { max-height: 34px; max-width: 90px; }
.fat-mini .cc-band.img { height: 22px; } .fat-mini .cc-band.img img { max-height: 20px; max-width: 52px; }

/* ── restaurar backup ── */
.bk-bts { display: flex; gap: 6px; flex-wrap: wrap; }
.bk-r-arq { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 14px; cursor: pointer; border: 2px dashed var(--line);
  background: var(--bg); transition: border-color .2s; } .bk-r-arq:hover { border-color: var(--teal); }
.bk-r-arq input { display: none; } .bk-r-arq svg { width: 26px; height: 26px; color: var(--teal); transform: rotate(180deg); }
.bk-r-arq b { display: block; font-size: 14px; } .bk-r-arq small { color: var(--ink-3); font-size: 12px; }
.bk-r-info { display: flex; gap: 9px; align-items: center; margin-top: 10px; padding: 10px 12px; border-radius: 12px; font-size: 13px; background: var(--bg); }
.bk-r-info svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--teal); }
.bk-r-info.ok { background: rgba(47,158,126,.1); } .bk-r-info.amarelo { background: rgba(201,169,78,.15); } .bk-r-info.amarelo svg { color: #8A6D1E; }
.bk-r-info.erro { background: rgba(201,87,63,.1); color: var(--red); } .bk-r-info.erro svg { color: var(--red); }
.bk-r-aviso { display: flex; gap: 10px; margin-top: 12px; padding: 12px 14px; border-radius: 12px; font-size: 12.5px; line-height: 1.5;
  background: rgba(201,87,63,.08); color: var(--ink-2); box-shadow: inset 3px 0 0 var(--red); }
.bk-r-aviso svg { width: 18px; height: 18px; color: var(--red); flex-shrink: 0; margin-top: 2px; }

/* ── fornecedor da compra ── */
.forn-box { display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 14px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); }
.forn-box.tem .forn-busca, .forn-box.tem .forn-chips { display: none; }
.forn-escolhido { display: flex; align-items: center; gap: 12px; padding: 6px; border-radius: 12px; background: var(--card);
  box-shadow: 0 6px 16px -10px rgba(8,45,81,.4); animation: icoPop .4s var(--mola); }
.forn-escolhido b { display: block; font-size: 14px; } .forn-escolhido small { color: var(--ink-3); font-size: 12px; }
.forn-busca { background: var(--card); }
.forn-chips { display: flex; flex-wrap: wrap; gap: 6px; max-height: 150px; overflow-y: auto; }
.forn-chip { display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px 4px 4px; border: 0; cursor: pointer; border-radius: 99px;
  font: inherit; font-size: 12.5px; font-weight: 700; color: var(--ink); background: var(--card); box-shadow: inset 0 0 0 1.5px var(--line);
  transition: transform .15s var(--mola), box-shadow .15s; }
.forn-chip:hover { box-shadow: inset 0 0 0 1.5px var(--teal); transform: translateY(-1px); }
.forn-chip:active { transform: scale(.95); }
.forn-chip .lg-av { border-radius: 50%; }
.forn-chip.novo { padding-left: 10px; color: #fff; background: linear-gradient(135deg, #1F6F5C, #3EC28F); box-shadow: none; }
.forn-chip.novo svg { width: 15px; height: 15px; }
.fat-ic.fat-logo { background: none !important; box-shadow: none; padding: 0; }
.fat-ic.fat-logo .lg-av { border-radius: 11px; }
.forn-escolhido .grow { flex: 1; min-width: 0; }
.forn-escolhido b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.forn-box .forn-busca { display: flex; align-items: center; gap: 8px; padding: 0 12px; border-radius: 12px; background: var(--card);
  box-shadow: inset 0 0 0 1.5px var(--line); border: 0; }
.forn-box .forn-busca:focus-within { box-shadow: inset 0 0 0 2px var(--teal); }
.forn-box .forn-busca > span { display: flex; position: static; color: var(--ink-3); } .forn-box .forn-busca > span svg { width: 17px; height: 17px; }
.forn-box .forn-busca input { flex: 1; min-width: 0; border: 0 !important; background: transparent !important; box-shadow: none !important;
  padding: 11px 0 !important; outline: none; }

/* ── compra com a cor do logo do fornecedor ── */
.fat-item.com-forn { margin: 6px 0; padding: 9px 12px; border-bottom: none; border-radius: 14px;
  background: linear-gradient(100deg, color-mix(in srgb, var(--forn) 24%, var(--card)), color-mix(in srgb, var(--forn) 7%, var(--card)) 75%);
  box-shadow: inset 4px 0 0 var(--forn), 0 6px 14px -12px var(--forn); transition: transform .2s var(--mola); }
.fat-item.com-forn:hover { transform: translateX(3px); }
.fat-item.com-forn .fat-logo .lg-av { box-shadow: 0 0 0 2px var(--card), 0 0 0 3.5px var(--forn); }
.fat-item.com-forn .fat-parc { background: color-mix(in srgb, var(--forn) 30%, transparent); color: var(--ink); }
.compra-card.com-forn { --acc: var(--forn); --acc2: var(--forn);
  background-image: linear-gradient(135deg, color-mix(in srgb, var(--forn) 20%, transparent), transparent 65%);
  box-shadow: inset 0 4px 0 0 var(--forn), 0 10px 24px -18px var(--forn); }
.compra-card.com-forn .lg-av { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--forn); }
html.dark .fat-item.com-forn { background: linear-gradient(100deg, color-mix(in srgb, var(--forn) 26%, var(--card)), var(--card) 80%); }
.compra-card .sub svg, .compra-card .btn svg { width: 15px; height: 15px; vertical-align: -3px; }

/* ══ abertura ao entrar: histórias ══ */
.bv { position: fixed; inset: 0; z-index: 9000; display: grid; place-items: center; padding: 16px; }
.bv-fundo { position: absolute; inset: 0; background: rgba(4,16,30,.62); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .3s; }
.bv.aberta .bv-fundo { opacity: 1; }
.bv-caixa { --c1: #06243F; --c2: #2F817A; position: relative; width: 100%; max-width: 420px; height: min(640px, calc(100dvh - 32px));
  border-radius: 28px; overflow: hidden; color: #fff; display: flex; flex-direction: column; touch-action: pan-y; user-select: none;
  background: radial-gradient(120% 70% at 100% 0%, rgba(255,255,255,.22), transparent 55%), linear-gradient(160deg, var(--c1), var(--c2));
  box-shadow: 0 40px 80px -30px rgba(0,0,0,.6); transition: background .5s;
  transform: translateY(40px) scale(.92); opacity: 0; transition: transform .45s var(--mola), opacity .3s, --c1 .5s, --c2 .5s; }
.bv.aberta .bv-caixa { transform: none; opacity: 1; }
.bv.saindo .bv-caixa { transform: translateY(30px) scale(.95); opacity: 0; }
.bv-caixa::before { content: ""; position: absolute; width: 260px; height: 260px; border-radius: 50%; right: -90px; bottom: 60px;
  background: rgba(255,255,255,.07); pointer-events: none; }
.bv-segs { display: flex; gap: 5px; padding: 14px 54px 0 16px; position: relative; z-index: 2; }
.bv-seg { flex: 1; height: 3.5px; border-radius: 3px; background: rgba(255,255,255,.28); overflow: hidden; }
.bv-seg i { display: block; height: 100%; width: 0; background: #fff; border-radius: 3px; }
.bv-seg.feito i { width: 100%; }
.bv-seg.ativo i { animation: bvSeg 7s linear forwards; }
.bv-caixa.pausa .bv-seg.ativo i { animation-play-state: paused; }
@keyframes bvSeg { to { width: 100%; } }
.bv-x { position: absolute; top: 8px; right: 10px; z-index: 3; width: 36px; height: 36px; border-radius: 50%; border: 0; cursor: pointer;
  color: #fff; background: rgba(255,255,255,.14); display: grid; place-items: center; } .bv-x svg { width: 18px; height: 18px; }
.bv-trilho { flex: 1; display: flex; transition: transform .45s var(--suave); min-height: 0; }
.bv-slide { flex: 0 0 100%; padding: 18px 22px 8px; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; scrollbar-width: none; }
.bv-slide > * { animation: bvEntra .5s var(--suave) backwards; }
.bv-slide > *:nth-child(2) { animation-delay: .06s; } .bv-slide > *:nth-child(3) { animation-delay: .12s; }
.bv-slide > *:nth-child(4) { animation-delay: .18s; } .bv-slide > *:nth-child(n+5) { animation-delay: .24s; }
@keyframes bvEntra { from { opacity: 0; transform: translateY(14px); } }
.bv-ola { display: flex; align-items: center; gap: 12px; }
.bv-ola b { display: block; font-size: 20px; } .bv-ola small { opacity: .75; font-size: 13px; }
.bv-per { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.14); flex-shrink: 0; }
.bv-per svg { width: 30px; height: 30px; }
.bv-masc { align-self: center; width: 150px; margin: 4px 0 -4px; filter: drop-shadow(0 14px 20px rgba(0,0,0,.3)); animation: bvFlutua 3s ease-in-out infinite, bvEntra .5s var(--suave) backwards; }
.bv-masc svg { width: 100%; height: auto; }
@keyframes bvFlutua { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.bv-rot { text-align: center; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; opacity: .7; }
.bv-grande { text-align: center; font-size: clamp(30px, 9vw, 40px); font-weight: 900; letter-spacing: -.02em; margin-top: -6px; text-shadow: 0 4px 16px rgba(0,0,0,.25); }
.bv-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.bv-chips span { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 99px; font-size: 12.5px; font-weight: 700;
  background: rgba(255,255,255,.15); box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); }
.bv-chips span.ok { background: rgba(110,230,170,.22); } .bv-chips span.ruim { background: rgba(255,130,110,.25); }
.bv-chips svg { width: 15px; height: 15px; }
.bv-tit { display: flex; align-items: center; gap: 12px; }
.bv-tit > svg { width: 44px; height: 44px; padding: 11px; border-radius: 15px; background: rgba(255,255,255,.16); flex-shrink: 0; box-sizing: border-box; }
.bv-tit b { display: block; font-size: 18px; } .bv-tit small { opacity: .8; font-size: 13px; }
.bv-lista { display: flex; flex-direction: column; gap: 8px; }
.bv-conta { display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 12px; border-radius: 16px; background: rgba(255,255,255,.12);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); transition: opacity .4s, transform .4s var(--mola), background .3s; }
.bv-conta.atras { box-shadow: inset 3px 0 0 #FFB3A3, inset 0 0 0 1px rgba(255,255,255,.14); }
.bv-conta b { display: block; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bv-conta small { opacity: .75; font-size: 12px; } .bv-conta .grow { flex: 1; min-width: 0; }
.bv-c-ic { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: rgba(255,255,255,.16); flex-shrink: 0; }
.bv-c-ic svg { width: 16px; height: 16px; }
.bv-c-v { font-weight: 800; font-size: 13.5px; white-space: nowrap; }
.bv-pagar { display: inline-flex; align-items: center; gap: 5px; border: 0; cursor: pointer; padding: 8px 11px; border-radius: 12px; font: inherit;
  font-size: 12.5px; font-weight: 800; color: #0B5A45; background: #fff; box-shadow: 0 6px 14px -8px rgba(0,0,0,.5); transition: transform .15s var(--mola); }
.bv-pagar:active { transform: scale(.92); } .bv-pagar svg { width: 15px; height: 15px; }
.bv-conta.paga { background: rgba(110,230,170,.28); transform: scale(.97); }
.bv-conta.paga b { text-decoration: line-through; opacity: .7; }
.bv-conta.paga .bv-pagar { pointer-events: none; color: #fff; background: #2F9E7E; }
.bv-conta.paga .bv-pagar::after { content: "Pago!"; } .bv-conta.paga .bv-pagar { font-size: 0; } .bv-conta.paga .bv-pagar::after { font-size: 12.5px; }
.bv-mais { text-align: center; font-size: 12.5px; opacity: .75; }
.bv-centro { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 10px; }
.bv-ok { width: 110px; height: 110px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.16);
  animation: bvPulso 2s ease-in-out infinite; } .bv-ok svg { width: 64px; height: 64px; }
@keyframes bvPulso { 0%,100% { box-shadow: 0 0 0 0 rgba(255,255,255,.35); } 50% { box-shadow: 0 0 0 18px rgba(255,255,255,0); } }
.bv-tit-g { font-size: 28px; } .bv-centro small { opacity: .8; font-size: 14px; max-width: 260px; }
.bv-orc { padding: 10px 12px; border-radius: 14px; background: rgba(255,255,255,.12); }
.bv-orc-top { display: flex; justify-content: space-between; gap: 8px; font-size: 13.5px; } .bv-orc-top span { font-size: 12px; opacity: .8; }
.bv-orc small { font-size: 12px; opacity: .8; }
.bv-barra { height: 9px; border-radius: 6px; background: rgba(255,255,255,.2); overflow: hidden; margin: 7px 0 5px; }
.bv-barra i { display: block; height: 100%; width: var(--w); border-radius: 6px; background: #fff; animation: bvBarra 1s var(--suave) .3s backwards; }
.bv-barra.estourado i { background: #FFB3A3; } .bv-barra.atencao i { background: #FFE08A; }
@keyframes bvBarra { from { width: 0; } }
.bv-meta { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 16px; background: rgba(255,255,255,.12); }
.bv-meta b { display: block; font-size: 14px; } .bv-meta small { opacity: .8; font-size: 12px; } .bv-meta .grow { flex: 1; min-width: 0; }
.bv-anel { --p: 0; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0;
  background: conic-gradient(#fff calc(var(--p) * 1%), rgba(255,255,255,.2) 0); position: relative; }
.bv-anel::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--c1); }
.bv-anel b { position: relative; font-size: 12.5px; }
.bv-prev { border-radius: 16px; background: rgba(255,255,255,.95); padding: 6px; color: var(--ink); }
.bv-prev svg { width: 100%; height: auto; display: block; }
.bv-alerta { display: flex; gap: 8px; align-items: center; padding: 10px 12px; border-radius: 12px; background: rgba(0,0,0,.2); font-size: 13px; font-weight: 700; }
.bv-alerta svg { width: 18px; height: 18px; flex-shrink: 0; }
.bv-pe { padding: 10px 16px 16px; display: flex; flex-direction: column; gap: 10px; position: relative; z-index: 2;
  background: linear-gradient(transparent, rgba(0,0,0,.18)); }
.bv-ocultar { display: flex; align-items: center; gap: 8px; font-size: 12.5px; opacity: .85; cursor: pointer; }
.bv-ocultar input { width: 16px; height: 16px; accent-color: #fff; }
.bv-bts { display: flex; gap: 8px; }
.bv-bt { flex: 1; border: 0; cursor: pointer; padding: 13px 16px; border-radius: 16px; font: inherit; font-weight: 800; font-size: 14.5px;
  color: var(--c1); background: #fff; box-shadow: 0 10px 20px -12px rgba(0,0,0,.6); transition: transform .15s var(--mola); }
.bv-bt:active { transform: scale(.96); }
.bv-bt.claro { color: #fff; background: rgba(255,255,255,.16); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.35); }
@media (max-width: 480px) { .bv { padding: 0; } .bv-caixa { max-width: none; height: 100dvh; border-radius: 0; } .bv-segs { padding-top: max(14px, env(safe-area-inset-top)); } }
@media (prefers-reduced-motion: reduce) { .bv-seg.ativo i { animation: none; width: 100%; } .bv-masc { animation: none; } }
.bv-conta.paga .bv-pagar svg { display: none; }

/* ── transição depois do login ── */
.entrada { position: fixed; inset: 0; z-index: 9500; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  color: #fff; text-align: center; padding: 20px;
  background: radial-gradient(80% 60% at 50% 30%, rgba(47,129,122,.55), transparent 70%), linear-gradient(160deg, #06243F, #082D51 60%, #0E3A63);
  animation: entradaVem .35s var(--suave); transition: opacity .45s, transform .45s var(--suave); }
.entrada.sai { opacity: 0; transform: scale(1.06); pointer-events: none; }
@keyframes entradaVem { from { opacity: 0; } }
.entrada-logo { width: 96px; height: 96px; border-radius: 28px; background: #fff; display: grid; place-items: center; margin-bottom: 8px;
  box-shadow: 0 20px 40px -14px rgba(0,0,0,.6); animation: entradaLogo .7s var(--mola); }
.entrada-logo img { width: 58px; height: auto; }
@keyframes entradaLogo { from { transform: scale(.4) rotate(-12deg); opacity: 0; } }
.entrada b { font-size: 22px; animation: bvEntra .5s var(--suave) .15s backwards; }
.entrada small { opacity: .7; font-size: 14px; animation: bvEntra .5s var(--suave) .25s backwards; }
.entrada-barra { width: 160px; height: 4px; border-radius: 4px; margin-top: 10px; background: rgba(255,255,255,.18); overflow: hidden; position: relative; }
.entrada-barra::after { content: ""; position: absolute; inset: 0; width: 40%; border-radius: 4px; background: linear-gradient(90deg, #2F817A, #E2C46E);
  animation: entradaBarra 1s ease-in-out infinite; }
@keyframes entradaBarra { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
/* bandeira que já tem fundo colorido: inteira, com cantos arredondados */
.cc-band.img img.com-fundo { border-radius: 7px; box-shadow: 0 2px 6px rgba(0,0,0,.25); filter: none; }

/* ── bandeira no cartão: tamanho de cartão de verdade e contraste automático ── */
.cc-band.img { height: 34px; }
.cc-band.img img { max-height: 30px; max-width: 78px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.3)); }
.cc-band.img img.branca { filter: brightness(0) invert(1) drop-shadow(0 1px 2px rgba(0,0,0,.35)); }
.cc-band.img img.selo { background: rgba(255,255,255,.95); padding: 4px 7px; border-radius: 8px; box-shadow: 0 2px 6px rgba(0,0,0,.2); filter: none; box-sizing: content-box; max-height: 22px; }
.cc-band.img img.com-fundo { max-height: 28px; border-radius: 6px; }
.cc.mini .cc-band.img { height: 28px; } .cc.mini .cc-band.img img { max-height: 24px; max-width: 64px; }
.cc.mini .cc-band.img img.selo { max-height: 18px; }
.fat-mini .cc-band.img img { max-height: 16px; max-width: 44px; }

/* ── WhatsApp: ✓ cinza (indo para o grupo) e ✓✓ azul (chegou) ── */
.btn-wa.fila .wa-ticks, .hero-zap.fila .wa-ticks { display: inline-flex; color: rgba(255,255,255,.75); }
.btn-wa.fila .wa-ticks path:last-child, .hero-zap.fila .wa-ticks path:last-child, .zap-bt.fila .zap-ok path:last-child { display: none; }
.btn-wa.fila .wa-ic, .hero-zap.fila .wa-ic, .zap-bt.fila .folha-bt-ic { animation: waRespira 1.2s ease-in-out infinite; }
.zap-bt.fila .zap-ok { display: grid; color: #9AA8B6; }
@keyframes waRespira { 0%,100% { transform: scale(1); } 50% { transform: scale(1.1); } }
.btn-wa.enviando .wa-rot::after { content: ""; }
.toast.wa.fila .toast-ticks { color: rgba(255,255,255,.75); }
.toast.wa.fila .toast-ticks path:last-child { display: none; }

/* ── comparativo ano a ano ── */
.cp-ctrl { display: flex; gap: 8px; flex-wrap: wrap; justify-content: space-between; margin-bottom: 12px; }
.cp-ctrl .seg { flex: 0 1 auto; }
.cp-total { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.cp-total small { display: block; font-size: 12px; color: var(--ink-3); } .cp-total b { font-size: 24px; font-weight: 900; }
.cp-var { text-align: right; font-weight: 800; font-size: 14px; padding: 6px 12px; border-radius: 12px; }
.cp-var.bom { color: #1F7A5C; background: rgba(47,158,126,.12); } .cp-var.ruim { color: var(--red); background: rgba(201,87,63,.1); }
html.dark .cp-var.bom { color: #7FD8B6; }
.cp-graf { width: 100%; height: auto; display: block; }
.cp-graf text { font-size: 15px; fill: var(--ink-3); font-family: inherit; }
.cp-ant { fill: color-mix(in srgb, var(--ink-3) 35%, transparent); }
.cp-mes rect { transform-box: fill-box; transform-origin: bottom; animation: cpSobe .6s var(--suave) backwards; animation-delay: calc(var(--i) * 35ms); }
.cp-mes.futuro { opacity: .35; }
.cp-mes:hover rect { filter: brightness(1.1); }
@keyframes cpSobe { from { transform: scaleY(0); } }
.cp-leg { display: flex; gap: 14px; justify-content: center; font-size: 12px; color: var(--ink-3); margin: 2px 0 10px; }
.cp-leg span { display: inline-flex; align-items: center; gap: 6px; } .cp-leg i { width: 12px; height: 12px; border-radius: 3px; }
.cp-leg i.ant { background: color-mix(in srgb, var(--ink-3) 35%, transparent); }
.cp-cats { border-top: 1px solid var(--line); padding-top: 10px; }
.cp-cats-tit { font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); margin-bottom: 6px; }
.cp-cat { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: 13.5px; border-bottom: 1px dashed var(--line); }
.cp-cat:last-child { border-bottom: 0; } .cp-cat > i { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.cp-cat .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-cat small { color: var(--ink-3); font-size: 12px; white-space: nowrap; }
.cp-cat em { font-style: normal; font-weight: 800; font-size: 12.5px; min-width: 52px; text-align: right; }
.cp-cat em.bom { color: #1F7A5C; } .cp-cat em.ruim { color: var(--red); } html.dark .cp-cat em.bom { color: #7FD8B6; }

/* lançamentos guardados sem internet */
.fila-off { position: fixed; left: 50%; bottom: calc(86px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 9700;
  display: flex; align-items: center; gap: 8px; padding: 9px 14px; border: 0; border-radius: 999px; cursor: pointer;
  background: linear-gradient(135deg, #1E3A5F, #2F5D8A); color: #EAF3FF; font: 600 12.5px/1.2 inherit;
  box-shadow: 0 10px 26px -10px rgba(0,0,0,.55); animation: semRede .45s var(--mola); max-width: calc(100vw - 32px); }
.fila-off svg { width: 18px; height: 18px; flex-shrink: 0; animation: pisca 2s ease-in-out infinite; }
@media (min-width: 900px) { .fila-off { bottom: 24px; } }
.off-lista { display: flex; flex-direction: column; gap: 8px; }
.off-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2, rgba(127,127,127,.08)); }
.off-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.off-txt b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.off-txt small { opacity: .7; font-size: 11.5px; }
.off-val { font-weight: 700; white-space: nowrap; }

/* diagnóstico: comprovantes recebidos pelo WhatsApp */
.zm-vazio { font-size: 12.5px; color: var(--ink-3); padding: 8px 0 12px; }
.zm-lista { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.zm-item { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.zm-item summary { display: flex; align-items: center; gap: 8px; padding: 9px 12px; cursor: pointer; list-style: none; font-size: 12.5px; }
.zm-item summary::-webkit-details-marker { display: none; }
.zm-sit { flex-shrink: 0; font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 8px; background: rgba(127,127,127,.15); color: var(--ink-2); }
.zm-anexado .zm-sit { background: rgba(37,211,102,.16); color: #128C7E; }
.zm-falhou .zm-sit { background: rgba(220,38,38,.12); color: var(--red); }
.zm-txt { flex: 1; min-width: 0; color: var(--ink); overflow-wrap: anywhere; }
.zm-hora { flex-shrink: 0; font-size: 10.5px; color: var(--ink-3); }
.zm-forma { padding: 0 12px 10px; }
.zm-forma small { color: var(--ink-3); font-size: 11px; }
.zm-forma pre { margin: 4px 0 0; font-size: 11px; white-space: pre-wrap; word-break: break-all; background: rgba(127,127,127,.07); padding: 8px; border-radius: 8px; }

/* login: esqueci a senha, caps lock e tremida no erro */
.login-esqueci { align-self: center; background: none; border: 0; padding: 4px 8px; margin-top: -4px; cursor: pointer;
  color: var(--navy); font: 600 13px/1.3 inherit; text-decoration: underline; text-underline-offset: 3px; opacity: .85; }
html.dark .login-esqueci { color: #9CC3E6; }
.login-esqueci:hover { opacity: 1; }
.login-erro { display: flex; flex-direction: column; gap: 8px; }
.login-erro.hidden { display: none; }
.login-esqueci-bt { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 10px;
  padding: 7px 12px; cursor: pointer; background: rgba(201,87,63,.14); color: inherit; font: 700 12.5px/1 inherit; }
.login-esqueci-bt svg { width: 15px; height: 15px; }
.login-caps { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 12px; font-weight: 600; color: #B7791F; }
.login-caps svg { width: 14px; height: 14px; }
.login-caps.hidden { display: none; }
.login-app-card.treme { animation: lgTreme .42s cubic-bezier(.36,.07,.19,.97); }
@keyframes lgTreme { 15%, 85% { transform: translateX(-3px); } 30%, 70% { transform: translateX(6px); } 45%, 55% { transform: translateX(-8px); } }

/* criar senha nova */
.rs-passos { display: flex; gap: 6px; margin-bottom: 14px; }
.rs-passos i { flex: 1; height: 4px; border-radius: 4px; background: rgba(127,127,127,.2); transition: background .3s; }
.rs-passos i.on { background: linear-gradient(90deg, #2F817A, #3E9079); }
.rs-txt { margin: 0 0 12px; font-size: 13.5px; color: var(--ink-2); line-height: 1.45; }
.rs-erro { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0 0; padding: 10px 12px; border-radius: 12px;
  background: rgba(201,87,63,.1); color: var(--red, #C9573F); font-size: 13px; font-weight: 600; animation: semRede .35s var(--mola); }
.rs-erro svg { width: 17px; height: 17px; flex-shrink: 0; margin-top: 1px; }
.rs-erro.hidden { display: none; }
.rs-acoes { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.rs-canais { display: flex; flex-direction: column; gap: 10px; }
.rs-canal { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border-radius: 14px; cursor: pointer;
  border: 1.5px solid var(--line); background: var(--surface, transparent); color: inherit; text-align: left; font: inherit;
  transition: transform .15s, border-color .15s; }
.rs-canal:hover { transform: translateY(-1px); border-color: #3E9079; }
.rs-canal:disabled { opacity: .7; cursor: wait; }
.rs-canal > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; }
.rs-canal small { color: var(--ink-3); font-size: 12px; }
.rs-wa, .rs-em { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex-shrink: 0; color: #fff; }
.rs-wa { background: linear-gradient(135deg, #25D366, #128C7E); }
.rs-wa svg { width: 24px; height: 24px; }
.rs-em { background: linear-gradient(135deg, #2F5D8A, #1E3A5F); }
.rs-em svg { width: 20px; height: 20px; }
.rs-seta { font-style: normal; font-size: 22px; opacity: .5; }
.rs-ok { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; margin-bottom: 12px;
  background: rgba(62,144,121,.12); color: #2F6F5E; font-size: 13px; }
html.dark .rs-ok { color: #8FD3BE; }
.rs-ok svg { width: 18px; height: 18px; flex-shrink: 0; }
.rs-codigo { font-size: 24px !important; letter-spacing: .5em; text-align: center; font-weight: 800; }
.rs-forca { height: 5px; border-radius: 5px; background: rgba(127,127,127,.15); margin-top: 6px; overflow: hidden; }
.rs-forca i { display: block; height: 100%; width: 0; border-radius: 5px; transition: width .25s, background .25s; }
.rs-outro { display: block; margin: 12px auto 0; background: none; border: 0; cursor: pointer; color: var(--ink-3);
  font: 600 12.5px/1.3 inherit; text-decoration: underline; }
.rs-sem { display: flex; gap: 10px; padding: 12px; border-radius: 12px; background: rgba(201,169,78,.12); }
.rs-sem svg { width: 20px; height: 20px; color: #B7791F; flex-shrink: 0; }
.rs-sem p { margin: 4px 0 0; font-size: 13px; line-height: 1.45; color: var(--ink-2); }