/* Camada responsiva do design system. Toda tela do +Mix carrega este arquivo depois de tokens.css e componentes.css.
   O que está aqui vale por padrão para tudo que for criado: telas novas já nascem utilizáveis em celular e tablet.
   Regras e checklist: docs/PADRAO-RESPONSIVO.md. Para conferir uma tela: const { audita } = await import('/ds/responsivo.js'); audita();

   Pontos de quebra (CSS não aceita variável em @media, então os valores são estes, sempre):
     480px   celular em pé         760px   celular deitado / tablet pequeno
     900px   menu do painel vira gaveta       1024px  tablet deitado / notebook pequeno (até aqui, alvos de toque de 44px)
   Escreva o CSS "do menor para o maior": o padrão serve no celular e @media (min-width: …) acrescenta o que sobra de espaço.
   Quando for mais prático, use @media (max-width: …) com estes mesmos valores. */

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { overflow-wrap: break-word; }
img, video { max-width: 100%; height: auto; }
svg, canvas { max-width: 100%; }
/* Texto comprido (e-mail, código, chave Pix) quebra em vez de empurrar a página para o lado. */
code, .codigo, .mudo { overflow-wrap: anywhere; }

/* Tabelas: o contêiner .tabela rola na horizontal; a página nunca. (O helper tabela() do painel já devolve este contêiner.) */
.tabela { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }

/* Celular: tabelas viram cartões (cartoes-movel.js põe .cartoes na tabela e data-label nas células). Sem rolagem para o lado. */
@media (max-width: 640px) {
  .tabela:has(> table.cartoes) { overflow-x: visible; }
  table.cartoes, table.cartoes tbody { display: block; width: 100% !important; min-width: 0 !important; }
  table.cartoes thead { display: none; }
  table.cartoes tbody tr { display: block; margin: 0 0 var(--e2, 8px); padding: 2px 12px; border: 1px solid var(--borda); border-radius: var(--raio, 12px); background: var(--superficie); }
  table.cartoes td { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: auto !important; min-width: 0 !important; padding: 9px 0 !important;
    border: 0 !important; border-bottom: 1px solid var(--borda) !important; background: transparent !important; text-align: right; white-space: normal !important; overflow-wrap: anywhere; }
  table.cartoes td:last-child { border-bottom: 0 !important; }
  table.cartoes td[data-label]::before { content: attr(data-label); flex: 0 0 36%; max-width: 45%; text-align: left; font-size: 12px; font-weight: 600; opacity: .7; }
  table.cartoes td:empty { display: none; }
  table.cartoes td[colspan] { display: block; text-align: center; }
  table.cartoes td .acoes { flex-wrap: wrap !important; justify-content: flex-end; }
  table.cartoes td.col-produto, table.cartoes td input, table.cartoes td select { min-width: 0; }
  table.cartoes td input:not([type="checkbox"]):not([type="radio"]), table.cartoes td select { max-width: 60%; }
}

/* Janelas: nunca maiores que a tela; se o conteúdo for maior, a janela rola por dentro. */
dialog { max-width: calc(100vw - 16px); max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); overflow: auto; overscroll-behavior: contain; }

/* Toque: em aparelho sem mouse (ou janela estreita) os alvos têm 44 px e os campos 16 px (abaixo disso o iPhone dá zoom ao digitar). */
@media (pointer: coarse), (max-width: 1024px) {
  /* !important de propósito: é um piso de acessibilidade que vence os min-height próprios de cada tela. Para um controle
     minúsculo de verdade (ex.: pontinhos de carrossel com área de toque ampliada) use a classe .alvo-livre. */
  button:not(.alvo-livre), .btn, select, summary, textarea,
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]):not([type="file"]) { min-height: 44px !important; }
  button:not(.alvo-livre), .btn { min-width: 44px !important; } /* botão só com ícone (+, ✕) também tem 44 px de largura */
  input[type="file"] { min-height: 44px; }
  input, select, textarea { font-size: 16px; }
  .menu-item, .menu-grupo-cab, .popover li > button, .popover li > a { min-height: 44px; }
  /* Caixa de seleção: 24 px (mínimo da WCAG 2.2). Dentro de um <label> o rótulo inteiro é o alvo, e ele já tem 44 px. */
  input[type="checkbox"], input[type="radio"] { width: 24px; height: 24px; }
  .check { min-height: 44px; }
  td select, td input:not([type="checkbox"]):not([type="radio"]) { min-width: 96px; } /* campo dentro de tabela não some quando a coluna aperta */
}
@media (max-width: 480px) {
  /* Janelas viram folhas que ocupam a largura (mais fácil de usar com uma mão). */
  dialog { width: calc(100vw - 16px) !important; }
}

/* Texto nunca abaixo de 12 px (rótulos em caixa-alta e legendas incluídos). */
.menu-titulo, th, .tag, kbd, small { font-size: 12px; }

/* ===== Utilitários (use no HTML/JS em vez de reescrever CSS) ===== */
.rolagem-x { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* Grade que se reorganiza sozinha: quantas colunas couberem, cada uma com pelo menos --min (padrão 240px) e nunca mais larga que a tela. */
.grade-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min, 240px)), 1fr)); gap: var(--e3, 12px); }
/* Linha de itens que empilha no celular (botões de ação, filtros). */
.pilha-movel { display: flex; flex-wrap: wrap; gap: var(--e2, 8px); align-items: center; }
@media (max-width: 760px) { .pilha-movel > * { flex: 1 1 100%; } .pilha-movel.manter > * { flex: 1 1 auto; } }
/* Lista que rola dentro de uma altura fixa: cada linha tem a altura do conteúdo (sem isso a grade ESPREME as linhas para caber). */
.lista-rolante { display: grid; grid-auto-rows: max-content; align-content: start; overflow-y: auto; min-height: 0; }
.truncar { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.so-movel { display: none !important; }
@media (max-width: 760px) { .so-movel { display: revert !important; } .so-desktop { display: none !important; } }
/* Respeita o recorte da tela (notch, barra de gestos) em apps instalados. */
.area-segura { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); padding-bottom: env(safe-area-inset-bottom); }