/* ════════════════════════════════════════════════════════════════
   THEMES — Overrides do tema claro (Marfim Premium v2.2.0)
   ────────────────────────────────────────────────────────────────
   Estrutura:
   1. NAV, SIDEBAR, BOTTOM NAV — hierarquia de elevação
   2. STATS, CARDS, SECTIONS — texto e gradientes
   3. TABELA, FORMS, INPUTS
   4. MODAIS, PILLS, BOTÕES, BADGES
   5. CAIXAS DE ALERTA (info-box / warn-box / emp-tipo-desc)
   6. BUSCA GLOBAL, SIMULADOR
   7. LOGIN (mantido — funcionava bem)
   8. PATCHES PARA MODAIS DINÂMICOS COM CORES HARDCODED EM JS
   ════════════════════════════════════════════════════════════════ */

/* ── COMPATIBILIDADE body.dark ─────────────────────────────────── */
/* body.dark herda :root (sem overrides necessários no nkFinance) */


/* ════════════════════════════════════════════════════════════════
   1. NAV, SIDEBAR, BOTTOM NAV
   ════════════════════════════════════════════════════════════════ */

html[data-theme="light"] body { background: var(--bg); color: var(--n1); }

/* Nav: branco com sombra fina inferior pra separar do fundo bege */
html[data-theme="light"] .nav {
  background: var(--card);
  border-color: var(--border-n);
  box-shadow: 0 1px 0 rgba(139,105,20,.08), 0 2px 12px rgba(60,46,15,.05);
}
html[data-theme="light"] .nav-brand { color: var(--n1); }

/* Marca "nkFinance" — texto gradient escuro pra ser visível no branco */
html[data-theme="light"] .nav-brand .brand-name .gold,
html[data-theme="light"] .nav-brand span.brand-finance {
  background: var(--gradient-gold-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

html[data-theme="light"] .hamburger span { background: var(--primary); }

/* Botões da nav (theme toggle, search, logout) */
html[data-theme="light"] .dark-btn,
html[data-theme="light"] .search-nav-btn,
html[data-theme="light"] .logout-btn {
  color: var(--n2);
  border-color: var(--border-n);
}
html[data-theme="light"] .dark-btn:hover,
html[data-theme="light"] .search-nav-btn:hover,
html[data-theme="light"] .logout-btn:hover {
  background: rgba(139,105,20,.06);
  border-color: var(--primary);
  color: var(--primary);
}

/* WhatsApp button (estado "unset") — usava gold-100 que ficava ilegível */
html[data-theme="light"] .wa-nav-btn.unset {
  color: var(--primary);
  border-color: rgba(139,105,20,.30);
}
html[data-theme="light"] .wa-nav-btn.unset:hover {
  background: rgba(139,105,20,.06);
  border-color: var(--primary);
  color: var(--primary-dark);
}

/* Sidebar: off-white (--bg2) quase igual ao fundo branco, separada por borda direita.
   v2.3.1: hover/active usam MARFIM (card) em vez de branco, pra serem visíveis. */
html[data-theme="light"] .sidebar {
  background: var(--bg2);
  border-right: 1px solid var(--border-n);
  box-shadow: inset -1px 0 0 rgba(139,105,20,.05);
}
html[data-theme="light"] .sidebar-section { color: var(--n3); }
html[data-theme="light"] .sidebar-item { color: var(--n2); }
html[data-theme="light"] .sidebar-item:hover {
  background: var(--card);   /* marfim suave sobre sidebar off-white */
  color: var(--n1);
}
html[data-theme="light"] .sidebar-item.active {
  background: linear-gradient(90deg, var(--card2), var(--card));
  color: var(--primary-dark);
  border-left-color: var(--primary);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(139,105,20,.08);
}
html[data-theme="light"] .sidebar-footer {
  color: var(--n3);
  border-top-color: var(--border-n);
}
html[data-theme="light"] .sidebar-footer .brand-mini { color: var(--primary); }

/* Bottom nav (mobile) */
html[data-theme="light"] #bottom-nav {
  background: var(--card);
  border-top: 1px solid var(--border-n);
  box-shadow: 0 -2px 12px rgba(60,46,15,.06);
}
html[data-theme="light"] .bnav-item { color: var(--n3); }
html[data-theme="light"] .bnav-item.active { color: var(--primary); border-bottom-color: var(--primary); }

/* Nav user pill */
html[data-theme="light"] .nav-user {
  background: rgba(139,105,20,.05);
  color: var(--n2);
  border-color: var(--border-n);
}
html[data-theme="light"] .nav-user:hover {
  background: rgba(139,105,20,.10);
  border-color: var(--border3);
}


/* ════════════════════════════════════════════════════════════════
   2. STATS, CARDS, SECTIONS
   ════════════════════════════════════════════════════════════════ */

html[data-theme="light"] .stat,
html[data-theme="light"] .card {
  background: var(--card);
  border-color: var(--border-n);
  box-shadow: var(--sh);
}
html[data-theme="light"] .stat:hover,
html[data-theme="light"] .card:hover {
  border-color: var(--border2);
  box-shadow: var(--shm);
  transform: translateY(-2px);
}

html[data-theme="light"] .stat-label {
  color: var(--primary);
  opacity: 1;
}
html[data-theme="light"] .stat-value { color: var(--n1); }
html[data-theme="light"] .stat-value.gold {
  background: var(--gradient-gold-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
html[data-theme="light"] .stat-sub { color: var(--n2); }
html[data-theme="light"] .stat-info {
  color: var(--n3);
  border-color: var(--border-n);
}
html[data-theme="light"] .stat-info:hover {
  color: var(--primary);
  background: rgba(139,105,20,.08);
  border-color: var(--primary);
}
html[data-theme="light"] .stat-info::after {
  background: var(--card);
  border-color: var(--border2);
  color: var(--n1);
  box-shadow: var(--shm);
}
html[data-theme="light"] .stat-info::before { border-top-color: var(--card); }

/* Section titles */
html[data-theme="light"] .sec-title { color: var(--n1); }
html[data-theme="light"] .sec-title .gold,
html[data-theme="light"] .gold-text {
  background: var(--gradient-gold-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

html[data-theme="light"] .card-title { color: var(--n1); }


/* ════════════════════════════════════════════════════════════════
   3. TABELA, FORMS, INPUTS
   ════════════════════════════════════════════════════════════════ */

html[data-theme="light"] .tbl-wrap {
  background: var(--card);
  border-color: var(--border-n);
  box-shadow: var(--sh);
}
html[data-theme="light"] thead th {
  background: var(--card2);
  border-color: var(--border-n);
  color: var(--n2);
}
html[data-theme="light"] tbody tr { border-color: var(--border-n); }
html[data-theme="light"] tbody tr:hover { background: rgba(139,105,20,.05); }
html[data-theme="light"] tbody td { color: var(--n1); }

html[data-theme="light"] th.sortable:hover {
  background: rgba(139,105,20,.08);
  color: var(--n1);
}
html[data-theme="light"] th.sortable.asc,
html[data-theme="light"] th.sortable.desc { color: var(--primary-dark); }

html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea {
  background: var(--card);
  border-color: var(--border-n);
  color: var(--n1);
  -webkit-text-fill-color: var(--n1);
}
html[data-theme="light"] input:focus,
html[data-theme="light"] select:focus,
html[data-theme="light"] textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(139,105,20,.15);
}
html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder {
  color: var(--n4);
  opacity: 0.5;
  font-style: italic;
}
html[data-theme="light"] input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--card) inset !important;
  -webkit-text-fill-color: var(--n1) !important;
}
html[data-theme="light"] .lbl { color: var(--n2); }


/* ════════════════════════════════════════════════════════════════
   4. MODAIS, PILLS, BOTÕES, BADGES
   ════════════════════════════════════════════════════════════════ */

html[data-theme="light"] .modal {
  background: var(--card);
  border-color: var(--border-n);
  box-shadow: var(--shl);
}
html[data-theme="light"] .mhdr,
html[data-theme="light"] .mfooter { border-color: var(--border-n); }
html[data-theme="light"] .mtitle,
html[data-theme="light"] .mbody { color: var(--n1); }
html[data-theme="light"] .mclose { color: var(--n3); border-color: var(--border-n); }
html[data-theme="light"] .mclose:hover {
  background: rgba(139,105,20,.08);
  color: var(--primary);
  border-color: var(--primary);
}
html[data-theme="light"] .msec {
  color: var(--primary);
  border-color: var(--border-n);
}
html[data-theme="light"] .parc-row { border-color: var(--border-n); }

/* Pills */
html[data-theme="light"] .pill {
  background: var(--card);
  border-color: var(--border-n);
  color: var(--n2);
}
html[data-theme="light"] .pill:hover {
  border-color: var(--primary);
  color: var(--n1);
  background: rgba(139,105,20,.05);
}
html[data-theme="light"] .pill.active {
  background: var(--gradient-gold);
  border-color: var(--primary);
  color: var(--on-primary);
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(139,105,20,.25);
}

/* Botões */
html[data-theme="light"] .btn-g {
  color: var(--n2);
  border-color: var(--border-n);
  background: var(--card);
}
html[data-theme="light"] .btn-g:hover {
  background: rgba(139,105,20,.06);
  border-color: var(--primary);
  color: var(--n1);
}
html[data-theme="light"] .btn-p {
  background: var(--gradient-gold);
  color: #FFFFFF;
  box-shadow: 0 2px 8px rgba(139,105,20,.25);
  text-shadow: 0 1px 2px rgba(0,0,0,.15);
}
html[data-theme="light"] .btn-p:hover {
  box-shadow: var(--sh-gold-strong);
}
html[data-theme="light"] .btn-grn { background: var(--grn); color: #FFFFFF; }
html[data-theme="light"] .btn-d { color: var(--red); border-color: var(--red1); }
html[data-theme="light"] .btn-amb {
  background: rgba(139,105,20,.10);
  color: var(--primary-dark);
  border-color: rgba(139,105,20,.30);
}
html[data-theme="light"] .btn-amb:hover {
  background: rgba(139,105,20,.18);
  border-color: var(--primary);
}

/* Badges — corrigir as que usavam --gold-300 como cor de texto (ilegível no claro) */
html[data-theme="light"] .bdg-op,
html[data-theme="light"] .bdg-juros {
  background: rgba(139,105,20,.10);
  color: var(--primary-dark);
  border-color: rgba(139,105,20,.30);
}
html[data-theme="light"] .role-tag {
  color: var(--primary-dark);
  background: rgba(139,105,20,.08);
  border-color: var(--border2);
}


/* ════════════════════════════════════════════════════════════════
   5. CAIXAS DE ALERTA (info-box / warn-box / emp-tipo-desc)
   ════════════════════════════════════════════════════════════════ */

html[data-theme="light"] .info-box {
  background: rgba(139,105,20,.06);
  color: var(--n2);
  border-color: var(--border);
  border-left-color: var(--primary);
}
html[data-theme="light"] .warn-box {
  background: rgba(139,105,20,.08);
  color: var(--primary-dark);
  border-color: rgba(139,105,20,.25);
  border-left-color: var(--primary);
}
html[data-theme="light"] .emp-tipo-desc {
  background: rgba(139,105,20,.05);
  color: var(--n2);
  border-color: var(--border);
  border-left-color: var(--primary);
}


/* ════════════════════════════════════════════════════════════════
   6. BUSCA GLOBAL, SIMULADOR
   ════════════════════════════════════════════════════════════════ */

html[data-theme="light"] .gsearch-box {
  background: var(--card);
  border-color: var(--border2);
  box-shadow: var(--shl);
}
html[data-theme="light"] .gsearch-row { border-color: var(--border-n); }
html[data-theme="light"] .gsearch-row input { color: var(--n1); }
html[data-theme="light"] .gsearch-row svg { color: var(--n3); }
html[data-theme="light"] .gsearch-item {
  border-color: var(--border-n);
  color: var(--n1);
}
html[data-theme="light"] .gsearch-item:hover { background: rgba(139,105,20,.06); }
html[data-theme="light"] .gsearch-empty { color: var(--n4); }

html[data-theme="light"] .sim-cell {
  background: var(--card);
  border-color: var(--border-n);
  color: var(--n2);
}
html[data-theme="light"] .sim-cell.highlight,
html[data-theme="light"] .sim-cell.total-col {
  background: rgba(139,105,20,.10);
  color: var(--primary-dark);
}
html[data-theme="light"] .sim-header {
  background: var(--card2);
  color: var(--primary);
  border-color: var(--border-n);
}


/* ════════════════════════════════════════════════════════════════
   7. LOGIN — Mantido da v2.1.4 (funcionava bem)
   ════════════════════════════════════════════════════════════════ */

html[data-theme="light"] .login-bg { background: #F8F6EE; }
html[data-theme="light"] .login-bg-glow {
  background:
    radial-gradient(ellipse 70% 55% at 50% 50%, rgba(212,175,55,.18) 0%, rgba(139,105,20,.08) 45%, transparent 75%),
    radial-gradient(ellipse 40% 30% at 85% 15%, rgba(245,214,122,.12) 0%, transparent 60%),
    radial-gradient(ellipse 35% 30% at 12% 85%, rgba(212,175,55,.10) 0%, transparent 55%);
}
html[data-theme="light"] #stars-canvas {
  opacity: .12;
  filter: invert(1);
}
html[data-theme="light"] .login-card-wrap {
  background: linear-gradient(135deg, #D4AF37 0%, #8B6914 40%, #5C4509 70%, #3D2E0F 100%);
  box-shadow:
    0 0 40px rgba(139,105,20,.20),
    0 0 80px rgba(212,175,55,.10),
    0 12px 50px rgba(20,15,5,.15);
}
html[data-theme="light"] .login-card {
  background: radial-gradient(ellipse at 50% 0%, #FFFCF2 0%, #FAF8EE 60%, #F5F2E0 100%);
}
html[data-theme="light"] .login-card::before {
  background: linear-gradient(90deg, transparent, #8B6914, transparent);
  opacity: .8;
}
html[data-theme="light"] .login-logo-img {
  filter: drop-shadow(0 2px 6px rgba(139,105,20,.25)) contrast(1.05);
  background: radial-gradient(ellipse, rgba(20,15,5,.04) 0%, transparent 70%);
  padding: .5rem 1rem;
  border-radius: 12px;
}
html[data-theme="light"] .login-field label {
  color: #8B6914;
  font-weight: 700;
  opacity: 1;
}
html[data-theme="light"] .login-field input {
  background: #FFFFFF !important;
  color: #1A1610 !important;
  -webkit-text-fill-color: #1A1610 !important;
  border-color: rgba(139,105,20,.30);
  caret-color: #8B6914;
}
html[data-theme="light"] .login-field input:hover { border-color: rgba(139,105,20,.55); }
html[data-theme="light"] .login-field input:focus {
  border-color: #8B6914 !important;
  box-shadow: 0 0 0 3px rgba(139,105,20,.18) !important;
  background: #FFFFFF !important;
}
html[data-theme="light"] .login-field input::placeholder {
  color: #9A8F77;
  -webkit-text-fill-color: #9A8F77;
  opacity: 0.55;
  font-style: italic;
}
html[data-theme="light"] .login-field input:-webkit-autofill,
html[data-theme="light"] .login-field input:-webkit-autofill:hover,
html[data-theme="light"] .login-field input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #FFFCF2 inset !important;
  -webkit-text-fill-color: #1A1610 !important;
  border-color: rgba(139,105,20,.30);
}
html[data-theme="light"] .login-error {
  background: rgba(185,28,28,.10);
  color: #B91C1C;
  border-left-color: #B91C1C;
  font-weight: 600;
}
html[data-theme="light"] #login-btn,
html[data-theme="light"] #register-btn,
html[data-theme="light"] .login-card-body .btn.btn-full:not(.btn-g):not(.btn-d) {
  background: linear-gradient(135deg, #E8C46B 0%, #D4AF37 25%, #B89028 60%, #8B6914 100%);
  color: #FFFFFF;
  font-weight: 700;
  box-shadow: 0 4px 20px rgba(139,105,20,.30);
  text-shadow: 0 1px 2px rgba(0,0,0,.20);
}
html[data-theme="light"] #login-btn:hover { box-shadow: 0 8px 30px rgba(139,105,20,.45); }
html[data-theme="light"] .login-card-body .btn.btn-g.btn-full {
  background: transparent;
  border-color: rgba(139,105,20,.40);
  color: #8B6914;
  font-weight: 600;
}
html[data-theme="light"] .login-card-body .btn.btn-g.btn-full:hover {
  background: rgba(139,105,20,.05);
  border-color: #8B6914;
  color: #5C4509;
}
html[data-theme="light"] .login-card-body a[onclick*="openEsqueciSenha"] { color: #8B6914 !important; }
html[data-theme="light"] .login-card-body a[onclick*="openEsqueciSenha"]:hover { color: #5C4509 !important; }
html[data-theme="light"] #remember-toggle:not([style*="gradient"]) {
  background: #D5D0BE !important;
  border-color: rgba(139,105,20,.20) !important;
}
html[data-theme="light"] .login-card-body span[onclick*="toggleRemember"] { color: #8B6914 !important; }
html[data-theme="light"] .login-footer {
  color: #6E6450;
  border-top-color: rgba(139,105,20,.15);
}
html[data-theme="light"] .login-footer .gold { color: #8B6914; }
html[data-theme="light"] .login-tagline { color: #8B6914; opacity: .85; }
html[data-theme="light"] .login-greeting { color: #1A1610; }
html[data-theme="light"] .login-greeting .gold {
  background: linear-gradient(135deg, #B89028, #8B6914 60%, #5C4509);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
html[data-theme="light"] .login-sub { color: #6E6450; }
html[data-theme="light"] .login-hint { color: #6E6450; }
html[data-theme="light"] .login-hint a,
html[data-theme="light"] .login-hint span[role="button"] { color: #8B6914; }
html[data-theme="light"] .login-hint a:hover,
html[data-theme="light"] .login-hint span[role="button"]:hover { color: #5C4509; }


/* ════════════════════════════════════════════════════════════════
   8. PATCHES PARA MODAIS DINÂMICOS COM CORES HARDCODED EM JS
   ────────────────────────────────────────────────────────────────
   JS antigo cria modais com background:#fff e #E5E7EB hardcoded
   (emprestimos.js, parcelas.js, app.js, perfil.js).

   No TEMA CLARO MARFIM esses fundos #fff casam exatamente com a
   paleta (cards brancos puros sobre bege escuro) — funciona até
   melhor que cores via variável. Apenas precisamos garantir que os
   divisores #E5E7EB fiquem coerentes.

   No TEMA ESCURO, forçamos esses fundos brancos a virarem var(--card).
   ════════════════════════════════════════════════════════════════ */

/* DARK: fundos brancos hardcoded → cards escuros */
body.dark .client-view-modal-inner,
body.dark #client-view-modal > div,
body.dark [id^="confirm-pay-"] > div,
body.dark [id^="import-preview-modal"] > div,
.mbd > div,
#client-view-modal > div,
[id^="confirm-pay-"] > div,
[id^="import-preview-modal"] > div {
  background: var(--card) !important;
  color: var(--n1) !important;
  border-color: var(--border) !important;
}

body.dark #client-view-modal > div *,
body.dark [id^="confirm-pay-"] > div *,
#client-view-modal > div *,
[id^="confirm-pay-"] > div * {
  border-color: var(--border) !important;
}

/* DARK: backgrounds hardcoded (#fff, #F9FAFB, etc) */
#client-view-modal div[style*="background:#fff"],
#client-view-modal div[style*="background: #fff"],
[id^="confirm-pay-"] div[style*="background:#fff"],
[id^="import-preview-modal"] div[style*="background:#fff"] {
  background: var(--card) !important;
  color: var(--n1) !important;
}
#client-view-modal div[style*="background:#F9FAFB"],
#client-view-modal div[style*="background:#FAFAFA"],
#client-view-modal div[style*="background:#F3F4F6"],
#client-view-modal div[style*="background:#EFF6FF"] {
  background: var(--card2) !important;
}
#client-view-modal div[style*="border:1px solid #E5E7EB"] {
  border-color: var(--border) !important;
}

/* DARK: cores de texto hardcoded */
#client-view-modal span[style*="color:#6B7280"],
#client-view-modal span[style*="color:var(--n4)"],
#client-view-modal div[style*="color:var(--n4)"],
#client-view-modal div[style*="color:var(--n3)"],
#client-view-modal div[style*="color:#374151"] {
  color: var(--n3) !important;
}
#client-view-modal div[style*="color:var(--n1)"],
#client-view-modal div[style*="color:var(--n2)"],
#client-view-modal span[style*="color:var(--n2)"] {
  color: var(--n1) !important;
}
#client-view-modal div[style*="background:#E5E7EB"] {
  background: var(--card3) !important;
}

/* DARK: parcela rows com cores semânticas */
#parc-modal .mbody div[style*="background:#FAFAFA"],
#parc-modal .mbody div[style*="background:#F9FAFB"] {
  background: var(--card2) !important;
}
#parc-modal .mbody div[style*="background:#F0FDF4"] {
  background: rgba(16,185,129,.10) !important;
}
#parc-modal .mbody div[style*="background:#FEF2F2"] {
  background: rgba(239,68,68,.10) !important;
}

/* LIGHT: ajustes finos pros modais hardcoded
   Os fundos brancos #fff funcionam naturalmente com a paleta marfim
   (cards brancos sobre bege). Só refinamos os divisores e bordas
   #E5E7EB pra ficarem coerentes com --border-n. */
html[data-theme="light"] #client-view-modal div[style*="border:1px solid #E5E7EB"],
html[data-theme="light"] #client-view-modal div[style*="border-bottom:1px solid #E5E7EB"],
html[data-theme="light"] [id^="confirm-pay-"] div[style*="border:1px solid #E5E7EB"] {
  border-color: var(--border-n) !important;
}

/* LIGHT: dar sombra de elevação aos modais hardcoded pra integrar
   na estética joalheria (caixa branca flutuando sobre fundo bege) */
html[data-theme="light"] #client-view-modal > div,
html[data-theme="light"] [id^="confirm-pay-"] > div,
html[data-theme="light"] [id^="import-preview-modal"] > div {
  box-shadow: var(--shl) !important;
  border: 1px solid var(--border-n) !important;
}

/* LIGHT: banner de aviso de e-mail (app.js:151) — fundo amarelo
   hardcoded combina razoavelmente bem com a paleta, mas pode ficar
   mais coerente com tons quentes da paleta marfim */
html[data-theme="light"] #aviso-email-banner > div {
  border-color: rgba(139,105,20,.35) !important;
  box-shadow: var(--shm) !important;
}


/* ════════════════════════════════════════════════════════════════
   9. INPUT FILE — Botão "Escolher arquivo" customizado
   ────────────────────────────────────────────────────────────────
   O botão nativo do <input type="file"> usa estilo do sistema
   operacional (cinza claro com texto preto), ignorando variáveis
   CSS. Em tema escuro fica ilegível, em tema claro fica feio.

   Solução: estilizar via ::file-selector-button (CSS moderno) +
   ::-webkit-file-upload-button (Chrome/Safari legacy).
   Funciona em ambos os temas via var(--gradient-gold) e var(--card).
   ════════════════════════════════════════════════════════════════ */

/* Container do input file */
input[type="file"] {
  font-family: var(--FB);
  font-size: 13px;
  color: var(--n2);
  cursor: pointer;
}

/* O botão "Escolher arquivo" — versão moderna (Firefox, Chrome novo) */
input[type="file"]::file-selector-button {
  background: var(--gradient-gold);
  color: var(--on-primary);
  border: none;
  padding: .5rem 1rem;
  border-radius: var(--rs);
  font-family: var(--FB);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  margin-right: .85rem;
  transition: all var(--t);
  letter-spacing: .3px;
  text-transform: none;
  box-shadow: 0 2px 6px rgba(212,175,55,.20);
}
input[type="file"]::file-selector-button:hover {
  box-shadow: var(--sh-gold);
  transform: translateY(-1px);
}
input[type="file"]::file-selector-button:active {
  transform: translateY(0);
}

/* Fallback para Chrome/Safari mais antigos */
input[type="file"]::-webkit-file-upload-button {
  background: var(--gradient-gold);
  color: var(--on-primary);
  border: none;
  padding: .5rem 1rem;
  border-radius: var(--rs);
  font-family: var(--FB);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  margin-right: .85rem;
  transition: all var(--t);
  letter-spacing: .3px;
  text-transform: none;
  box-shadow: 0 2px 6px rgba(212,175,55,.20);
}
input[type="file"]::-webkit-file-upload-button:hover {
  box-shadow: var(--sh-gold);
  transform: translateY(-1px);
}

/* LIGHT: ajustes finos pro botão dourado no fundo branco */
html[data-theme="light"] input[type="file"]::file-selector-button,
html[data-theme="light"] input[type="file"]::-webkit-file-upload-button {
  color: #FFFFFF;
  text-shadow: 0 1px 2px rgba(0,0,0,.15);
  box-shadow: 0 2px 6px rgba(139,105,20,.25);
}
html[data-theme="light"] input[type="file"]::file-selector-button:hover,
html[data-theme="light"] input[type="file"]::-webkit-file-upload-button:hover {
  box-shadow: 0 4px 14px rgba(139,105,20,.40);
}

/* O texto "Nenhum arquivo escolhido" / nome do arquivo selecionado */
html[data-theme="light"] input[type="file"] { color: var(--n2); }


/* ════════════════════════════════════════════════════════════════
   10. SHARE BUTTONS — Telegram, Facebook, Instagram
   ────────────────────────────────────────────────────────────────
   Botões de compartilhamento da indicação no modal "Indicar Amigo".
   Cores das marcas oficiais. Funcionam idênticos em dark/light
   porque cores de marca são fixas.
   ════════════════════════════════════════════════════════════════ */

.share-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: .7rem .4rem;
  border-radius: var(--rs);
  border: none;
  font-family: var(--FB);
  font-size: 11px;
  font-weight: 600;
  color: #FFFFFF;
  cursor: pointer;
  transition: transform var(--t), box-shadow var(--t);
  letter-spacing: .2px;
  text-shadow: 0 1px 2px rgba(0,0,0,.18);
  min-height: 66px;
}
.share-btn svg {
  flex-shrink: 0;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.20));
}
.share-btn:hover {
  transform: translateY(-2px);
}
.share-btn:active {
  transform: translateY(0);
}

/* Telegram — azul oficial #229ED9 */
.share-tg {
  background: linear-gradient(135deg, #2AABEE 0%, #229ED9 60%, #1B8DBF 100%);
  box-shadow: 0 2px 8px rgba(34,158,217,.30);
}
.share-tg:hover { box-shadow: 0 6px 18px rgba(34,158,217,.45); }

/* Facebook — azul oficial #1877F2 */
.share-fb {
  background: linear-gradient(135deg, #1877F2 0%, #0866FF 60%, #0C5BD8 100%);
  box-shadow: 0 2px 8px rgba(24,119,242,.30);
}
.share-fb:hover { box-shadow: 0 6px 18px rgba(24,119,242,.45); }

/* Instagram — gradiente icônico (amarelo → rosa → roxo → azul) */
.share-ig {
  background: linear-gradient(45deg, #F58529 0%, #DD2A7B 35%, #8134AF 65%, #515BD4 100%);
  box-shadow: 0 2px 8px rgba(221,42,123,.30);
}
.share-ig:hover { box-shadow: 0 6px 18px rgba(221,42,123,.45); }


/* ════════════════════════════════════════════════════════════════
   11. SIDEBAR ITEM — Reset limpo (v2.2.2)
   ────────────────────────────────────────────────────────────────
   Bug raiz consertado em sidebar.js: havia typo no template que
   gerava class="sidebar-itemactive" (sem espaço) no item ativo,
   fazendo o Dashboard ficar SEM nenhuma classe válida e
   recebendo o estilo nativo de <button> do Android WebView
   (box arredondado com margem). Agora corretamente "sidebar-item
   active" com espaço.

   Adicionalmente trocamos <button> por <a role="button"> no
   sidebar.js pra eliminar de vez qualquer styling nativo
   residual do WebView.

   Esta seção cuida apenas de:
   - tap-highlight em touch
   - link styling reset (<a> não tem text-decoration por padrão
     mas garantimos)
   - focus invisível em touch (sem outline dourado decorativo)
   - mesma normalização no bottom nav
   ════════════════════════════════════════════════════════════════ */

.sidebar-item {
  -webkit-tap-highlight-color: transparent;
  text-decoration: none;
  outline: none;
}
.sidebar-item:focus,
.sidebar-item:active,
.sidebar-item:visited {
  outline: none;
  text-decoration: none;
}
.sidebar-item::-moz-focus-inner {
  border: 0;
  padding: 0;
}

/* Acessibilidade: outline apenas para keyboard navigation, sem afetar
   touch/click. Em mobile (PWA) nunca dispara. */
.sidebar-item:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}

/* Bottom nav: mesma normalização */
.bnav-item {
  -webkit-tap-highlight-color: transparent;
  outline: none;
}
.bnav-item:focus,
.bnav-item:active {
  outline: none;
}
.bnav-item:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}