/* =====================================================================
   Grupo ARP / ARPChat �?" tema do Money ARP (FinZap)
   Tokens iguais aos de arpchat.com.br e booking.arpchat.com.br.
   Carregado depois do style.css (includes/arp_brand.php). Onde o sistema
   usa style="" inline, as regras precisam de !important pra vencer.
   ===================================================================== */
:root {
  --arp-red: #DB053A; --arp-red-deep: #C20430; --arp-red-light: #E2344F; --arp-red-soft: #ff8aa2;
  --arp-ink-950: #101217; --arp-ink-900: #15171D; --arp-ink-850: #1B1E26; --arp-ink-800: #252933;
  --arp-ink-700: #2E323D; --arp-ink-600: #363C47; --arp-ink-500: #4A5162; --arp-ink-400: #6B7285;
  --arp-grad: linear-gradient(135deg, #E2344F 0%, #DB053A 45%, #C20430 100%);
  --arp-line: rgba(255,255,255,.09);
  --arp-muted: rgba(255,255,255,.64);
  --arp-soft: rgba(255,255,255,.48);
  --arp-verde: #22c55e; --arp-verde-soft: #4ade80;
  --arp-amarelo: #facc15;
  --accent-solid: #DB053A;
  color-scheme: dark;
}

/* ---------- Base ---------- */
html, body { background: var(--arp-ink-900) !important; color: #fff; }
body, input, select, textarea, button, table,
.campo input, .campo select, .campo textarea { font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif !important; }
h1, h2, h3, h4, .logo, .sidebar-logo, .logo-mobile, .card .valor, .finance-card .top h2,
.vd-preco, .vd-plano-cabecalho h2, .gateway-opcao-nome,
[style*="'Sora'"] { font-family: 'Montserrat', system-ui, sans-serif !important; }
h1, h2 { font-weight: 900; letter-spacing: -0.02em; }
h3 { font-weight: 700; }
::selection { background: rgba(219,5,58,.55); color: #fff; }
a { color: var(--arp-red-soft); }
a:hover { color: #fff; }
code { background: rgba(255,255,255,.08); color: #fff; border-radius: 4px; padding: 1px 5px; }
hr { border-color: var(--arp-line); }

/* ---------- Botões ---------- */
.btn {
  background: var(--arp-grad) !important; color: #fff !important; border-radius: 999px;
  font-weight: 800; box-shadow: 0 14px 34px -14px rgba(219,5,58,.75);
  transition: transform .2s, box-shadow .2s, filter .2s;
}
.btn:hover { transform: translateY(-1px); filter: brightness(1.06); color: #fff !important; }
.btn-secundario {
  background: rgba(255,255,255,.06) !important; color: #fff !important;
  border: 1px solid var(--arp-line) !important; box-shadow: none;
}
.btn-secundario:hover { background: rgba(255,255,255,.12) !important; }
.btn-perigo { background: transparent !important; border: 1px solid rgba(226,52,79,.55) !important; color: var(--arp-red-soft) !important; box-shadow: none; }

/* ---------- Superfícies ---------- */
.painel-box, .card, .auth-card, .kpi-card, .finance-card, .vd-plano-card, .gateway-opcao, .radio-opcoes label {
  background: var(--arp-ink-850) !important; color: #fff !important;
  border: 1px solid var(--arp-line) !important; box-shadow: none;
}
.painel-box, .card { border-radius: 18px; transition: border-color .3s ease, box-shadow .3s ease; }
.card:hover { border-color: rgba(219,5,58,.45) !important; box-shadow: 0 20px 40px -18px rgba(219,5,58,.35); }
.kpi-card-destaque, .gateway-opcao-ativa { border-color: rgba(219,5,58,.55) !important; background: rgba(219,5,58,.08) !important; }
.gateway-opcao-ativa .gateway-opcao-nome { color: #fff; }
.gateway-opcao-badge { background: rgba(219,5,58,.16); color: var(--arp-red-soft); }

.conteudo .subtitulo, .auth-card p.subtitulo, .auth-links, .card .rotulo, .kpi-card-rotulo,
.gateway-opcao-desc, .finance-card .top > span, .finance-card .top small, .days-chart-label,
.grafico-legenda-item, .vd-preco-periodo, .vd-plano-card > p, .vd-plano-item span.texto,
.kpi-card-valor.kpi-card-vazio { color: var(--arp-muted) !important; }
.kpi-card-valor, .days-chart-valor, .days-chart-titulo, .vd-preco, .finance-card { color: #fff !important; }

/* Eyebrow / pílulas */
.pill, .marca-pill {
  background: rgba(219,5,58,.16) !important; color: var(--arp-red-soft) !important;
  border: 1px solid rgba(226,52,79,.35) !important; box-shadow: none !important;
  text-transform: uppercase; letter-spacing: .12em; font-weight: 800; font-size: 11px;
}

/* ---------- Formulários ---------- */
.campo label { color: rgba(255,255,255,.86); }
.campo input, .campo select, .campo textarea, input[type=text], input[type=email], input[type=password],
input[type=number], input[type=tel], input[type=date], input[type=search], input[type=url], select, textarea {
  background: var(--arp-ink-950) !important; color: #fff !important;
  border: 1px solid var(--arp-ink-600) !important; border-radius: 10px;
}
input::placeholder, textarea::placeholder { color: var(--arp-soft) !important; }
.campo input:focus, .campo select:focus, .campo textarea:focus, input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--arp-red) !important; box-shadow: 0 0 0 3px rgba(219,5,58,.22);
}
select option { background: var(--arp-ink-850); color: #fff; }
input[type=checkbox], input[type=radio] { accent-color: var(--arp-red); }
.iti__country-list { background: var(--arp-ink-850) !important; color: #fff; border: 1px solid var(--arp-line); }
.iti__country.iti__highlight { background: rgba(255,255,255,.08) !important; }
.iti__dial-code { color: var(--arp-muted) !important; }

/* ---------- Alertas e badges ---------- */
.alerta-erro { background: rgba(219,5,58,.12) !important; color: var(--arp-red-soft) !important; border: 1px solid rgba(226,52,79,.35) !important; }
.alerta-sucesso { background: rgba(34,197,94,.12) !important; color: var(--arp-verde-soft) !important; border: 1px solid rgba(34,197,94,.35) !important; }
.badge-verde { background: rgba(34,197,94,.14) !important; color: var(--arp-verde-soft) !important; }
.badge-vermelho { background: rgba(219,5,58,.16) !important; color: var(--arp-red-soft) !important; }
.badge-cinza { background: rgba(255,255,255,.08) !important; color: var(--arp-muted) !important; }
.badge-amarelo { background: rgba(250,204,21,.14) !important; color: var(--arp-amarelo) !important; }
.badge-em-uso { background: var(--arp-grad) !important; }

/* ---------- Tabelas ---------- */
table { color: #fff; }
th { background: var(--arp-ink-900) !important; color: var(--arp-muted) !important; }
th, td { border-bottom: 1px solid var(--arp-line) !important; }
tr:hover td { background: rgba(255,255,255,.02); }
.tabela-acoes a.excluir { color: var(--arp-red-soft); }

/* ---------- Filtros / progresso / gráficos ---------- */
.filtro-tab { background: rgba(255,255,255,.05) !important; color: var(--arp-muted) !important; border: 1px solid var(--arp-line) !important; }
.filtro-tab.ativo { background: var(--arp-grad) !important; color: #fff !important; border-color: transparent !important; }
.progress { background: var(--arp-ink-800) !important; }
.progress > div { background: linear-gradient(90deg, #16a34a, var(--arp-verde)) !important; }
.progress > div.negativo { background: var(--arp-grad) !important; }
.finance-card .badge { background: rgba(34,197,94,.16) !important; color: var(--arp-verde-soft) !important; }
.finance-card .badge.negativo { background: rgba(219,5,58,.18) !important; color: var(--arp-red-soft) !important; }
/* Dinheiro entrando continua verde e saindo continua vermelho -- a cor da marca (ruby) não pode
   virar a cor de "receita", senão positivo e negativo ficam iguais. */
.valor.positivo, .kpi-card-badge.positivo { color: var(--arp-verde-soft) !important; }
.kpi-card-badge.positivo { background: rgba(34,197,94,.14) !important; }
.valor.negativo, .days-chart-titulo.despesa { color: var(--arp-red-soft) !important; }
.kpi-card-badge.negativo { color: var(--arp-red-soft) !important; background: rgba(219,5,58,.16) !important; }
.days-chart-bar { background: linear-gradient(180deg, var(--arp-verde-soft), #15803d) !important; }
.days-chart-bar.despesa { background: linear-gradient(180deg, var(--arp-red-light), var(--arp-red-deep)) !important; }
.grafico-legenda-receita { background: var(--arp-verde) !important; }
.grafico-legenda-despesa { background: var(--arp-red) !important; }

/* ---------- App shell ---------- */
.sidebar { background: var(--arp-ink-950) !important; border-right: 1px solid var(--arp-line) !important; }
.sidebar-logo { color: #fff !important; }
.sidebar-logo img { max-height: 40px !important; max-width: 190px !important; }
.sidebar-nav a { color: rgba(255,255,255,.72) !important; font-weight: 600; border-left: 3px solid transparent; }
.sidebar-nav a:hover { background: rgba(255,255,255,.05) !important; color: #fff !important; }
.sidebar-nav a.active { background: rgba(219,5,58,.14) !important; color: #fff !important; border-left-color: var(--arp-red); font-weight: 700; }
.sidebar-usuario { color: var(--arp-muted) !important; border-top: 1px solid var(--arp-line) !important; }
.sidebar-teste { background: rgba(219,5,58,.12) !important; color: var(--arp-red-soft) !important; border: 1px solid rgba(226,52,79,.3); }
.sidebar-cor-tema { display: none !important; } /* cor fixa da marca -- o seletor rápido de cor não se aplica */
.topbar-mobile { background: var(--arp-ink-950) !important; border-bottom: 1px solid var(--arp-line) !important; }
.botao-menu, .topbar-mobile .logo-mobile { color: #fff !important; }
.overlay-menu.ativo { background: rgba(0,0,0,.6) !important; }
.conteudo h1 { font-size: 28px; }

/* ---------- Páginas públicas ---------- */
.auth-page {
  background:
    radial-gradient(circle at 15% 10%, rgba(219,5,58,.18), transparent 45%),
    radial-gradient(circle at 85% 90%, rgba(219,5,58,.10), transparent 40%),
    var(--arp-ink-900) !important;
}
.auth-card { border-radius: 22px; padding: 40px; }
.landing-header { background: rgba(16,18,23,.82) !important; border-bottom: 1px solid var(--arp-line) !important; }
.hero { background: radial-gradient(circle at 80% 0%, rgba(219,5,58,.22), transparent 50%), var(--arp-ink-900) !important; border-bottom: 1px solid var(--arp-line) !important; }
.hero h1, .logo { color: #fff !important; }
.hero p { color: var(--arp-muted) !important; }
.vd-plano-faixa { background: radial-gradient(circle at 50% 0%, rgba(219,5,58,.22), transparent 55%), var(--arp-ink-950) !important; }
.vd-plano-cta { background: var(--arp-grad) !important; box-shadow: 0 14px 34px -12px rgba(219,5,58,.75) !important; border-radius: 999px; }
.vd-preco-selo { background: rgba(34,197,94,.16) !important; color: var(--arp-verde-soft) !important; }
.vd-plano-itens { border-color: var(--arp-line) !important; }
.vd-plano-item .marcador { background: var(--arp-red) !important; }

/* ---------- Estilos inline das telas (style="") ----------
   O sistema escreve muitas cores direto no HTML em OKLCH (claras: 9x%; textos escuros: 2x-3x%;
   textos cinza: 4x-5x%). Esses seletores convertem o padrão inteiro pro tema escuro. */
[style*="background:#fff"], [style*="background: #fff"], [style*="background:white"],
[style*="background: white"], [style*="background:#ffffff"], [style*="background-color:#fff"],
[style*="background:oklch(9"], [style*="background: oklch(9"], [style*="background:oklch(100%"],
[style*="background:linear-gradient(135deg, oklch(9"], [style*="background:linear-gradient(135deg,oklch(9"] {
  background: var(--arp-ink-850) !important;
}
[style*="background:oklch(8"], [style*="background: oklch(8"] { background: var(--arp-ink-800) !important; }
[style*="color:oklch(2"], [style*="color: oklch(2"], [style*="color:oklch(3"], [style*="color: oklch(3"],
[style*="color:#0f172a"], [style*="color:#111"], [style*="color:#1e293b"], [style*="color:#334155"] {
  color: #fff !important;
}
[style*="color:oklch(4"], [style*="color: oklch(4"], [style*="color:oklch(5"], [style*="color: oklch(5"],
[style*="color:oklch(6"], [style*="color:#64748b"], [style*="color:#475569"], [style*="color:#5f6368"] {
  color: var(--arp-muted) !important;
}
[style*="solid oklch(8"], [style*="solid oklch(9"], [style*="solid #e"], [style*="solid #f"] {
  border-color: var(--arp-line) !important;
}
/* Cor de destaque inline que dependia do matiz da marca (antigo verde) -> ruby suave */
[style*="color:oklch(4"][style*="var(--fz-hue)"][style*="0.1"],
[style*="color:oklch(5"][style*="var(--fz-hue)"][style*="0.1"] { color: var(--arp-red-soft) !important; }
/* Botões verdes de WhatsApp continuam verdes */
[style*="background:#25D366"], [style*="background: #25D366"] { background: #25D366 !important; color: #06341b !important; }
pre { border: 1px solid var(--arp-line); }

/* ---------- Ajustes pontuais de telas ---------- */
/* whatsapp-config.php: barra do provedor em uso */
.provedor-details { background: var(--arp-ink-850) !important; border-color: var(--arp-line) !important; }
.provedor-details[open] { border-color: rgba(219,5,58,.45) !important; }
.provedor-details.provedor-ativo { border: 2px solid var(--arp-red) !important; box-shadow: 0 0 0 4px rgba(219,5,58,.14) !important; }
.provedor-details.provedor-ativo .provedor-sumario { background: rgba(219,5,58,.10) !important; }
.provedor-sumario, .provedor-sumario-titulo { color: #fff !important; }
.provedor-sumario-desc, .provedor-seta { color: var(--arp-muted) !important; }
.provedor-corpo { border-top-color: var(--arp-line) !important; }
.campo-exemplo { background: rgba(255,255,255,.04) !important; color: var(--arp-muted) !important; border-left-color: var(--arp-red) !important; }
/* index.php (landing): seções escuras que eram tingidas pelo matiz da marca viram grafite
   neutro com brilho ruby -- ruby é acento, não fundo. */
#solucao { background: var(--arp-ink-950) !important; }
#cta { background: radial-gradient(circle at 50% 0%, rgba(219,5,58,.28), transparent 60%), var(--arp-ink-950) !important; }
[style*="background:oklch(22% 0.03 calc(var(--fz-hue)"] {
  background: var(--arp-ink-850) !important; border: 1px solid rgba(219,5,58,.45);
  box-shadow: 0 20px 40px -18px rgba(219,5,58,.35);
}
.navegador-frame { background: var(--arp-ink-800) !important; }
.navegador-barra { background: var(--arp-ink-700) !important; }
.navegador-url { background: var(--arp-ink-950) !important; color: var(--arp-muted) !important; }
/* includes/pwa_install.php: botão "Instalar App" */
#pwaInstallBtn { background: var(--arp-grad) !important; box-shadow: 0 14px 34px -12px rgba(219,5,58,.75) !important; }
#pwaInstallDica { background: var(--arp-ink-800) !important; border: 1px solid var(--arp-line); }