/* ═══════════════════════════════════════════════════════════════════════════
🎯 ABA 2 LAYOUT FIX — Estúdio 195
Corrige o bug do layout da Aba 2 (Produtos) onde os produtos ficavam
espremidos no canto esquerdo no PC.
CAUSA: O HTML novo do gerador.php tem elementos (.aba2-sidebar-toggle,
.aba2-sidebar-close, classe .open) que NÃO TÊM CSS no styles.css antigo.
O botão "Filtros & Selecionados" estava aparecendo no PC e quebrando
o flex do layout.
SOLUÇÃO: força o layout correto em desktop, esconde os elementos mobile.
COMO USAR: adicione no do gerador.php DEPOIS do styles.css:
← ESTA LINHA
═══════════════════════════════════════════════════════════════════════════ */
/* ─────────────────────────────────────────────────────────────────────────
DESKTOP (> 768px) — força layout correto
───────────────────────────────────────────────────────────────────────── */
@media (min-width: 769px) {
/* 1) Esconde o botão toggle (só serve em mobile) */
.aba2-sidebar-toggle {
display: none !important;
}
/* 2) Esconde o botão "X" de fechar (só serve em mobile) */
.aba2-sidebar-close {
display: none !important;
}
/* 3) Container da aba 2: SEMPRE em linha no desktop */
.aba-produtos-body {
display: flex !important;
flex-direction: row !important;
overflow: hidden;
flex: 1;
min-height: 0;
}
/* 4) Sidebar SEMPRE fixa em 320px no desktop, mesmo com classe .open */
.aba2-sidebar,
.aba2-sidebar.open {
width: 320px !important;
min-width: 320px;
max-width: 320px;
height: auto !important;
max-height: none !important;
position: relative !important;
top: auto !important;
left: auto !important;
right: auto !important;
bottom: auto !important;
transform: none !important;
z-index: auto !important;
background: var(--bg1);
border-right: 1px solid var(--border);
border-bottom: none;
display: flex !important;
flex-direction: column;
flex-shrink: 0;
overflow-y: auto;
box-shadow: none !important;
}
/* 5) Área principal SEMPRE ocupa o resto, com width válida */
.aba2-main {
flex: 1 1 0% !important;
display: flex !important;
flex-direction: column !important;
overflow: hidden;
min-width: 0 !important; /* CRUCIAL: permite o flex encolher corretamente */
width: auto !important;
}
/* 6) Grid de produtos: garante que use o espaço todo disponível */
.produtos-resultado {
flex: 1;
overflow-y: auto;
width: 100%;
}
.produtos-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
gap: 14px;
width: 100%;
}
}
/* ─────────────────────────────────────────────────────────────────────────
MOBILE (≤ 768px) — sidebar vira drawer/overlay
───────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
.aba-produtos-body {
flex-direction: column;
position: relative;
}
/* Botão flutuante pra abrir filtros */
.aba2-sidebar-toggle {
display: flex !important;
align-items: center;
gap: 8px;
padding: 10px 14px;
background: var(--bg1);
border: 1px solid var(--border);
border-radius: 8px;
color: var(--text);
font-family: inherit;
font-size: 12px;
font-weight: 700;
cursor: pointer;
margin: 10px 12px;
width: calc(100% - 24px);
justify-content: center;
z-index: 5;
}
.aba2-sidebar-toggle .ico { font-size: 16px; }
.aba2-sidebar-toggle .badge {
background: var(--accent);
color: #fff;
border-radius: 999px;
padding: 2px 8px;
font-size: 10px;
margin-left: 4px;
}
/* Sidebar fica escondida fora da tela por padrão */
.aba2-sidebar {
position: fixed !important;
top: 0;
left: 0;
bottom: 0;
width: 85% !important;
max-width: 340px !important;
height: 100vh !important;
z-index: 1000;
transform: translateX(-100%);
transition: transform 0.3s cubic-bezier(.4,0,.2,1);
box-shadow: 4px 0 24px rgba(0,0,0,.5);
border-right: 1px solid var(--border);
background: var(--bg1);
}
/* Quando .open é aplicada, desliza pra dentro */
.aba2-sidebar.open {
transform: translateX(0);
}
/* Botão "X" pra fechar a sidebar (só em mobile) */
.aba2-sidebar-close {
display: flex !important;
position: absolute;
top: 10px;
right: 10px;
width: 32px;
height: 32px;
background: var(--bg2);
border: 1px solid var(--border);
border-radius: 50%;
color: var(--text);
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 14px;
font-weight: 700;
z-index: 10;
}
/* Backdrop quando sidebar está aberta */
.aba2-sidebar.open::before {
content: '';
position: fixed;
top: 0;
left: 100%;
width: 100vw;
height: 100vh;
background: rgba(0,0,0,.5);
z-index: -1;
}
/* Área principal ocupa tudo em mobile */
.aba2-main {
flex: 1;
width: 100%;
min-width: 0;
}
}
/* ─────────────────────────────────────────────────────────────────────────
PROTEÇÃO EXTRA — desfaz classes mobile/tablet erradas em desktop
───────────────────────────────────────────────────────────────────────── */
@media (min-width: 1025px) {
/* Mesmo se body.is-mobile ou body.is-tablet vierem ativados por engano,
em telas reais de desktop o layout fica fixo e correto */
body.is-mobile .aba-produtos-body,
body.is-tablet .aba-produtos-body,
body.tablet-device .aba-produtos-body {
flex-direction: row !important;
}
body.is-mobile .aba2-sidebar,
body.is-tablet .aba2-sidebar,
body.tablet-device .aba2-sidebar {
position: relative !important;
transform: none !important;
width: 320px !important;
height: auto !important;
}
body.is-mobile .aba2-sidebar-toggle,
body.is-tablet .aba2-sidebar-toggle,
body.tablet-device .aba2-sidebar-toggle,
body.is-mobile .aba2-sidebar-close,
body.is-tablet .aba2-sidebar-close,
body.tablet-device .aba2-sidebar-close {
display: none !important;
}
}