/* Ajustes de interface (etapa 14): menu do topo no celular e menu lateral do painel */

/* ---------- Topo do site no celular ---------- */
.menu-movel{display:none;position:relative}
.menu-movel summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:12px;border:1.5px solid rgba(255,255,255,.45);color:#fff}
.menu-movel summary::-webkit-details-marker{display:none}
.menu-movel summary svg{width:22px;height:22px;stroke:currentColor;stroke-width:2.2;fill:none;stroke-linecap:round}
.menu-movel-painel{position:absolute;right:0;top:calc(100% + 8px);min-width:240px;background:#fff;color:#01003d;border-radius:14px;box-shadow:0 12px 32px rgba(1,0,61,.25);padding:8px;z-index:60;display:flex;flex-direction:column}
.menu-movel-painel a{display:block;padding:12px 14px;border-radius:10px;color:#01003d;text-decoration:none;font-weight:600}
.menu-movel-painel a:hover,.menu-movel-painel a:focus-visible{background:#f1f2f8}
.menu-movel-painel .destaque{background:#26d100;color:#01003d;text-align:center;margin-top:4px}
[data-tema="escuro"] .menu-movel-painel{background:#17163a;color:#f1f1ff}
[data-tema="escuro"] .menu-movel-painel a{color:#f1f1ff}
[data-tema="escuro"] .menu-movel-painel a:hover{background:#26245a}
@media (max-width:700px){
  .topo .topo-linha{flex-wrap:nowrap}
  .topo-nav .so-topo-desktop{display:none!important}
  .menu-movel{display:block}
  .topo-nav .btn-verde{padding:9px 12px;font-size:.85rem}
}

/* ---------- Menu do painel: vertical à esquerda ---------- */
.painel-grade{display:block}
.menu-lateral{display:none}
@media (min-width:900px){
  .painel-grade{display:grid;grid-template-columns:230px minmax(0,1fr);gap:28px;align-items:start}
  .menu-lateral{display:flex;flex-direction:column;gap:2px;position:sticky;top:16px;margin-top:22px;padding:10px;border-radius:16px;background:var(--fundo-card,#fff);border:1px solid var(--linha,#e3e4ee);max-height:calc(100vh - 32px);overflow-y:auto}
  .menu-lateral a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;color:inherit;text-decoration:none;font-weight:600;font-size:.95rem}
  .menu-lateral a .ic,.menu-lateral a svg{flex:none;opacity:.75}
  .menu-lateral a:hover{background:rgba(1,0,61,.06)}
  .menu-lateral a[aria-current="page"]{background:#01003d;color:#fff}
  .menu-lateral a[aria-current="page"] svg{opacity:1}
  [data-tema="escuro"] .menu-lateral a:hover{background:rgba(255,255,255,.08)}
  [data-tema="escuro"] .menu-lateral a[aria-current="page"]{background:#26d100;color:#01003d}
  .painel-grade > .conteudo{padding-left:0;padding-right:0;min-width:0}
}

/* No celular: barra de baixo com os principais + "Menu" que abre a lista vertical */
.gaveta-fundo{display:none}
@media (max-width:899px){
  body.menu-aberto{overflow:hidden}
  body.menu-aberto .menu-lateral{display:flex;flex-direction:column;gap:2px;position:fixed;left:0;top:0;bottom:0;width:min(82vw,300px);z-index:80;background:var(--fundo-card,#fff);padding:calc(16px + env(safe-area-inset-top,0px)) 12px calc(90px + env(safe-area-inset-bottom,0px));overflow-y:auto;box-shadow:8px 0 32px rgba(1,0,61,.3)}
  body.menu-aberto .menu-lateral a{display:flex;align-items:center;gap:12px;padding:13px 12px;border-radius:10px;color:inherit;text-decoration:none;font-weight:600}
  body.menu-aberto .menu-lateral a[aria-current="page"]{background:#01003d;color:#fff}
  [data-tema="escuro"] body.menu-aberto .menu-lateral a[aria-current="page"]{background:#26d100;color:#01003d}
  body.menu-aberto .gaveta-fundo{display:block;position:fixed;inset:0;background:rgba(1,0,61,.45);z-index:79;border:0}
  .barra-app button{background:none;border:0;font:inherit;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;cursor:pointer;padding:8px 2px 7px;min-height:58px;color:var(--suave);font-size:.7rem;font-weight:700}
  .barra-app button[aria-current="page"]{color:var(--azul)}
}
.menu-lateral-titulo{font-size:.75rem;font-weight:800;text-transform:uppercase;letter-spacing:.5px;opacity:.6;padding:6px 12px}

/* ---------- Etapa 15 ---------- */
/* Chips (subcategorias, distâncias) quebram linha em vez de rolar para o lado */
.chips{flex-wrap:wrap;overflow:visible;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}

/* Atalhos do painel da loja */
.atalhos-loja{display:grid;gap:10px;margin:0 0 16px}
@media (min-width:760px){.atalhos-loja{grid-template-columns:repeat(3,minmax(0,1fr))}}
.acao-rapida{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:12px;padding:14px;border-radius:16px;background:var(--fundo-card,#fff);border:1px solid var(--linha,#e3e4ee);color:inherit;text-decoration:none;margin:0}
.ar-ic{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:#01003d;color:#26d100}
.ar-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.ar-txt strong{font-size:.98rem;line-height:1.2}
.ar-txt small{color:var(--suave,#5b5b73);font-size:.82rem}
.ar-acao{font:inherit;font-weight:800;font-size:.85rem;padding:8px 14px;border-radius:999px;background:#26d100;color:#01003d;border:0;cursor:pointer;white-space:nowrap}

/* Estrelas da avaliação */
.estrelas-escolha{border:0;padding:0;margin:8px 0;display:inline-flex;flex-direction:row-reverse;gap:4px}
.estrelas-escolha legend{width:100%;font-weight:700;margin-bottom:4px}
.estrelas-escolha input{position:absolute;opacity:0;width:1px;height:1px}
.estrelas-escolha label{font-size:2.1rem;line-height:1;color:#c9cad6;cursor:pointer;padding:0 2px}
.estrelas-escolha input:checked ~ label,.estrelas-escolha label:hover,.estrelas-escolha label:hover ~ label{color:#f5b301}
.estrelas-escolha input:focus-visible + label{outline:2px solid #26d100;border-radius:4px}
.estrelas{color:#f5b301}

/* ---------- Modo escuro: cores que estavam erradas ---------- */
[data-tema="escuro"] .cartao-pend{background:#14301a;border-color:#245c2c;color:#e9fbe3}
[data-tema="escuro"] .cartao-pend h2,[data-tema="escuro"] .cartao-pend a{color:#bff5a8}
[data-tema="escuro"] .opcao-card span{background:#17163a;border-color:#2b2a55;color:#f1f1ff}
[data-tema="escuro"] .opcao-card input:checked + span{background:#14301a;border-color:#26d100}
[data-tema="escuro"] .barra-app a[aria-current="page"],[data-tema="escuro"] .barra-app button[aria-current="page"]{color:#26d100}
[data-tema="escuro"] .barra-app a,[data-tema="escuro"] .barra-app button{color:#b6b6d0}
[data-tema="escuro"] .acao-rapida{background:#17163a;border-color:#2b2a55}
[data-tema="escuro"] .ar-ic{background:#26d100;color:#01003d}
[data-tema="escuro"] .ar-txt small{color:#b6b6d0}
[data-tema="escuro"] .promo-card{background:#17163a}
[data-tema="escuro"] .promo-texto b{color:#7dff5c}
[data-tema="escuro"] .aviso-ok{background:#14301a;color:#c8f7b6}
[data-tema="escuro"] .aviso-erro{background:#3a1515;color:#ffc9c2}
[data-tema="escuro"] .aviso-info{background:#1e1d4d;color:#cfd0ff}
[data-tema="escuro"] .tabela th,[data-tema="escuro"] .tabela td{border-color:#2b2a55}
[data-tema="escuro"] a:not(.btn):not(.acao-rapida):not(.chip):not(.promo-card){color:#9fa6ff}
[data-tema="escuro"] .menu-lateral a,[data-tema="escuro"] .barra-app a,[data-tema="escuro"] .lateral a,[data-tema="escuro"] .topo a:not(.btn){color:inherit}
[data-tema="escuro"] .estrelas-escolha label{color:#4a4970}

/* ---------- Master no celular ---------- */
.master-corpo{grid-template-columns:minmax(0,1fr)}
@media (min-width:1000px){.master-corpo{grid-template-columns:250px minmax(0,1fr)}}
.conteudo-master{min-width:0;overflow-x:hidden}
.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:900px){.kpis{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:999px){
  .conteudo-master{padding-left:14px;padding-right:14px}
  .conteudo-master .pagina-topo > *{max-width:100%}
  .conteudo-master select,.conteudo-master input,.conteudo-master textarea{max-width:100%}
  .conteudo-master .kpi{min-width:0;padding:12px}
  .conteudo-master .kpi strong{font-size:clamp(1.05rem,5vw,1.6rem);word-break:break-word}
  .conteudo-master .cartao{min-width:0;overflow-x:auto}
  .conteudo-master canvas,.conteudo-master svg,.conteudo-master img{max-width:100%;height:auto}
  .topo-master .saudacao{display:none}
  .topo-master .quem{gap:6px}
  .topo-master .selo-perfil{display:none}
  .filtros-usuarios,.form-recusar{display:flex;flex-wrap:wrap;gap:8px}
  .filtros-usuarios > *,.form-recusar > *{flex:1 1 160px;min-width:0}
}
.rel-mes-ano{display:flex;flex-direction:column;gap:8px}

/* ---------- Etapa 16 ---------- */
.entrega-loja{display:flex;gap:8px;align-items:flex-start;margin:8px 0;font-size:.95rem}
.entrega-loja svg{flex:none;margin-top:2px}

/* ---------- Etapa 17 ---------- */
.pilula-aviso{background:#fff3cd;color:#6b4a00}
[data-tema="escuro"] .pilula-aviso{background:#3d3110;color:#f6dd8b}
.dados-fixos{display:grid;gap:10px;margin:8px 0 12px}
@media (min-width:700px){.dados-fixos{grid-template-columns:repeat(2,minmax(0,1fr))}}
.dados-fixos div{padding:10px 12px;border-radius:10px;background:rgba(1,0,61,.04)}
.dados-fixos dt{font-size:.8rem;color:var(--suave,#5b5b73);font-weight:700}
.dados-fixos dd{margin:2px 0 0;font-weight:600}
[data-tema="escuro"] .dados-fixos div{background:rgba(255,255,255,.05)}
.acoes-linha{display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:flex-end}
.acoes-linha form{margin:0}
/* Tabela de lojas do agente vira cartões no celular */
@media (max-width:760px){
  .tabela-lojas-agente thead{display:none}
  .tabela-lojas-agente,.tabela-lojas-agente tbody,.tabela-lojas-agente tr,.tabela-lojas-agente td{display:block;width:100%}
  .tabela-lojas-agente tr{padding:12px 0;border-bottom:1px solid var(--linha,#e3e4ee)}
  .tabela-lojas-agente td{border:0;padding:3px 0}
  .tabela-lojas-agente td[data-rot]::before{content:attr(data-rot) ": ";font-size:.78rem;color:var(--suave,#5b5b73);font-weight:700}
  .tabela-lojas-agente td[data-rot="Loja"]::before{content:none}
  .tabela-lojas-agente .acoes-linha{justify-content:flex-start;margin-top:6px}
}

/* ---------- Etapa 18: painéis de cliente, lojista e agente ---------- */
.acao-rapida{position:relative}
.acao-rapida .ar-acao{justify-self:end}
.acao-rapida:hover{border-color:#26d100}
.menu-lateral-perfil{display:block;font-size:.72rem;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:#1d7a0a;padding:4px 12px 2px}
.menu-lateral-titulo{display:block;margin-top:10px;font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.5px;opacity:.55;padding:6px 12px 2px}
[data-tema="escuro"] .menu-lateral-perfil{color:#7dff5c}
@media (min-width:900px){
  .menu-lateral{padding:12px 10px}
  .painel-grade > .conteudo{max-width:1080px}
}
/* Cartões e números dos painéis com o mesmo acabamento */
.painel .cartao{border-radius:18px}
.painel .numero{border-radius:16px}
.painel .titulo-pagina{letter-spacing:-.2px}
@media (max-width:899px){
  .painel .numeros{grid-template-columns:repeat(2,minmax(0,1fr))}
  .painel .numero{min-width:0}
  .painel .pagina-topo{align-items:center}
  .painel .tabela-rolagem{margin:0 -4px}
}
[data-tema="escuro"] .acao-rapida{background:#17163a;border-color:#2b2a55;color:#f1f1ff}
[data-tema="escuro"] .menu-lateral{background:#14133a;border-color:#2b2a55}

/* ---------- Etapa 19: celular dos painéis do lojista e do agente ---------- */
.sem-quebra{white-space:nowrap}
.painel .pagina-topo .seletor-periodo select{padding:8px 32px 8px 12px;font-size:.9rem}
#contatos .plano-preco{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
#contatos .tabela-p th,#contatos .tabela-p td{text-align:center}
#contatos .tabela-p th:first-child,#contatos .tabela-p td:first-child{text-align:left}
.painel .numeros-6{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:760px){.painel .numeros-6{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:899px){
  .painel .painel-grade > .conteudo{padding-left:0;padding-right:0}
  .painel .titulo-pagina{font-size:1.45rem}
  .painel .pagina-topo{gap:8px;margin-bottom:14px}
  .painel .pagina-topo .btn{padding:9px 14px;font-size:.9rem}
  .painel .cartao{padding:16px}
  .painel .cartao h2{font-size:1.08rem}
  .painel .numero{padding:12px 14px}
  .painel .numero strong{font-size:1.45rem}
  .painel .numero span{font-size:.82rem}
  /* Contatos: três números lado a lado e tabela sem rolagem */
  #contatos .numeros{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  #contatos .numero{padding:10px}
  #contatos .numero strong{font-size:1.3rem}
  #contatos .numero span{font-size:.74rem;line-height:1.25}
  #contatos .tabela-rolagem{overflow:visible}
  #contatos .tabela-p{font-size:.8rem;table-layout:fixed;width:100%}
  #contatos .tabela-p th:first-child{width:34%}
  #contatos .tabela-p th{font-size:.68rem;text-transform:uppercase;letter-spacing:.2px}
  #contatos .rot-col{display:none}
  #contatos .tabela-p th,#contatos .tabela-p td{padding:7px 3px}
  /* Atalhos mais compactos */
  .acao-rapida{grid-template-columns:40px minmax(0,1fr) auto;padding:12px;gap:10px}
  .ar-ic{width:40px;height:40px}
  .ar-txt strong{font-size:.92rem}
  .ar-txt small{font-size:.78rem}
  .ar-acao{padding:7px 12px;font-size:.8rem}
  .atalhos-painel{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cartao-indicacao .copiar{flex-wrap:wrap}
  .cartao-indicacao .copiar input{flex:1 1 100%}
  .painel .barra-app span{font-size:.68rem}
}

/* Lojas do agente: cartões no celular */
@media (max-width:760px){
  .cartao:has(> .tabela-rolagem > .tabela-lojas-agente){background:none;border:0;padding:0;box-shadow:none}
  .tabela-lojas-agente tbody{display:grid;gap:12px}
  .tabela-lojas-agente tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 12px;padding:14px;border:1px solid var(--linha,#e3e4ee);border-radius:16px;background:var(--fundo-card,#fff)}
  .tabela-lojas-agente td{padding:0;font-size:.88rem;min-width:0;overflow-wrap:anywhere}
  .tabela-lojas-agente td[data-rot]::before{display:block;content:attr(data-rot);font-size:.68rem;text-transform:uppercase;letter-spacing:.4px;margin-bottom:1px}
  .tabela-lojas-agente td[data-rot="Loja"]{grid-column:1/-1;padding-bottom:6px;border-bottom:1px solid var(--linha,#e3e4ee)}
  .tabela-lojas-agente td[data-rot="Loja"] a{text-decoration:none;color:inherit;font-size:1.05rem}
  .tabela-lojas-agente td[data-rot="Comissões"] a{font-weight:800;color:#1d7a0a;text-decoration:none}
  .tabela-lojas-agente .acoes-linha{grid-column:1/-1;display:flex;gap:8px;margin-top:4px;padding-top:10px;border-top:1px solid var(--linha,#e3e4ee)}
  .tabela-lojas-agente .acoes-linha .btn{flex:1 1 0;justify-content:center}
  .tabela-lojas-agente .acoes-linha .link-discreto{flex:0 0 auto}
  [data-tema="escuro"] .tabela-lojas-agente tr{background:#17163a;border-color:#2b2a55}
  [data-tema="escuro"] .tabela-lojas-agente td[data-rot="Comissões"] a{color:#7dff5c}
}
.tabela-lojas-agente td[data-rot="Loja"] a{text-decoration:none}

/* Saldo do agente */
@media (max-width:899px){
  .saldo{padding:16px}
  .saldo-principal > strong{font-size:1.75rem}
}

#contatos .tabela-p th .ic{vertical-align:-2px;margin-right:4px;color:#1d7a0a}
[data-tema="escuro"] #contatos .tabela-p th .ic{color:#7dff5c}
.tabela-lojas-agente td[data-rot="Loja"]::before{content:none!important;display:none!important}
@media (max-width:760px){.tabela-lojas-agente .acoes-linha .btn{white-space:nowrap;font-size:.85rem;padding:9px 10px}}
#contatos .numeros{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (min-width:760px){
  .atalhos-loja .acao-rapida{grid-template-columns:44px minmax(0,1fr);grid-template-rows:auto auto;align-items:start}
  .atalhos-loja .ar-acao{grid-column:1/-1;justify-self:stretch;text-align:center;margin-top:4px}
}
@media (min-width:760px){
  .atalhos-loja .acao-rapida{grid-template-rows:1fr auto;height:100%}
  .atalhos-loja .ar-acao{align-self:end}
}

/* ---------- Etapa 20: página do Agente Bairrista ---------- */
.lp-cartao-vagas .lp-vagas{display:grid;gap:8px;margin:12px 0}
.lp-vaga{display:flex;justify-content:space-between;align-items:center;margin:0;padding:12px 14px;border-radius:12px;background:#f3f4fa}
.lp-vaga b{font-size:.95rem}
.lp-vaga strong{font-size:1.25rem}
.lp-vaga-1{background:#26d100;color:#01003d}
.lp-vaga-1 strong{font-size:1.6rem}
.lp-porque-grade{display:grid;gap:16px}
@media (min-width:760px){.lp-porque-grade{grid-template-columns:repeat(3,1fr)}}
.lp-porque-grade > div{background:#fff;border:1px solid var(--linha,#e3e4ee);border-radius:18px;padding:20px}
.lp-ic{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:14px;background:#01003d;color:#26d100}
.lp-porque-grade h3{margin:12px 0 6px}
.lp-ganhos{display:grid;gap:12px;margin:16px 0}
@media (min-width:700px){.lp-ganhos{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.lp-ganhos{grid-template-columns:repeat(5,1fr)}}
.lp-ganho{display:flex;flex-direction:column;gap:4px;background:#fff;border:1px solid var(--linha,#e3e4ee);border-radius:18px;padding:18px}
.lp-ganho strong{font-size:2rem;line-height:1;color:#1d7a0a;font-weight:900}
.lp-ganho span{font-weight:800;color:#01003d}
.lp-ganho small{color:var(--suave,#5b5b73)}
.lp-ganho-destaque{background:#01003d;border-color:#01003d}
.lp-ganho-destaque strong{color:#26d100}
.lp-ganho-destaque span{color:#fff}
.lp-ganho-destaque small{color:#c9cbf2}
.lp-sub-titulo{margin:24px 0 10px}
.lp-inclui{display:grid;gap:20px;align-items:center}
@media (min-width:860px){.lp-inclui{grid-template-columns:1.4fr 1fr}}
.lp-check{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.lp-check li{position:relative;padding:12px 14px 12px 44px;background:#fff;border-radius:12px;border:1px solid var(--linha,#e3e4ee);font-weight:600}
.lp-check li::before{content:"✓";position:absolute;left:14px;top:50%;transform:translateY(-50%);width:22px;height:22px;border-radius:50%;background:#26d100;color:#01003d;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:.8rem}
.lp-garantia{background:#01003d;color:#fff;border-radius:20px;padding:24px;text-align:center}
.lp-garantia .lp-ic{background:#26d100;color:#01003d}
.lp-garantia h3{color:#fff;margin:12px 0 6px}
.lp-garantia p{color:#c9cbf2;margin:0}
.lp-vagas-lista{list-style:none;padding:0;margin:10px 0;display:grid;gap:6px}
.lp-vagas-lista li{color:#fff;background:rgba(255,255,255,.08);border-radius:10px;padding:8px 12px}
.lp-preco-cidade{margin:4px 0 12px;padding:12px 14px;border-radius:12px;background:#f3f4fa;color:#01003d;font-size:.95rem}
.lp-preco-cidade strong{font-size:1.15rem}
.lp-preco-promo{background:#e8fbe0;border:2px solid #26d100}
.lp-barra-cta{display:none}
@media (max-width:760px){
  .lp-barra-cta{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px));background:#01003d;color:#fff;box-shadow:0 -6px 20px rgba(1,0,61,.25)}
  .lp-barra-cta strong{color:#26d100}
  body:has(.lp-barra-cta){padding-bottom:70px}
}
[data-tema="escuro"] .lp-porque-grade > div,[data-tema="escuro"] .lp-ganho,[data-tema="escuro"] .lp-check li{background:#17163a;border-color:#2b2a55}
[data-tema="escuro"] .lp-ganho span{color:#f1f1ff}
[data-tema="escuro"] .lp-vaga{background:#26245a;color:#f1f1ff}
[data-tema="escuro"] .lp-vaga-1{background:#26d100;color:#01003d}
.lp-barra-cta .btn{white-space:nowrap;padding:10px 16px}