/* Serviços em Foco — celular (até 767px). Barra no topo, barra inferior com ícones
   (o padrão aprovado pelo dono no Alô Vendas), 16px nas laterais, toques de 48px e
   campo com fonte 16px (abaixo disso o iPhone dá zoom sozinho). */

/* Topo: só a marca e o avatar; o menu mora na barra inferior */
.lateral { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: var(--tinta); color: #fff; }
.marca { display: flex; align-items: center; gap: 10px; color: #fff; }
.marca img { width: 28px; height: 28px; }
.marca span { display: flex; flex-direction: column; line-height: 1.15; }
.marca strong { font: 700 15px var(--fonte-titulo); }
.marca small { color: rgba(255, 255, 255, .55); font-size: 11px; }
.lateral .menu, .lateral .quem-texto, .lateral .quem .botao-icone { display: none; }
.lateral .quem { margin-left: auto; }
.avatar { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--marca); color: var(--sobre-marca); font: 700 12px var(--fonte-titulo); }

.conteudo { padding: 20px 16px calc(96px + env(safe-area-inset-bottom)); }
.cabecalho-pagina { flex-direction: column; gap: 12px; margin-bottom: 20px; }
.cabecalho-pagina .botao { width: 100%; }
.titulo-pagina { font-size: 24px; }
.cartao { padding: 16px; }
.com-padding { padding: 16px 16px 0; }

/* Barra inferior */
.barra-inferior { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: grid; grid-template-columns: repeat(5, 1fr);
  background: #fff; border-top: 1px solid var(--borda); box-shadow: 0 -4px 16px rgba(20, 22, 43, .06); padding-bottom: env(safe-area-inset-bottom); }
.barra-inferior > a, .barra-inferior summary { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 60px;
  color: var(--texto-2); font-size: 11px; font-weight: 600; list-style: none; }
.barra-inferior summary::-webkit-details-marker { display: none; }
.barra-inferior .icone { width: 22px; height: 22px; }
.barra-inferior > a:hover { text-decoration: none; }
.barra-inferior > a.ativo, .barra-inferior .mais.ativo summary, .barra-inferior .mais[open] summary { color: var(--tinta); }
.barra-inferior > a.ativo .icone, .barra-inferior .mais.ativo summary .icone { color: var(--marca-forte); }
/* A folha do "Mais" se posiciona pela própria barra (fixa): sem filtro na barra, que mudaria a referência */
.mais { position: static; }
.folha { position: absolute; left: 12px; right: 12px; bottom: calc(100% + 8px); background: var(--cartao); border: 1px solid var(--borda);
  border-radius: 12px; box-shadow: var(--sombra-alta); padding: 8px; display: flex; flex-direction: column; }
.folha a, .folha button { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 12px; border-radius: var(--raio-pequeno);
  color: var(--texto-1); font: 500 15px var(--fonte); background: none; border: 0; width: 100%; text-align: left; cursor: pointer; }
.folha a[aria-current] { background: var(--marca-suave); }
.folha form { border-top: 1px solid var(--divisor); margin-top: 4px; padding-top: 4px; }
.folha button { color: var(--erro); }

/* Números e cartões */
.cartoes-numeros { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.cartao.numero { display: flex; flex-direction: column; gap: 4px; padding: 14px; }
.cartao.numero .topo { display: flex; justify-content: space-between; align-items: center; }
.cartao.numero .rotulo { margin: 0; font-size: 11px; }
.cartao.numero .ladrilho { width: 30px; height: 30px; }
.numero-grande { font-size: 26px; }
.cartao.numero.escuro { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.cartao.numero.escuro .rotulo, .cartao.numero.escuro .secundario { color: rgba(255, 255, 255, .6); }
.cartao.numero.escuro .numero-grande { color: var(--marca); }
.cartao.numero.escuro .ladrilho { background: rgba(240, 182, 56, .16); color: var(--marca); }
.cartoes-fontes, .duas-colunas, .pilha { display: flex; flex-direction: column; gap: 12px; margin-bottom: 12px; }
.cartoes-fontes .botao { width: 100%; }
.funil-linha { grid-template-columns: 104px 1fr 32px; }

/* Toque e campos */
.botao { min-height: 48px; }
input[type=text], input[type=email], input[type=password], input[type=search], input[type=number], select, textarea { font-size: 16px; min-height: 48px; }
textarea { min-height: 96px; }
.filtros { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.acoes-filtro { display: flex; gap: 8px; }
.acoes-filtro .botao { flex: 1; }

/* Tabela vira lista de cartões: cada linha é um bloco, cada célula diz o que é */
.tabela-cartoes thead { display: none; }
.tabela-cartoes, .tabela-cartoes tbody, .tabela-cartoes tr, .tabela-cartoes td { display: block; width: 100%; }
.tabela-cartoes tr { padding: 14px 16px; border-bottom: 1px solid var(--divisor); }
.tabela-cartoes td { padding: 2px 0; border: 0; }
.tabela-cartoes td[data-rotulo]:not(.celula-titulo):not([data-rotulo=""])::before { content: attr(data-rotulo) ": "; color: var(--texto-2); font-size: 12px; }
.tabela-cartoes .celula-titulo { display: flex; padding: 6px 0; }
.tabela-cartoes .celula-titulo a { font-size: 15px; }

.grade-campos { display: flex; flex-direction: column; gap: 12px; margin-bottom: 8px; }
.form-perfil { display: flex; flex-direction: column; gap: 12px; }
.linha-copiar { flex-direction: column; }
.paginacao { flex-wrap: wrap; }

/* Entrada: faixa da marca no topo, formulário embaixo */
.tela-entrada { grid-template-rows: auto 1fr; }
.entrada-marca { padding: 28px 20px 32px; }
.entrada-marca h2 { font-size: 22px; margin-top: 20px; }
.entrada-marca ul { display: none; }
.entrada-formulario { padding: 28px 20px 40px; }
.caixa-entrada { max-width: none; }
.recolher { display: none; }
.barra-inferior summary { position: relative; }
.provedor, .segmentado { width: 100%; }
.segmentado a { flex: 1; justify-content: center; padding: 8px 6px; font-size: 13px; }
.abas { margin-left: -16px; margin-right: -16px; padding: 0 12px; }