/* regência. atendimento: celular.
   Revisão de usuário real (390, 360 e 430 de largura). Vem por último no index.html, de propósito:
   tudo que é só do celular mora aqui em vez de espalhado pelas telas. Só tokens do app.css. */

/* Trilho de etapas do funil: só existe no celular. */
.funil-trilho { display: none; }

@media (max-width: 820px) {
  /* ---------- base: toque, zoom do iOS e espaço seguro ---------- */
  :root { --nav-baixo: calc(60px + env(safe-area-inset-bottom, 0px)); }
  html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
  a, button, select, summary, label, input, textarea, [role="button"], [role="tab"] { touch-action: manipulation; }
  /* Campo com menos de 16px faz o iPhone dar zoom ao tocar. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), select, textarea { font-size: 16px; }
  .entrada, .campo input[type="text"], .campo input[type="email"], .campo input[type="password"], .campo input[type="search"], .campo input[type="tel"], .campo input[type="number"], .campo input[type="datetime-local"], .campo select, select.entrada, input.entrada { min-height: 44px; }
  .conteudo { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }

  /* Todo alvo de toque com 44px. */
  .btn, .btn.pq, .btn.sutil { min-height: 44px; }
  .btn.so-icone, .btn.so-icone.pq { width: 44px; min-width: 44px; }
  .abas button { min-height: 44px; font-size: 14px; }
  .abas { overflow-x: auto; scrollbar-width: none; }
  .abas::-webkit-scrollbar { display: none; }
  .abas button { flex: 1 0 auto; padding: 0 12px; }
  .nav-baixo a, .nav-baixo button { font-size: 12px; }
  .nav-baixo .contagem { font-size: 12px; }
  .avatar { font-size: 14px; }
  .tarefa-meta .avatar { font-size: 10px; }
  .cartao-lead .avatar, .acao-item .avatar, .li-contato .avatar, .dl .avatar { font-size: 12px; }
  .selo { min-height: 24px; }

  /* ---------- cabeçalho de página: o texto de apoio não come a tela ---------- */
  .titulo-pagina { gap: 8px 12px; margin-bottom: 12px; }
  .titulo-pagina p { margin-top: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .titulo-pagina .linha { gap: 8px; }

  /* ---------- painel: o que precisa de ação vem logo ---------- */
  .conteudo:has(.painel-grade) .titulo-pagina > div:first-child p { display: none; }
  .conteudo:has(.painel-grade) .titulo-pagina { margin-bottom: 10px; }
  .conteudo:has(.painel-grade) .resumo { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--linha); margin-bottom: 16px; }
  .conteudo:has(.painel-grade) .resumo > div { background: var(--superficie); border: 0 !important; padding: 10px 12px; gap: 2px; }
  .conteudo:has(.painel-grade) .resumo > div.em-risco { grid-column: span 2; }
  .conteudo:has(.painel-grade) .resumo dt { font-size: 12px; line-height: 1.25; }
  .conteudo:has(.painel-grade) .resumo dd { font-size: 20px; }
  .painel-grade { gap: 16px; }
  .painel-grade .cartao-cab { margin-bottom: 8px; }
  .painel-grade .cartao.sem-padding > .cartao-cab { padding: 14px 16px 0 !important; }
  .painel-grade .cartao.sem-padding > .cartao-cab p { display: none; }
  .acao-item { padding: 12px 16px; }
  .acao-item .botoes { gap: 8px; }
  .acao-item .botoes .btn { min-height: 44px; padding: 0 8px; white-space: nowrap; }

  /* ---------- inbox: lista ---------- */
  .inbox-filtros { padding: 8px 12px 10px; gap: 8px; }
  .filtros-linha { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -12px; padding: 0 12px; scroll-padding: 0 12px; scroll-snap-type: x proximity; }
  .filtros-linha::-webkit-scrollbar { display: none; }
  .filtros-linha > * { flex: none; scroll-snap-align: start; }
  .filtros-linha select { width: auto !important; min-width: 140px; min-height: 44px; }
  .filtros-linha .opcao, .filtros-linha .opcao span { width: auto; }
  .filtros-linha .opcao span { min-height: 44px; padding: 0 14px; display: inline-flex; align-items: center; font-size: 14px; }
  .conversas { overscroll-behavior: contain; }
  .conv-item { padding: 12px 16px; }

  /* ---------- inbox: conversa ---------- */
  .thread-cab { display: grid; grid-template-columns: 44px 36px minmax(0, 1fr) auto; align-items: center; gap: 6px 10px; padding: 8px 12px 8px 4px; min-height: 0; flex-wrap: nowrap; }
  .thread-cab .voltar-lista { width: 44px; height: 44px; }
  .thread-cab .avatar { width: 36px; height: 36px; font-size: 13px; }
  .thread-cab .quem { min-width: 0; }
  .thread-cab h2 { font-size: 16px; line-height: 1.25; }
  .thread-cab .quem .linha { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 6px !important; padding-right: 16px; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 20px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 20px), transparent); }
  .thread-cab .quem .linha::-webkit-scrollbar { display: none; }
  .thread-cab .quem .linha > * { flex: none; white-space: nowrap; }
  .thread-cab .assunto-cab { display: none; }
  .thread-cab .botoes { display: contents; }
  .thread-cab .abrir-lead { grid-column: 4; grid-row: 1; width: 44px; padding: 0; }
  .thread-cab .abrir-lead .rotulo-btn { display: none; }
  .thread-cab .botoes .btn.contorno { grid-column: 2 / -1; grid-row: 2; justify-self: start; }
  /* "Assumir" já está na caixa de resposta, no polegar: no topo era repetido. */
  .thread-cab .botoes .btn.primario { display: none; }
  .mensagens { overscroll-behavior: contain; }
  .caixa-resposta { padding: 8px 12px 10px; gap: 6px; }
  .caixa-resposta .dica { font-size: 13px; gap: 6px; line-height: 1.35; }
  .caixa-resposta .dica .btn { width: 100%; min-height: 44px; font-size: 15px; background: var(--acao-fundo); color: var(--acao-texto); }
  .caixa-resposta:has(.dica .btn) form { display: none; }
  .caixa-resposta form { gap: 6px; }
  .caixa-resposta textarea { max-height: 112px !important; font-size: 16px; }
  /* Digitando: o teclado já cobre o fim da tela; a barra de baixo sairia por cima da caixa de resposta. */
  body:has(.thread textarea:focus) .nav-baixo { display: none; }
  body:has(.thread textarea:focus) .conteudo.cheio { margin-bottom: 0; }
  body:has(.thread textarea:focus) .caixa-resposta { padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
  .btn-enviar { width: 44px; min-width: 44px; padding: 0; }
  .btn-enviar .rotulo-enviar { display: none; }
  .btn-rapidas { width: 44px; }
  .menu-rapidas { max-height: min(260px, 40vh); }
  .rapida-opcao { min-height: 44px; align-items: center; }

  /* detalhes e anotações: tela inteira, por cima da barra de baixo */
  .inbox.lead-aberto .lead-lateral { inset: 0; bottom: 0; width: 100vw; z-index: 60; border-left: 0; padding-top: env(safe-area-inset-top, 0px); overscroll-behavior: contain; }
  .inbox .lat-cab { padding: 8px 12px; }
  .inbox .lat-cab .abas.lat-abas button, .inbox .lat-cab .fechar-lead { min-height: 44px; }
  .inbox .lat-cab .fechar-lead { width: 44px; }
  .inbox.lead-aberto .lead-lateral { padding-bottom: env(safe-area-inset-bottom, 0px); }

  /* ---------- funil ---------- */
  .conteudo:has(.quadro) .titulo-pagina { gap: 8px; }
  .conteudo:has(.quadro) .titulo-pagina > .linha { width: 100%; gap: 8px; }
  .conteudo:has(.quadro) .titulo-pagina .busca { flex: 1 1 100%; }
  .conteudo:has(.quadro) .titulo-pagina .busca input { width: 100% !important; min-height: 44px !important; }
  .conteudo:has(.quadro) .titulo-pagina .opcao span { min-height: 44px; display: inline-flex; align-items: center; }
  .funil-trilho { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px 8px; padding: 6px 16px; position: sticky; top: calc(var(--topo-altura) - 1px); z-index: 15; background: var(--fundo); border-bottom: 1px solid var(--linha); }
  .funil-trilho::-webkit-scrollbar { display: none; }
  .funil-trilho-item { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 1px solid var(--linha-forte); border-radius: 22px; background: var(--superficie); color: var(--texto-fraco); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; }
  .funil-trilho-item .ponto { width: 10px; height: 10px; flex: none; }
  .funil-trilho-item .num { font-weight: 800; color: var(--texto-tenue); }
  .funil-trilho-item[aria-current="true"] { background: var(--destaque-suave); border-color: var(--destaque); color: var(--destaque); }
  .funil-trilho-item[aria-current="true"] .num { color: inherit; }
  .quadro { margin: 0 -16px; padding: 0 16px 16px; gap: 10px; scroll-snap-type: x mandatory; scroll-padding: 0 16px; overscroll-behavior-x: contain; }
  .coluna { flex: 0 0 min(86vw, 340px); scroll-snap-align: start; scroll-snap-stop: always; }
  .coluna-cab { padding: 12px 12px 8px; }
  .coluna-lista { padding: 4px 8px 10px; gap: 8px; overflow: visible; }
  .cartao-lead { padding: 12px; cursor: default; }
  .cartao-lead select { min-height: 44px !important; font-size: 16px !important; padding-top: 6px !important; padding-bottom: 6px !important; }
  .cartao-lead .cartao-topo { align-items: center; }
  .cartao-lead .cartao-topo .titulo { padding-top: 0; }
  .cartao-lead .titulo-link { min-height: 44px; display: flex; align-items: center; font-size: 16px; }

  /* ---------- follow-ups, tarefas ---------- */
  .tarefas-filtros select.entrada { min-height: 44px; font-size: 16px; }
  .conteudo :not(.inbox-filtros) > .busca { flex: 1 1 100%; }
  .conteudo .busca input { width: 100% !important; }
  .tarefas-filtros select.entrada { flex: 1 1 0; min-width: 0; width: auto; }
  .tarefa { grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 4px 8px; padding: 10px 8px 10px 12px; }
  .tarefa-acoes { grid-column: 3; grid-row: 1; }
  .tarefa-check { width: 44px; height: 44px; margin: -4px 0 0 -4px; background-clip: padding-box; }
  .tarefa-check { border: 0; background: transparent; position: relative; }
  .tarefa-check::before { content: ''; position: absolute; inset: 6px; border-radius: 50%; border: 2px solid var(--linha-forte); background: var(--fundo); }
  .tarefa-check .icone { position: relative; }
  .tarefa.feita .tarefa-check::before { background: var(--ok-fundo); border-color: var(--ok); }
  .tarefa-check:hover:not(:disabled)::before { border-color: var(--ok); }
  .tarefa-mini .tarefa-check { width: 24px; height: 24px; margin: 0; border: 2px solid var(--linha-forte); background: var(--fundo); }
  .tarefa-mini .tarefa-check::before { display: none; }
  .tarefa-mini .tarefa-check::after { content: ''; position: absolute; inset: -10px; }
  .tarefa-acoes { gap: 8px; }

  /* ---------- números grandes: não quebram no meio ---------- */
  .met-tile .valor, .ins-tile .valor { white-space: nowrap; font-size: clamp(18px, 5.6vw, 24px); }
  .met-tiles, .ins-tiles { gap: 8px; }
  .met-tile { padding: 12px; }
  .met-tile dt { font-size: 12.5px; }
  .atr-abas { scrollbar-width: none; }
  .atr-abas::-webkit-scrollbar { display: none; }
  .atr-abas button, .met-abas button, .ins-periodo .abas button { min-height: 44px; }
  /* Tabela larga rola de lado, mas a primeira coluna (o nome) fica parada para a linha não perder o sentido. */
  .atr-tabela th:first-child, .atr-tabela td:first-child { position: sticky; left: 0; z-index: 1; background: var(--superficie); min-width: 112px; box-shadow: 1px 0 0 var(--linha); }

  /* ---------- receita e canais ---------- */
  .barra-salvar { padding: 8px 12px; margin-top: 16px; gap: 8px; }
  .barra-salvar .linha { width: 100%; }
  .barra-salvar .btn { flex: 1; white-space: nowrap; }
  /* Sem nada para salvar, o recado só ocupa lugar. */
  .barra-salvar:has(.btn.primario:disabled) > :first-child:not(.linha) { display: none; }
  .etapa-linha input { min-height: 44px !important; }
  /* etapas-editor.css entra depois, pelo form.js: por isso o seletor mais forte. */
  .etapa-linha .etapa-cor { width: 44px; min-width: 44px; min-height: 44px !important; height: 44px; }
  .etapa-bloco .etapa-detalhes > summary { min-height: 44px; }
  .etapa-linha .btn.so-icone { width: 44px; }
  .conteudo summary { min-height: 44px; display: flex; align-items: center; }
  /* Link no meio do texto: a área de toque cresce sem mexer no desenho. */
  .conteudo :is(li, p, span, .tarefa-meta) > a:not(.btn) { position: relative; }
  .conteudo :is(li, p, span, .tarefa-meta) > a:not(.btn)::after { content: ''; position: absolute; inset: -12px -4px; }
  .ag-ver { min-height: 44px; }
  .busca input { min-height: 44px !important; }
  .qr-caixa ol { text-align: left; }
  .qr-caixa img { width: min(240px, 100%); height: auto; aspect-ratio: 1; }
  .chip-rem { min-height: 44px; padding-left: 12px; }
  .chip-rem button { width: 44px; height: 44px; margin: -4px 0; }

  /* ---------- diálogos ---------- */
  dialog.dialogo { width: calc(100vw - 24px); max-height: calc(100dvh - 24px); }
  .dialogo-cab { padding: 16px 16px 0; }
  .dialogo-corpo { padding: 12px 16px 4px; }
  .dialogo-rodape { padding: 12px 16px calc(14px + env(safe-area-inset-bottom, 0px)); position: sticky; bottom: 0; background: var(--superficie); }
  .dialogo-rodape .btn { flex: 1 1 0; }
  .menu-linha { grid-template-columns: 20px minmax(0, 1fr) auto 44px 44px; gap: 4px; }
  .menu-linha .btn.so-icone.pq { width: 44px; min-height: 44px; }
  .menu-linha .interruptor { min-height: 44px; }
  .notif-celula .so-leitor { overflow-wrap: normal; word-break: normal; hyphens: none; }
  .notif-linha { grid-template-columns: 1fr 1fr 1.3fr; }

  /* ---------- menu "Mais": duas colunas, cabe quase tudo sem rolar ---------- */
  .menu-mais { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; width: min(340px, calc(100vw - 24px)); min-width: 0; right: max(12px, env(safe-area-inset-right)); padding: 6px; }
  .menu-mais a, .menu-mais button { gap: 10px; padding: 0 10px; font-size: 14px; line-height: 1.15; min-width: 0; }
  .menu-mais .icone { flex: none; }

  /* ---------- tour de primeiro acesso ---------- */
  .tour { overflow: hidden; }
  .tour-pular { min-height: 44px; padding: 0 12px; }
  .tour-botoes .btn { min-height: 44px; }
}

/* Telas baixas (iPhone SE, Android pequeno): o topo do login e o tour ocupam menos. */
@media (max-width: 820px) and (max-height: 760px) {
  .login-feed { display: none; }
  .login-marca { padding-bottom: 16px; }
  .tour-cartao.tela .ilu { display: none; }
}

@media (max-width: 380px) {
  .conteudo { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }
  .quadro, .funil-trilho { margin-left: -12px; margin-right: -12px; padding-left: 12px; padding-right: 12px; }
  .met-tiles, .ins-tiles { grid-template-columns: minmax(0, 1fr); }
  .conteudo:has(.painel-grade) .resumo dd { font-size: 18px; }
}

/* Primeiros passos no topo: alvo de toque de 44 px no celular. */
@media (max-width: 900px) {
  .botao-passos { min-height: 44px; min-width: 44px; justify-content: center; }
}

/* Inbox: separação por canal e por número. Uma ficha por conexão, com logo, nome e contagem; rola de lado quando não cabe. */
.inbox-canais { display: flex; flex-wrap: wrap; gap: 8px; padding: 2px 0 8px; }
.inbox-canais[hidden] { display: none; }
.ficha-canal { flex: none; display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--linha-forte); background: var(--superficie); color: var(--texto); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.ficha-canal:hover { background: var(--superficie-2); }
.ficha-canal[aria-pressed="true"] { background: var(--destaque); border-color: var(--destaque); color: #fff; }
.ficha-canal[aria-pressed="true"] .tenue { color: rgba(255, 255, 255, .8); }
.ficha-canal .icone { width: 18px; height: 18px; }
.ficha-canal-novas { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--laranja, #FF6A3D); color: #fff; font-size: 11px; font-weight: 800; display: inline-grid; place-items: center; }
@media (max-width: 900px) {
  .inbox-canais { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .inbox-canais::-webkit-scrollbar { display: none; }
  .ficha-canal { min-height: 44px; }
}