/* ===== Mê$Com — visual novo (verde profundo, vidro e ouro) ===== */
:root{
  --texto:#FDF6E6; --cinza:#A9C9BA; --cinza-leitura:#B9D6C8;
  --linha:rgba(160,240,200,.14); --campo:rgba(255,255,255,.07);
  --vermelho:#FF8A7A; --ok:#6FE3A8;
  --ouro:linear-gradient(135deg,#FFD66B,#E0A020); --ouro-txt:#10301F; --ouro-liso:#FFD66B;
  --vidro:linear-gradient(135deg,rgba(255,255,255,.11),rgba(255,255,255,.04));
  --borda-v:rgba(160,240,200,.22);
  --sombra-v:0 8px 22px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.12);
  --onda:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300' preserveAspectRatio='none'%3E%3Cpath d='M-20 210 C 120 120, 260 90, 430 40' fill='none' stroke='%2378E6AF' stroke-opacity='.17' stroke-width='1.6'/%3E%3C/svg%3E");
  --fundo-app:
    var(--onda) no-repeat 0 2%/100% 26%,
    radial-gradient(120% 40% at 100% 0%,rgba(73,192,138,.28),transparent 62%),
    radial-gradient(130% 40% at 0% 100%,rgba(21,115,77,.38),transparent 62%),
    linear-gradient(180deg,#0B4A36 0%,#023024 40%,#012417 100%);
}
html,body{background:#012417;color:var(--texto)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.logo-img{display:block;width:min(78vw,300px);height:auto}

/* ----- fundos de tela ----- */
.lista,.chat,.voce,.tela,.carregando{background:var(--fundo-app);background-color:#012417}
.fundo{background-image:none!important;background:transparent}
.chat{background-attachment:scroll}

/* ----- tela de Conversas ----- */
.topo-logo{padding:calc(env(safe-area-inset-top) + 16px) 20px 6px}
.topo-logo img{height:34px;width:auto}
.busca{background:rgba(255,255,255,.07);border:1px solid rgba(160,240,200,.2);color:var(--cinza)}
.busca input{color:var(--texto)}
.busca input::placeholder{color:var(--cinza)}
.busca .x{background:rgba(255,255,255,.25)}
.rolagem{padding:2px 14px 110px;display:flex;flex-direction:column;gap:9px}
.conv{padding:10px 14px;border-radius:22px;background:var(--vidro);border:1px solid var(--borda-v);box-shadow:var(--sombra-v);width:100%;flex:none}
.conv:active,.conv.ativa{background:linear-gradient(135deg,rgba(255,214,107,.16),rgba(255,255,255,.06));border-color:rgba(255,214,107,.45)}
.conv .meio{border-bottom:0;padding:0}
.avatar{background:radial-gradient(circle at 30% 25%,#0F6A49,#023A28)!important;border:2px solid #E8B84A;box-shadow:0 0 12px rgba(241,169,36,.22);margin:0;width:52px;height:52px}
.nome{color:var(--texto)}
.sub,.hora{color:var(--cinza)}
.sub.lemb{color:var(--ouro-liso)}
.num{background:var(--ouro);color:var(--ouro-txt)}
.ponto{background:#FFD66B;box-shadow:0 0 0 0 rgba(255,214,107,.6);animation:pulsa-ouro 1.6s infinite}
@keyframes pulsa-ouro{0%{box-shadow:0 0 0 0 rgba(255,214,107,.6)}70%{box-shadow:0 0 0 10px rgba(255,214,107,0)}100%{box-shadow:0 0 0 0 rgba(255,214,107,0)}}
.vazio{color:var(--cinza)}

/* barra de baixo */
.barra{background:linear-gradient(135deg,rgba(255,255,255,.10),rgba(255,255,255,.04));background-color:#06352A;border:1px solid var(--borda-v);box-shadow:0 8px 24px rgba(0,0,0,.45);-webkit-backdrop-filter:none;backdrop-filter:none;left:40px;right:40px}
.aba{color:var(--cinza);font-size:12px}
.aba.ativa{background:rgba(255,214,107,.14);color:var(--ouro-liso);font-weight:600}
.eu{background:linear-gradient(135deg,#0F6A49,#E8B84A);color:#10301F}

/* ----- dentro da conversa ----- */
.cab{background:#0A4332!important;border-bottom:1px solid var(--linha)}
.cab .t1{color:var(--texto)}.cab .t2{color:var(--cinza-leitura)}
.cab .avatar{width:42px;height:42px;margin:0}
.pilula{background:rgba(255,255,255,.09);box-shadow:0 0 0 1px var(--borda-v);color:var(--texto)}
.mensagens{bottom:0;padding-bottom:28px}
@media (display-mode: standalone) and (max-width:899px){.mensagens{bottom:0}}

.painel,.painel.saida,.painel.parc,.painel.sobra,.painel.res-e,.painel.res-i,.painel.res-s,.painel.mesp{
  background:var(--vidro);border:1px solid var(--borda-v);box-shadow:var(--sombra-v);color:var(--texto)}
.painel.saida{background:linear-gradient(135deg,rgba(255,130,110,.13),rgba(255,255,255,.04))}
.painel.parc{background:linear-gradient(135deg,rgba(170,150,255,.13),rgba(255,255,255,.04))}
.painel.sobra,.painel.res-s{background:linear-gradient(135deg,rgba(255,214,107,.15),rgba(255,255,255,.04))}
.painel.res-e{background:linear-gradient(135deg,rgba(255,130,160,.13),rgba(255,255,255,.04))}
.painel.res-i{background:linear-gradient(135deg,rgba(73,192,138,.16),rgba(255,255,255,.04))}
.painel.mesp{background:linear-gradient(135deg,rgba(120,190,255,.12),rgba(255,255,255,.04))}
.item{border-top:1px solid rgba(255,255,255,.09)}
.item span{color:var(--cinza-leitura)}
.item b{color:var(--texto)}
.item.grande b{background:var(--ouro);-webkit-background-clip:text;background-clip:text;color:transparent}
.painel.sobra .item.final{border-top:2px solid rgba(255,255,255,.14)}
.painel.sobra .item.final span{color:var(--texto)}
.pos{color:var(--ok)!important}.neg{color:var(--vermelho)!important}
.item.grande b.pos,.item.grande b.neg{background:none;-webkit-background-clip:border-box;background-clip:border-box}
.item.grande b.pos{color:var(--ok)!important}

.add{background:var(--ouro);color:var(--ouro-txt);box-shadow:0 4px 14px rgba(224,160,32,.35)}
.add.sec{background:rgba(232,184,74,.08);color:var(--ouro-liso);box-shadow:inset 0 0 0 1.5px #E8B84A}
.lanc{background:var(--vidro);border:1px solid var(--borda-v);box-shadow:var(--sombra-v);color:var(--texto)}
.lanc.auto{background:linear-gradient(135deg,rgba(73,192,138,.16),rgba(255,255,255,.04))}
.lanc.auto.parc{background:var(--vidro)}
.lanc .d small{color:var(--cinza-leitura)}
.lanc .d small.fim.azul{color:#9CC8FF}
.lanc .rec{color:var(--ok)}
.acoes button{background:rgba(255,255,255,.09);color:var(--texto)}
.acoes .v.ligado{background:rgba(111,227,168,.2);color:var(--ok)}
.lanc.mov .d b.mais{color:var(--ok)}.lanc.mov .d b.menos{color:var(--vermelho)}
.recebida{background:var(--vidro);border:1px solid var(--borda-v);box-shadow:var(--sombra-v);color:var(--texto)}
.recebida time{color:var(--cinza)}
.recebida.alerta{background:rgba(255,90,70,.16);border:2px solid #FF6B5B;color:#FFD9D3}
.recebida.alerta b{color:#FF9A8A}
.alerta-x{background:#FF6B5B;color:#fff}

/* ----- janelas (popups) ----- */
.folha-fundo.on{background:rgba(0,10,6,.66)}
.folha{background:linear-gradient(180deg,#0B4A36,#023024);border:1px solid var(--borda-v);border-bottom:0;color:var(--texto);box-shadow:0 -10px 40px rgba(0,0,0,.5)}
.alca{background:rgba(255,255,255,.25)}
.form h3,.perg h3{color:var(--texto)}
.form label{color:var(--texto)}
.form input[type=text],.form input[type=date],.form input[type=password],.form select,.cupom-l input,.ad-busca,.campo-f input{
  background:rgba(255,255,255,.07);border:1.5px solid rgba(160,240,200,.28);color:var(--texto);color-scheme:dark}
.form input[type=text]:focus,.form input[type=date]:focus,.campo-f input:focus,.dinheiro:focus-within{border-color:#FFD66B}
.form select option{background:#023024;color:var(--texto)}
.dinheiro{background:rgba(255,255,255,.07);border:1.5px solid rgba(160,240,200,.28)}
.dinheiro span{color:var(--cinza)}
.dinheiro input[type=text]{background:transparent!important;color:var(--texto)}
.liga{background:rgba(255,255,255,.2)}.liga.on{background:#E0A020}
.chave{background:rgba(255,255,255,.2)}.chave.on{background:#E0A020}
.peq{background:rgba(232,184,74,.15);color:var(--ouro-liso)}
.rep-res,.peq-txt,.perg p,.vd-dica,.gate .gate-ex{color:var(--cinza-leitura)}
.pronto{background:var(--ouro);color:var(--ouro-txt);box-shadow:0 4px 14px rgba(224,160,32,.35)}
.cancela{color:var(--cinza-leitura)}
.mes{background:rgba(255,255,255,.08);color:var(--texto)}
.mes.on,.painel.mesp .mes.on{background:var(--ouro);color:var(--ouro-txt)}
.painel.mesp .mes{background:rgba(255,255,255,.09);box-shadow:none}
.grade.anos5 .mes.ano.sel{background:rgba(232,184,74,.22);color:var(--ouro-liso);box-shadow:inset 0 0 0 1.5px #E8B84A}
.grade.anos5 .mes.ano.tem{box-shadow:inset 0 0 0 2px #49C08A}
.mesp-ant{color:var(--ouro-liso)}
.op{background:rgba(232,184,74,.13);color:var(--ouro-liso);border:1px solid rgba(232,184,74,.35)}
.op.sim{background:var(--ouro);color:var(--ouro-txt);border:0}
.op.sec{background:rgba(255,255,255,.08);color:var(--cinza-leitura);border:0}
.op.discreto{background:transparent;color:var(--cinza-leitura);border:0}
.op.perigo,.perigo-bt{background:rgba(255,90,70,.18)!important;color:#FF9A8A!important;border:1px solid rgba(255,107,91,.5)}
.op.zap{background:#25D366;color:#073B1C;border:0}
.toast{background:#0B4A36;border:1px solid var(--borda-v);color:var(--texto);box-shadow:0 8px 24px rgba(0,0,0,.5)}
.msg.erro{background:rgba(255,90,70,.16);color:#FFC9C2;border:1px solid rgba(255,107,91,.4)}
.msg.ok{background:rgba(73,192,138,.18);color:#BDF3D6;border:1px solid rgba(73,192,138,.4)}
.ajuste-cv{background:#023024}
.ajuste-linha{color:var(--cinza-leitura)}
.ajuste-zoom{accent-color:#E0A020}

/* ----- entrar, cadastro, etc. ----- */
.tela .caixa{max-width:420px}
.marca .logo-img{width:min(74vw,290px);margin:4px auto 4px}
.marca h2{color:var(--texto)}
.marca h2.sr{position:absolute}
.marca p{color:var(--cinza-leitura)}
.campo-f label{color:var(--texto)}
.senha-l button{color:var(--ouro-liso)}
.btn{background:var(--ouro);color:var(--ouro-txt);box-shadow:0 6px 18px rgba(224,160,32,.3)}
.btn.claro{background:rgba(232,184,74,.08);color:var(--ouro-liso);border:1.5px solid #E8B84A;box-shadow:none}
.link{color:var(--ouro-liso)}
.pequeno,.dica-zap{color:var(--cinza)}
.btn-sup{background:#25D366;color:#073B1C}
.btn-sup.mail{background:transparent;color:var(--ouro-liso);border:1.5px solid #E8B84A}
.carregando .logo-img{animation:pulsa 1.2s ease-in-out infinite;width:min(70vw,260px)}
#faixa-teste{background:linear-gradient(135deg,#FFD66B,#E0A020);color:#10301F}

/* ----- Você ----- */
.voce{background:var(--fundo-app);background-color:#012417}
.voce-topo{display:flex;align-items:center;gap:6px;margin-left:-8px}
.voce-volta{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;color:var(--ouro-liso);flex:none}
.voce-volta .ico{width:26px;height:26px;stroke-width:2.4}
.voce-topo h1{padding:6px 2px 14px 0}
.cartao,.grupo-v{background:var(--vidro);border:1px solid var(--borda-v);box-shadow:var(--sombra-v)}
.cartao .nm{color:var(--texto)}.cartao .em{color:var(--cinza-leitura)}
.cartao .acesso b{color:var(--ouro-liso)}
.lv{background:transparent;border-bottom:1px solid rgba(255,255,255,.09);color:var(--texto)}
.lv-ic{background:rgba(255,255,255,.09)}
.lv-t small{color:var(--cinza-leitura)}.lv-seta{color:var(--cinza)}
.lv.perigo b{color:#FF9A8A}
.sair{color:#FF9A8A}
.cupom-l button{background:var(--ouro);color:var(--ouro-txt)}
.foto-grande{background:linear-gradient(135deg,#0F6A49,#E8B84A);color:#10301F;box-shadow:0 6px 18px rgba(0,0,0,.4)}
.perfil-email{color:var(--cinza-leitura)}
.passo{color:var(--texto)}
.vd-bt{background:rgba(232,184,74,.13);color:var(--ouro-liso)}
.vd-bt.vd-rm{background:rgba(255,90,70,.12);color:#FF9A8A;box-shadow:inset 0 0 0 1.5px rgba(255,107,91,.45)}
.vd-email{color:var(--cinza-leitura)}

/* ----- Dúvidas ----- */
.dv-chip{background:rgba(255,255,255,.09);color:var(--texto);box-shadow:inset 0 0 0 1px var(--borda-v)}
.dv-chip.on{background:var(--ouro);color:var(--ouro-txt);box-shadow:none}
.dv-card{background:var(--vidro);border:1px solid var(--borda-v);box-shadow:var(--sombra-v);color:var(--texto)}
.dv-tit{color:var(--texto)}.dv-sub{color:var(--cinza-leitura)}
.dv-oculto{background:rgba(255,255,255,.14);color:var(--cinza-leitura)}
.dv-gerir{background:rgba(232,184,74,.13);color:var(--ouro-liso)}
.dv-ger-lin{background:rgba(255,255,255,.07)}
.dv-ger-t small,.dv-vazio{color:var(--cinza-leitura)}
.dv-ger-bt button{background:rgba(255,255,255,.12);color:var(--texto);box-shadow:none}
.vf-prev{background:rgba(255,255,255,.08)}

/* ----- Painel do Administrador ----- */
.ad-tit{color:var(--cinza-leitura)}
.ad-card{background:var(--vidro);border:1.5px solid var(--borda-v);color:var(--texto);box-shadow:var(--sombra-v);-webkit-backdrop-filter:none;backdrop-filter:none}
.ad-card.on{border-color:#FFD66B}
.ad-r{color:var(--cinza-leitura)}.ad-card small{color:var(--cinza)}
.ad-card.ok{background:linear-gradient(135deg,rgba(73,192,138,.2),rgba(255,255,255,.04))}.ad-card.ok .ad-n{color:var(--ok)}
.ad-card.mau{background:linear-gradient(135deg,rgba(255,90,70,.2),rgba(255,255,255,.04))}.ad-card.mau .ad-n{color:#FF9A8A}
.ad-card.aten .ad-n{color:#FFD66B}
.ad-planos{background:var(--vidro);color:var(--cinza-leitura);border:1px solid var(--borda-v)}
.ad-sem{color:#FFD66B}
.ad-lin{background:var(--vidro);border:1px solid var(--borda-v);box-shadow:var(--sombra-v)}
.ad-av{background:rgba(232,184,74,.18);color:var(--ouro-liso)}
.ad-mei small{color:var(--cinza)}
.ad-sit.verde{background:rgba(73,192,138,.2);color:#8FF0BE}.ad-sit.verm{background:rgba(255,90,70,.2);color:#FF9A8A}.ad-sit.azul{background:rgba(120,170,255,.2);color:#A9C8FF}
.ad-sit.amar{background:rgba(255,214,107,.2);color:#FFD66B}.ad-sit.roxo{background:rgba(180,150,255,.2);color:#CDB8FF}.ad-sit.cinza{background:rgba(255,255,255,.12);color:var(--cinza-leitura)}
.ad-alerta{color:#FFD66B!important}
.ad-zap{background:#25D366}
.ad-excel{background:var(--ouro);color:var(--ouro-txt);box-shadow:0 3px 12px rgba(224,160,32,.35)}
.ad-det{border-bottom:1px solid rgba(255,255,255,.1)}.ad-det span{color:var(--cinza-leitura)}

/* ----- computador ----- */
@media (min-width:900px){
  .trilho{background:rgba(0,0,0,.28);border-right:1px solid var(--linha)}
  .tb{color:var(--cinza-leitura)}.tb:hover{background:rgba(255,255,255,.08)}
  .tb.ativa{background:rgba(255,214,107,.14);color:var(--ouro-liso)}
  .trilho .sep{background:rgba(255,255,255,.14)}
  .chat{border-left:1px solid var(--linha)}
  .deskcab{padding:18px 16px 4px 20px}
  .deskcab .tit img{height:34px;width:auto}
  .cab{background:#0A4332!important;border-bottom:1px solid var(--linha)}
  .mensagens{top:60px;bottom:0}
  .rodape{border-top:1px solid var(--linha);background:rgba(0,0,0,.2)}
  .rodape span{color:var(--cinza-leitura)}
  .app:not(.dentro) .chat{background:var(--fundo-app);background-color:#012417}
  .boas .logo-img{width:min(40vw,360px);margin:0 auto 18px}
  .boas h2{color:var(--texto);font-weight:600}
  .boas p{color:var(--cinza-leitura)}
  .rolagem{padding:2px 14px 12px}
  .voce{left:0}
}

/* cadastro em 2 passos */
.passos{display:flex;gap:8px;justify-content:center;margin:-8px 0 18px}
.passos i{width:34px;height:5px;border-radius:3px;background:rgba(255,255,255,.18)}
.passos i.on{background:var(--ouro)}