/* ==========================================================================
   O que a plataforma do MEI acrescenta ao sistema de design da casa (base.css).
   Mesmos tokens; nada de valor solto. Quem usa e gente no CELULAR: tudo aqui
   foi pensado primeiro para tela estreita.
   ========================================================================== */

/* ---------------------------------------------------------------- casca: gaveta no celular */
.topo{display:none}
.faixa{display:flex;gap:var(--e3);align-items:center;flex-wrap:wrap;padding:var(--e2) var(--e12);font:600 13px/18px var(--f-texto)}
.faixa svg{width:16px;height:16px;flex:none}
.faixa>span{flex:1 1 220px;min-width:0}
.faixa--demo{background:var(--atencao-fundo);color:var(--atencao)}
.faixa--teste{background:var(--navy-tenue);color:var(--info)}
.faixa--perigo{background:var(--perigo-fundo);color:var(--perigo)}
.faixa .btn{margin-left:auto}
.conteudo>*{min-width:0;max-width:100%}
.toast svg{width:18px;height:18px;flex:none;margin-top:2px}
.soltar b{display:flex;align-items:center;gap:var(--e2)}
.soltar b svg{width:18px;height:18px;flex:none}
.seg{max-width:100%;overflow-x:auto}
.so-p{display:none}
.nav__quem{padding:0 var(--e3) var(--e2);font:500 12px/16px var(--f-texto);opacity:.7;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
a.btn{text-decoration:none}
.btn--perigo{background:var(--perigo);color:#fff}
.btn--largo{width:100%}
.btn--g{height:48px;padding:0 var(--e6);font-size:16px}
textarea.entrada{height:auto;min-height:88px;padding:var(--e2) var(--e3);resize:vertical}
.entrada--erro{border-color:var(--perigo)}
.campo small{font:500 12px/16px var(--f-texto);color:var(--tinta-2)}
.form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--e4)}
.form .inteiro{grid-column:1/-1}
.marcar{display:flex;gap:var(--e3);align-items:flex-start;font-size:14px;cursor:pointer}
.marcar input{width:18px;height:18px;margin-top:2px;flex:none;accent-color:var(--navy)}
.janela--p{width:min(560px,100%)}
.janela__pe{display:flex;gap:var(--e3);justify-content:flex-end;flex-wrap:wrap;padding:var(--e4) var(--e6) var(--e6)}
.total-linha{display:flex;justify-content:space-between;align-items:baseline;gap:var(--e4);padding-top:var(--e3);border-top:1px solid var(--linha)}
.total-linha b{font:500 26px/30px var(--f-numero)}
.copiar{display:flex;gap:var(--e2);align-items:center;padding:var(--e2) var(--e3);border-radius:var(--r-m);background:var(--rebaixo);font:500 13px/18px var(--f-numero);word-break:break-all}

/* selos de estado da plataforma (forma + cor, como na casa) */
.selo--paga,.selo--ativa,.selo--pago,.selo--transmitida,.selo--regular,.selo--concluido,.selo--conferida,.selo--autorizada{background:var(--ok-fundo);color:var(--ok)}
.selo--com_voce,.selo--a_vencer,.selo--aberto,.selo--teste,.selo--recebido,.selo--pendente,.selo--parcelada,.selo--ativo{background:var(--info-fundo);color:var(--info)}
.selo--com_voce::before,.selo--a_vencer::before,.selo--aberto::before,.selo--teste::before,.selo--recebido::before,.selo--pendente::before,.selo--parcelada::before,.selo--ativo::before{background:transparent;border:2px solid currentColor}
.selo--em_analise,.selo--em_andamento,.selo--pedido,.selo--informada,.selo--atrasada{background:var(--atencao-fundo);color:var(--atencao)}
.selo--em_analise::before,.selo--em_andamento::before,.selo--pedido::before,.selo--informada::before,.selo--atrasada::before{border-radius:2px;transform:rotate(45deg)}
.selo--vencida,.selo--vencido,.selo--bloqueada,.selo--pendencias,.selo--cancelada,.selo--cancelado,.selo--nao{background:var(--perigo-fundo);color:var(--perigo)}
.selo--vencida::before,.selo--vencido::before,.selo--bloqueada::before,.selo--pendencias::before,.selo--cancelada::before,.selo--cancelado::before,.selo--nao::before{border-radius:0;height:3px;width:10px}

/* medidor claro (fora do cartao navy) */
.medidor--claro{background:var(--rebaixo)}
.medidor--claro .medidor__marca{background:var(--superficie);border-color:var(--navy)}
.medidor--atencao .medidor__faixa{background:var(--ouro)}
.medidor--perigo .medidor__faixa{background:var(--perigo)}
.medidor--ok .medidor__faixa{background:var(--ok)}

/* proxima guia */
.destaque-valor{font:500 40px/44px var(--f-numero);letter-spacing:-.02em}
.reg{display:grid;grid-template-columns:auto 1fr auto;gap:var(--e3) var(--e4);align-items:center;padding:var(--e3) 0;border-top:1px solid var(--linha)}
.reg:first-child{border-top:0}
.reg__icone{width:36px;height:36px;border-radius:var(--r-m);display:grid;place-items:center;background:var(--rebaixo);color:var(--tinta-2)}
.reg__icone svg{width:18px;height:18px}
.reg small{display:block;color:var(--tinta-2);font-size:13px}
.reg--perigo .reg__icone{background:var(--perigo-fundo);color:var(--perigo)}
.reg--ok .reg__icone{background:var(--ok-fundo);color:var(--ok)}

/* DRE */
.dre{width:100%}
.dre td{border:0;padding:6px var(--e3)}
.dre td:first-child{padding-left:0}.dre td:last-child{padding-right:0}
.dre tr.grupo td{padding-top:var(--e4);font-weight:600}
.dre tr.sub td:first-child{padding-left:var(--e4);color:var(--tinta-2)}
.dre tr.total td{border-top:1px solid var(--linha);font-weight:600;padding-top:var(--e2)}
.dre tr.final td{border-top:2px solid var(--tinta);font:600 18px/26px var(--f-texto);padding-top:var(--e3)}
.dre tr.final td.num{font:500 20px/26px var(--f-numero)}
.neg{color:var(--perigo)}
.colunas{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--e2);align-items:end;height:160px}
.colunas__mes{display:flex;flex-direction:column;align-items:center;gap:4px;height:100%;justify-content:flex-end;min-width:0}
.colunas__par{display:flex;gap:2px;align-items:flex-end;height:100%;width:100%;justify-content:center}
.colunas__par i{display:block;width:42%;max-width:14px;border-radius:3px 3px 0 0;min-height:2px}
.colunas__mes span{font:500 11px/14px var(--f-texto);color:var(--tinta-2)}

/* planos, servicos, passo a passo */
.opcoes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--e3)}
.opcao{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;gap:var(--e1);padding:var(--e4);border:1.5px solid var(--linha-forte);border-radius:var(--r-m);background:var(--superficie)}
.opcao[aria-pressed="true"]{border-color:var(--navy);box-shadow:0 0 0 1.5px var(--navy);background:var(--navy-tenue)}
.opcao:focus-visible{outline:2px solid var(--foco);outline-offset:2px}
.opcao b{font:600 15px/22px var(--f-texto)}
.opcao span{font-size:13px;color:var(--tinta-2)}
.servico{display:flex;flex-direction:column;gap:var(--e3)}
.servico p{color:var(--tinta-2);font-size:14px;flex:1}
ol.guia-passos{margin:0;padding-left:var(--e6);display:flex;flex-direction:column;gap:var(--e2);font-size:14px}

/* ---------------------------------------------------------------- balao: conversa com o escritorio */
.balao{all:unset;box-sizing:border-box;cursor:pointer;position:fixed;right:var(--e6);bottom:var(--e6);z-index:18;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:var(--ouro);color:var(--sobre-ouro);box-shadow:var(--sombra-janela)}
.balao:hover{filter:brightness(1.08)}
.balao:focus-visible{outline:3px solid var(--foco);outline-offset:3px}
.balao svg{width:26px;height:26px}
.balao__conta{position:absolute;top:-4px;right:-4px;min-width:22px;height:22px;padding:0 6px;border-radius:var(--r-pilula);background:var(--perigo);color:#fff;font:600 12px/22px var(--f-numero);text-align:center;border:2px solid var(--chao)}
.conversa{position:fixed;right:var(--e6);bottom:96px;z-index:18;width:min(380px,calc(100vw - 32px));height:min(520px,calc(100vh - 128px));display:flex;flex-direction:column;background:var(--superficie);border:1px solid var(--linha);border-radius:var(--r-g);box-shadow:var(--sombra-janela);overflow:hidden}
.conversa__cab{display:flex;align-items:center;justify-content:space-between;gap:var(--e3);padding:var(--e3) var(--e3) var(--e3) var(--e4);background:var(--navy-forte);color:var(--sobre-navy)}
.conversa__cab b{display:block;font:600 16px/22px var(--f-titulo)}
.conversa__cab span{font:500 12px/16px var(--f-texto);opacity:.75}
.conversa__cab .fechar{color:var(--sobre-navy)}
.conversa__cab .fechar:hover{background:#FFFFFF1F}
.conversa__lista{flex:1;overflow-y:auto;padding:var(--e4);display:flex;flex-direction:column;gap:var(--e3);background:var(--chao)}
.conversa__pe{display:flex;gap:var(--e2);align-items:flex-end;padding:var(--e3);border-top:1px solid var(--linha)}
.conversa__pe textarea.entrada{flex:1;min-height:40px;max-height:120px;resize:none}
.conversa__pe .btn{width:40px;padding:0;flex:none}
.msg{align-self:flex-start;max-width:86%;display:flex;flex-direction:column;gap:2px}
.msg__texto{padding:var(--e2) var(--e3);border-radius:var(--r-m) var(--r-m) var(--r-m) 4px;background:var(--superficie);border:1px solid var(--linha);font-size:14px;line-height:20px;white-space:pre-wrap;overflow-wrap:anywhere}
.msg small{font:500 11px/14px var(--f-texto);color:var(--tinta-2);padding:0 4px}
.msg--minha{align-self:flex-end;align-items:flex-end}
.msg--minha .msg__texto{background:var(--navy);border-color:transparent;color:var(--sobre-navy);border-radius:var(--r-m) var(--r-m) 4px var(--r-m)}
.toasts{bottom:96px}

/* ---------------------------------------------------------------- pagina de entrada (publica) */
.pub{min-height:100%;display:flex;flex-direction:column}
.pub__topo{display:flex;align-items:center;gap:var(--e4);padding:var(--e4) var(--e12);background:var(--navy-forte);color:var(--sobre-navy)}
.pub__marca{display:flex;align-items:center;gap:var(--e3);margin-right:auto}
.pub__marca svg{width:48px;height:48px}
/* a marca: simbolo (o M no medidor, em comum.js) + assinatura ("MENDES" sobre "mei", com o pingo dourado) */
.assinatura{display:block;height:40px;width:auto;margin-bottom:3px}
.nav__marca svg{width:46px;height:46px}
.nav__marca .assinatura{height:36px}
.pub__marca b{display:block;font:600 22px/24px var(--f-titulo)}
.pub__marca span{font:500 12px/16px var(--f-texto);opacity:.7}
.pub__topo .btn--sec{background:transparent;color:var(--sobre-navy);border-color:#FFFFFF55}
.heroi{background:var(--navy-forte);color:var(--sobre-navy);padding:var(--e12) var(--e12) 96px}
.heroi__grade{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:var(--e12);align-items:center;max-width:1200px;margin:0 auto}
.heroi h1{font:600 52px/56px var(--f-titulo);letter-spacing:-.02em}
.heroi h1 em{font-style:normal;color:var(--ouro)}
.heroi p{font-size:18px;line-height:28px;opacity:.85;margin:var(--e4) 0 var(--e6);max-width:52ch}
.heroi .sobrelinha{color:var(--ouro)}
.heroi__nota{font-size:13px;opacity:.7;margin-top:var(--e3)}
.amostra{background:var(--superficie);color:var(--tinta);border-radius:var(--r-g);padding:var(--e6);box-shadow:var(--sombra-janela);display:flex;flex-direction:column;gap:var(--e4)}
.secao{padding:var(--e12);max-width:1200px;width:100%;margin:0 auto;display:flex;flex-direction:column;gap:var(--e6)}
.secao>header{max-width:60ch}
.secao h2{font:600 32px/38px var(--f-titulo);letter-spacing:-.01em}
.secao>header p{color:var(--tinta-2);margin-top:var(--e2);font-size:17px;line-height:26px}
.recursos{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--e4)}
.recurso{display:flex;flex-direction:column;gap:var(--e2)}
.recurso .reg__icone{background:var(--navy-tenue);color:var(--navy)}
.recurso p{color:var(--tinta-2);font-size:14px}
.preco{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:var(--e8);align-items:center}
.preco__valor{font:500 64px/64px var(--f-numero);letter-spacing:-.03em}
.preco__valor small{font:500 18px/24px var(--f-texto);opacity:.75}
.lista-ok{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--e2) var(--e4);font-size:15px}
.lista-ok li{display:flex;gap:var(--e2);align-items:flex-start}
.lista-ok svg{width:18px;height:18px;flex:none;margin-top:2px;color:var(--ok)}
.pub__pe{margin-top:auto;padding:var(--e6) var(--e12);border-top:1px solid var(--linha);color:var(--tinta-2);font-size:13px;display:flex;gap:var(--e4);flex-wrap:wrap;justify-content:space-between}
.pub__pe a{color:inherit}
.etapas{display:flex;gap:var(--e2);align-items:center;font:600 12px/16px var(--f-texto);color:var(--tinta-2)}
.etapas i{flex:1;height:4px;border-radius:var(--r-pilula);background:var(--rebaixo)}
.etapas i.feita{background:var(--ouro)}
.texto-longo{max-width:72ch;display:flex;flex-direction:column;gap:var(--e3)}
.texto-longo h2{margin-top:var(--e4)}

/* ---------------------------------------------------------------- telas menores */
@media (max-width:1100px){
  .heroi__grade,.preco{grid-template-columns:1fr}
  .heroi h1{font-size:40px;line-height:44px}
  .faixa{padding-left:var(--e6);padding-right:var(--e6)}
}
@media (max-width:820px){
  /* O menu vira gaveta: no celular ele nao pode empurrar o conteudo para baixo. */
  .topo{display:flex;align-items:center;gap:var(--e3);padding:var(--e3) var(--e4);background:var(--navy-forte);color:var(--sobre-navy);position:sticky;top:0;z-index:12}
  .topo b{font:600 19px/22px var(--f-titulo);margin-right:auto}
  .topo .assinatura{height:30px;margin:0 auto 0 0}
  .topo svg:first-child{width:36px;height:36px}
  .topo svg{width:32px;height:32px}
  .topo button{all:unset;cursor:pointer;width:40px;height:40px;display:grid;place-items:center;border-radius:var(--r-m)}
  .topo button svg{width:22px;height:22px}
  .app{display:block}
  .app .nav{position:fixed;inset:0 20% 0 0;z-index:15;height:auto;flex-direction:column;flex-wrap:nowrap;align-items:stretch;padding:var(--e6) var(--e3) var(--e4);transform:translateX(-102%);transition:transform .2s ease}
  .app .nav.aberta{transform:none;box-shadow:var(--sombra-janela)}
  .saude__resumo{grid-template-columns:repeat(3,1fr);gap:var(--e3)}
  .saude__resumo b{font-size:17px;line-height:22px}
  .saude__resumo span{font-size:13px;line-height:16px;display:block}
  .saude__nota{font-size:52px;line-height:52px}
  .app .nav .nav__grupo,.app .nav .nav__pe span{display:block}
  .app .nav button.item{width:100%}
  .app .nav .nav__pe{margin:auto 0 0;border-top:1px solid #FFFFFF1F;padding:var(--e4) var(--e3) 0;flex-direction:column}
  .app .nav .nav__marca{padding:0 var(--e3) var(--e6)}
  .veu{position:fixed;inset:0;z-index:14;background:rgba(8,30,46,.5)}
  .conteudo{padding:var(--e6) var(--e4) var(--e12)}
  .faixa{padding:var(--e2) var(--e4)}
  .form,.opcoes,.lista-ok{grid-template-columns:1fr}
  .pub__topo,.heroi,.secao,.pub__pe{padding-left:var(--e4);padding-right:var(--e4)}
  .heroi{padding-top:var(--e8);padding-bottom:var(--e12)}
  .heroi h1{font-size:34px;line-height:38px}
  .secao h2{font-size:26px;line-height:32px}
  .preco__valor{font-size:48px;line-height:48px}
  .destaque-valor{font-size:32px;line-height:36px}
  .fundo{padding:0;place-items:end center}
  .janela{border-radius:var(--r-g) var(--r-g) 0 0;max-height:92vh;width:100%}
  td,th{padding:var(--e2) var(--e3)}
  td:first-child,th:first-child{padding-left:var(--e4)}
  td:last-child,th:last-child{padding-right:var(--e4)}
  .esconde-p{display:none}
  .balao{right:var(--e4);bottom:var(--e4)}
  .conversa{right:0;left:0;bottom:0;width:100%;height:min(78vh,560px);border-radius:var(--r-g) var(--r-g) 0 0;z-index:19}
  .toasts{bottom:88px}
  .so-p{display:block}
  .reg{grid-template-columns:auto 1fr}
  .reg>:last-child:not(:nth-child(2)){grid-column:2}
  .pub__topo .btn--sec span{display:none}
}
@media (prefers-reduced-motion:reduce){.app .nav{transition:none}}
@media print{.topo,.faixa,.veu,.balao,.conversa{display:none!important}}

/* Consulta de pendencias avulsa: a trilha dos quatro passos */
.trilha{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 22px;font:600 13px/20px var(--f-texto);color:var(--tinta-2)}
.trilha li{display:flex;align-items:center;gap:var(--e2)}
.trilha li span{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--rebaixo);font:600 12px/1 var(--f-numero)}
.trilha li.atual{color:var(--tinta)}
.trilha li.atual span{background:var(--navy);color:var(--sobre-navy)}
.trilha li.feito span{background:var(--ouro);color:#1B1611}