/* Ajustes de celular do site publico (15/10/2026).
 *
 * Mora FORA do public_html de proposito: o deploy do Astro substitui o
 * public_html inteiro, e estas correcoes precisam sobreviver a ele. O nginx
 * entrega este arquivo em /ajustes-celular.css e injeta o <link> antes do
 * </head> de toda pagina (conf: /etc/nginx/conf.d/users/painelderevenda/
 * painelderevenda.net/ajustes-celular.conf). Tudo preso a
 * body:has(header.cabecalho), que so o site publico tem - o painel
 * (header.topo) e o admin (adm-barra) nao sao afetados.
 *
 * Quando estas regras entrarem no CSS do projeto Astro, apagar o .conf do
 * nginx e este arquivo.
 */

/* Calculadora de lucro: o <select> de servicos tem nomes longos e a grade do
   formulario crescia ate 687px, estourando 328px para fora da tela. */
body:has(header.cabecalho) .form{grid-template-columns:minmax(0,1fr)}
body:has(header.cabecalho) .form label{min-width:0}
body:has(header.cabecalho) .form input,
body:has(header.cabecalho) .form select,
body:has(header.cabecalho) .form textarea{width:100%;max-width:100%;min-width:0;box-sizing:border-box}

/* Tabela solta no conteudo (/api, /privacidade, /sobre, /painel-smm-barato)
   empurrava a pagina para o lado. No celular ela rola por dentro. */
@media (max-width:760px){
  body:has(header.cabecalho) .container>table,
  body:has(header.cabecalho) .prosa>table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
}
body:has(header.cabecalho) td code,
body:has(header.cabecalho) th code{overflow-wrap:anywhere;word-break:break-word}

/* Menu do celular: "Criar conta" herdava a cor dos links do menu e, no tema
   escuro, ficava creme sobre o amarelo do botao (contraste 1,2). */
body:has(header.cabecalho) .menu-mobile-lista a.btn-primario{color:#17140f}

/* Cabecalho no celular e tablet (21/10/2026): "Entrar" e "Criar conta" ficam
   visiveis fora do menu. Ate 1040px o Astro escondia .nav-acoes e deixava so
   o botao Menu. De 640 a 1040px os dois botoes cabem ao lado do Menu; abaixo
   de 640px descem para uma faixa propria, um ao lado do outro. */
@media (max-width:1040px){
  body:has(header.cabecalho) .cabecalho .nav-acoes{display:flex;gap:8px;margin-left:auto}
  body:has(header.cabecalho) .cabecalho .menu-mobile{margin-left:0}
}
@media (max-width:639px){
  body:has(header.cabecalho) .cabecalho .container{flex-wrap:wrap;column-gap:12px;row-gap:10px;min-height:0;padding-top:10px;padding-bottom:10px}
  body:has(header.cabecalho) .cabecalho .menu-mobile{margin-left:auto}
  body:has(header.cabecalho) .cabecalho .nav-acoes{order:3;width:100%;margin-left:0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
  body:has(header.cabecalho) .cabecalho .nav-acoes .btn{width:100%;justify-content:center;text-align:center}
  body:has(header.cabecalho) .menu-mobile-lista{top:100%}
}
/* Abaixo de 375px a marca encolhe para o Menu caber na mesma linha. */
@media (max-width:374px){
  body:has(header.cabecalho) .cabecalho .marca{gap:8px}
  body:has(header.cabecalho) .cabecalho .marca .logo-etiqueta{width:42px;height:28px}
  body:has(header.cabecalho) .cabecalho .marca-nome strong{font-size:18px}
  body:has(header.cabecalho) .cabecalho .marca-nome small{font-size:9px;letter-spacing:.1em}
}