/* Central de Boletos · Solução Automação
   Direção: papel quadriculado, tinta verde-escura, verde-limão de destaque,
   cartões com contorno grosso e sombra "carimbada" (referências Manda Boa).
   Layout: barra lateral com abas no computador; barra de abas embaixo no celular. */
:root{
  --papel:#f5f4ec; --grade:rgba(14,42,30,.055); --superficie:#ffffff; --afundado:#eeede3;
  --tinta:#0e2a1e; --tinta-2:#2c4a3c; --apagado:#5d6e64; --linha:#0e2a1e; --linha-leve:#d7d8cc;
  --lima:#b2ec26; --lima-forte:#93cc0f; --lima-suave:#eefbd2;
  --ok:#1f7f36; --ok-suave:#dcf4df; --info:#2a62cf; --info-suave:#e2ebfc;
  --aviso:#a86400; --aviso-suave:#ffefc8; --ruim:#c9321f; --ruim-suave:#fde2dd;
  --rs:#6a3fc4; --rs-suave:#ece4fb;
  --sombra-cor:#0e2a1e; --forte:#0e2a1e; --forte-txt:#b2ec26; --escuro:#0e2a1e;
  --aviso-txt:#5c3800; --info-txt:#163a80; --ok-txt:#11461f; --ruim-txt:#7a1a0e;
  --sombra:4px 4px 0 var(--sombra-cor); --sombra-p:2px 2px 0 var(--sombra-cor);
  --r:16px; --r-p:10px;
  --f-titulo:"Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --f-texto:"Instrument Sans", "Segoe UI", system-ui, sans-serif;
  --f-mono:"JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  color-scheme:light;
}
/* Tema escuro (padrão). O tema claro fica em data-tema="claro". */
:root[data-tema="escuro"]{
  --papel:#0b1510; --grade:rgba(178,236,38,.045); --superficie:#12201a; --afundado:#1b2c23;
  --tinta:#e8f1ea; --tinta-2:#c0d1c5; --apagado:#8fa499; --linha:#3b5747; --linha-leve:#26392f;
  --lima-suave:#203316; --sombra-cor:#020604; --forte:#b2ec26; --forte-txt:#0b1510;
  --ok:#62d883; --ok-suave:#12301c; --info:#86abff; --info-suave:#16233d; --aviso:#f3b744; --aviso-suave:#33250e; --ruim:#ff7d69; --ruim-suave:#3b1712;
  --rs:#bb9af6; --rs-suave:#291e44;
  --aviso-txt:#ffd890; --info-txt:#c3d4ff; --ok-txt:#b9f2c8; --ruim-txt:#ffc4ba;
  color-scheme:dark;
}
.so-claro{display:none} .so-escuro{display:inline-block}
:root[data-tema="claro"] .so-claro{display:inline-block} :root[data-tema="claro"] .so-escuro{display:none}
*{box-sizing:border-box}
html,body{min-height:100%}
body{margin:0; background-color:var(--papel); background-image:linear-gradient(var(--grade) 1px, transparent 1px), linear-gradient(90deg, var(--grade) 1px, transparent 1px); background-size:28px 28px; color:var(--tinta); font:400 15px/1.5 var(--f-texto)}
h1,h2,h3{font-family:var(--f-titulo); margin:0; letter-spacing:-.02em; text-wrap:balance; line-height:1.1}
h1{font-size:clamp(26px, 3.4vw, 38px); font-weight:800}
h2{font-size:21px; font-weight:700}
h3{font-size:16px; font-weight:700}
p{margin:0}
a{color:inherit}
.mono{font-family:var(--f-mono); font-variant-numeric:tabular-nums}
.muted{color:var(--apagado)} .small{font-size:13px} .tiny{font-size:12px}
.row{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.col{display:flex; flex-direction:column; gap:12px}
.spacer{flex:1}
.grid2{display:grid; grid-template-columns:repeat(auto-fit, minmax(210px, 1fr)); gap:12px}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--lima-forte); outline-offset:2px}

/* ---------- botões ---------- */
button,.btn{font:600 14px var(--f-texto); color:var(--tinta); background:var(--superficie); border:2px solid var(--linha); border-radius:999px; padding:9px 16px; cursor:pointer; display:inline-flex; align-items:center; gap:8px; text-decoration:none; white-space:nowrap; flex-shrink:0; box-shadow:var(--sombra-p); transition:transform .08s, box-shadow .08s}
button:hover,.btn:hover{transform:translate(-1px,-1px); box-shadow:3px 3px 0 var(--sombra-cor)}
button:active,.btn:active{transform:translate(2px,2px); box-shadow:0 0 0 var(--sombra-cor)}
button:disabled{opacity:.45; cursor:not-allowed; transform:none; box-shadow:var(--sombra-p)}
.btn-lima{background:var(--lima); color:var(--escuro)}
.btn-tinta{background:var(--forte); color:var(--forte-txt)}
.btn-perigo{color:var(--ruim); border-color:var(--ruim); box-shadow:2px 2px 0 var(--ruim)}
.btn-leve{border-color:transparent; box-shadow:none; background:transparent; padding:6px 10px}
.btn-leve:hover{background:var(--afundado); box-shadow:none; transform:none}
.btn-p{padding:6px 12px; font-size:13px}
.btn svg,button svg{width:17px; height:17px; flex-shrink:0}

/* ---------- campos ---------- */
input,select,textarea{font:400 15px var(--f-texto); color:var(--tinta); background:var(--superficie); border:2px solid var(--linha-leve); border-radius:var(--r-p); padding:10px 12px; width:100%; min-width:0}
input:focus,select:focus,textarea:focus{border-color:var(--tinta); outline:none; box-shadow:0 0 0 3px var(--lima)}
label.campo{display:flex; flex-direction:column; gap:6px; font-size:13px; font-weight:600; min-width:0}
label.campo .dica{font-weight:400; color:var(--apagado); font-size:12px}
.checks{display:flex; gap:18px; flex-wrap:wrap; font-size:14px}
.checks label{display:flex; gap:8px; align-items:center; cursor:pointer}
.checks input{width:18px; height:18px; accent-color:var(--lima-forte)}

/* ---------- cartões ---------- */
.cartao{background:var(--superficie); border:2px solid var(--linha); border-radius:var(--r); box-shadow:var(--sombra)}
.cartao.pad{padding:20px}
.cartao.lima{background:var(--lima); color:var(--escuro)}
.cartao.tinta{background:var(--forte); color:var(--forte-txt)}
.etiqueta{font:500 11px var(--f-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--apagado)}
.marca-texto{background:var(--lima); color:var(--escuro); padding:0 .18em; border-radius:6px; box-decoration-break:clone; -webkit-box-decoration-break:clone}

/* ---------- estrutura ---------- */
.lateral .logo img{height:auto; width:190px}
.app{display:grid; grid-template-columns:260px minmax(0,1fr); min-height:100vh}
.lateral{position:sticky; top:0; height:100vh; padding:20px 16px; display:flex; flex-direction:column; gap:18px; border-right:2px solid var(--linha); background:var(--superficie)}
.logo{display:flex; align-items:center; gap:10px; font-family:var(--f-titulo); font-weight:800; font-size:19px; letter-spacing:-.02em; line-height:1.05}
.logo{flex-direction:column; align-items:flex-start; gap:4px}
.logo img{height:42px; width:auto; max-width:100%; object-fit:contain}
.logo small{margin-left:2px}
.logo small{display:block; font:500 11px var(--f-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--apagado)}
.nav{display:flex; flex-direction:column; gap:6px}
.nav button{justify-content:flex-start; border-color:transparent; box-shadow:none; border-radius:12px; padding:10px 12px; background:transparent; width:100%; text-align:left; gap:12px; white-space:normal}
.nav button:hover{background:var(--afundado); transform:none}
.nav button[aria-current="page"]{background:var(--forte); color:var(--forte-txt); border-color:var(--forte)}
.nav button[aria-current="page"] .ico{background:var(--forte-txt); color:var(--forte)}
.nav .ico{width:32px; height:32px; border-radius:9px; display:grid; place-items:center; background:var(--afundado); flex-shrink:0}
.nav .ico svg{width:18px; height:18px}
.nav .txt{display:flex; flex-direction:column; line-height:1.2}
.nav .txt small{font-weight:400; font-size:12px; opacity:.7}
.nav .badge{margin-left:auto; background:var(--ruim); color:#fff; font:600 11px var(--f-mono); padding:2px 7px; border-radius:99px}
.usuario{margin-top:auto; display:flex; gap:10px; align-items:center; padding:10px; border:2px solid var(--linha-leve); border-radius:12px; font-size:13px; min-width:0}
.usuario .av{width:34px; height:34px; border-radius:50%; background:var(--lima); color:var(--escuro); border:2px solid var(--linha); display:grid; place-items:center; font-weight:700; flex-shrink:0}
.usuario .nm{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.conteudo{min-width:0; padding-block:28px 80px; padding-left:max(28px, env(safe-area-inset-left, 0px)); padding-right:max(28px, env(safe-area-inset-right, 0px))}
.conteudo > .pagina{max-width:1080px; margin:0 auto; display:flex; flex-direction:column; gap:20px}
.topo-movel,.abas-movel{display:none}
.faixa-demo{background:#05100a; color:var(--lima); font:500 12px var(--f-mono); letter-spacing:.04em; text-align:center; padding:6px max(16px, env(safe-area-inset-right, 0px)) 6px max(16px, env(safe-area-inset-left, 0px))}

/* ---------- cabeçalho de página e passo a passo ---------- */
.cab{display:flex; flex-direction:column; gap:8px}
.cab p{max-width:62ch; color:var(--tinta-2); font-size:16px}
.passos{display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:14px}
.passo{display:flex; gap:12px; align-items:flex-start}
.num{width:34px; height:34px; border-radius:50%; border:2px solid var(--escuro); background:var(--lima); color:var(--escuro); display:grid; place-items:center; font:700 15px var(--f-titulo); flex-shrink:0; box-shadow:var(--sombra-p)}
.num.feito{background:var(--forte); color:var(--forte-txt); border-color:var(--linha)}
.num.vazio{background:var(--superficie); color:var(--tinta)}
.passo b{display:block; font-family:var(--f-titulo); font-size:16px}
.passo span{font-size:13.5px; color:var(--tinta-2)}
.dicas{position:relative}
.dicas .fechar{position:absolute; top:10px; right:10px}

/* ---------- mês ---------- */
.mesbar{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.mesbar .lbl{font-family:var(--f-titulo); font-weight:800; font-size:24px; letter-spacing:-.02em; padding:2px 10px; background:var(--lima); color:var(--escuro); border:2px solid var(--escuro); border-radius:12px; box-shadow:var(--sombra-p)}
.mesbar button{padding:7px 12px}

/* ---------- indicadores ---------- */
.ind{display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:14px}
.ind button{flex-direction:column; align-items:flex-start; gap:2px; border-radius:var(--r); padding:14px 16px; box-shadow:var(--sombra); text-align:left; white-space:normal}
.ind button .n{font:700 28px var(--f-titulo); letter-spacing:-.02em; line-height:1}
.ind button .t{font-size:13px; font-weight:600}
.ind button .s{font-size:12px; font-weight:400; color:var(--apagado)}
.ind button[aria-pressed="true"]{background:var(--forte); color:var(--forte-txt)}
.ind button[aria-pressed="true"] .s{color:inherit; opacity:.75}
.ind .dot{width:10px; height:10px; border-radius:50%; display:inline-block; margin-right:6px}

/* ---------- pílulas ---------- */
.pill{display:inline-flex; align-items:center; gap:6px; font:600 12px var(--f-texto); padding:3px 10px; border-radius:99px; white-space:nowrap; border:1.5px solid currentColor}
.pill::before{content:""; width:7px; height:7px; border-radius:50%; background:currentColor}
.st-aenviar{color:var(--aviso); background:var(--aviso-suave)}
.st-enviado{color:var(--info); background:var(--info-suave)}
.st-pago{color:var(--ok); background:var(--ok-suave)}
.st-vencido{color:var(--ruim); background:var(--ruim-suave)}
.st-nf{color:var(--ruim); background:transparent; border-style:dashed}
.st-neutro{color:var(--apagado); background:var(--afundado)}
.emp{font:700 11px var(--f-mono); letter-spacing:.05em; padding:2px 7px; border-radius:6px; text-transform:uppercase; border:1.5px solid}
.emp-solucao{color:var(--escuro); background:var(--lima); border-color:var(--escuro)}
.emp-rs{color:var(--rs); background:var(--rs-suave); border-color:var(--rs)}
.chip{font:500 12px var(--f-mono); color:var(--tinta-2); background:var(--afundado); padding:2px 8px; border-radius:6px}

/* ---------- listas ---------- */
.lista{display:flex; flex-direction:column; overflow:hidden}
.lista > .item{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 16px; padding:14px 18px; border:0; border-bottom:1.5px solid var(--linha-leve); border-radius:0; box-shadow:none; background:transparent; text-align:left; width:100%; font:inherit; color:inherit; white-space:normal; transform:none}
.lista > .item:last-child{border-bottom:0}
.lista > .item:hover{background:var(--lima-suave); transform:none; box-shadow:none}
.item .nm{font-weight:700; display:flex; gap:8px; align-items:baseline; flex-wrap:wrap; min-width:0; font-size:15.5px}
.item .cod{font:600 12px var(--f-mono); background:var(--forte); color:var(--forte-txt); padding:1px 6px; border-radius:5px}
.item .sub{font-size:13px; color:var(--apagado); min-width:0}
.item .dir{text-align:right; display:flex; flex-direction:column; align-items:flex-end; gap:6px}
.item .val{font:600 15px var(--f-mono)}
.busca{position:relative; flex:1 1 260px; max-width:420px}
.busca input{padding-left:38px; border-radius:999px; border-color:var(--linha)}
.busca svg{position:absolute; left:13px; top:50%; transform:translateY(-50%); width:17px; height:17px; color:var(--apagado)}
.filtros{display:flex; gap:6px; flex-wrap:wrap}
.filtros button{padding:6px 12px; font-size:13px; box-shadow:none}
.filtros button[aria-pressed="true"]{background:var(--forte); color:var(--forte-txt)}

/* ---------- cliente ---------- */
.contato{display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:14px}
.contato .v{display:flex; align-items:center; gap:6px; min-width:0; word-break:break-word; font-weight:600}
.casa{border-top:2px solid var(--linha)}
.casa:first-child{border-top:0}
.casa-h{padding:12px 18px; display:flex; gap:10px; align-items:baseline; flex-wrap:wrap; background:var(--afundado)}
.doc{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px 16px; padding:14px 18px; border-top:1.5px solid var(--linha-leve); align-items:center}
.doc .ttl{display:flex; gap:8px; align-items:center; flex-wrap:wrap; font-weight:700}
.doc .meta{font-size:13px; color:var(--apagado); display:flex; gap:14px; flex-wrap:wrap}
.doc .acoes{display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; align-items:center}
.tog{padding:6px 12px; font-size:13px; box-shadow:none}
.tog[aria-pressed="true"].env{background:var(--info-suave); color:var(--info); border-color:var(--info)}
.tog[aria-pressed="true"].pag{background:var(--ok-suave); color:var(--ok); border-color:var(--ok)}
.vazio{padding:32px 18px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:10px}
.vazio .ilus{width:64px; height:64px; border-radius:18px; background:var(--lima); color:var(--escuro); border:2px solid var(--escuro); display:grid; place-items:center; box-shadow:var(--sombra-p)}
.vazio .ilus svg{width:30px; height:30px}
.aviso{padding:12px 16px; border-radius:var(--r-p); border:2px solid var(--aviso); background:var(--aviso-suave); color:var(--aviso-txt); font-size:14px; display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.aviso.info{border-color:var(--info); background:var(--info-suave); color:var(--info-txt)}
.aviso.ok{border-color:var(--ok); background:var(--ok-suave); color:var(--ok-txt)}
.confirma{display:flex; gap:8px; align-items:center; flex-wrap:wrap; background:var(--ruim-suave); color:var(--ruim-txt); border:2px solid var(--ruim); padding:10px 12px; border-radius:var(--r-p); font-size:14px}

/* ---------- importar ---------- */
.soltar{border:2.5px dashed var(--linha); border-radius:var(--r); padding:36px 18px; text-align:center; display:flex; flex-direction:column; gap:10px; align-items:center; background:var(--superficie); cursor:pointer}
.soltar.sobre{background:var(--lima-suave); border-style:solid}
.soltar .ilus{width:58px; height:58px; border-radius:16px; background:var(--lima); color:var(--escuro); border:2px solid var(--escuro); display:grid; place-items:center; box-shadow:var(--sombra-p)}
.soltar b{font-family:var(--f-titulo); font-size:20px}
.imp{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px 14px; padding:14px 18px; border-top:1.5px solid var(--linha-leve)}
.imp:first-child{border-top:0}
.imp .fn{font-size:12px; color:var(--apagado); word-break:break-all}
.imp details{grid-column:1 / -1}
.imp details summary{cursor:pointer; font-size:13px; font-weight:600; text-decoration:underline; text-decoration-color:var(--lima-forte); text-decoration-thickness:3px; text-underline-offset:3px}
.imp .campos{display:grid; grid-template-columns:repeat(auto-fit, minmax(160px,1fr)); gap:10px; padding-top:12px}

/* ---------- edição ---------- */
.casa-ed{display:grid; grid-template-columns:repeat(auto-fit, minmax(180px,1fr)); gap:12px; padding:16px 18px; border-top:2px solid var(--linha-leve)}
.casa-ed:first-child{border-top:0}
.casa-ed .acoes{grid-column:1 / -1; display:flex; gap:10px; flex-wrap:wrap; align-items:center}

/* ---------- janelas e avisos ---------- */
.modal{position:fixed; inset:0; background:rgba(14,42,30,.55); z-index:50; display:flex; align-items:flex-start; justify-content:center; padding:calc(24px + env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px)) calc(24px + env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px)); overflow:auto}
.modal .caixa{width:100%; max-width:780px; padding:20px; display:flex; flex-direction:column; gap:14px}
.paginas-pdf{display:flex; flex-direction:column; gap:10px}
.paginas-pdf canvas{width:100%; height:auto; border:1.5px solid var(--linha-leve); background:#fff; border-radius:6px}
.toast{position:fixed; left:50%; transform:translateX(-50%); bottom:calc(24px + env(safe-area-inset-bottom, 0px)); background:var(--forte); color:var(--forte-txt); padding:12px 18px; border-radius:14px; z-index:60; font-weight:600; font-size:14px; max-width:calc(100% - 32px); box-shadow:4px 4px 0 var(--lima-forte)}

/* ---------- login ---------- */
.entrada{min-height:100vh; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
.entrada .marca{background:#0b1a12; color:#fff; border-right:2px solid var(--linha); padding:48px clamp(24px,5vw,64px); display:flex; flex-direction:column; gap:28px; justify-content:space-between; background-image:linear-gradient(rgba(178,236,38,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(178,236,38,.07) 1px, transparent 1px); background-size:28px 28px}
.entrada .marca .logo{color:#fff}
.entrada .marca .logo small{color:#b9c9be}
.entrada .marca h1{font-size:clamp(32px, 4.4vw, 54px); color:#fff}
.entrada .marca h1 .marca-texto{color:var(--escuro)}
.entrada .marca ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:14px; font-size:16px}
.entrada .marca li{display:flex; gap:12px; align-items:flex-start}
.entrada .marca li .num{color:var(--escuro); box-shadow:2px 2px 0 var(--lima-forte)}
.entrada .lado{display:flex; align-items:center; justify-content:center; padding:32px max(16px, env(safe-area-inset-right, 0px)) 32px max(16px, env(safe-area-inset-left, 0px))}
.entrada form{width:100%; max-width:420px; padding:28px; display:flex; flex-direction:column; gap:16px}
.seletor{display:flex; background:var(--afundado); border:2px solid var(--linha); border-radius:999px; padding:4px}
.seletor button{flex:1; justify-content:center; border:0; box-shadow:none; background:transparent; padding:8px}
.seletor button[aria-pressed="true"]{background:var(--forte); color:var(--forte-txt)}
.seletor button:hover{transform:none; box-shadow:none}
.link{background:none; border:0; box-shadow:none; padding:0; text-decoration:underline; font-weight:500; color:var(--tinta-2)}
.link:hover{transform:none; box-shadow:none}
.erro{color:var(--ruim); font-size:13.5px; font-weight:600}

/* ---------- celular ---------- */
@media (max-width:880px){
  .app{grid-template-columns:1fr}
  .lateral{display:none}
  .topo-movel{display:flex; align-items:center; gap:10px; position:sticky; top:0; z-index:20; background:var(--superficie); border-bottom:2px solid var(--linha); padding:10px max(16px, env(safe-area-inset-right, 0px)) 10px max(16px, env(safe-area-inset-left, 0px)); padding-top:calc(10px + env(safe-area-inset-top, 0px))}
  .abas-movel{display:grid; grid-auto-flow:column; grid-auto-columns:1fr; position:fixed; left:0; right:0; bottom:0; z-index:30; background:var(--superficie); border-top:2px solid var(--linha); padding:6px max(6px, env(safe-area-inset-right, 0px)) calc(6px + env(safe-area-inset-bottom, 0px)) max(6px, env(safe-area-inset-left, 0px))}
  .abas-movel button{flex-direction:column; gap:2px; border:0; box-shadow:none; background:transparent; padding:6px 2px; font-size:11px; border-radius:12px; position:relative}
  .abas-movel button:hover{transform:none; box-shadow:none}
  .abas-movel button[aria-current="page"]{background:var(--lima)}
  .abas-movel .badge{position:absolute; top:2px; right:18%; background:var(--ruim); color:#fff; font:600 10px var(--f-mono); padding:1px 5px; border-radius:99px}
  .conteudo{padding-block:18px 110px; padding-left:max(16px, env(safe-area-inset-left, 0px)); padding-right:max(16px, env(safe-area-inset-right, 0px))}
  .entrada{grid-template-columns:1fr}
  .entrada .marca{padding:28px max(20px, env(safe-area-inset-right, 0px)) 28px max(20px, env(safe-area-inset-left, 0px)); padding-top:calc(28px + env(safe-area-inset-top, 0px))}
  .entrada .marca ul{display:none}
}
@media (max-width:560px){
  .doc{grid-template-columns:1fr} .doc .acoes{justify-content:flex-start}
  .lista > .item{grid-template-columns:1fr} .item .dir{align-items:flex-start; flex-direction:row; flex-wrap:wrap}
  .entrada form{padding:20px}
}
@media (prefers-reduced-motion: reduce){*{transition:none!important; animation:none!important}}

/* ---------- cobranças por vencimento ---------- */
.fx-vencido{--fx:var(--ruim); --fx-s:var(--ruim-suave)}
.fx-hoje{--fx:var(--aviso); --fx-s:var(--aviso-suave)}
.fx-semana{--fx:var(--lima-forte); --fx-s:var(--lima-suave)}
.fx-depois{--fx:var(--info); --fx-s:var(--info-suave)}
.fx-ok{--fx:var(--ok); --fx-s:var(--ok-suave)}
.fx-todas{--fx:var(--tinta); --fx-s:var(--afundado)}
.faixa-btn{gap:8px}
.faixa-btn::before{content:""; width:9px; height:9px; border-radius:50%; background:var(--fx)}
.faixa-btn .cnt{font:600 12px var(--f-mono); background:var(--afundado); color:var(--tinta); padding:1px 7px; border-radius:99px}
.faixa-btn[aria-pressed="true"] .cnt{background:var(--forte-txt); color:var(--forte)}
.faixa-cab{display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding-top:6px}
.faixa-cab .marcador{width:14px; height:14px; border-radius:4px; background:var(--fx); border:2px solid var(--linha)}
.linha-cob{grid-template-columns:62px minmax(0,1fr) auto auto !important; align-items:center; cursor:pointer}
.linha-cob:focus-visible{outline:3px solid var(--lima-forte); outline-offset:-3px}
.data-tile{width:58px; height:58px; border-radius:12px; border:2px solid var(--fx); background:var(--fx-s); display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1}
.data-tile b{font:800 22px var(--f-titulo)}
.data-tile span{font:600 10px var(--f-mono); letter-spacing:.08em; margin-top:3px}
.linha-cob .quando{color:var(--fx)}
.fx-semana .quando{color:var(--tinta)}
.linha-cob .acao button{min-width:96px; justify-content:center}
@media (max-width:640px){
  .linha-cob{grid-template-columns:58px minmax(0,1fr) !important}
  .linha-cob .dir{grid-column:2; flex-direction:row; align-items:center; flex-wrap:wrap}
  .linha-cob .acao{grid-column:1 / -1}
  .linha-cob .acao button{width:100%}
}
.topo-movel .logo img{height:28px; width:auto}
.topo-movel .logo small{display:none}
.entrada .marca .logo img{width:min(260px, 70vw); height:auto}
.passo .num{color:var(--escuro)}
.passo .num.feito{color:var(--forte-txt)}
.usuario{flex-wrap:wrap}
.usuario .nm{flex:1 1 50px}
.usuario .btn-leve{padding:6px}

/* ---------- propostas ---------- */
.prop-ed{display:grid; grid-template-columns:minmax(0,1fr) 440px; gap:24px; align-items:start}
.prop-prev{position:sticky; top:20px; display:flex; flex-direction:column; gap:10px; max-height:calc(100vh - 40px); overflow:auto; padding:14px; border:2px solid var(--linha); border-radius:var(--r); background:var(--afundado)}
.conteudo > .pagina:has(.prop-ed){max-width:1320px}
@media (max-width:1100px){ .prop-ed{grid-template-columns:1fr} .prop-prev{position:static; max-height:none} }