/* Gestx 17.117 - Etapa 12: responsividade progressiva e custo visual controlado.
 * Carregado DEPOIS das folhas de cada modulo. Sem JS, observers, timers ou spinners.
 * Faixas de viewport em CSS pixels: telefone, tablet, desktop e TV/4K.
 */

/* Protecao compartilhada: textos extensos nao devem empurrar grids para fora.
 * Os dados tabulares continuam em rolagem horizontal, sem colunas truncadas. */
:where(.corpo-aplicacao, .site-gestx, .catalogo-publico, .corpo-autenticacao) :is(article, section, .cartao, .painel, .metrica-estoque, .cartao-organizacao, .vitrine-produto-card) {
    min-width: 0;
}
:where(.corpo-aplicacao, .site-gestx, .catalogo-publico, .corpo-autenticacao) :is(img, video, svg) {
    max-width: 100%;
}
.corpo-aplicacao :is(.tabela-responsiva, .tabela-rolagem, .envoltorio-tabela, .tabela-variacoes-catalogo-container) {
    max-width: 100%;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
}
.corpo-aplicacao :is(.conteudo-principal, .coluna-principal, .modulo-organizacoes, .modulo-estoque, .modulo-producao) {
    min-width: 0;
}
.corpo-aplicacao :is(.cartao, .painel, .cartao-organizacao, .metrica-estoque) :is(h2,h3,h4,strong,p,small) {
    overflow-wrap: anywhere;
}

/* Telefones compactos e intermediarios: colunas realmente cabem no viewport. */
@media (max-width: 479px) {
    .corpo-aplicacao .conteudo-principal { padding-inline: 12px; padding-top: 16px; padding-bottom: calc(94px + env(safe-area-inset-bottom, 0px)); }
    .corpo-aplicacao :is(.grade-resumo, .grade-campos, .grade-campos-tres, .linha-formulario, .grade-metricas-estoque, .grade-kpis-organizacao, .grade-kpis-integracoes, .grade-kpis-api, .grade-kpis-automacoes, .grade-organizacoes, .grade-integracoes, .grade-api-plataforma, .grade-permissoes-equipe, .resumo-integracao-tiktok, .grade-indicadores-ficha, .grade-indicadores-detalhes) {
        grid-template-columns: minmax(0, 1fr);
    }
    .corpo-aplicacao :is(.cabecalho-conteudo, .cabecalho-estoque, .cabecalho-painel-estoque, .contexto-organizacao, .acoes-formulario, .acoes-painel-estoque, .acoes-cabecalho-secao) {
        min-width: 0;
        gap: 10px;
    }
    .corpo-aplicacao :is(.acoes-formulario, .acoes-painel-estoque, .acoes-cabecalho-secao) { flex-wrap: wrap; }
    .corpo-aplicacao :is(.acoes-formulario, .acoes-painel-estoque, .acoes-cabecalho-secao) > :is(.botao, button) { max-width: 100%; }
    .corpo-aplicacao :is(.cartao, .painel, .secao-formulario) { padding: 14px; }
    .corpo-aplicacao :is(input, select, textarea) { max-width: 100%; }
    .corpo-aplicacao :is(.menu-horizontal-estoque, .catalogo-publico-categorias) { max-width: 100%; }
    .site-gestx :is(.site-hero-acoes, .site-acoes) { flex-wrap: wrap; }
    .catalogo-publico :is(.vitrine-toolbar, .vitrine-toolbar-info) { min-width: 0; }
    .catalogo-publico .catalogo-publico-largura { max-width: calc(100% - 20px); }
}

/* Telefones: nao transformar tabelas estruturadas em cards automaticamente.
 * Somente a area de rolagem recebe limite, preservando cada coluna. */
@media (max-width: 767px) {
    .corpo-aplicacao .conteudo-principal { padding-inline: clamp(12px, 3vw, 22px); }
    .corpo-aplicacao :is(.tabela-responsiva, .tabela-rolagem, .envoltorio-tabela) {
        overflow-x: auto;
        scrollbar-width: thin;
    }
    .corpo-aplicacao :is(.barra-listagem-estoque, .filtros-listagem-combinaveis) { max-width: 100%; }
    .corpo-aplicacao :is(.grade-kpis-organizacao, .grade-organizacoes, .grade-permissoes-equipe) { grid-template-columns: minmax(0,1fr); }
    .corpo-aplicacao :is(.camada-modal, .camada-modal-secundaria, .camada-modal-terciaria, .camada-confirmacao) { max-width: 100vw; }
    .corpo-aplicacao :is(.modal, .modal-pequeno, .modal-grande) { max-width: calc(100vw - 16px); }
    .corpo-aplicacao :is(.conteudo-modal, .corpo-modal, .modal-conteudo) { min-width: 0; }
    .site-gestx :is(.site-topo-conteudo, .site-hero) { max-width: 100%; }
    .catalogo-publico :is(.vitrine-topo-conteudo, .vitrine-produtos-area) { min-width: 0; }
    .corpo-autenticacao :is(.painel-autenticacao, .formulario-autenticacao, .cartao-autenticacao) { max-width: 100%; min-width: 0; }
}

/* Tablets (retrato e paisagem), hibridos e notebooks menores. */
@media (min-width: 768px) and (max-width: 1199px) {
    .corpo-aplicacao .conteudo-principal { max-width: 100%; padding-inline: clamp(18px, 2.5vw, 34px); }
    .corpo-aplicacao :is(.grade-resumo, .grade-metricas-estoque, .grade-kpis-organizacao) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .corpo-aplicacao :is(.grade-organizacoes, .grade-integracoes, .grade-api-plataforma) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .corpo-aplicacao :is(.linha-formulario, .grade-campos) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .corpo-aplicacao :is(.linha-formulario, .grade-campos) > .campo-linha-inteira { grid-column: 1 / -1; }
    .catalogo-publico .catalogo-publico-largura { width: min(100% - 40px, 1160px); }
}

/* Computadores: mantem o desenho compacto original dos modulos. */
@media (min-width: 1200px) and (max-width: 1919px) {
    .corpo-aplicacao .conteudo-principal { max-width: 1540px; }
}

/* TVs Full HD/4K, monitores ultrawide e uso a distancia.
 * Evita ocupar 100% de telas gigantes com formulários de texto. */
@media (min-width: 1920px) {
    .corpo-aplicacao .conteudo-principal {
        max-width: min(100%, 2060px);
        padding-inline: clamp(44px, 3vw, 88px);
        padding-block: clamp(26px, 2.3vw, 52px);
    }
    .corpo-aplicacao .cabecalho-aplicacao { padding-inline: clamp(32px, 2.5vw, 74px); }
    .corpo-aplicacao :is(.grade-resumo, .grade-metricas-estoque) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .corpo-aplicacao .grade-kpis-organizacao { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .corpo-aplicacao :is(.grade-organizacoes, .grade-integracoes, .grade-api-plataforma) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .site-gestx :is(.site-topo-conteudo, .site-hero) { max-width: 1680px; }
    .site-gestx .site-hero { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); }
    .catalogo-publico .catalogo-publico-largura { width: min(1680px, calc(100% - 96px)); }
    .corpo-autenticacao .painel-autenticacao { max-width: 1920px; margin-inline: auto; }
}
@media (min-width: 2560px) {
    .corpo-aplicacao .conteudo-principal { max-width: min(100%, 2440px); }
    .corpo-aplicacao :is(.cartao-metrica, .metrica-estoque, .grade-kpis-organizacao > article) { min-height: 152px; }
    .corpo-aplicacao .conteudo-principal :is(h1, h2) { text-wrap: balance; }
    .site-gestx :is(.site-topo-conteudo, .site-hero) { max-width: 1980px; }
    .catalogo-publico .catalogo-publico-largura { width: min(1980px, calc(100% - 120px)); }
}

/* TVs/teclados e controles remotos: o foco precisa ser evidente a distancia.
 * Sem capturar teclas ou modificar o comportamento nativo do navegador. */
@media (min-width: 1200px) and (pointer: coarse) {
    :where(.corpo-aplicacao,.site-gestx,.catalogo-publico) :is(button,a,[role="button"],input,select):focus-visible {
        outline: 3px solid var(--cor-primaria-700, #0066cc);
        outline-offset: 4px;
    }
}

/* Dispositivos sem hover: economiza animacoes dispensaveis, sem tocar em spinners. */
@media (hover: none) and (pointer: coarse) {
    .corpo-aplicacao :is(.cartao, .painel, .cartao-metrica):hover,
    .catalogo-publico .vitrine-produto-card:hover { transform: none; }
    .catalogo-publico .vitrine-produto-acao-imagem { opacity: 1; transform: none; }
}

/* Acessibilidade: o carregamento continua informativo; apenas animacoes decorativas
 * e transicoes de geometria sao atenuadas quando o usuario pedir. */
@media (prefers-reduced-motion: reduce) {
    .corpo-aplicacao :is(.cartao, .painel, .cartao-metrica),
    .site-gestx :is(.site-hero, .site-produto-preview),
    .catalogo-publico .vitrine-produto-card { transition-duration: .01ms; }
}