/* ══════════════════════════════════════════════════════════════
SUPER PET — RESPONSIVIDADE UNIFICADA
Cobre: 1024×768 até telas grandes
Como usar:
Inserir no APÓS main.css
SEÇÕES:
1. Nav — scroll nos itens, footer sempre fixo
2. Dashboard — 3 colunas em telas médias
3. ≤ 1400px e ≥ 1025px — compactação notebooks grandes
4. ≤ 1024px e ≥ 769px — notebooks pequenos e tablets
5. 1024×768 combinado (largura ≤1024 + altura ≤768)
6. Altura baixa ≤800px (qualquer largura ≥769px)
7. ≤ 1400px + altura ≤800 — combinação 1366×768
8. ≤ 1100px — chart-row 1 coluna
9. Modais — ajustes para telas menores
10. ≤ 768px — complementos ao drawer do main.css
══════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════
1. NAVEGAÇÃO — SCROLL NOS ITENS, FOOTER SEMPRE FIXO
Estrutura esperada no index.html:
══════════════════════════════════════════════════════════════ */
.nav {
display: flex !important;
flex-direction: column !important;
overflow: hidden !important;
}
.nav-scroll {
flex: 1 1 0;
min-height: 0;
overflow-y: auto;
overflow-x: hidden;
scrollbar-width: thin;
scrollbar-color: var(--border) transparent;
}
.nav-scroll::-webkit-scrollbar { width: 4px; }
.nav-scroll::-webkit-scrollbar-track { background: transparent; }
.nav-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
.nav-footer {
flex-shrink: 0 !important;
position: static !important;
background: var(--surface);
border-top: 1px solid var(--border);
padding: 12px;
z-index: 2;
}
/* Submenus: altura generosa para todos os itens aparecerem */
.nav-submenu.expanded {
max-height: 800px !important;
}
/* ══════════════════════════════════════════════════════════════
2. DASHBOARD PRINCIPAL — 3 COLUNAS EM TELAS MÉDIAS
══════════════════════════════════════════════════════════════ */
#page-home > div[style*="minmax(380px"] {
grid-template-columns: repeat(3, 1fr) !important;
gap: 16px !important;
}
#page-home .card[ondblclick] {
min-width: 0 !important;
}
/* ══════════════════════════════════════════════════════════════
3. ≤ 1400px e ≥ 1025px — COMPACTAÇÃO NOTEBOOKS GRANDES (1366×768)
══════════════════════════════════════════════════════════════ */
@media (max-width: 1400px) and (min-width: 1025px) {
.nav { width: 190px; }
.main { margin-left: 190px; padding: 20px 22px; max-width: 100%; }
#nav-relogio-hora { font-size: 16px !important; }
#nav-relogio-data { font-size: 10px !important; }
#nav-relogio { padding: 7px 8px !important; }
.nav-item { padding: 7px 10px; font-size: 12px; }
.nav-submenu-item { font-size: 11px; padding: 5px 10px 5px 28px; }
.nav-section { padding: 10px 10px 3px; font-size: 8px; }
.page-title { font-size: 17px; }
.page-sub { font-size: 11px; }
.page-header { margin-bottom: 16px; }
.stat-grid { gap: 10px; margin-bottom: 14px; }
.stat-card { padding: 14px 16px; }
.stat-val { font-size: 19px; }
.stat-icon { font-size: 17px; right: 12px; top: 12px; }
.chart-row { grid-template-columns: 1fr 240px; gap: 10px; margin-bottom: 14px; }
.chart-wrap { padding: 16px; }
.chart-title { font-size: 11px; margin-bottom: 12px; }
th { font-size: 9px; padding: 8px 11px; }
td { font-size: 12px; padding: 8px 11px; }
.filter-bar input,
.filter-bar select { padding: 6px 10px; font-size: 12px; }
.filter-bar { gap: 6px; margin-bottom: 12px; }
.form-input,
.form-select,
.form-textarea { padding: 7px 10px; font-size: 12px; }
.form-group { margin-bottom: 12px; }
.btn { padding: 7px 12px; font-size: 11px; }
.btn-sm { padding: 4px 8px; font-size: 10px; }
.modal { max-width: 460px; }
.modal-head { padding: 14px 16px; }
.modal-head h3 { font-size: 14px; }
.modal-body { padding: 16px; }
.modal-foot { padding: 12px 16px; }
.page-with-fixed-elements { height: calc(100vh - 40px); }
.page-with-fixed-elements .data-container .tbl-wrap table { min-width: 980px; }
.inventario-layout { grid-template-columns: 240px 1fr 260px; gap: 14px; }
.inventarios-grid { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.inventario-grid-container { max-height: calc(100vh - 300px); }
.filtros-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
}
/* ══════════════════════════════════════════════════════════════
4. ≤ 1024px e ≥ 769px — NOTEBOOKS PEQUENOS E TABLETS
Alvo principal: 1024×768
══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) and (min-width: 769px) {
/* ── Nav ── */
.nav { width: 174px; }
.main { margin-left: 174px; padding: 16px 18px; max-width: 100%; }
#nav-relogio-hora { font-size: 15px !important; }
#nav-relogio-data { font-size: 10px !important; }
#nav-relogio { padding: 6px 8px !important; }
.nav-item { padding: 6px 10px; font-size: 12px; }
.nav-submenu-item { font-size: 11px; padding: 5px 10px 5px 26px; }
.nav-section { padding: 8px 10px 3px; font-size: 8px; }
/* ── Cabeçalho de página ── */
.page-title { font-size: 16px; }
.page-sub { font-size: 11px; }
.page-header {
margin-bottom: 12px;
flex-wrap: wrap;
gap: 8px;
}
/* Botões do header: quebram em linha, menores */
.btn-group {
flex-wrap: wrap;
gap: 5px;
}
.btn-group .btn {
padding: 6px 10px;
font-size: 11px;
}
/* Botões inline sem classe btn-group (clientes, pedidos) */
.page-header [style*="display:flex"][style*="gap"] {
flex-wrap: wrap !important;
gap: 5px !important;
}
/* ── Stat-cards ── */
.stat-grid { gap: 8px; margin-bottom: 12px; }
.stat-card { padding: 12px 14px; }
.stat-val { font-size: 18px; }
.stat-icon { font-size: 16px; right: 10px; top: 10px; }
/* Grids inline com repeat fixo → 3 colunas no máximo */
#page-produtos .stat-grid,
[id^="page-"] .stat-grid[style*="repeat(5"] {
grid-template-columns: repeat(3, 1fr) !important;
}
#page-clientes .stat-grid,
#page-pedidos-compra .stat-grid,
[id^="page-"] .stat-grid[style*="repeat(4"] {
grid-template-columns: repeat(2, 1fr) !important;
}
/* ── Charts ── */
.chart-row { grid-template-columns: 1fr; gap: 10px; margin-bottom: 12px; }
.chart-wrap { padding: 14px; }
.chart-title { font-size: 11px; margin-bottom: 10px; }
/* ── Tabelas ── */
th { font-size: 9px; padding: 7px 10px; }
td { font-size: 12px; padding: 7px 10px; }
/* ── Filtros ── */
.filter-bar {
gap: 6px;
margin-bottom: 10px;
}
.filter-bar input,
.filter-bar select {
padding: 6px 9px;
font-size: 11px;
flex: 1 1 140px; /* quebra em linhas mas mantém largura mínima */
min-width: 120px;
}
/* ── Formulários ── */
.form-input,
.form-select,
.form-textarea { padding: 7px 10px; font-size: 12px; }
.form-group { margin-bottom: 10px; }
/* ── Botões gerais ── */
.btn { padding: 6px 11px; font-size: 11px; }
.btn-sm { padding: 4px 7px; font-size: 10px; }
/* ── Páginas com layout fixo (clientes, produtos, pedidos) ── */
.page-with-fixed-elements { height: calc(100vh - 32px); }
.page-with-fixed-elements .data-container .tbl-wrap table { min-width: 900px; }
/* ── Inventário ── */
.inventario-layout {
grid-template-columns: 220px 1fr;
gap: 12px;
}
.inventario-resumo { display: none; }
.inventarios-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.inventario-grid-container { max-height: calc(100vh - 270px); }
.filtros-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 6px; }
/* ── Pedidos de compra: grid de sugestão ── */
#camposPedidoSugestao [style*="grid-template-columns:1fr auto"] {
grid-template-columns: 1fr !important;
}
/* ── Modais em 1024px ── */
.modal { max-width: 500px; }
.modal-head { padding: 14px 16px; }
.modal-head h3 { font-size: 14px; }
.modal-body { padding: 16px; }
.modal-foot { padding: 12px 16px; }
/* Modal grande de editar produto: 3 colunas → 2 colunas */
#modalEditarProduto .modal {
max-width: min(820px, 96vw) !important;
}
#modalEditarProduto .form-grid[style*="repeat(3"] {
grid-template-columns: repeat(2, 1fr) !important;
}
#modalEditarProduto [style*="grid-column:span 3"] {
grid-column: span 2 !important;
}
/* Modal PDV: painel lateral compacto */
#modalPDV .modal {
max-width: min(1100px, 98vw) !important;
}
#modalPDV .modal-body[style*="grid-template-columns:1fr 420px"] {
grid-template-columns: 1fr 340px !important;
}
/* Modal de cadastro de cliente PDV */
#modalCadastroClientePDV .modal {
max-width: min(560px, 96vw) !important;
}
/* Modal histórico produto */
#modalHistoricoProduto .modal {
max-width: min(700px, 96vw) !important;
}
}
/* ══════════════════════════════════════════════════════════════
5. COMBINAÇÃO: largura ≤ 1024px + altura ≤ 768px
Alvo exato: 1024×768
══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) and (min-width: 769px) and (max-height: 768px) {
.nav { width: 164px; }
.main { margin-left: 164px; padding: 12px 14px; max-width: 100%; }
.nav-footer { padding: 7px !important; gap: 5px !important; }
#btn-assistente { padding: 6px 5px !important; font-size: 11px !important; }
.nav-section { padding: 5px 8px 2px !important; font-size: 8px !important; }
.nav-item { padding: 5px 8px !important; font-size: 11px !important; }
.nav-submenu-item { padding: 3px 8px 3px 24px !important; font-size: 10px !important; }
.page-header { margin-bottom: 8px; }
.stat-grid { margin-bottom: 8px; gap: 6px; }
.stat-card { padding: 10px 12px; }
.stat-val { font-size: 16px; }
.chart-row { margin-bottom: 8px; }
.chart-wrap { padding: 12px; }
th { padding: 6px 9px; }
td { padding: 6px 9px; }
.page-with-fixed-elements { height: calc(100vh - 24px); }
.inventario-grid-container { max-height: calc(100vh - 250px); }
/* Oculta a coluna de resumo do inventário para ganhar espaço */
.inventario-resumo { display: none; }
/* Modais menores em altura reduzida */
.modal { max-height: 88vh; }
}
/* ══════════════════════════════════════════════════════════════
6. ALTURA BAIXA ≤ 800px — qualquer largura ≥ 769px
══════════════════════════════════════════════════════════════ */
@media (max-height: 800px) and (min-width: 769px) {
.nav-footer { padding: 8px !important; gap: 6px !important; }
#btn-assistente { padding: 7px 6px !important; font-size: 11px !important; }
.nav-section { padding: 6px 10px 2px !important; font-size: 8px !important; }
.nav-item { padding: 6px 10px !important; font-size: 12px !important; }
.nav-submenu-item { padding: 4px 10px 4px 28px !important; font-size: 11px !important; }
.page-header { margin-bottom: 12px; }
.stat-grid { margin-bottom: 10px; gap: 8px; }
.stat-card { padding: 12px 14px; }
.stat-val { font-size: 17px; }
.chart-row { margin-bottom: 10px; }
.chart-wrap { padding: 14px; }
th { padding: 7px 10px; }
td { padding: 7px 10px; }
.inventario-grid-container { max-height: calc(100vh - 270px); }
.main { padding-top: 14px !important; padding-bottom: 14px !important; }
}
/* ══════════════════════════════════════════════════════════════
7. COMBINAÇÃO: largura ≤ 1400px + altura ≤ 800px (1366×768)
══════════════════════════════════════════════════════════════ */
@media (max-width: 1400px) and (min-width: 1025px) and (max-height: 800px) {
.nav { width: 174px; }
.main { margin-left: 174px; padding: 14px 16px; max-width: 100%; }
.stat-grid { grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); }
.chart-row { grid-template-columns: 1fr 210px; }
.page-with-fixed-elements { height: calc(100vh - 28px); }
.inventario-layout { grid-template-columns: 220px 1fr; }
.inventario-resumo { display: none; }
}
/* ══════════════════════════════════════════════════════════════
8. ≤ 1100px — CHART-ROW EM 1 COLUNA
══════════════════════════════════════════════════════════════ */
@media (max-width: 1100px) and (min-width: 769px) {
.chart-row { grid-template-columns: 1fr; }
}
/* ══════════════════════════════════════════════════════════════
9. MODAIS GRANDES — AJUSTES PARA QUALQUER TELA PEQUENA
(abaixo de 1024px, acima de 768px)
══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) and (min-width: 769px) {
/* Modal de detalhes do produto */
#modalDetalhesProduto .modal {
max-width: min(700px, 96vw) !important;
max-height: 90vh;
}
/* Modal PDV: acima de 769px ainda usa grid, só compacta */
#modalPDV .modal-body {
min-height: 0 !important;
}
/* Grids internos de modais com 2 colunas → 2 colunas menores */
.modal-body [style*="grid-template-columns:1fr 1fr"] {
gap: 10px !important;
}
/* Grids internos de modais com 3 colunas → 2 colunas */
.modal-body [style*="grid-template-columns:1fr 1fr 1fr"],
.modal-body [style*="grid-template-columns:repeat(3,1fr)"] {
grid-template-columns: repeat(2, 1fr) !important;
}
/* Tabs do modal editar produto: scroll horizontal */
#modalEditarProduto [style*="display:flex"][style*="border-bottom"] {
overflow-x: auto !important;
flex-wrap: nowrap !important;
}
#modalEditarProduto .tab-btn {
flex-shrink: 0 !important;
padding: 10px 14px !important;
font-size: 11px !important;
}
/* Modal relatório financeiro */
#modalRelatorioFinanceiro .modal {
max-width: min(900px, 96vw) !important;
}
}
/* ══════════════════════════════════════════════════════════════
10. ≤ 768px — COMPLEMENTOS AO DRAWER DO MAIN.CSS
(o main.css já cuida do nav drawer nessa faixa)
══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
/* Modais: largura total com margem */
.modal {
max-width: calc(100vw - 24px) !important;
max-height: 90vh;
border-radius: 12px;
}
.modal-overlay {
padding: 12px;
align-items: flex-end; /* sobe do rodapé no mobile */
}
/* Modal PDV: empilha sidebar */
#modalPDV .modal {
max-width: 100vw !important;
border-radius: 0 !important;
height: 100vh !important;
max-height: 100vh !important;
}
#modalPDV .modal-body[style*="grid-template-columns"] {
grid-template-columns: 1fr !important;
overflow-y: auto !important;
}
/* Modal editar produto: aba em scroll */
#modalEditarProduto .modal {
max-width: 100vw !important;
border-radius: 0 !important;
height: 100vh !important;
max-height: 100vh !important;
}
#modalEditarProduto .form-grid {
grid-template-columns: 1fr !important;
}
#modalEditarProduto [style*="grid-column:span"] {
grid-column: span 1 !important;
}
/* Stat-grids: forçar 2 colunas em mobile médio */
#page-produtos .stat-grid { grid-template-columns: repeat(2, 1fr) !important; }
#page-clientes .stat-grid { grid-template-columns: repeat(2, 1fr) !important; }
/* Filtros: cada item ocupa linha inteira */
.filter-bar input,
.filter-bar select {
flex: 1 1 100% !important;
min-width: 0 !important;
}
/* Tabelas: min-width menor em mobile para rolar suavemente */
.page-with-fixed-elements .data-container .tbl-wrap table {
min-width: 700px !important;
}
/* page-with-fixed-elements: altura total em mobile */
.page-with-fixed-elements {
height: auto !important;
overflow: visible !important;
}
.page-with-fixed-elements .data-container {
min-height: 300px;
height: 60vh;
}
/* Pedidos de compra: grid sugestão */
#camposPedidoSugestao [style*="grid-template-columns:1fr auto"] {
grid-template-columns: 1fr !important;
}
/* Inventário: 1 coluna */
.inventario-layout {
grid-template-columns: 1fr !important;
}
.inventario-resumo { display: none !important; }
.inventarios-grid { grid-template-columns: 1fr !important; }
}
/* ══════════════════════════════════════════════════════════════
11. PDV — RESPONSIVIDADE COMPLETA
══════════════════════════════════════════════════════════════ */
/* ── 11pre. Altura ≤ 768px (qualquer largura ≥ 769px): compactação PDV ──
Alvo principal: 1366×768 e notebooks/monitores 768px de altura.
Problema: com 90vh e todas as seções do PDV, o carrinho ficava com
menos de ~150px visível. Esta seção recupera ~160px expandindo o modal
e reduzindo paddings das seções fixas (header cliente, header produto,
footer totais, desconto e entrega).
══════════════════════════════════════════════════════════════ */
@media (max-height: 768px) and (min-width: 769px) {
/* Modal maior para aproveitar a tela */
#modalPDV .modal {
height: 97vh !important;
max-height: 97vh !important;
}
/* Coluna direita um pouco mais estreita */
#modalPDV .modal-body {
grid-template-columns: 1fr 360px !important;
}
/* ── Seção de busca de cliente ── */
#modalPDV .modal-body > div:first-child > div:nth-child(1) {
padding: 8px 12px !important;
}
#pdvBuscaCliente {
padding: 8px 130px 8px 12px !important;
font-size: 12px !important;
}
#modalPDV .pdv-header-actions .btn,
#modalPDV .pdv-header-actions button {
padding: 7px 10px !important;
font-size: 11px !important;
}
#pdvClienteInfo {
margin-bottom: 4px !important;
font-size: 10px !important;
}
/* ── Seção de busca de produto ── */
#modalPDV .modal-body > div:first-child > div:nth-child(2) {
padding: 8px 12px !important;
}
#pdvBuscaProduto {
padding: 8px 44px 8px 12px !important;
font-size: 13px !important;
}
/* ── Área do carrinho ── */
#modalPDV .modal-body > div:first-child > div:nth-child(3) {
padding: 8px !important;
}
#pdvTabelaCarrinho th {
padding: 7px 8px !important;
font-size: 10px !important;
}
/* ── Rodapé totais ── */
#modalPDV .modal-body > div:first-child > div:last-child {
padding: 10px 14px !important;
}
/* Grid de 4 totais: fontes menores */
#pdvTotalItens { font-size: 15px !important; }
#pdvSubtotal { font-size: 15px !important; }
#pdvDescontos { font-size: 15px !important; }
#pdvTotal { font-size: 18px !important; }
/* Espaçamento do grid de totais */
#modalPDV [style*="grid-template-columns:repeat(4,1fr)"] {
margin-bottom: 8px !important;
gap: 8px !important;
}
/* Desconto geral */
#sectionDescontoGeral {
padding: 5px 10px !important;
margin-bottom: 8px !important;
}
/* Entrega em domicílio */
#sectionEntregaPDV {
padding: 8px 10px !important;
margin-bottom: 8px !important;
}
/* Botões finalizar/cancelar */
#modalPDV .modal-body > div:first-child > div:last-child > div:last-child {
gap: 8px !important;
}
#modalPDV .modal-body > div:first-child > div:last-child > div:last-child .btn,
#modalPDV .modal-body > div:first-child > div:last-child > div:last-child button {
padding: 10px !important;
font-size: 13px !important;
}
/* ── Cabeçalho da coluna direita (categorias) ── */
#modalPDV .modal-body > div:last-child > div:first-child {
padding: 8px 12px !important;
}
}
/* ── 11a. ≤ 1024px: botões do header PDV com wrap ── */
@media (max-width: 1024px) {
#modalPDV .pdv-header-actions {
flex-wrap: wrap !important;
gap: 6px !important;
}
#modalPDV .pdv-header-actions .btn,
#modalPDV .pdv-header-actions button {
font-size: 12px !important;
padding: 8px 10px !important;
flex-shrink: 0;
}
}
/* ── 11b. ≤ 768px: modal editar item com scroll + carrinho em cards ── */
@media (max-width: 768px) {
/* Modal editar item: scroll no body */
#modalEditarItem .modal {
max-width: calc(100vw - 24px) !important;
max-height: 95vh !important;
display: flex;
flex-direction: column;
}
#modalEditarItem .modal-body {
overflow-y: auto !important;
flex: 1;
min-height: 0;
}
/* Grids internos do editar item → coluna única */
#modalEditarItem [style*="grid-template-columns:auto 1fr auto"] {
grid-template-columns: 1fr !important;
gap: 10px !important;
}
#modalEditarItem [style*="grid-template-columns:auto 1fr"] {
grid-template-columns: 1fr !important;
gap: 10px !important;
}
#modalEditarItem [style*="grid-template-columns:1fr 1fr"] {
grid-template-columns: 1fr !important;
}
/* Tabela carrinho → cards empilhados */
#pdvTabelaCarrinho thead { display: none !important; }
#pdvTabelaCarrinho,
#pdvTabelaCarrinho tbody,
#pdvTabelaCarrinho tr { display: block !important; width: 100%; }
#pdvTabelaCarrinho tr {
border: 1px solid var(--border);
border-radius: 10px;
margin-bottom: 10px;
padding: 10px 12px;
background: var(--card);
}
#pdvTabelaCarrinho td {
display: flex !important;
align-items: center;
justify-content: space-between;
padding: 6px 0 !important;
border: none !important;
font-size: 13px;
text-align: left !important;
}
#pdvTabelaCarrinho td:last-child {
justify-content: flex-end;
gap: 10px;
padding-top: 8px !important;
border-top: 1px solid var(--border) !important;
margin-top: 4px;
}
#pdvTabelaCarrinho td:first-child button {
width: 36px !important;
height: 36px !important;
font-size: 18px !important;
padding: 0 !important;
display: flex;
align-items: center;
justify-content: center;
}
#pdvTabelaCarrinho td:first-child span { min-width: 48px !important; font-size: 16px !important; }
/* Rodapé totais PDV: 4 colunas → 2×2 */
#modalPDV [style*="grid-template-columns:repeat(4,1fr)"] {
grid-template-columns: repeat(2, 1fr) !important;
gap: 10px !important;
}
/* Botões do header PDV: wrap e tamanho menor */
#modalPDV .pdv-header-actions {
flex-wrap: wrap !important;
gap: 6px !important;
}
#modalPDV .pdv-header-actions .btn,
#modalPDV .pdv-header-actions button {
font-size: 11px !important;
padding: 8px 8px !important;
flex: 1 1 auto;
min-width: 70px;
justify-content: center;
}
/* Controles do modo caixa no modal-head: reduzir tamanho */
#pdv-caixa-controls { gap: 6px !important; }
#pdv-caixa-operador { display: none; } /* oculta nome em telas muito pequenas */
}