/* ibexGo PLUS - layout.css
   Extraido do prototipo aprovado em 01/09/2026.
   Manual completo v2.0, capitulo 16 (design system).
   Estrutura, faixa de acesso, barra inferior e responsivo. Carregar SEMPRE por ultimo. */
/* ---------- GRADE DE DUAS COLUNAS (painel e fichas) ---------- */
/* Estava como estilo inline no JS, o que a regra de mobile nao alcancava.
   Virou classe justamente para poder empilhar no celular. */
.duas-colunas{display:grid;gap:20px;grid-template-columns:1.5fr 1fr;align-items:start}

/* Item de grade nunca pode ser mais largo que a coluna. Sem isto, um valor
   longo ou uma tabela empurra a pagina e cria rolagem horizontal. */
.grade>*,.duas-colunas>*{min-width:0}
.cx,.ind,.cm{max-width:100%}

/* ---------- SEM ROLAGEM HORIZONTAL ---------- */
/* Esconder overflow-x aqui muda qual elemento de fato rola. Por isso
   scrollIntoView e scroll-behavior sao declarados junto: quem rola passa
   a ser html ou body dependendo do navegador, e as duas linhas cobrem
   os dois casos. */
html,body{max-width:100%;overflow-x:hidden;scroll-behavior:smooth}
.conteudo{max-width:100%}
.tab-env{max-width:100%}


/* ---------- ESTRUTURA ---------- */
#app{min-height:100%}
.lateral{position:fixed;inset:0 auto 0 0;width:var(--lateral);background:var(--sup);border-right:1px solid var(--borda);display:flex;flex-direction:column;z-index:60;transition:transform .22s cubic-bezier(.3,0,.2,1)}
.marca{height:var(--topo);display:flex;align-items:center;gap:9px;padding:0 18px;border-bottom:1px solid var(--borda)}
.marca .g{width:34px;height:34px;border-radius:11px;background:linear-gradient(135deg,var(--azul),#2B7BD6);color:#fff;display:grid;place-items:center;font-weight:700;font-size:17px}
.marca b{font-weight:700;letter-spacing:-.4px;font-size:19px}
.marca span{color:var(--tinta-3);font-weight:500;font-size:19px}
.menu{flex:1;overflow-y:auto;padding:10px 10px 20px}
.menu .grupo{font-size:12px;font-weight:600;color:var(--tinta-3);padding:14px 10px 5px}
.menu a{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:var(--r-sm);color:var(--tinta-2);font-weight:500;font-size:15.5px;margin-bottom:3px}
.menu a:hover{background:var(--fundo);color:var(--tinta)}
.menu a.on{background:var(--azul-cl);color:var(--azul-esc);font-weight:600}
.menu a.on svg{color:var(--azul);opacity:1}
.menu a svg{width:21px;height:21px;flex:none;opacity:.9}
.menu a .n{margin-left:auto;background:var(--verm);color:#fff;font-size:11.5px;font-weight:700;padding:2px 8px;border-radius:10px}
.rodape-lat{padding:12px 18px;border-top:1px solid var(--borda);font-size:11.5px;color:var(--tinta-3)}

.principal{margin-left:var(--lateral);min-height:100vh;display:flex;flex-direction:column}
.topo{position:sticky;top:0;height:var(--topo);background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--borda);display:flex;align-items:center;gap:12px;padding:0 20px;z-index:40}
.topo h1{font-size:19px;font-weight:600;letter-spacing:-.3px}
.topo .dir{margin-left:auto;display:flex;align-items:center;gap:6px}
.hamb{display:none;width:34px;height:34px;border-radius:var(--r-sm);align-items:center;justify-content:center}
.busca-topo{flex:1;max-width:420px;margin-left:18px}
.icb{width:40px;height:40px;border-radius:var(--r-sm);display:grid;place-items:center;color:var(--tinta-2);position:relative}
.icb:hover{background:var(--fundo)}
.icb svg{width:21px;height:21px}
.icb .p{position:absolute;top:6px;right:6px;width:7px;height:7px;border-radius:50%;background:var(--verm);border:1.5px solid #fff}
.av{width:37px;height:37px;border-radius:50%;background:linear-gradient(135deg,var(--azul),#2B7BD6);color:#fff;display:grid;place-items:center;font-weight:600;font-size:14px}
.conteudo{flex:1;padding:26px 30px 78px;width:100%}
.veu{display:none;position:fixed;inset:0;background:rgba(16,32,47,.45);z-index:55}

/* ---------- FAIXA DE ACESSO ---------- */
.faixa{display:flex;align-items:center;gap:12px;padding:13px 26px;font-size:14.5px;font-weight:500}
.faixa.aviso{background:var(--azul-cl);color:var(--azul-esc);border-bottom:1px solid var(--azul-borda)}
.faixa.grave{background:var(--verm);color:#fff}
.faixa .bt{margin-left:auto;display:flex;gap:8px}
.faixa button{font-size:14px;font-weight:600;padding:7px 15px;border-radius:9px;background:#fff;color:var(--azul-esc)}
.faixa.grave button{background:#fff;color:var(--verm)}
.faixa .x{background:transparent;color:inherit;opacity:.7;padding:4px 6px}

/* ---------- LISTA MOBILE ---------- */
.cartoes-m{display:none}
.cm{background:var(--sup);border:1px solid var(--borda);border-radius:var(--r);padding:16px;margin-bottom:11px;box-shadow:var(--sombra)}
.cm .l1{display:flex;align-items:center;gap:9px;margin-bottom:7px}
.cm .l1 .nm{font-weight:600;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cm .l2{display:flex;gap:16px;font-size:14px;color:var(--tinta-3);flex-wrap:wrap}
.cm .l2 b{color:var(--tinta-2);font-weight:600}

/* ---------- BARRA INFERIOR (mobile) ---------- */
.rodape-nav{display:none;position:fixed;left:0;right:0;bottom:0;z-index:50;background:rgba(255,255,255,.97);backdrop-filter:blur(12px);border-top:1px solid var(--borda);padding-bottom:env(safe-area-inset-bottom)}
.rodape-nav .itens{display:grid;grid-template-columns:repeat(5,1fr);align-items:end;height:66px}
.rodape-nav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;height:100%;color:var(--tinta-3);font-size:11.5px;font-weight:600;position:relative}
.rodape-nav a svg{width:24px;height:24px}
.rodape-nav a.on{color:var(--azul)}
.rodape-nav a .n{position:absolute;top:6px;right:calc(50% - 22px);background:var(--verm);color:#fff;font-size:10px;font-weight:700;padding:0 5px;min-width:16px;height:16px;line-height:16px;border-radius:8px;text-align:center}
.rodape-nav .centro{display:flex;align-items:center;justify-content:center}
.rodape-nav .centro button{width:58px;height:58px;border-radius:19px;background:linear-gradient(135deg,var(--azul),#2B7BD6);color:#fff;display:grid;place-items:center;box-shadow:0 6px 18px rgba(20,83,155,.4);margin-bottom:14px;transition:transform .12s}
.rodape-nav .centro button:active{transform:scale(.92)}
.rodape-nav .centro button svg{width:28px;height:28px}
.acao-rapida{display:flex;align-items:center;gap:14px;width:100%;text-align:left;padding:15px;border-radius:var(--r-sm);border:1px solid var(--borda);margin-bottom:9px}
.acao-rapida .ic{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;flex:none}
.acao-rapida b{font-weight:600;display:block;font-size:15px}

/* ---------- MOBILE ---------- */
@media(max-width:900px){
  .lateral{transform:translateX(-100%)}
  body.menu-ab .lateral{transform:none}
  body.menu-ab .veu{display:block}
  .principal{margin-left:0}
  .hamb{display:flex}
  .busca-topo{display:none}
  .conteudo{padding:18px 16px 104px}
  .rodape-nav{display:block}
  .hamb{display:none}
  h2.tit{font-size:24px}
  .g4{grid-template-columns:1fr 1fr} .g3,.g2{grid-template-columns:1fr}
  .l2,.l3{grid-template-columns:1fr}
  .tab-env{display:none}
  .cartoes-m{display:block}
  .barra-sel{transform:translateX(-50%);left:50%;right:auto;width:calc(100% - 28px);max-width:440px;bottom:calc(80px + env(safe-area-inset-bottom))}
  .login{grid-template-columns:1fr}
  .login .lado{display:none}
  .toasts{left:14px;right:14px;bottom:calc(78px + env(safe-area-inset-bottom))}
  .toast{max-width:none}
  /* bottom sheet */
  .mv{padding:0;align-items:flex-end}
  .md,.md.larga,.md.estreita{max-width:none;border-radius:18px 18px 0 0;max-height:93vh;animation:up .24s cubic-bezier(.3,0,.2,1)}
  @keyframes up{from{transform:translateY(100%)}}
  .puxador{display:block;width:38px;height:4px;background:var(--borda-2);border-radius:2px;margin:9px auto 0}
  .md-c{padding:11px 18px 13px}
  .md-r{position:sticky;bottom:0;border-radius:0;padding-bottom:calc(13px + env(safe-area-inset-bottom))}
  .md-r .b{flex:1}
  .emb-topo .n{font-size:38px}
  .scan{height:84px;font-size:17px}
  .demo{bottom:calc(80px + env(safe-area-inset-bottom));left:12px}
  .demo .bt{width:40px;height:40px;opacity:.9}

  /* ---------- AJUSTES DE CELULAR (adicionados depois) ----------
     Estas regras precisam ficar no fim do bloco: em CSS, entre seletores
     de mesma especificidade, quem vem depois vence. */

  .duas-colunas{grid-template-columns:1fr;gap:16px}

  /* Uma coluna no celular, duas no tablet. Valor em reais nao cabe
     em meia tela de 360px. */
  .g4{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
  .g3,.g2{grid-template-columns:1fr}

  h2.tit{font-size:22px;letter-spacing:-.6px}
  .sub{font-size:13.5px}
  h3.sec{font-size:16px}

  .ind{padding:16px}
  .ind .chip{width:38px;height:38px;border-radius:11px;margin-bottom:10px}
  .ind .chip svg{width:19px;height:19px}
  .ind .r{font-size:13.5px}
  .ind .d{font-size:13px}
  /* O numero acompanha a largura da tela em vez de estourar o cartao. */
  .ind .v{font-size:clamp(21px,6.4vw,29px);letter-spacing:-1px}

  /* Cabecalho: titulo em cima, acoes embaixo em largura total. */
  .cab{gap:12px}
  .cab .acoes{margin-left:0;width:100%;flex-wrap:wrap}
  /* Minimo de 46% obriga a quebra a cada dois botoes: quatro botoes numa
     linha so viram alvos pequenos demais para o dedo. */
  .cab .acoes .b{flex:1 1 46%;min-width:0}
  .pilhas{width:100%}
  .pilhas .pilha{flex:1;justify-content:center;padding:0 10px}

  /* Filtros empilham em vez de disputar a mesma linha. */
  .filtros{gap:10px}
  .filtros .busca{max-width:none;width:100%}
  .filtros select.ent{width:100%}

  /* Abas correm de ponta a ponta, sem margem cortando o toque. */
  .abas{margin:0 -14px 18px;padding:0 14px}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}