/* Central do Assinante no navegador (PWA) — mesmo tema do app ATIV Internet (Tema.kt / Componentes.kt) */
@font-face{font-family:Outfit;src:url(/web/fontes/outfit_regular.ttf) format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:Outfit;src:url(/web/fontes/outfit_medium.ttf) format("truetype");font-weight:500;font-display:swap}
@font-face{font-family:Outfit;src:url(/web/fontes/outfit_semibold.ttf) format("truetype");font-weight:600;font-display:swap}
@font-face{font-family:Outfit;src:url(/web/fontes/outfit_bold.ttf) format("truetype");font-weight:700;font-display:swap}
@font-face{font-family:Outfit;src:url(/web/fontes/outfit_extrabold.ttf) format("truetype");font-weight:800;font-display:swap}
:root{
  --fundo:#FFFFFF;--cartao:#F2F5EE;--borda:#E1E7DA;--divisor:#D3DACC;--texto:#101810;--suave:#4F5B52;
  --verde:#9AEB03;--verde-escuro:#7FAE0C;--sobre-verde:#122000;--verde-fundo:#E3F6C2;--destaque:#356300;--ok:#3E9A00;
  --amarelo:#764800;--amarelo-fundo:#FFEFD0;--vermelho:#9A1F12;--vermelho-fundo:#FDE4E1;--azul:#2E7BC4;
  --topo:#142018;--topo-texto:#FFFFFF;--topo-suave:#C5D3C8;--topo-vidro:rgba(255,255,255,.12);
  --seg-topo:env(safe-area-inset-top,0px);--seg-base:env(safe-area-inset-bottom,0px);
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--fundo)}
body{font-family:Outfit,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--texto);font-size:15px;line-height:21px;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;overscroll-behavior-y:none}
/* largura de celular; num computador fica centralizado */
#app{max-width:480px;min-height:100%;margin:0 auto;background:var(--fundo);display:flex;flex-direction:column;position:relative}
@media (min-width:520px){body{background:#E6ECE2}#app{box-shadow:0 0 0 1px var(--borda),0 10px 40px rgba(16,24,16,.12)}}
button,input,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--destaque)}
:focus-visible{outline:3px solid var(--verde);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.carregando-inicial{flex:1;min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--topo)}
.carregando-inicial img{height:auto;max-width:150px}

/* ---------- topo (Cabecalho) ---------- */
.topo{background:var(--topo);color:var(--topo-texto);border-radius:0 0 28px 28px;padding:calc(var(--seg-topo) + 8px) 10px 22px 20px;display:flex;flex-direction:column;gap:12px;position:sticky;top:0;z-index:5}
.topo .linha{display:flex;align-items:center;gap:8px}
.topo .logo{height:30px;width:auto;display:block}
.topo .esp{flex:1}
.topo h1{font-size:26px;line-height:31px;font-weight:800;margin:0;padding-right:10px}
.topo .sub{color:var(--topo-suave);font-size:14px;font-weight:500;margin:4px 0 0}
.sino{position:relative;width:48px;height:48px;border:0;background:transparent;color:var(--topo-texto);display:flex;align-items:center;justify-content:center;border-radius:50%}
.sino .cont{position:absolute;top:6px;right:4px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:#FF7A66;color:#2A0A05;font-size:11px;font-weight:700;line-height:18px;text-align:center}
.vidro{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 12px;border-radius:18px;background:var(--topo-vidro);color:var(--topo-texto);border:0;font-size:13px;font-weight:700;max-width:100%;width:max-content}
.vidro span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:230px}
/* barra de voltar (BarraVoltar) */
.voltar{background:var(--topo);color:var(--topo-texto);border-radius:0 0 24px 24px;padding:calc(var(--seg-topo) + 6px) 16px 14px 6px;display:flex;flex-direction:column;gap:10px;position:sticky;top:0;z-index:5}
.voltar .linha{display:flex;align-items:center;gap:4px}
.voltar h1{font-size:20px;line-height:26px;font-weight:700;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.voltar .extra{padding-left:14px;display:flex;flex-direction:column;gap:8px}
.ib{width:48px;height:48px;border:0;background:transparent;color:inherit;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}

/* ---------- conteúdo ---------- */
.conteudo{flex:1;padding:18px 20px calc(110px + var(--seg-base));display:flex;flex-direction:column;gap:14px}
.conteudo.sem-barra{padding-bottom:calc(24px + var(--seg-base))}
.cartao{background:var(--cartao);border-radius:18px;padding:16px;display:flex;flex-direction:column;gap:10px;border:1px solid transparent}
.cartao.branco{background:#fff;border-color:var(--borda)}
.cartao.amarelo{background:var(--amarelo-fundo)}
.cartao.vermelho{background:var(--vermelho-fundo)}
.cartao.verde{background:var(--verde-fundo)}
.cartao.toque{cursor:pointer;text-align:left;width:100%;font:inherit;color:inherit}
.titulo-tela{font-size:17px;line-height:22px;font-weight:800;margin:4px 0 0}
.t-medio{font-size:17px;line-height:22px;font-weight:700;margin:0}
.suave{color:var(--suave);font-size:13px;line-height:18px;margin:0}
.p{margin:0}
.valor{font-size:26px;line-height:31px;font-weight:800}
.linha{display:flex;align-items:center;gap:10px}
.linha .cresce{flex:1;min-width:0}
.div{height:1px;background:var(--borda);width:100%}
.bolinha{width:10px;height:10px;border-radius:50%;flex-shrink:0;display:inline-block}
.chip{display:inline-flex;align-items:center;border-radius:999px;padding:4px 10px;font-size:12px;font-weight:700;width:max-content}
.chip.ok{background:var(--verde-fundo);color:var(--destaque)}
.chip.alerta{background:var(--amarelo-fundo);color:var(--amarelo)}
.chip.erro{background:var(--vermelho-fundo);color:var(--vermelho)}
.chip.neutro{background:#E9EDE5;color:var(--suave)}
.info{display:flex;justify-content:space-between;gap:12px;font-size:14px;padding:6px 0;border-top:1px solid var(--borda)}
.info:first-of-type{border-top:0}
.info span{color:var(--suave)}
.info b{text-align:right;font-weight:600}
.link{background:none;border:0;color:var(--destaque);font-weight:700;font-size:14px;padding:10px 4px;min-height:44px}

/* botões */
.bt{min-height:52px;border-radius:16px;border:0;padding:0 18px;font-size:15px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none}
.bt.principal{background:var(--verde);color:var(--sobre-verde)}
.bt.secundario{background:transparent;color:var(--texto);border:1.5px solid var(--divisor)}
.bt.perigo{background:transparent;color:var(--vermelho);border:1.5px solid #F2C4BD}
.bt.compacto{min-height:48px;border-radius:14px}
.bt.largo{width:100%}
.bt[disabled]{opacity:.5;cursor:default}
.bt .giro{width:18px;height:18px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:giro .8s linear infinite}
@keyframes giro{to{transform:rotate(360deg)}}
.duas{display:grid;grid-template-columns:1fr 1fr;gap:10px}

/* grade "O que você precisa?" (GradeAcoes) */
.grade{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.acao{min-height:104px;border-radius:18px;background:var(--cartao);border:0;padding:14px;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;text-align:left;font-size:15px;font-weight:700;color:var(--texto)}
.acao .ic{width:42px;height:42px;border-radius:13px;background:#fff;display:flex;align-items:center;justify-content:center;color:var(--destaque)}
/* opção grande (OpcaoGrande) */
.opcao{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--borda);border-radius:18px;padding:14px;width:100%;text-align:left;color:var(--texto)}
.opcao.destaque{background:var(--verde);border-color:var(--verde);color:var(--sobre-verde)}
.opcao .ic{width:44px;height:44px;border-radius:14px;background:var(--cartao);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--destaque)}
.opcao.destaque .ic{background:rgba(255,255,255,.55);color:var(--sobre-verde)}
.opcao b{display:block;font-size:15px}
.opcao small{display:block;color:var(--suave);font-size:13px;line-height:18px}
.opcao.destaque small{color:var(--sobre-verde)}

/* abas internas */
.abas-int{display:flex;gap:6px;background:var(--topo-vidro);border-radius:14px;padding:4px;width:max-content;max-width:100%}
.abas-int button{border:0;background:transparent;color:var(--topo-suave);border-radius:10px;min-height:38px;padding:0 14px;font-weight:700;font-size:14px}
.abas-int button[aria-selected="true"]{background:#fff;color:var(--texto)}

/* barra inferior flutuante (BarraInferior) */
.barra{position:fixed;left:50%;transform:translateX(-50%);bottom:0;width:100%;max-width:480px;padding:10px 16px calc(10px + var(--seg-base));z-index:6;pointer-events:none}
.barra nav{pointer-events:auto;height:68px;border-radius:22px;background:#fff;box-shadow:0 6px 22px rgba(16,24,16,.18);display:grid;grid-template-columns:repeat(4,1fr)}
.barra a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;text-decoration:none;color:var(--suave);font-size:12px;font-weight:500}
.barra a[aria-current="page"]{color:var(--texto);font-weight:700}
.barra a .ponto{width:6px;height:6px;border-radius:50%;margin-top:3px;background:transparent}
.barra a[aria-current="page"] .ponto{background:var(--verde)}

/* formulários */
.campo{display:flex;flex-direction:column;gap:6px}
.campo label{font-size:14px;font-weight:600}
.entrada{display:flex;align-items:center;min-height:54px;border-radius:16px;border:1.5px solid var(--divisor);background:#fff;padding:0 6px 0 16px}
.entrada:focus-within{border-color:var(--destaque)}
.entrada input{flex:1;border:0;outline:0;background:transparent;font-size:16px;min-height:50px;min-width:0}
.erro-txt{color:var(--vermelho);font-size:14px;margin:0}
.codigo-in{letter-spacing:.4em;text-align:center;font-size:24px;font-weight:700}

/* acesso (login) */
.acesso{min-height:100vh;display:flex;flex-direction:column;background:var(--fundo)}
.acesso .capa{background:var(--topo);color:#fff;border-radius:0 0 32px 32px;padding:calc(var(--seg-topo) + 28px) 24px 30px;display:flex;flex-direction:column;gap:16px}
.acesso .capa img{height:42px;width:auto;align-self:flex-start}
.acesso .capa h1{font-size:30px;line-height:35px;font-weight:800;margin:0;white-space:pre-line}
.acesso .capa p{margin:0;color:var(--topo-suave)}
.acesso .form{padding:22px 24px calc(28px + var(--seg-base));display:flex;flex-direction:column;gap:14px}

/* listas */
.item-lista{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--borda)}
.item-lista:first-child{border-top:0}
.vazio{text-align:center;color:var(--suave);padding:28px 10px}
.esq{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}

/* folha inferior (escolher como pagar, avisos) */
.veu{position:fixed;inset:0;background:rgba(16,24,16,.45);z-index:20;display:flex;align-items:flex-end;justify-content:center}
.folha{width:100%;max-width:480px;background:#fff;border-radius:24px 24px 0 0;padding:10px 20px calc(22px + var(--seg-base));display:flex;flex-direction:column;gap:12px;max-height:90vh;overflow:auto}
.folha .puxador{width:40px;height:5px;border-radius:3px;background:var(--divisor);margin:4px auto 6px}
.folha h2{font-size:20px;line-height:26px;margin:0}
.copia{background:var(--cartao);border-radius:14px;padding:12px;font:13px/1.4 ui-monospace,Menlo,monospace;word-break:break-all;color:var(--suave);max-height:120px;overflow:auto}
.passo{display:flex;gap:12px;align-items:center;background:var(--cartao);border-radius:14px;padding:12px}
.passo b.n{width:30px;height:30px;border-radius:50%;background:var(--verde);color:var(--sobre-verde);display:flex;align-items:center;justify-content:center;flex-shrink:0}

/* faixas do PWA (instalar / avisos) */
.faixa{display:flex;gap:12px;align-items:center;background:var(--verde-fundo);border-radius:18px;padding:12px 12px 12px 14px}
.faixa .ic{width:40px;height:40px;border-radius:12px;background:var(--verde);color:var(--sobre-verde);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.faixa .x{width:40px;height:40px;border:0;background:none;color:var(--suave);border-radius:50%}

/* consumo (1.15.3) — cores do app: download #5E9E00, upload #2E7BC4 */
.cg-cartao{gap:14px}
.cg-resumo{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cg-tot{background:var(--cartao);border-radius:14px;padding:10px 12px;display:flex;flex-direction:column;gap:2px}
.cg-tot span{font-size:12px;font-weight:600}
.cg-tot.dl span{color:#5E9E00}.cg-tot.ul span{color:#2E7BC4}
.cg-tot b{font-size:24px;line-height:28px;font-weight:800}
.cg-tot small{font-size:12px;color:var(--suave);font-weight:600}
.cg{display:grid;grid-template-columns:34px 1fr;gap:4px;height:230px}
.cg-eixo{position:relative;height:190px;margin-top:22px}
.cg-un{position:absolute;top:-20px;left:0;font-size:11px;font-weight:700;color:var(--suave)}
.cg-y{position:absolute;right:4px;transform:translateY(50%);font-size:11px;color:var(--suave);font-variant-numeric:tabular-nums}
.cg-rolo{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}
.cg-area{position:relative;height:212px;margin-top:22px;display:flex;align-items:stretch;gap:6px;padding:0 2px}
.cg-grade{position:absolute;left:0;right:0;height:0;border-top:1px dashed var(--borda)}
.cg-grade[data-base="0"]{border-top:1.5px solid var(--divisor)}
.cg-col{flex:1;min-width:34px;display:flex;flex-direction:column;align-items:center;position:relative}
.cg-barras{height:190px;width:100%;display:flex;align-items:flex-end;justify-content:center;gap:3px;position:relative;z-index:1}
.cg-b{width:42%;max-width:18px;min-height:2px;border-radius:5px 5px 1px 1px;position:relative}
.cg-b.dl{background:#5E9E00}.cg-b.ul{background:#2E7BC4}
.cg-v{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);margin-bottom:3px;font-size:10px;font-weight:700;color:var(--texto);white-space:nowrap}
.cg-x{font-size:11px;color:var(--suave);margin-top:6px;white-space:nowrap;font-variant-numeric:tabular-nums}
.cg-col.maior .cg-x{color:var(--texto);font-weight:800}
.cg-col.maior .cg-v{background:var(--verde);color:var(--sobre-verde);border-radius:6px;padding:1px 4px}
.cg-leg{display:flex;gap:16px;font-size:12px;color:var(--suave);font-weight:600}
.cg-leg i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.cg-leg i.dl{background:#5E9E00}.cg-leg i.ul{background:#2E7BC4}
.cg-maior{margin:0;font-size:14px}
.cg-tab{width:100%;border-collapse:collapse;font-size:14px;font-variant-numeric:tabular-nums}
.cg-tab th{text-align:right;font-size:12px;color:var(--suave);font-weight:600;padding:6px 4px;border-bottom:1px solid var(--borda)}
.cg-tab th:first-child,.cg-tab td:first-child{text-align:left}
.cg-tab td{text-align:right;padding:8px 4px;border-bottom:1px solid var(--borda)}
.cg-tab td:nth-child(2){color:#5E9E00;font-weight:700}.cg-tab td:nth-child(3){color:#2E7BC4;font-weight:700}
.cg-tab tr.maior td:first-child{font-weight:800}

/* assinatura */
.quadro-ass{width:100%;height:220px;border-radius:16px;border:1.5px dashed var(--divisor);background:#fff;touch-action:none;display:block}

/* aviso (snackbar) */
.snack{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(96px + var(--seg-base));width:calc(100% - 32px);max-width:448px;background:#1E2A22;color:#fff;border-radius:14px;padding:14px 16px;font-size:14px;z-index:30;box-shadow:0 8px 24px rgba(0,0,0,.25)}
.sem-net{background:var(--amarelo-fundo);color:var(--amarelo);font-size:13px;font-weight:600;text-align:center;padding:8px 12px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* 1.15.1: sugestão de instalar ao abrir */
.inst-topo{display:flex;gap:14px;align-items:center}
.inst-topo img{border-radius:14px;flex-shrink:0}
.inst-topo h2{margin:0}