/* =============================================================================
AGFLEX ERP — Sidebar Enterprise
============================================================================= */
/* --- Inter font (carregada via Google Fonts no layout) --- */
.sidebar,
.sidebar *,
#sb-toggle {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}
/* --- Reset body padding (Bootstrap default) --- */
/* overflow-x: clip (não hidden): clip evita scroll horizontal SEM virar scroll container,
então o position:sticky do .app-header continua grudando no topo. Com 'hidden' o body
virava scroll container (overflow-y computa 'auto') e o header sticky quebrava — o
conteúdo aparecia por baixo/através do header ao rolar (bug visto em 2026-06-20). */
body { padding-top: 0 !important; overflow-x: clip; }
/* --- CSS Custom Properties (tokens) --- */
:root {
--sb-width: 260px;
--sb-width-collapsed: 68px;
--sb-transition: 300ms cubic-bezier(0.4, 0, 0.2, 1);
--hdr-height: 56px;
/* Área de conteúdo — sempre clara, independente do tema da sidebar */
--dp-bg: #ffffff;
--dp-bg-alt: #f9fafb;
--dp-hover: #f3f4f6;
--dp-text: #111827;
--dp-text-md: #374151;
--dp-muted: #6b7280;
--dp-border: rgba(0,0,0,0.08);
--dp-shadow: 0 8px 32px rgba(0,0,0,0.14);
--dp-accent: var(--agf-azul,#2563EB);
}
/* =============================================================================
TEMAS
============================================================================= */
/* Dark (padrão) */
body,
body[data-sb-theme="dark"] {
--sb-bg: #1a1a2e;
--sb-bg-hover: rgba(255,255,255,0.07);
--sb-bg-active: rgba(59,130,246,0.14);
--sb-text: #e2e8f0;
--sb-text-muted: #94a3b8;
--sb-accent: #3b82f6;
--sb-accent-rgb: 59,130,246;
--sb-border: rgba(255,255,255,0.07);
--sb-shadow: 4px 0 24px rgba(0,0,0,0.4);
--sb-badge: #ef4444;
--hdr-bg: #0f172a;
--hdr-text: #e2e8f0;
--hdr-border: rgba(255,255,255,0.07);
--hdr-hover: rgba(255,255,255,0.07);
}
body[data-sb-theme="light"] {
--sb-bg: #ffffff;
--sb-bg-hover: rgba(0,0,0,0.05);
--sb-bg-active: rgba(37,99,235,0.10);
--sb-text: #374151;
--sb-text-muted: #9ca3af;
--sb-accent: var(--agf-azul,#2563EB);
--sb-accent-rgb: 37,99,235;
--sb-border: rgba(0,0,0,0.08);
--sb-shadow: 4px 0 20px rgba(0,0,0,0.10);
--sb-badge: #ef4444;
--hdr-bg: #f9fafb;
--hdr-text: #111827;
--hdr-border: rgba(0,0,0,0.08);
--hdr-hover: rgba(0,0,0,0.05);
}
body[data-sb-theme="midnight"] {
--sb-bg: #0d1117;
--sb-bg-hover: rgba(255,255,255,0.06);
--sb-bg-active: rgba(0,255,128,0.10);
--sb-text: #e6edf3;
--sb-text-muted: #484f58;
--sb-accent: #00e676;
--sb-accent-rgb: 0,230,118;
--sb-border: rgba(255,255,255,0.06);
--sb-shadow: 4px 0 24px rgba(0,0,0,0.55);
--sb-badge: #ff4444;
--hdr-bg: #010409;
--hdr-text: #e6edf3;
--hdr-border: rgba(255,255,255,0.06);
--hdr-hover: rgba(255,255,255,0.06);
}
body[data-sb-theme="ocean"] {
--sb-bg: #0a2342;
--sb-bg-hover: rgba(255,255,255,0.07);
--sb-bg-active: rgba(0,191,255,0.13);
--sb-text: #b0cde8;
--sb-text-muted: #3d6b9a;
--sb-accent: #00bfff;
--sb-accent-rgb: 0,191,255;
--sb-border: rgba(255,255,255,0.07);
--sb-shadow: 4px 0 24px rgba(0,0,0,0.45);
--sb-badge: #ff4444;
--hdr-bg: #061829;
--hdr-text: #b0cde8;
--hdr-border: rgba(255,255,255,0.07);
--hdr-hover: rgba(255,255,255,0.07);
}
body[data-sb-theme="forest"] {
--sb-bg: #1a2f1a;
--sb-bg-hover: rgba(255,255,255,0.07);
--sb-bg-active: rgba(34,197,94,0.13);
--sb-text: #d1fae5;
--sb-text-muted: #4d7c61;
--sb-accent: #22c55e;
--sb-accent-rgb: 34,197,94;
--sb-border: rgba(255,255,255,0.07);
--sb-shadow: 4px 0 24px rgba(0,0,0,0.45);
--sb-badge: #ef4444;
--hdr-bg: #0f1f0f;
--hdr-text: #d1fae5;
--hdr-border: rgba(255,255,255,0.07);
--hdr-hover: rgba(255,255,255,0.07);
}
body[data-sb-theme="sunset"] {
--sb-bg: #2d1b00;
--sb-bg-hover: rgba(255,255,255,0.07);
--sb-bg-active: rgba(251,146,60,0.14);
--sb-text: #fed7aa;
--sb-text-muted: #92400e;
--sb-accent: #fb923c;
--sb-accent-rgb: 251,146,60;
--sb-border: rgba(255,255,255,0.07);
--sb-shadow: 4px 0 24px rgba(0,0,0,0.45);
--sb-badge: #ef4444;
--hdr-bg: #1c0f00;
--hdr-text: #fed7aa;
--hdr-border: rgba(255,255,255,0.07);
--hdr-hover: rgba(255,255,255,0.07);
}
body[data-sb-theme="purple"] {
--sb-bg: #1a0a2e;
--sb-bg-hover: rgba(255,255,255,0.07);
--sb-bg-active: rgba(168,85,247,0.14);
--sb-text: #e9d5ff;
--sb-text-muted: #6b21a8;
--sb-accent: #a855f7;
--sb-accent-rgb: 168,85,247;
--sb-border: rgba(255,255,255,0.07);
--sb-shadow: 4px 0 24px rgba(0,0,0,0.45);
--sb-badge: #ef4444;
--hdr-bg: #0f0618;
--hdr-text: #e9d5ff;
--hdr-border: rgba(255,255,255,0.07);
--hdr-hover: rgba(255,255,255,0.07);
}
body[data-sb-theme="corporate"] {
--sb-bg: #1e3a5f;
--sb-bg-hover: rgba(255,255,255,0.07);
--sb-bg-active: rgba(250,189,65,0.14);
--sb-text: #dbeafe;
--sb-text-muted: #3d6b9f;
--sb-accent: #fabd41;
--sb-accent-rgb: 250,189,65;
--sb-border: rgba(255,255,255,0.07);
--sb-shadow: 4px 0 24px rgba(0,0,0,0.45);
--sb-badge: #ef4444;
--hdr-bg: #112540;
--hdr-text: #dbeafe;
--hdr-border: rgba(255,255,255,0.07);
--hdr-hover: rgba(255,255,255,0.07);
}
/* --- Aliases em português (nomes legados salvos no banco) --- */
body[data-sb-theme="navy"] {
--sb-bg: #0f2d52;
--sb-bg-hover: rgba(255,255,255,0.07);
--sb-bg-active: rgba(0,191,255,0.13);
--sb-text: #bfdbfe;
--sb-text-muted: #3d6b9a;
--sb-accent: #38bdf8;
--sb-accent-rgb: 56,189,248;
--sb-border: rgba(255,255,255,0.07);
--sb-shadow: 4px 0 24px rgba(0,0,0,0.45);
--sb-badge: #ef4444;
--hdr-bg: #071929;
--hdr-text: #bfdbfe;
--hdr-border: rgba(255,255,255,0.07);
--hdr-hover: rgba(255,255,255,0.07);
}
body[data-sb-theme="escuro"] {
--sb-bg: #111827;
--sb-bg-hover: rgba(255,255,255,0.07);
--sb-bg-active: rgba(59,130,246,0.14);
--sb-text: #d1d5db;
--sb-text-muted: #6b7280;
--sb-accent: #3b82f6;
--sb-accent-rgb: 59,130,246;
--sb-border: rgba(255,255,255,0.07);
--sb-shadow: 4px 0 24px rgba(0,0,0,0.5);
--sb-badge: #ef4444;
--hdr-bg: #030712;
--hdr-text: #d1d5db;
--hdr-border: rgba(255,255,255,0.07);
--hdr-hover: rgba(255,255,255,0.07);
}
body[data-sb-theme="azul"] {
--sb-bg: #1e3a8a;
--sb-bg-hover: rgba(255,255,255,0.10);
--sb-bg-active: rgba(147,197,253,0.18);
--sb-text: #dbeafe;
--sb-text-muted: #93c5fd;
--sb-accent: #60a5fa;
--sb-accent-rgb: 96,165,250;
--sb-border: rgba(255,255,255,0.10);
--sb-shadow: 4px 0 24px rgba(0,0,0,0.4);
--sb-badge: #fbbf24;
--hdr-bg: #1e40af;
--hdr-text: #dbeafe;
--hdr-border: rgba(255,255,255,0.12);
--hdr-hover: rgba(255,255,255,0.10);
}
body[data-sb-theme="verde"] {
--sb-bg: #14532d;
--sb-bg-hover: rgba(255,255,255,0.07);
--sb-bg-active: rgba(34,197,94,0.15);
--sb-text: #bbf7d0;
--sb-text-muted: #4ade80;
--sb-accent: #22c55e;
--sb-accent-rgb: 34,197,94;
--sb-border: rgba(255,255,255,0.07);
--sb-shadow: 4px 0 24px rgba(0,0,0,0.45);
--sb-badge: #ef4444;
--hdr-bg: #052e16;
--hdr-text: #bbf7d0;
--hdr-border: rgba(255,255,255,0.07);
--hdr-hover: rgba(255,255,255,0.07);
}
body[data-sb-theme="roxo"] {
--sb-bg: #4c1d95;
--sb-bg-hover: rgba(255,255,255,0.07);
--sb-bg-active: rgba(167,139,250,0.15);
--sb-text: #ede9fe;
--sb-text-muted: #a78bfa;
--sb-accent: #a78bfa;
--sb-accent-rgb: 167,139,250;
--sb-border: rgba(255,255,255,0.07);
--sb-shadow: 4px 0 24px rgba(0,0,0,0.45);
--sb-badge: #ef4444;
--hdr-bg: #2e1065;
--hdr-text: #ede9fe;
--hdr-border: rgba(255,255,255,0.07);
--hdr-hover: rgba(255,255,255,0.07);
}
body[data-sb-theme="cinza"] {
--sb-bg: #374151;
--sb-bg-hover: rgba(255,255,255,0.07);
--sb-bg-active: rgba(156,163,175,0.15);
--sb-text: #f3f4f6;
--sb-text-muted: #9ca3af;
--sb-accent: #9ca3af;
--sb-accent-rgb: 156,163,175;
--sb-border: rgba(255,255,255,0.08);
--sb-shadow: 4px 0 24px rgba(0,0,0,0.35);
--sb-badge: #ef4444;
--hdr-bg: #1f2937;
--hdr-text: #f3f4f6;
--hdr-border: rgba(255,255,255,0.08);
--hdr-hover: rgba(255,255,255,0.07);
}
/* --- Novos temas azuis --- */
body[data-sb-theme="aceiro"] {
--sb-bg: #0c2340;
--sb-bg-hover: rgba(255,255,255,0.08);
--sb-bg-active: rgba(56,189,248,0.16);
--sb-text: #bfdbfe;
--sb-text-muted: #3b82f6;
--sb-accent: #38bdf8;
--sb-accent-rgb: 56,189,248;
--sb-border: rgba(56,189,248,0.12);
--sb-shadow: 4px 0 28px rgba(0,0,0,0.55);
--sb-badge: #f87171;
--hdr-bg: #0f172a;
--hdr-text: #e0f2fe;
--hdr-border: rgba(56,189,248,0.12);
--hdr-hover: rgba(56,189,248,0.08);
}
body[data-sb-theme="ceu"] {
--sb-bg: #1e40af;
--sb-bg-hover: rgba(255,255,255,0.09);
--sb-bg-active: rgba(147,197,253,0.18);
--sb-text: #dbeafe;
--sb-text-muted: #93c5fd;
--sb-accent: #60a5fa;
--sb-accent-rgb: 96,165,250;
--sb-border: rgba(255,255,255,0.09);
--sb-shadow: 4px 0 24px rgba(0,0,0,0.40);
--sb-badge: #fbbf24;
--hdr-bg: #ffffff;
--hdr-text: #1e3a8a;
--hdr-border: rgba(0,0,0,0.08);
--hdr-hover: rgba(0,0,0,0.05);
--hdr-input-bg: #eff6ff;
--hdr-input-border: #bfdbfe;
}
body[data-sb-theme="cristal"] {
--sb-bg: #0369a1; /* era #0ea5e9: texto branco dava 2,8:1 */
--sb-bg-hover: rgba(255,255,255,0.13);
--sb-bg-active: rgba(255,255,255,0.20);
--sb-text: #fff;
--sb-text-muted: rgba(255,255,255,0.65);
--sb-accent: #fff;
--sb-accent-rgb: 255,255,255;
--sb-border: rgba(255,255,255,0.18);
--sb-shadow: 4px 0 28px rgba(3,105,161,0.40);
--sb-badge: #fbbf24;
--hdr-bg: #f0f9ff;
--hdr-text: #0c4a6e;
--hdr-border: rgba(0,0,0,0.07);
--hdr-hover: rgba(0,0,0,0.05);
--hdr-input-bg: #e0f2fe;
--hdr-input-border: #7dd3fc;
}
/* --- Temas mistos (sidebar escura + header branco/claro) --- */
/* --hdr-input-bg: fundo dos campos de busca no header — visível em headers claros */
body[data-sb-theme="grafite"] {
--sb-bg: #1e293b;
--sb-bg-hover: rgba(255,255,255,0.07);
--sb-bg-active: rgba(148,163,184,0.14);
--sb-text: #f1f5f9;
--sb-text-muted: #94a3b8;
--sb-accent: #38bdf8;
--sb-accent-rgb: 56,189,248;
--sb-border: rgba(255,255,255,0.07);
--sb-shadow: 4px 0 24px rgba(0,0,0,0.35);
--sb-badge: #ef4444;
--hdr-bg: #ffffff;
--hdr-text: #0f172a;
--hdr-border: rgba(0,0,0,0.08);
--hdr-hover: rgba(0,0,0,0.05);
--hdr-input-bg: #f1f5f9;
--hdr-input-border: #d1d5db;
}
body[data-sb-theme="safira"] {
--sb-bg: var(--agf-azul-hover,#1D4ED8);
--sb-bg-hover: rgba(255,255,255,0.10);
--sb-bg-active: rgba(147,197,253,0.18);
--sb-text: #dbeafe;
--sb-text-muted: #93c5fd;
--sb-accent: #93c5fd;
--sb-accent-rgb: 147,197,253;
--sb-border: rgba(255,255,255,0.10);
--sb-shadow: 4px 0 24px rgba(0,0,0,0.30);
--sb-badge: #fbbf24;
--hdr-bg: #ffffff;
--hdr-text: #1e3a8a;
--hdr-border: rgba(0,0,0,0.08);
--hdr-hover: rgba(0,0,0,0.05);
--hdr-input-bg: #eff6ff;
--hdr-input-border: #bfdbfe;
}
body[data-sb-theme="indigo"] {
--sb-bg: #4338ca;
--sb-bg-hover: rgba(255,255,255,0.09);
--sb-bg-active: rgba(165,180,252,0.18);
--sb-text: #e0e7ff;
--sb-text-muted: #a5b4fc;
--sb-accent: #a5b4fc;
--sb-accent-rgb: 165,180,252;
--sb-border: rgba(255,255,255,0.09);
--sb-shadow: 4px 0 24px rgba(0,0,0,0.32);
--sb-badge: #f87171;
--hdr-bg: #f8fafc;
--hdr-text: #1e1b4b;
--hdr-border: rgba(0,0,0,0.07);
--hdr-hover: rgba(0,0,0,0.05);
--hdr-input-bg: #eef2ff;
--hdr-input-border: #c7d2fe;
}
body[data-sb-theme="esmeralda"] {
--sb-bg: #065f46;
--sb-bg-hover: rgba(255,255,255,0.08);
--sb-bg-active: rgba(52,211,153,0.15);
--sb-text: #d1fae5;
--sb-text-muted: #6ee7b7;
--sb-accent: #34d399;
--sb-accent-rgb: 52,211,153;
--sb-border: rgba(255,255,255,0.08);
--sb-shadow: 4px 0 24px rgba(0,0,0,0.35);
--sb-badge: #ef4444;
--hdr-bg: #f0fdf4;
--hdr-text: #064e3b;
--hdr-border: rgba(0,0,0,0.07);
--hdr-hover: rgba(0,0,0,0.05);
--hdr-input-bg: #dcfce7;
--hdr-input-border: #86efac;
}
body[data-sb-theme="oceano"] {
--sb-bg: #164e63;
--sb-bg-hover: rgba(255,255,255,0.08);
--sb-bg-active: rgba(34,211,238,0.14);
--sb-text: #cffafe;
--sb-text-muted: #67e8f9;
--sb-accent: #22d3ee;
--sb-accent-rgb: 34,211,238;
--sb-border: rgba(255,255,255,0.08);
--sb-shadow: 4px 0 24px rgba(0,0,0,0.35);
--sb-badge: #ef4444;
--hdr-bg: #f0f9ff;
--hdr-text: #0c4a6e;
--hdr-border: rgba(0,0,0,0.07);
--hdr-hover: rgba(0,0,0,0.05);
--hdr-input-bg: #e0f2fe;
--hdr-input-border: #7dd3fc;
}
body[data-sb-theme="claro"] {
--sb-bg: #f1f5f9;
--sb-bg-hover: rgba(0,0,0,0.05);
--sb-bg-active: rgba(37,99,235,0.10);
--sb-text: #1e293b;
--sb-text-muted: #64748b;
--sb-accent: var(--agf-azul,#2563EB);
--sb-accent-rgb: 37,99,235;
--sb-border: rgba(0,0,0,0.08);
--sb-shadow: 4px 0 20px rgba(0,0,0,0.08);
--sb-badge: #ef4444;
--hdr-bg: #ffffff;
--hdr-text: #0f172a;
--hdr-border: rgba(0,0,0,0.08);
--hdr-hover: rgba(0,0,0,0.05);
--hdr-input-bg: #f1f5f9;
--hdr-input-border: #d1d5db;
}
body[data-sb-theme="classico"] {
--sb-bg: #0f3460;
--sb-bg-hover: rgba(255,255,255,0.08);
--sb-bg-active: rgba(147,197,253,0.15);
--sb-text: #dbeafe;
--sb-text-muted: #7ab3d6;
--sb-accent: #60a5fa;
--sb-accent-rgb: 96,165,250;
--sb-border: rgba(255,255,255,0.08);
--sb-shadow: 4px 0 24px rgba(0,0,0,0.40);
--sb-badge: #fbbf24;
--hdr-bg: #ffffff;
--hdr-text: #0f172a;
--hdr-border: rgba(0,0,0,0.08);
--hdr-hover: rgba(0,0,0,0.05);
--hdr-input-bg: #f1f5f9;
--hdr-input-border: #d1d5db;
}
body[data-sb-theme="ardosia"] {
--sb-bg: #334155;
--sb-bg-hover: rgba(255,255,255,0.07);
--sb-bg-active: rgba(148,163,184,0.16);
--sb-text: #e2e8f0;
--sb-text-muted: #94a3b8;
--sb-accent: #7dd3fc;
--sb-accent-rgb: 125,211,252;
--sb-border: rgba(255,255,255,0.07);
--sb-shadow: 4px 0 24px rgba(0,0,0,0.32);
--sb-badge: #ef4444;
--hdr-bg: #f8fafc;
--hdr-text: #1e293b;
--hdr-border: rgba(0,0,0,0.07);
--hdr-hover: rgba(0,0,0,0.05);
--hdr-input-bg: #eef2f7;
--hdr-input-border: #cbd5e1;
}
body[data-sb-theme="violeta"] {
--sb-bg: #5b21b6;
--sb-bg-hover: rgba(255,255,255,0.09);
--sb-bg-active: rgba(196,181,253,0.18);
--sb-text: #ede9fe;
--sb-text-muted: #c4b5fd;
--sb-accent: #c4b5fd;
--sb-accent-rgb: 196,181,253;
--sb-border: rgba(255,255,255,0.09);
--sb-shadow: 4px 0 24px rgba(0,0,0,0.35);
--sb-badge: #f87171;
--hdr-bg: #faf5ff;
--hdr-text: #3b0764;
--hdr-border: rgba(0,0,0,0.07);
--hdr-hover: rgba(0,0,0,0.05);
--hdr-input-bg: #f3e8ff;
--hdr-input-border: #d8b4fe;
}
body[data-sb-theme="granito"] {
--sb-bg: #292524;
--sb-bg-hover: rgba(255,255,255,0.07);
--sb-bg-active: rgba(214,211,209,0.14);
--sb-text: #f5f5f4;
--sb-text-muted: #a8a29e;
--sb-accent: #fbbf24;
--sb-accent-rgb: 251,191,36;
--sb-border: rgba(255,255,255,0.07);
--sb-shadow: 4px 0 24px rgba(0,0,0,0.38);
--sb-badge: #ef4444;
--hdr-bg: #ffffff;
--hdr-text: #1c1917;
--hdr-border: rgba(0,0,0,0.08);
--hdr-hover: rgba(0,0,0,0.05);
--hdr-input-bg: #f5f5f4;
--hdr-input-border: #d6d3d1;
}
/* =============================================================================
VISUAL CLARO 07/10/2026 (pedido do André; degradê roxo/azul testado e reprovado): sidebar e header
brancos com degradê branco bem sutil nos temas "dark" e "classico", destaque índigo da modal de plano,
botões do header com fundo suave. REVERTER: apagar este bloco e o bloco "AGF-CLARO-EXTRA" no fim do
arquivo, tirar "dark"/"classico" dos seletores marcados AGF-CLARO e restaurar os 2 pontos AGF-GRAD
(var(--sb-bg) e o gradiente color-mix do .app-header). Cores antigas: dark = sidebar #1a1a2e,
header #0f172a; classico = sidebar #0f3460, header #ffffff.
============================================================================= */
body,
body[data-sb-theme="dark"],
body[data-sb-theme="classico"] {
--sb-fundo: linear-gradient(180deg, #ffffff 0%, #eceef3 100%);
--hdr-fundo: linear-gradient(90deg, #ffffff 0%, #eceef3 100%);
--sb-bg: #ffffff;
--sb-bg-hover: rgba(var(--sb-accent-rgb),0.07);
--sb-bg-active: rgba(var(--sb-accent-rgb),0.12);
--sb-text: #475569;
--sb-text-muted: #64748b;
--sb-accent: #6366f1;
--sb-accent-rgb: 99,102,241;
--sb-border: rgba(15,23,42,0.08);
--sb-shadow: 4px 0 20px rgba(15,23,42,0.08);
--sb-badge: #ef4444;
--hdr-bg: #ffffff;
--hdr-text: #475569;
--hdr-border: rgba(15,23,42,0.08);
--hdr-hover: rgba(var(--sb-accent-rgb),0.10);
--hdr-input-bg: #f3f4f6;
--hdr-input-border: #e5e7eb;
}
/* AGF-TEMAS-COR 15/10/2026: o degradê branco acima vale só para os temas claros (dark, classico, light, claro,
corporate-light, minimal-white e o padrão sem tema). Os temas de cor voltam a pintar a barra com a própria cor
(--sb-bg): antes ficava texto claro sobre fundo branco e os itens sumiam (contraste ~1,0). No modo escuro
global (tema-escuro-global.css) a regra do próprio tema continua ganhando. Tema NOVO: entra na lista abaixo (cor) ou na linha
AGF-TEMAS-BRANCOS (barra branca de propósito); o agflex-lint bloqueia tema que não esteja em nenhuma das duas.
AGF-TEMAS-BRANCOS: dark classico light claro corporate-light minimal-white */
body[data-sb-theme="aceiro"], body[data-sb-theme="ardosia"], body[data-sb-theme="azul"], body[data-sb-theme="ceu"],
body[data-sb-theme="cinza"], body[data-sb-theme="corporate"], body[data-sb-theme="cristal"], body[data-sb-theme="escuro"],
body[data-sb-theme="esmeralda"], body[data-sb-theme="forest"], body[data-sb-theme="grafite"], body[data-sb-theme="granito"],
body[data-sb-theme="indigo"], body[data-sb-theme="midnight"], body[data-sb-theme="navy"], body[data-sb-theme="ocean"],
body[data-sb-theme="oceano"], body[data-sb-theme="purple"], body[data-sb-theme="roxo"], body[data-sb-theme="safira"],
body[data-sb-theme="sunset"], body[data-sb-theme="verde"], body[data-sb-theme="violeta"] {
--sb-fundo: var(--sb-bg);
}
/* =============================================================================
SKIP LINK (acessibilidade)
============================================================================= */
.skip-link {
position: fixed;
top: -120px;
left: 8px;
z-index: 9999;
background: var(--sb-accent);
color: #fff;
padding: 8px 18px;
border-radius: 0 0 10px 10px;
font-size: 13px;
font-weight: 600;
text-decoration: none;
transition: top 0.2s;
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.skip-link:focus { top: 0; color: #fff; }
/* =============================================================================
OVERLAY MOBILE
============================================================================= */
.sb-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(0,0,0,0.6);
z-index: 999;
opacity: 0;
transition: opacity var(--sb-transition);
}
.sb-overlay--visible { display: block; opacity: 1; }
/* =============================================================================
SIDEBAR
============================================================================= */
.sidebar {
position: fixed;
top: 0;
left: 0;
height: calc(var(--real-vh, 1vh) * 100);
width: var(--sb-width);
background: var(--sb-fundo, var(--sb-bg)); /* AGF-GRAD */
box-shadow: var(--sb-shadow);
border-right: 1px solid var(--sb-border);
display: flex;
flex-direction: column;
z-index: 1000;
transition: width var(--sb-transition);
overflow: hidden;
/* will-change adicionado via JS só durante a transição */
}
.sidebar--collapsed { width: var(--sb-width-collapsed); }
/* --- Sidebar expandida: sempre overlay (nunca empurra conteúdo) --- */
.sidebar:not(.sidebar--collapsed):not(.sidebar--mobile-open) {
z-index: 13000; /* acima do header (12000) p/ sobrepor e a seta aparecer (19/08) */
box-shadow: 8px 0 40px rgba(0,0,0,0.38);
}
/* --- Hover mode: expande como overlay sem mover o conteúdo --- */
.sidebar--collapsed.sidebar--hover-expanded {
width: var(--sb-width);
z-index: 13000; /* acima do header (12000) (19/08) */
box-shadow: 8px 0 40px rgba(0,0,0,0.38);
}
/* Restaura textos e chevrons durante o hover */
.sidebar--collapsed.sidebar--hover-expanded .sb-brand-text,
.sidebar--collapsed.sidebar--hover-expanded .sb-section-title,
.sidebar--collapsed.sidebar--hover-expanded .sb-item-text,
.sidebar--collapsed.sidebar--hover-expanded .sb-item-chevron,
.sidebar--collapsed.sidebar--hover-expanded .sb-badge-text {
opacity: 1;
pointer-events: auto;
overflow: visible;
max-width: 200px;
}
.sidebar--collapsed.sidebar--hover-expanded .sb-badge { position: relative; top: auto; right: auto; }
.sidebar--collapsed.sidebar--hover-expanded .sb-brand-link { justify-content: flex-start; }
.sidebar--collapsed.sidebar--hover-expanded .sb-search-text,
.sidebar--collapsed.sidebar--hover-expanded .sb-search-kbd { display: inline-flex; }
.sidebar--collapsed.sidebar--hover-expanded .sb-search-btn { justify-content: flex-start; padding: 8px 12px; }
.sidebar--collapsed.sidebar--hover-expanded .sb-search-wrap { padding: 10px 12px 6px; }
.sidebar--collapsed.sidebar--hover-expanded #sb-default-pref-btn .sb-item-text,
.sidebar--collapsed.sidebar--hover-expanded #sb-default-pref-btn .sb-pref-pill { display: inline-flex; }
.sidebar--collapsed.sidebar--hover-expanded #sb-default-pref-btn { justify-content: flex-start; padding: 7px 12px; }
/* Glassmorphism */
.sidebar--glass {
background: rgba(26,26,46,0.78) !important;
backdrop-filter: blur(18px) saturate(180%);
-webkit-backdrop-filter: blur(18px) saturate(180%);
}
body[data-sb-theme="light"] .sidebar--glass,
body[data-sb-theme="dark"] .sidebar--glass, /* AGF-CLARO */
body[data-sb-theme="classico"] .sidebar--glass {
background: rgba(255,255,255,0.80) !important;
}
/* --- Collapsed: esconde textos e chevrons --- */
.sidebar--collapsed .sb-brand-text,
.sidebar--collapsed .sb-section-title,
.sidebar--collapsed .sb-item-text,
.sidebar--collapsed .sb-item-chevron,
.sidebar--collapsed .sb-badge-text {
opacity: 0;
pointer-events: none;
overflow: hidden;
max-width: 0;
transition: opacity var(--sb-transition), max-width var(--sb-transition);
}
/* Logo permanece visível e centralizada quando colapsado */
.sidebar--collapsed .sb-brand-link {
justify-content: center;
}
.sidebar--collapsed .sb-brand-logo {
width: 36px;
height: 36px;
}
/* --- Brand --- */
.sb-brand {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 12px;
height: 64px;
border-bottom: 1px solid var(--sb-border);
flex-shrink: 0;
gap: 8px;
}
.sb-brand-link {
display: flex;
align-items: center;
gap: 10px;
text-decoration: none;
flex: 1;
overflow: hidden;
min-width: 0;
}
.sb-brand-link:hover { text-decoration: none; }
.sb-brand-icon {
width: 36px;
height: 36px;
background: var(--sb-accent);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: #fff;
font-size: 15px;
box-shadow: 0 2px 10px rgba(var(--sb-accent-rgb),0.4);
transition: transform 0.2s;
}
.sb-brand-link:hover .sb-brand-icon { transform: scale(1.05); }
.sb-brand-logo {
width: 44px;
height: 44px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
box-shadow: 0 2px 10px rgba(0,0,0,0.35);
transition: transform 0.2s;
}
.sb-brand-link:hover .sb-brand-logo { transform: scale(1.05); }
.sb-brand-text {
overflow: hidden;
white-space: nowrap;
transition: opacity var(--sb-transition), max-width var(--sb-transition);
min-width: 0;
}
.sb-brand-name {
display: block;
color: var(--sb-text);
font-weight: 700;
font-size: 15px;
letter-spacing: 0.01em;
overflow: hidden;
text-overflow: ellipsis;
}
.sb-brand-version {
display: block;
color: var(--sb-text-muted);
font-size: 10px;
margin-top: 1px;
letter-spacing: 0.04em;
}
/* --- Toggle button (fixo na borda da sidebar) --- */
#sb-toggle {
position: fixed;
top: 18px;
left: calc(var(--sb-width) - 14px);
z-index: 14000; /* acima da sidebar aberta (13000) p/ a seta ficar visível (19/08) */
width: 28px;
height: 28px;
border-radius: 50%;
border: 2px solid var(--sb-border);
background: var(--sb-bg);
color: var(--sb-text-muted);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
flex-shrink: 0;
transition: left var(--sb-transition), transform var(--sb-transition), background 0.18s, color 0.18s, box-shadow 0.18s;
font-size: 11px;
padding: 0;
box-shadow: 0 2px 8px rgba(0,0,0,0.28);
outline: none;
}
#sb-toggle:hover {
background: var(--sb-accent);
color: #fff;
border-color: var(--sb-accent);
box-shadow: 0 3px 14px rgba(var(--sb-accent-rgb), 0.45);
transform: scale(1.1);
}
body .sidebar--collapsed + #sb-toggle {
left: calc(var(--sb-width-collapsed) - 14px);
transform: rotate(180deg);
}
body .sidebar--collapsed + #sb-toggle:hover {
transform: rotate(180deg) scale(1.1);
}
/* Sidebar aberta só por hover: a seta acompanha a borda da sidebar expandida (antes ficava presa atrás, sobre a logo). */
body .sidebar--collapsed.sidebar--hover-expanded + #sb-toggle {
left: calc(var(--sb-width) - 14px);
}
/* Tablet: sidebar colapsa via CSS sem a classe JS — reposiciona o toggle */
@media (max-width: 1200px) and (min-width: 769px) {
.sidebar:not(.sidebar--force-expanded) + #sb-toggle {
left: calc(var(--sb-width-collapsed) - 14px);
transform: rotate(180deg);
}
.sidebar:not(.sidebar--force-expanded) + #sb-toggle:hover {
transform: rotate(180deg) scale(1.12);
}
}
@media (max-width: 768px) {
#sb-toggle { display: none; }
}
/* --- Navigation --- */
.sb-nav {
flex: 1 1 0;
min-height: 0;
overflow-y: auto;
overflow-x: hidden;
padding: 6px 0;
scrollbar-width: thin;
scrollbar-color: rgba(255,255,255,0.25) transparent;
}
.sb-nav::-webkit-scrollbar { width: 5px; }
.sb-nav::-webkit-scrollbar-track { background: transparent; }
.sb-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.25); border-radius: 3px; }
body[data-sb-theme="light"] .sb-nav,
body[data-sb-theme="dark"] .sb-nav, /* AGF-CLARO */
body[data-sb-theme="classico"] .sb-nav { scrollbar-color: rgba(0,0,0,0.2) transparent; }
body[data-sb-theme="light"] .sb-nav::-webkit-scrollbar-thumb,
body[data-sb-theme="dark"] .sb-nav::-webkit-scrollbar-thumb,
body[data-sb-theme="classico"] .sb-nav::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.2); }
.sb-nav-inner { padding: 4px 8px 64px; } /* 23/10: folga no fim do menu — com o Windows cobrindo a base do navegador, o último grupo (SuperAdmin) ficava inalcançável */
/* --- Footer (preferência padrão) --- sempre visível abaixo do scroll */
.sb-footer {
flex-shrink: 0;
border-top: 1px solid var(--sb-border);
padding: 4px 8px;
background: var(--sb-bg);
}
/* --- Seção --- */
.sb-section { margin-bottom: 2px; }
.sb-section + .sb-section {
margin-top: 4px;
padding-top: 8px;
border-top: 1px solid var(--sb-border);
}
.sb-section-title {
display: block;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--sb-text-muted);
padding: 6px 10px 3px;
white-space: nowrap;
overflow: hidden;
transition: opacity var(--sb-transition), max-width var(--sb-transition);
user-select: none;
}
/* --- Item de navegação --- */
.sb-item {
position: relative;
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 8px 10px;
border-radius: 8px;
color: var(--sb-text);
text-decoration: none;
font-size: 13.5px;
font-weight: 500;
cursor: pointer;
background: transparent;
border: none;
border-left: 3px solid transparent;
transition: background 0.18s, color 0.18s, border-color 0.18s;
white-space: nowrap;
overflow: hidden;
margin: 1px 0;
text-align: left;
font-family: inherit;
line-height: 1.4;
outline: none;
}
.sb-item:hover {
background: var(--sb-bg-hover);
color: var(--sb-text);
text-decoration: none;
}
.sb-item:focus-visible {
box-shadow: 0 0 0 2px rgba(var(--sb-accent-rgb), 0.5);
outline: none;
}
/* Hover: deslizamento da esquerda para direita */
.sb-item::after {
content: '';
position: absolute;
left: 0; top: 0;
height: 100%; width: 0;
background: var(--sb-bg-hover);
border-radius: 8px;
transition: width 0.22s ease;
z-index: -1;
}
.sb-item:hover::after { width: 100%; }
.sb-item--active {
background: var(--sb-bg-active) !important;
border-left-color: var(--sb-accent) !important;
color: var(--sb-accent) !important;
}
.sb-item--active::after { display: none; }
.sb-item-icon {
width: 20px;
text-align: center;
font-size: 14px;
flex-shrink: 0;
transition: color 0.15s;
}
.sb-item--active .sb-item-icon { color: var(--sb-accent); }
/* Destaque suave para itens novos/importantes (ex.: Produtividade 360) */
.sb-item--destaque { border-left-color: var(--sb-accent) !important; }
.sb-item--destaque .sb-item-icon { color: var(--sb-accent); }
.sb-item--destaque .sb-item-text { font-weight: 700; }
.sb-item-text {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
transition: opacity var(--sb-transition), max-width var(--sb-transition);
}
.sb-item-chevron {
font-size: 10px;
color: var(--sb-text-muted);
margin-left: auto;
flex-shrink: 0;
transition: transform var(--sb-transition), opacity var(--sb-transition), max-width var(--sb-transition);
}
.sb-group--open > .sb-item--toggle .sb-item-chevron { transform: rotate(-180deg); }
/* --- Badge nos itens --- */
.sb-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 20px;
height: 20px;
padding: 0 5px;
background: var(--sb-badge);
color: #fff;
font-size: 10px;
font-weight: 700;
border-radius: 10px;
flex-shrink: 0;
animation: sb-pulse-badge 2.5s ease-in-out infinite;
transition: opacity var(--sb-transition), min-width var(--sb-transition);
white-space: nowrap;
}
.sidebar--collapsed .sb-badge {
position: absolute;
top: 5px; right: 5px;
min-width: 8px; width: 8px;
height: 8px;
padding: 0;
font-size: 0;
border-radius: 50%;
}
@keyframes sb-pulse-badge {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.15); opacity: .8; }
}
/* --- Submenu fly-out (posicionado pelo JS com position:fixed) --- */
.sb-submenu {
position: fixed;
top: 0; left: 0; /* sobrescritos pelo JS */
min-width: 192px;
max-width: 268px;
background: var(--sb-bg);
border: 1px solid var(--sb-border);
border-radius: 10px;
box-shadow: 0 8px 40px rgba(0,0,0,0.52), 0 2px 8px rgba(0,0,0,0.22);
padding: 5px;
z-index: 1100;
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateX(-6px);
transition: opacity 0.18s ease-out, transform 0.18s ease-out, visibility 0s linear 0.18s;
will-change: opacity, transform; /* camada própria: abrir não repinta a barra (André, 24/10/2026: abria meio travado) */
contain: layout style;
max-height: 82vh;
overflow-y: auto;
overflow-x: hidden;
}
.sb-submenu--open {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateX(0);
transition: opacity 0.18s ease-out, transform 0.18s ease-out, visibility 0s;
}
.sb-flyout-title {
padding: 5px 8px 6px;
font-size: 9.5px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--sb-text-muted);
border-bottom: 1px solid var(--sb-border);
margin-bottom: 3px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
user-select: none;
}
.sb-subitem {
display: block;
padding: 7px 10px;
border-radius: 6px;
color: var(--sb-text-muted);
font-size: 13px;
text-decoration: none;
transition: background 0.15s, color 0.15s, border-color 0.15s;
white-space: nowrap;
border-left: 2px solid transparent;
margin: 1px 0;
position: relative;
font-family: inherit;
outline: none;
}
.sb-subitem:hover {
background: var(--sb-bg-hover);
color: var(--sb-text);
text-decoration: none;
}
.sb-subitem:focus-visible { box-shadow: 0 0 0 2px rgba(var(--sb-accent-rgb),0.5); }
.sb-subitem--active {
color: var(--sb-accent) !important;
background: var(--sb-bg-active);
border-left-color: var(--sb-accent);
}
/* --- Ripple --- */
.sb-ripple {
position: absolute;
border-radius: 50%;
background: rgba(255,255,255,0.15);
transform: scale(0);
animation: sb-ripple-anim 0.55s linear forwards;
pointer-events: none;
}
@keyframes sb-ripple-anim {
to { transform: scale(10); opacity: 0; }
}
/* =============================================================================
MAIN WRAPPER
============================================================================= */
.main-wrapper {
margin-left: var(--sb-width-collapsed);
min-height: 100vh;
display: flex;
flex-direction: column;
/* margin-left fixo — sidebar é sempre overlay, nunca empurra conteúdo */
}
/* =============================================================================
HEADER
============================================================================= */
.app-header {
position: sticky;
top: 0;
z-index: 950; /* André 27/08: header BAIXO para ficar ABAIXO de todas as modais
(elas usam 1000+). Antes era 12000 e cobria as modais. Trade-off
aceito: dropdowns de página (9999) podem sobrepor o header ao rolar. */
height: var(--hdr-height);
/* fundo SÓLIDO sempre (válido em qualquer navegador). O gradiente sutil de profundidade
fica num @supports abaixo: o Chrome < 111 (Win7) não tem color-mix; como a declaração
do gradiente também usa var(), o valor inválido cairia para 'initial' (TRANSPARENTE) em
vez do fallback de cima — era isso que deixava o header transparente e embaralhava ao rolar. */
background: var(--hdr-bg);
border-bottom: 1px solid var(--hdr-border);
display: flex;
align-items: center;
padding: 0 16px;
gap: 10px;
box-shadow: 0 1px 0 var(--hdr-border), 0 8px 28px -10px rgba(0,0,0,0.30);
/* NÃO usar backdrop-filter/filter/transform aqui: cria containing block e quebra os
dropdowns/balões position:fixed do header no mobile (ficam relativos ao header). */
flex-shrink: 0;
}
/* Gradiente sutil de profundidade só onde color-mix existe (Chrome 111+, etc.). Navegador
antigo ignora este bloco inteiro e fica com o fundo sólido acima (nunca transparente). */
@supports (background: color-mix(in srgb, #fff 50%, #000)) {
.app-header {
background: var(--hdr-fundo, linear-gradient(180deg, color-mix(in srgb, var(--hdr-bg) 92%, #ffffff 8%) 0%, var(--hdr-bg) 100%)); /* AGF-GRAD */
}
}
.hdr-mobile-toggle {
display: none;
width: 36px; height: 36px;
border-radius: 8px;
background: transparent;
border: 1px solid var(--hdr-border);
color: var(--hdr-text);
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 15px;
flex-shrink: 0;
transition: background 0.15s;
padding: 0;
font-family: inherit;
}
.hdr-mobile-toggle:hover { background: var(--hdr-hover); }
.hdr-breadcrumb {
flex: 1;
display: flex;
align-items: center;
gap: 5px;
font-size: 13px;
min-width: 0;
overflow: hidden;
}
.hdr-breadcrumb a {
color: var(--sb-text-muted);
text-decoration: none;
transition: color 0.15s;
white-space: nowrap;
flex-shrink: 0;
}
.hdr-breadcrumb a:hover { color: var(--sb-accent); }
.hdr-crumb-sep { color: var(--sb-text-muted); font-size: 11px; flex-shrink: 0; }
.hdr-crumb-current {
color: var(--hdr-text);
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Botão de busca global */
.hdr-search-btn {
display: flex;
align-items: center;
gap: 10px;
padding: 7px 14px;
min-width: 200px;
border-radius: 9px;
border: 1.5px solid var(--hdr-input-border, var(--hdr-border));
background: var(--hdr-input-bg, rgba(var(--sb-accent-rgb), 0.06));
color: var(--hdr-text, var(--sb-text-muted));
opacity: 0.75;
font-size: 13px;
cursor: pointer;
transition: border-color 0.2s, background 0.2s, color 0.2s, box-shadow 0.2s, opacity 0.2s;
white-space: nowrap;
flex-shrink: 0;
font-family: inherit;
}
.hdr-search-btn:hover {
border-color: var(--hdr-text);
color: var(--hdr-text);
background: var(--hdr-input-bg, rgba(var(--sb-accent-rgb), 0.10));
box-shadow: 0 0 0 2px rgba(0,0,0,0.06);
opacity: 1;
}
.hdr-search-btn .fa-search { color: var(--sb-accent); font-size: 12px; }
.hdr-search-text { flex: 1; text-align: left; }
.hdr-search-kbd {
font-size: 10px;
padding: 2px 6px;
border-radius: 5px;
border: 1px solid var(--hdr-input-border, var(--hdr-border));
background: var(--hdr-input-bg, rgba(255,255,255,0.08));
font-family: monospace;
letter-spacing: 0.02em;
color: var(--hdr-text, var(--sb-text-muted));
opacity: 0.6;
flex-shrink: 0;
}
.hdr-actions { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
/* ── MODO TV (compensa overscan: TVs cortam/deslocam as bordas, deixando botões e conteúdo da
faixa direita inacessíveis ao clique). Nível em . OFF por padrão
(data-tv-safe ausente/0 = nada), então não afeta quem usa em monitor normal. O usuário liga e
ajusta a intensidade pelo menu. Afasta header + conteúdo das bordas cortadas. */
html[data-tv-safe="1"] #app-header,
html[data-tv-safe="1"] #main-content { padding-right: 5% !important; }
html[data-tv-safe="2"] #app-header,
html[data-tv-safe="2"] #main-content { padding-right: 9% !important; }
html[data-tv-safe="3"] #app-header,
html[data-tv-safe="3"] #main-content { padding-right: 14% !important; }
/* um respiro no topo também (overscan corta a borda de cima) */
html[data-tv-safe="2"] #app-header { padding-top: 4px !important; }
html[data-tv-safe="3"] #app-header { padding-top: 8px !important; }
/* PDV virou filho direto do header (fica ao lado do hamburger no mobile).
A ordem abaixo o devolve para a direita no desktop, logo antes do bloco de ações;
no mobile o breadcrumb some, então a sequência fica: hamburger > PDV > ações. */
.hdr-breadcrumb { order: 1; }
#btn-abrir-pdv-global { order: 2; }
.hdr-actions { order: 3; }
.hdr-action-btn {
position: relative;
width: 36px; height: 36px;
border-radius: 8px;
background: transparent;
border: none;
color: var(--hdr-text);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 15px;
text-decoration: none;
transition: background 0.15s;
padding: 0;
font-family: inherit;
outline: none;
}
.hdr-action-btn:hover { background: var(--hdr-hover); color: var(--hdr-text); }
.hdr-action-btn:focus-visible { box-shadow: 0 0 0 2px rgba(var(--sb-accent-rgb),0.5); }
.hdr-badge {
position: absolute;
top: 2px; right: 2px;
min-width: 17px; height: 17px;
padding: 0 4px;
background: #ef4444;
color: #fff;
font-size: 10px;
font-weight: 700;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
animation: sb-pulse-badge 2.5s ease-in-out infinite;
}
/* --- Dropdowns do header --- */
.hdr-dropdown { position: relative; }
.hdr-dropdown-menu {
display: none;
position: absolute;
top: calc(100% + 8px);
right: 0;
background: var(--dp-bg);
border: 1px solid var(--dp-border);
border-radius: 12px;
box-shadow: var(--dp-shadow);
z-index: 1100;
}
/* Balões do header: sem overflow hidden (cortaria a setinha no topo); lista interna tem seu próprio scroll */
.hdr-balloon .hdr-dropdown-menu { overflow: visible; border-radius: 18px; }
.hdr-dropdown--open .hdr-dropdown-menu { display: flex; flex-direction: column; }
/* Balão (speech bubble) — seta apontando para o botão */
.hdr-balloon .hdr-dropdown-menu { top: calc(100% + 12px); }
/* Setinha do balão — agora no MENU (que é position:fixed e acompanha o reposicionamento JS).
Posicionada no topo do menu, alinhada ao centro do botão via --arrow-right (setado pelo JS). */
.hdr-dropdown.hdr-balloon.hdr-dropdown--open > .hdr-dropdown-menu::before {
content: '';
position: absolute;
top: -5px;
right: var(--arrow-right, 13px);
width: 10px;
height: 10px;
background: var(--dp-bg-alt);
border-top: 1px solid var(--dp-border);
border-left: 1px solid var(--dp-border);
transform: rotate(45deg);
border-radius: 2px 0 0 0;
z-index: 1;
pointer-events: none;
}
.hdr-dropdown.hdr-balloon.hdr-dropdown--open::after { display: none; } /* desativa a antiga (no wrap) */
.hdr-dropdown-header {
padding: 12px 14px;
border-bottom: 1px solid var(--dp-border);
font-size: 13px;
font-weight: 600;
color: var(--dp-text);
background: var(--dp-bg-alt);
flex-shrink: 0;
border-radius: 18px 18px 0 0;
}
/* Notificações */
.hdr-notif-menu { width: 360px; max-width: 95vw; max-height: 480px; }
.hdr-notif-list { flex: 1; overflow-y: auto; max-height: 320px; }
/* Mobile/tablet: dropdown fixo no canto superior direito para não transbordar viewport */
@media (max-width: 1023px) {
#hdr-notif-dropdown .hdr-dropdown-menu,
#hdr-pix-dropdown .hdr-dropdown-menu,
#hdr-chamando-dropdown .hdr-dropdown-menu,
#hdr-user-dropdown-wrap .hdr-dropdown-menu {
position: fixed;
top: 60px;
right: 8px;
left: auto;
width: min(360px, calc(100vw - 16px));
max-width: calc(100vw - 16px);
max-height: min(480px, calc(100vh - 76px));
}
}
/* Telas grandes (>1023px): os balões do header (notificações, PIX, atendimento) também precisam
de position:fixed — em position:absolute eles eram recortados por overflow/stacking de algum
container e o balão NÃO aparecia em monitores grandes. Fixed garante que sempre apareçam. */
@media (min-width: 1024px) {
#hdr-notif-dropdown .hdr-dropdown-menu,
#hdr-pix-dropdown .hdr-dropdown-menu,
#hdr-chamando-dropdown .hdr-dropdown-menu {
position: fixed !important; /* !important: blinda contra qualquer cascata/override — em telas
grandes o absolute era recortado por overflow de um container */
top: calc(var(--hdr-height, 60px) + 4px) !important;
right: 14px !important;
left: auto !important;
bottom: auto !important;
}
}
/* Segurança extra: em qualquer tela, nunca ultrapassa a borda esquerda */
.hdr-dropdown-menu {
max-width: min(360px, calc(100vw - 16px));
}
.hdr-notif-item {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 10px 14px;
border-bottom: 1px solid var(--dp-border);
text-decoration: none;
transition: background 0.15s;
cursor: pointer;
}
.hdr-notif-item:hover { background: var(--dp-hover); }
.hdr-notif-icon { font-size: 13px; margin-top: 2px; flex-shrink: 0; }
.hdr-notif-body { flex: 1; overflow: hidden; }
.hdr-notif-title { font-size: 13px; font-weight: 500; color: var(--dp-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hdr-notif-msg { font-size: 12px; color: var(--dp-muted); margin-top: 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hdr-notif-time { font-size: 11px; color: var(--dp-muted); margin-top: 3px; }
.hdr-dropdown-footer {
display: flex;
gap: 6px;
padding: 10px 12px;
border-top: 1px solid var(--dp-border);
background: var(--dp-bg-alt);
flex-shrink: 0;
border-radius: 0 0 18px 18px;
}
.hdr-dropdown-footer a {
flex: 1;
text-align: center;
font-size: 12px;
padding: 6px;
border-radius: 6px;
text-decoration: none;
color: var(--dp-muted);
transition: background 0.15s, color 0.15s;
font-family: inherit;
}
.hdr-dropdown-footer a:hover { background: var(--dp-hover); color: var(--dp-text); }
.hdr-dropdown-footer a.accent { color: var(--dp-accent); }
/* Sino com categorias (24/10/2026): chips rolam na horizontal; alvo >=36px no app; sem :has()/dvh/color-mix/nesting (WebView Android 9) */
.hdr-notif-chips { display: flex; gap: 6px; padding: 8px 12px; overflow-x: auto; -webkit-overflow-scrolling: touch; border-bottom: 1px solid var(--dp-border); flex-shrink: 0; }
.hdr-notif-chips[hidden] { display: none; }
.hdr-notif-chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; min-height: 28px; padding: 3px 10px; border-radius: 14px; border: 1px solid var(--dp-border); background: transparent; color: var(--dp-muted); font-size: 12px; font-family: inherit; cursor: pointer; white-space: nowrap; }
.hdr-notif-chip:hover { background: var(--dp-hover); color: var(--dp-text); }
.hdr-notif-chip--on { background: var(--dp-accent); border-color: var(--dp-accent); color: #fff; }
.hdr-notif-chip-n { font-size: 11px; font-weight: 700; min-width: 16px; padding: 0 4px; border-radius: 8px; background: rgba(127,127,127,.25); text-align: center; }
.hdr-notif-chip--on .hdr-notif-chip-n { background: rgba(255,255,255,.28); }
.hdr-notif-chip-n[hidden] { display: none; }
.hdr-notif-item { padding: 7px 12px; gap: 8px; }
.hdr-notif-chips ~ .hdr-notif-list .hdr-notif-title { display: flex; align-items: baseline; gap: 8px; }
.hdr-notif-chips ~ .hdr-notif-list .hdr-notif-title .hdr-notif-time { margin: 0 0 0 auto; flex-shrink: 0; }
.hdr-notif-chips ~ .hdr-notif-list .hdr-notif-msg { -webkit-line-clamp: 1; margin-top: 1px; }
@media (max-width: 768px) { .hdr-notif-chip { min-height: 36px; padding: 4px 12px; } .hdr-dropdown-footer a { min-height: 36px; line-height: 24px; } }
/* Usuário */
.hdr-user-btn {
display: flex;
align-items: center;
gap: 8px;
padding: 4px 8px;
border-radius: 8px;
border: none;
background: transparent;
color: var(--hdr-text);
cursor: pointer;
transition: background 0.15s;
font-family: inherit;
outline: none;
}
.hdr-user-btn:hover { background: var(--hdr-hover); }
.hdr-user-btn:focus-visible { box-shadow: 0 0 0 2px rgba(var(--sb-accent-rgb),0.5); }
.hdr-user-avatar {
width: 32px; height: 32px;
border-radius: 50%;
background: var(--sb-accent);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 13px;
flex-shrink: 0;
}
.hdr-user-name {
font-size: 13px;
font-weight: 500;
color: var(--hdr-text);
max-width: 130px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.hdr-user-menu { width: 220px; }
.hdr-user-menu-item {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
border-bottom: 1px solid var(--dp-border);
font-size: 13px;
color: var(--dp-text-md);
text-decoration: none;
background: transparent;
border-left: none;
border-right: none;
border-top: none;
width: 100%;
cursor: pointer;
transition: background 0.15s;
font-family: inherit;
text-align: left;
}
.hdr-user-menu-item:last-child { border-bottom: none; }
.hdr-user-menu-item:hover { background: var(--dp-hover); color: var(--dp-text); text-decoration: none; }
.hdr-user-menu-item.logout { color: #ef4444; }
.hdr-user-menu-item.logout:hover { background: rgba(239,68,68,0.07); }
.hdr-user-menu-item i { width: 16px; text-align: center; flex-shrink: 0; }
/* =============================================================================
ROBÔ — ícone colorido por estado (global, sem borda/fundo)
============================================================================= */
#btn-toggle-robo { border: none !important; background: transparent !important; }
#btn-toggle-robo.hdr-robo-on { color: #22c55e !important; }
#btn-toggle-robo.hdr-robo-warn { color: #f59e0b !important; }
#btn-toggle-robo.hdr-robo-off { color: #ef4444 !important; }
#btn-toggle-robo.hdr-robo-on:hover { background: rgba(34,197,94,.12) !important; }
#btn-toggle-robo.hdr-robo-warn:hover { background: rgba(245,158,11,.12) !important; }
#btn-toggle-robo.hdr-robo-off:hover { background: rgba(239,68,68,.12) !important; }
/* Sidebar mobile: mesmas cores */
.sb-mob-robo.hdr-robo-on { color: #4ade80 !important; }
.sb-mob-robo.hdr-robo-warn { color: #fbbf24 !important; }
.sb-mob-robo.hdr-robo-off { color: #f87171 !important; }
/* =============================================================================
BUSCA GLOBAL (modal Ctrl+K)
============================================================================= */
.gs-modal {
display: none;
position: fixed;
inset: 0;
z-index: 2000;
align-items: flex-start;
justify-content: center;
padding-top: 12vh;
background: rgba(0,0,0,0.66);
}
.gs-modal--open { display: flex; }
.gs-box {
width: 100%;
max-width: 560px;
margin: 0 16px;
background: var(--dp-bg);
border: 1px solid var(--dp-border);
border-radius: 14px;
overflow: hidden;
box-shadow: 0 24px 64px rgba(0,0,0,0.25);
animation: gs-enter 0.18s ease;
}
@keyframes gs-enter {
from { opacity: 0; transform: translateY(-12px) scale(0.98); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.gs-input-wrap {
display: flex;
align-items: center;
gap: 10px;
padding: 14px 16px;
border-bottom: 1px solid var(--dp-border);
}
.gs-input-icon { color: var(--dp-muted); font-size: 14px; flex-shrink: 0; }
.gs-input {
flex: 1;
background: transparent;
border: none;
outline: none;
color: var(--dp-text);
font-size: 16px;
font-family: inherit;
}
.gs-input::placeholder { color: var(--dp-muted); }
.gs-close-btn {
background: transparent;
border: 1px solid var(--dp-border);
color: var(--dp-muted);
border-radius: 6px;
padding: 2px 8px;
font-size: 11px;
cursor: pointer;
flex-shrink: 0;
font-family: monospace;
transition: background 0.15s;
}
.gs-close-btn:hover { background: var(--dp-hover); color: var(--dp-text); }
.gs-results { max-height: 380px; overflow-y: auto; padding: 6px; }
.gs-section-label {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--dp-muted);
padding: 8px 10px 4px;
}
.gs-item {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 10px;
border-radius: 8px;
color: var(--dp-text-md);
text-decoration: none;
font-size: 13.5px;
transition: background 0.15s;
cursor: pointer;
outline: none;
}
.gs-item:hover, .gs-item.gs-selected { background: var(--dp-hover); color: var(--dp-text); text-decoration: none; }
.gs-item:focus-visible { box-shadow: 0 0 0 2px rgba(37,99,235,0.3); }
.gs-item-icon {
width: 32px; height: 32px;
border-radius: 8px;
background: rgba(37,99,235,0.10);
color: var(--agf-azul,#2563EB);
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
flex-shrink: 0;
}
.gs-item-label { flex: 1; font-weight: 500; color: var(--dp-text); }
.gs-item-section { font-size: 11px; color: var(--dp-muted); font-weight: 400; }
.gs-empty {
text-align: center;
padding: 36px 20px;
color: var(--dp-muted);
font-size: 14px;
}
.gs-empty i { font-size: 28px; margin-bottom: 8px; opacity: 0.35; display: block; }
.gs-footer {
padding: 10px 14px;
border-top: 1px solid var(--dp-border);
background: var(--dp-bg-alt);
display: flex;
gap: 14px;
font-size: 11px;
color: var(--dp-muted);
align-items: center;
}
.gs-footer kbd {
padding: 2px 5px;
border-radius: 4px;
border: 1px solid var(--dp-border);
background: rgba(0,0,0,0.04);
font-family: monospace;
font-size: 10px;
color: var(--dp-muted);
}
.gs-footer-hint { display: flex; align-items: center; gap: 4px; }
.gs-mais-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 40px; padding: 8px 14px; border: 0; border-top: 1px solid var(--dp-border); background: transparent; color: var(--dp-muted); font-size: 12px; cursor: pointer; }
.gs-mais-btn[hidden] { display: none; }
.gs-mais-btn:hover, .gs-mais-btn:focus-visible { color: var(--sb-accent); background: var(--dp-bg-alt); outline: none; }
.gs-mais-btn kbd { padding: 2px 5px; border-radius: 4px; border: 1px solid var(--dp-border); font-family: monospace; font-size: 10px; }
/* Highlight na busca */
mark.sb-hl {
background: rgba(var(--sb-accent-rgb),0.2);
color: var(--sb-accent);
border-radius: 2px;
padding: 0 1px;
font-style: normal;
}
/* =============================================================================
CONTEÚDO PRINCIPAL
============================================================================= */
.main-content {
flex: 1;
padding: 20px;
}
/* Integrações com ação necessária — aviso operacional compacto e neutro. */
.integration-status-alert {
display: grid;
grid-template-columns: 36px minmax(0, 1fr) auto;
align-items: center;
gap: 11px;
min-height: 58px;
margin: 0 0 14px;
padding: 10px 12px;
background: #fff;
border: 1px solid rgba(15, 23, 42, .09);
border-left: 3px solid #f97316;
border-radius: 12px;
box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.integration-status-alert__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 9px;
background: #fff7ed;
color: #ea580c;
font-size: 15px;
}
.integration-status-alert__copy { min-width: 0; line-height: 1.35; }
.integration-status-alert__title {
display: block;
margin-bottom: 1px;
color: #1e293b;
font-size: 12.5px;
font-weight: 700;
}
.integration-status-alert__detail {
display: block;
color: #64748b;
font-size: 11.5px;
}
.integration-status-alert__detail--mobile { display: none; }
.integration-status-alert__action {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
height: 34px;
padding: 0 12px;
border: 1px solid #fed7aa;
border-radius: 8px;
background: #fff7ed;
color: #c2410c;
font-size: 11.5px;
font-weight: 700;
text-decoration: none !important;
white-space: nowrap;
transition: background .14s, border-color .14s, color .14s;
}
.integration-status-alert__action:hover {
background: #ffedd5;
border-color: #fdba74;
color: #9a3412;
}
.app-footer {
padding: 12px 20px;
border-top: 1px solid var(--dp-border);
display: flex;
align-items: center;
justify-content: space-between;
font-size: 12px;
color: var(--dp-muted);
background: var(--dp-bg-alt);
flex-shrink: 0;
}
/* =============================================================================
RESPONSIVIDADE
============================================================================= */
/* Tablet: sidebar retraída por padrão */
@media (max-width: 1200px) and (min-width: 769px) {
.sidebar:not(.sidebar--force-expanded) { width: var(--sb-width-collapsed); }
.sidebar:not(.sidebar--force-expanded) .sb-brand-text,
.sidebar:not(.sidebar--force-expanded) .sb-section-title,
.sidebar:not(.sidebar--force-expanded) .sb-item-text,
.sidebar:not(.sidebar--force-expanded) .sb-item-chevron {
opacity: 0; pointer-events: none; overflow: hidden; max-width: 0;
}
.sidebar:not(.sidebar--force-expanded) ~ .main-wrapper { margin-left: var(--sb-width-collapsed); }
/* hdr-search-btn movido para sidebar — sem regras aqui */
}
/* Tablet landscape: comportamento de drawer (igual ao mobile) — sem empurrar conteúdo */
@media (max-width: 1200px) and (min-width: 769px) and (orientation: landscape) {
.sidebar {
transform: translateX(-100%);
width: var(--sb-width) !important;
transition: transform var(--sb-transition);
z-index: 1000;
}
/* transform: none, não translateX(0): com transform a lateral vira a referência do submenu (position:fixed) e o overflow dela o corta:
no tablet deitado o submenu abria invisível (André, 02/11/2026). */
.sidebar--mobile-open {
transform: none;
z-index: 1001;
}
.main-wrapper { margin-left: 0 !important; }
.hdr-mobile-toggle { display: flex !important; }
#sb-toggle { display: none !important; }
/* Garante que textos aparecem quando aberto em landscape */
.sidebar--mobile-open .sb-brand-text,
.sidebar--mobile-open .sb-section-title,
.sidebar--mobile-open .sb-item-text,
.sidebar--mobile-open .sb-item-chevron {
opacity: 1 !important;
max-width: 999px !important;
overflow: visible !important;
pointer-events: auto !important;
}
}
/* Mobile: drawer */
@media (max-width: 768px) {
.sidebar {
transform: translateX(-100%);
width: var(--sb-width) !important;
transition: transform var(--sb-transition);
/* Fechada: z-index baixo para não bloquear dropdowns do header */
z-index: 90;
}
/* Aberta: z-index alto para cobrir o conteúdo */
.sidebar--mobile-open { transform: translateX(0); z-index: 1001; }
/* Header fica acima da sidebar fechada (90), abaixo do overlay (999) */
.app-header { z-index: 990; /* 23/10: acima de qualquer controle da página (select, chips) para o menu do perfil não ficar atrás; abaixo do overlay (999) */ }
.main-wrapper { margin-left: 0 !important; }
.hdr-mobile-toggle { display: flex !important; }
/* Nav buttons: texto já oculto via .btn-os-label; em ≤640px são removidos totalmente */
.btn-os-label { display: none; }
/* PDV: vira só ícone — o texto "PDV" não tem classe, seleciona diretamente */
#btn-abrir-pdv-global > span { display: none; }
#btn-abrir-pdv-global { padding: 6px 8px; }
/* Robô: remove texto, mantém ícone + LED de status */
.btn-robo-label { display: none; }
#btn-toggle-robo { padding: 6px 8px; }
/* Busca Rápida: vira ícone quadrado */
.hdr-br-btn {
min-width: 0 !important;
width: 36px;
height: 36px;
padding: 0;
justify-content: center;
}
.hdr-br-btn .hdr-br-text,
.hdr-br-btn .hdr-br-kbd { display: none; }
.hdr-user-name { display: none; }
.hdr-breadcrumb { display: none; }
/* Uniformizar todos os botões do header — mesma altura 36px */
.hdr-action-btn,
.hdr-user-btn,
.hdr-br-btn,
#btn-toggle-robo,
#btn-abrir-pdv-global { height: 36px !important; box-sizing: border-box !important; }
/* Remover borda e fundo especial do bolt no mobile — fica igual aos outros ícones */
.hdr-br-btn {
border: none !important;
background: transparent !important;
color: var(--hdr-text) !important;
padding: 0 !important;
width: 36px !important;
}
/* Usuário: sem padding extra, sem chevron */
.hdr-user-btn { padding: 0 4px !important; }
.hdr-user-avatar { width: 28px !important; height: 28px !important; font-size: 12px !important; }
#hdr-user-btn .fa-chevron-down { display: none; }
/* Robô: sem padding excessivo */
#btn-toggle-robo { padding: 0 8px !important; }
/* PDV: sem padding excessivo */
/* Header mobile: tira SÓ o tema escuro (não faz sentido no celular) e compacta tudo o resto.
Os atalhos (Nova OS, Lista OS, Recebimento, PIX) são úteis no balcão → mantidos.
PDV encosta na busca; gaps e paddings mínimos para tudo caber numa linha. */
#btn-dark-toggle { display: none !important; }
/* Header bem compacto no celular para caber TODOS os ícones numa linha (lupa, PDV, Nova OS,
Lista OS, Recebimento, notificações, PIX, atendimento, robô, avatar). */
.app-header { padding: 0 5px !important; gap: 4px !important; }
.hdr-mobile-toggle { width: 32px !important; height: 32px !important; }
/* PDV (esquerda, ao lado do menu) compacto */
#btn-abrir-pdv-global { margin-left: 0 !important; padding: 0 6px !important; }
/* Atalhos (Nova OS, Lista OS) e ícones de ação: bem estreitos para caber TODOS */
.hdr-nav-btn { padding: 0 3px !important; height: 34px !important; box-sizing: border-box !important; }
.hdr-action-btn { padding: 0 3px !important; }
#btn-toggle-robo { padding: 0 3px !important; }
/* Lupa enxuta — era larga e sobrava espaço à direita dela */
.hdr-br-btn { width: 28px !important; }
/* O grupo de ações é empurrado para a direita (margin-left:auto). Com os ícones enxutos,
sobra espaço → o auto vira o respiro entre o PDV e a lupa, e o avatar encosta na direita.
Em telas muito estreitas a barra desliza (overflow-x) sem cortar o avatar. */
.hdr-actions {
margin-left: auto !important;
gap: 2px !important;
flex: 0 1 auto !important;
min-width: 0 !important;
overflow-x: auto;
flex-wrap: nowrap !important;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.hdr-actions::-webkit-scrollbar { display: none; }
.hdr-actions > * { flex-shrink: 0; }
/* Conteúdo: padding reduzido, sem overflow lateral */
.main-content { padding: 8px 8px 16px !important; }
.integration-status-alert {
grid-template-columns: 32px minmax(0, 1fr) auto;
gap: 8px;
min-height: 54px;
margin-bottom: 10px;
padding: 8px 9px;
border-radius: 10px;
}
.integration-status-alert__icon {
width: 32px;
height: 32px;
border-radius: 8px;
font-size: 14px;
}
.integration-status-alert__title { font-size: 11.5px; }
.integration-status-alert__detail { display: none; }
.integration-status-alert__detail--mobile {
display: block;
color: #64748b;
font-size: 10.5px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.integration-status-alert__action {
height: 32px;
padding: 0 9px;
font-size: 10.5px;
}
body { overflow-x: hidden; }
.main-wrapper { max-width: 100vw; overflow-x: hidden; }
.hdr-notif-menu { width: calc(100vw - 32px); }
/* Dropdown de usuário não vaza para fora do viewport */
.hdr-user-menu { width: min(220px, calc(100vw - 24px)); right: 0; }
}
/* Garante que textos aparecem quando o drawer está aberto (≤768px),
mesmo que sidebar--collapsed esteja presente */
@media (max-width: 768px) {
.sidebar--mobile-open .sb-brand-text,
.sidebar--mobile-open .sb-section-title,
.sidebar--mobile-open .sb-item-text,
.sidebar--mobile-open .sb-item-chevron {
opacity: 1 !important;
max-width: 999px !important;
overflow: visible !important;
pointer-events: auto !important;
}
.sidebar--mobile-open .sb-submenu { /* fly-out controlled by JS */ }
.sidebar--mobile-open .sb-badge {
position: static !important;
width: auto !important; min-width: 20px !important;
height: 20px !important; font-size: 10px !important;
border-radius: 10px !important; padding: 0 5px !important;
}
}
/* Mobile: sidebar aberta permite que o submenu fly-out apareça além dos limites da sidebar.
Sem isso, o overflow:hidden da sidebar corta o submenu (position:fixed dentro de
um ancestor com transform cria um containing block, e overflow:hidden o recorta). */
@media (max-width: 768px) {
.sidebar--mobile-open { overflow: visible !important; }
}
/* Mobile ≤ 480px: notificações em fixed para nunca vazar pelo lado esquerdo */
@media (max-width: 480px) {
.hdr-notif-menu {
position: fixed;
top: calc(var(--hdr-height) + 4px);
left: 16px;
right: 16px;
width: auto;
max-width: none;
}
}
/* Lista OS — só ícone até tablet portrait; texto visível em tablet landscape+ (≥1024px) */
@media (max-width: 1023px) {
#hdr-btn-lista-os .btn-os-label { display: none !important; }
}
/* Tablet portrait (769–1023px): atalhos do header só com ícone e sem o nome do usuário, senão o grupo
de ações passa de 900px e empurra a página 140px pra direita (scroll horizontal). */
@media (max-width: 1023px) and (min-width: 769px) {
#hdr-btn-nova-os .btn-os-label,
#hdr-btn-produtos .btn-os-label,
#hdr-btn-recebimento-rapido .btn-os-label,
.hdr-user-name { display: none !important; }
.hdr-actions { min-width: 0; }
}
/* Celular DEITADO (769-1023 de largura, altura baixa): a dica "Ctrl+B" da busca (atalho de teclado, inútil no toque)
fazia o grupo de ações passar ~49px da tela (scrollWidth 893 em 844) e dar rolagem horizontal em todas as telas. */
@media (max-width: 1023px) and (min-width: 769px) and (max-height: 500px) {
.hdr-br-btn .hdr-br-kbd { display: none; }
}
/* Mobile ≤ 768px: header overflow corrigido */
@media (max-width: 768px) {
.app-header { overflow: hidden; max-width: 100vw; }
}
/* Mobile ≤ 640px: ocultar só Produtos do header (está na sidebar). O Recebimento Rápido
fica visível, espremido ao lado do PIX (André usa muito no balcão). */
@media (max-width: 640px) {
#hdr-btn-produtos { display: none !important; }
}
/* Lista OS permanece visível no celular (André usa muito no balcão).
Fica só com o ícone (label oculto via regra ≤1023px). */
/* Mobile ≤ 640px (regra original mantida para outros elementos) */
@media (max-width: 640px) {
/* PDV: texto visível, mas enxuto para sobrar espaço aos ícones */
#btn-abrir-pdv-global > span { display: inline !important; font-size: 12px !important; }
#btn-abrir-pdv-global { padding: 0 9px !important; gap: 4px !important; min-width: 0 !important; }
/* Nova OS e Lista OS: ícones limpos, sem borda, iguais aos demais (sino, QR, robô).
Antes a Nova OS tinha borda tracejada (invisível no header claro) e a Lista OS uma
borda sólida que destoava — removidas para um header uniforme. */
#hdr-btn-nova-os,
#hdr-btn-lista-os,
#hdr-btn-recebimento-rapido {
border: none !important;
background: transparent !important;
min-width: 0 !important;
justify-content: center !important;
padding: 0 5px !important;
}
/* Recebimento no celular: só o ícone (o label "Recebimento" é largo demais) */
#hdr-btn-recebimento-rapido .btn-os-label { display: none !important; }
/* Mostrar painel mobile na sidebar */
.sb-mob-panel { display: block; }
.sb-mob-sep { display: block; }
}
/* Telas muito pequenas: PDV volta a ícone para garantir que tudo cabe */
@media (max-width: 390px) {
#btn-abrir-pdv-global > span { display: none !important; }
#btn-abrir-pdv-global { min-width: 36px !important; padding: 0 8px !important; }
#hdr-btn-nova-os { min-width: 36px !important; padding: 0 8px !important; }
}
/* ============================================================
PAINEL MOBILE DA SIDEBAR (atalhos do header)
============================================================ */
.sb-mob-panel {
display: none; /* visível só em ≤640px via media query acima */
padding: 12px 12px 0;
}
/* Linha do usuário */
.sb-mob-user {
display: flex;
align-items: center;
gap: 10px;
background: rgba(255,255,255,0.07);
border-radius: 10px;
padding: 10px 12px;
margin-bottom: 10px;
}
.sb-mob-av {
width: 34px; height: 34px;
border-radius: 50%;
background: var(--sb-accent);
display: flex; align-items: center; justify-content: center;
font-size: 14px; font-weight: 700; color: #fff;
flex-shrink: 0;
border: 2px solid rgba(255,255,255,0.25);
}
.sb-mob-uinfo { flex: 1; min-width: 0; }
.sb-mob-uname {
display: block; font-size: 13px; font-weight: 600;
color: var(--sb-text-primary); white-space: nowrap;
overflow: hidden; text-overflow: ellipsis;
}
.sb-mob-urole {
display: block; font-size: 11px;
color: var(--sb-text-muted);
}
.sb-mob-logout {
width: 32px; height: 32px;
border-radius: 7px;
background: rgba(239,68,68,.15);
color: #ef4444;
display: flex; align-items: center; justify-content: center;
font-size: 14px; text-decoration: none;
flex-shrink: 0;
transition: background .15s;
}
.sb-mob-logout:hover { background: rgba(239,68,68,.30); }
/* Grade de atalhos rápidos */
.sb-mob-btns {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 6px;
margin-bottom: 10px;
}
.sb-mob-btn {
display: flex; flex-direction: column;
align-items: center; justify-content: center;
gap: 4px;
padding: 9px 4px 8px;
border-radius: 10px;
background: rgba(255,255,255,0.07);
color: var(--sb-text-primary);
font-size: 10px; font-weight: 600;
text-decoration: none;
border: 1px solid rgba(255,255,255,0.10);
cursor: pointer;
font-family: inherit;
transition: background .15s;
position: relative;
}
.sb-mob-btn i { font-size: 16px; }
.sb-mob-btn:hover { background: rgba(255,255,255,0.14); }
/* LED do robô dentro do botão */
.sb-mob-led {
position: absolute; top: 6px; right: 7px;
width: 7px; height: 7px;
border-radius: 50%;
}
/* Badge de notificações */
.sb-mob-badge {
position: absolute; top: 5px; right: 6px;
background: var(--sb-accent);
color: #fff; font-size: 9px; font-weight: 700;
min-width: 16px; height: 16px;
border-radius: 8px;
display: flex; align-items: center; justify-content: center;
padding: 0 3px;
}
/* Robô ativo: destaque verde */
.sb-mob-robo[data-ativo="1"] {
background: rgba(34,197,94,.15);
border-color: rgba(34,197,94,.35);
color: #4ade80;
}
/* Separador entre painel mobile e nav */
.sb-mob-sep {
display: none;
height: 1px;
background: rgba(255,255,255,0.10);
margin: 0 12px 8px;
}
/* =============================================================================
BUSCA NA SIDEBAR (Ctrl+K)
============================================================================= */
.sb-search-wrap {
padding: 10px 12px 6px;
flex-shrink: 0;
}
.sb-search-btn {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
padding: 8px 12px;
border-radius: 8px;
border: 1px solid var(--sb-border);
background: rgba(255,255,255,0.05);
color: var(--sb-text); /* texto legível em qualquer tema (muted ficava escuro no azul) */
font-size: 13px;
cursor: pointer;
transition: background 0.18s, border-color 0.18s;
white-space: nowrap;
font-family: inherit;
text-align: left;
}
.sb-search-btn:hover {
background: var(--sb-hover-bg);
border-color: var(--sb-accent, #2563eb);
color: var(--sb-text); /* mantém legível no hover (text-hover ficava escuro no azul) */
}
.sb-search-icon { color: var(--sb-accent, #2563eb); font-size: 12px; flex-shrink: 0; }
.sb-search-text { flex: 1; opacity: 0.78; }
.sb-search-kbd {
font-size: 10px;
padding: 2px 5px;
border-radius: 4px;
border: 1px solid var(--sb-border);
background: rgba(255,255,255,0.08);
font-family: monospace;
opacity: 0.55;
flex-shrink: 0;
}
/* Sidebar colapsada: mostra só o ícone */
.sidebar--collapsed .sb-search-text,
.sidebar--collapsed .sb-search-kbd { display: none; }
.sidebar--collapsed .sb-search-btn { justify-content: center; padding: 8px; }
.sidebar--collapsed .sb-search-wrap { padding: 10px 8px 6px; }
/* Tema light: ajusta cores */
body[data-sb-theme="light"] .sb-search-btn,
body[data-sb-theme="dark"] .sb-search-btn, /* AGF-CLARO */
body[data-sb-theme="classico"] .sb-search-btn,
body[data-sb-theme="corporate-light"] .sb-search-btn,
body[data-sb-theme="minimal-white"] .sb-search-btn {
background: rgba(0,0,0,0.04);
color: #475569;
}
body[data-sb-theme="light"] .sb-search-btn:hover,
body[data-sb-theme="dark"] .sb-search-btn:hover,
body[data-sb-theme="classico"] .sb-search-btn:hover,
body[data-sb-theme="corporate-light"] .sb-search-btn:hover,
body[data-sb-theme="minimal-white"] .sb-search-btn:hover {
background: rgba(0,0,0,0.08);
}
/* =============================================================================
BUSCA RÁPIDA — botão no header (estilo fake-input integrado)
============================================================================= */
.hdr-br-btn {
display: flex;
align-items: center;
gap: 7px;
padding: 0 10px;
height: 36px;
box-sizing: border-box;
border-radius: 8px;
border: 1px solid var(--hdr-border);
background: rgba(255,255,255,0.06);
color: var(--hdr-text);
font-size: 12.5px;
font-weight: 400;
cursor: pointer;
transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
white-space: nowrap;
flex-shrink: 0;
font-family: inherit;
line-height: 1;
min-width: 190px;
justify-content: space-between;
}
.hdr-br-btn:hover {
background: var(--hdr-hover);
border-color: rgba(255,255,255,0.15);
box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
}
/* ícone lupa — levemente opaco */
.hdr-br-icon {
opacity: 0.5;
font-size: 14px;
flex-shrink: 0;
/* Lupa espelhada: cabo apontando para a direita (combina melhor no header) */
transform: scaleX(-1);
/* Empurra um pouquinho para a direita (não é afetado pelo scaleX) */
margin-left: 4px;
}
/* texto placeholder — bem muted */
.hdr-br-text {
flex: 1;
text-align: left;
opacity: 0.4;
font-size: 12.5px;
pointer-events: none;
}
.hdr-br-kbd {
font-size: 10px;
padding: 2px 6px;
border-radius: 4px;
border: 1px solid var(--hdr-border);
background: rgba(255,255,255,0.06);
font-family: monospace;
color: var(--hdr-text);
opacity: 0.5;
flex-shrink: 0;
}
/* Desktop largo: busca bem mais larga */
@media (min-width: 1400px) {
.hdr-br-btn { min-width: 300px; }
}
@media (min-width: 1600px) {
.hdr-br-btn { min-width: 360px; }
}
/* Tablet: esconde texto placeholder, mantém ícone + kbd */
@media (max-width: 1200px) and (min-width: 769px) {
.hdr-br-btn .hdr-br-text { display: none; }
.hdr-br-btn { padding: 0 10px; min-width: 0; }
}
/* =============================================================================
BUSCA RÁPIDA — modal
============================================================================= */
.br-modal {
display: none;
position: fixed;
inset: 0;
z-index: 2100;
align-items: flex-start;
justify-content: center;
padding-top: 8vh;
background: rgba(0,0,0,0.68);
}
.br-modal--open { display: flex; }
.br-box {
width: 100%;
max-width: 680px;
margin: 0 16px;
background: var(--dp-bg);
border: 1px solid var(--dp-border);
border-radius: 14px;
overflow: hidden;
box-shadow: 0 24px 64px rgba(0,0,0,0.22), 0 0 0 1px rgba(37,99,235,0.08);
animation: br-enter 0.18s cubic-bezier(0.34,1.56,0.64,1);
max-height: 80vh;
display: flex;
flex-direction: column;
border-top: 2.5px solid var(--dp-accent);
}
@keyframes br-enter {
from { opacity: 0; transform: translateY(-18px) scale(0.96); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.br-input-wrap {
display: flex;
align-items: center;
gap: 12px;
padding: 16px 20px;
border-bottom: 1px solid var(--dp-border);
flex-shrink: 0;
}
.br-input-icon { color: var(--dp-accent); font-size: 16px; flex-shrink: 0; opacity: 0.7; }
.br-input {
flex: 1;
background: transparent;
border: none;
outline: none;
color: var(--dp-text);
font-size: 17px;
font-family: inherit;
}
.br-input::placeholder { color: var(--dp-muted); }
.br-close-btn {
background: transparent;
border: 1px solid var(--dp-border);
color: var(--dp-muted);
border-radius: 6px;
padding: 3px 9px;
font-size: 11px;
cursor: pointer;
flex-shrink: 0;
font-family: monospace;
transition: background 0.15s, color 0.15s;
}
.br-close-btn:hover { background: var(--dp-hover); color: var(--dp-text); }
.br-results {
flex: 1;
overflow-y: auto;
padding: 6px;
scrollbar-width: thin;
scrollbar-color: rgba(0,0,0,0.10) transparent;
}
.br-results::-webkit-scrollbar { width: 4px; }
.br-results::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.10); border-radius: 4px; }
.br-section-label {
display: flex;
align-items: center;
gap: 6px;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--dp-muted);
padding: 10px 12px 4px;
}
.br-count {
background: var(--dp-hover);
color: var(--dp-muted);
padding: 1px 7px;
border-radius: 10px;
font-size: 10px;
font-weight: 600;
}
.br-count-alerta {
background: rgba(220, 38, 38, 0.12);
color: #dc2626;
padding: 1px 7px;
border-radius: 10px;
font-size: 10px;
font-weight: 700;
}
.br-count-avencer {
background: rgba(217, 119, 6, 0.12);
color: #b45309;
padding: 1px 7px;
border-radius: 10px;
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
}
.br-count-alerta { text-transform: uppercase; }
.br-meta-venc { color: #dc2626; font-weight: 500; }
.br-meta-avenc { color: #b45309; font-weight: 500; }
.br-item {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 12px;
border-radius: 10px;
text-decoration: none;
transition: background 0.15s;
cursor: pointer;
}
.br-item:hover { background: var(--dp-hover); text-decoration: none; }
.br-item-icon {
width: 36px; height: 36px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
flex-shrink: 0;
}
.br-item-body { flex: 1; min-width: 0; }
.br-item-title {
font-size: 13.5px;
font-weight: 500;
color: var(--dp-text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.br-item-meta {
font-size: 12px;
color: var(--dp-muted);
margin-top: 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.br-item-arrow {
font-size: 11px;
color: var(--dp-muted);
flex-shrink: 0;
opacity: 0;
transition: opacity 0.15s, transform 0.15s;
}
.br-item:hover .br-item-arrow { opacity: 1; transform: translateX(2px); }
/* Linha de resultado com ação extra (ex.: botão "Pagar" ao lado de "Ver cadastro") —
não aninha , então o item principal e o botão viram 2 links num flex. */
.br-item-row {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 2px;
}
.br-item-row .br-item { flex: 1; min-width: 0; }
.br-item-pagar {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
min-width: 196px; /* largura única p/ todos os botões (o valor varia: R$ 33,00 ... R$ 12.345,67) */
padding: 9px 16px;
margin-right: 6px;
border-radius: 9px;
font-size: 12.5px;
font-weight: 700;
color: #fff;
background: #16a34a;
border: 1px solid #15803d;
text-decoration: none;
white-space: nowrap;
flex-shrink: 0;
transition: background 0.15s, color 0.15s;
}
.br-item-pagar:hover { background: #15803d; color: #fff; text-decoration: none; }
/* Celular: nome/valor ocupam a linha toda; "Pagar" desce para uma linha própria (antes espremia o nome: "BUS…") */
@media (max-width: 560px) {
.br-item-row { flex-direction: column; align-items: stretch; gap: 0; margin-bottom: 6px; }
.br-item-pagar { min-width: 0; margin: 0 12px 4px 58px; padding: 10px 14px; }
}
.br-section-label { flex-wrap: wrap; }
.br-count, .br-count-alerta, .br-count-avencer { white-space: nowrap; }
/* Foco: clique de mouse não desenha contorno preto; teclado ganha anel discreto verde */
.br-item-pagar:focus, .br-item:focus { outline: none; }
.br-item-pagar:focus-visible { outline: 2px solid rgba(22,163,74,.55); outline-offset: 2px; }
.br-item:focus-visible { outline: 2px solid rgba(99,102,241,.45); outline-offset: -2px; }
/* Tema escuro: selos/metas/realce legíveis (vermelho/âmbar claros sobre fundo escuro) */
html.dark-mode .br-count-alerta { background: rgba(248,113,113,.16); color: #fca5a5; }
html.dark-mode .br-count-avencer { background: rgba(251,191,36,.14); color: #fcd34d; }
html.dark-mode .br-meta-venc { color: #f87171; }
html.dark-mode .br-meta-avenc { color: #fbbf24; }
html.dark-mode mark.br-hl { background: rgba(96,165,250,.22); color: #bfdbfe; }
.br-empty {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
padding: 40px 20px;
color: var(--dp-muted);
font-size: 14px;
text-align: center;
}
.br-empty i { font-size: 32px; opacity: 0.3; }
.br-footer {
padding: 10px 16px;
border-top: 1px solid var(--dp-border);
background: var(--dp-bg-alt);
display: flex;
gap: 16px;
font-size: 11px;
color: var(--dp-muted);
flex-shrink: 0;
align-items: center;
}
.br-footer kbd {
padding: 2px 5px;
border-radius: 4px;
border: 1px solid var(--dp-border);
background: rgba(0,0,0,0.04);
font-family: monospace;
font-size: 10px;
color: var(--dp-muted);
}
.br-footer-hint { display: flex; align-items: center; gap: 4px; }
mark.br-hl {
background: rgba(37,99,235,0.12);
color: var(--agf-azul-hover,#1D4ED8);
border-radius: 2px;
padding: 0 1px;
font-style: normal;
}
/* =============================================================================
UTILITÁRIOS
============================================================================= */
.sb-divider { height: 1px; background: var(--sb-border); margin: 4px 0; }
/* =============================================================================
BOTÃO DE PREFERÊNCIA DE ESTADO (footer)
============================================================================= */
#sb-default-pref-btn {
width: 100%;
border-radius: 8px;
padding: 7px 10px;
gap: 8px;
font-size: 12.5px;
margin: 0;
color: var(--sb-text-muted);
transition: background 0.18s, color 0.18s;
}
#sb-default-pref-btn:hover {
background: var(--sb-bg-hover);
color: var(--sb-text);
}
/* Estado "fixado" */
#sb-default-pref-btn.sb-pref--pinned {
color: var(--sb-accent);
background: var(--sb-bg-active);
}
#sb-default-pref-btn.sb-pref--pinned .fa-thumbtack {
transform: rotate(-45deg);
color: var(--sb-accent);
}
/* Estado "auto" */
#sb-default-pref-btn .fa-thumbtack {
transition: transform 0.25s, color 0.18s;
transform: rotate(0deg);
}
/* Pill de status */
.sb-pref-pill {
margin-left: auto;
font-size: 10px;
font-weight: 700;
padding: 2px 7px;
border-radius: 8px;
background: rgba(255,255,255,0.08);
color: var(--sb-text-muted);
letter-spacing: 0.03em;
flex-shrink: 0;
transition: background 0.18s, color 0.18s;
}
#sb-default-pref-btn.sb-pref--pinned .sb-pref-pill {
background: rgba(var(--sb-accent-rgb), 0.15);
color: var(--sb-accent);
}
/* Sidebar colapsada: oculta o texto, mostra só ícone */
.sidebar--collapsed #sb-default-pref-btn .sb-item-text,
.sidebar--collapsed #sb-default-pref-btn .sb-pref-pill { display: none; }
.sidebar--collapsed #sb-default-pref-btn { justify-content: center; padding: 7px; }
/* =============================================================================
PDV — SIDEBAR COMO DRAWER (abre pelo hamburguer, sem empurrar conteúdo)
============================================================================= */
/* Sidebar escondida fora da tela quando em página PDV */
body.pdv-layout #sidebar {
/* Item 32: era display:block, o que quebrava o flex e impedia o .sb-nav de rolar
(a lista só mostrava o que cabia). Flex column + altura cheia faz o .sb-nav rolar. */
display: flex !important;
flex-direction: column !important;
transform: translateX(-100%);
transition: transform 0.28s cubic-bezier(.4,0,.2,1);
position: fixed;
top: 0; left: 0; bottom: 0;
height: calc(var(--real-vh, 1vh) * 100);
z-index: 10000;
width: var(--sb-width) !important;
box-shadow: none;
overflow: hidden;
}
body.pdv-layout .main-wrapper { margin-left: 0 !important; }
body.pdv-layout #sb-toggle { display: none !important; }
body.pdv-layout #sb-overlay { display: none; }
/* Quando hamburguer ativa: sidebar desliza para dentro */
body.pdv-sb-open #sidebar {
transform: translateX(0);
box-shadow: 4px 0 32px rgba(0,0,0,.45);
}
/* Backdrop semi-transparente quando sidebar está aberta no PDV */
body.pdv-layout #pdv-sb-backdrop {
display: none;
position: fixed;
inset: 0;
z-index: 9999;
background: rgba(0,0,0,.45);
}
body.pdv-sb-open #pdv-sb-backdrop { display: block; }
/* Textos e submenus aparecem quando drawer está aberto */
body.pdv-sb-open #sidebar .sb-brand-text,
body.pdv-sb-open #sidebar .sb-section-title,
body.pdv-sb-open #sidebar .sb-item-text,
body.pdv-sb-open #sidebar .sb-item-chevron {
opacity: 1 !important;
max-width: 999px !important;
overflow: visible !important;
pointer-events: auto !important;
}
/* Garante que submenus funcionem no drawer — sobrescreve o display:none do sidebar--collapsed */
body.pdv-sb-open #sidebar .sb-submenu { display: block !important; }
body.pdv-sb-open #sidebar .sb-nav { overflow-y: auto !important; overflow-x: hidden !important; }
/* =============================================================================
AGF-CLARO-EXTRA 07/10/2026 - botões do header (Nova OS, Lista OS, Produtos, Recebimento e os ícones)
com fundo índigo bem suave em vez de transparente; robô em pílula clara mantendo o verde/âmbar/vermelho.
O !important vence o style="background:transparent" inline dos .hdr-nav-btn.
============================================================================= */
body[data-sb-theme="dark"] .hdr-nav-btn,
body[data-sb-theme="classico"] .hdr-nav-btn {
background: #eef2ff !important;
color: #4338ca !important;
border: 1px solid #e0e7ff !important;
}
body[data-sb-theme="dark"] .hdr-nav-btn:hover,
body[data-sb-theme="classico"] .hdr-nav-btn:hover {
background: #e0e7ff !important;
}
/* Ícones soltos (inbox, headset, notificações, QR, robô, lua): sem fundo/borda/círculo; os 4 atalhos ficam juntos. */
body[data-sb-theme="dark"] .hdr-action-btn,
body[data-sb-theme="classico"] .hdr-action-btn,
body[data-sb-theme="dark"] #btn-toggle-robo,
body[data-sb-theme="classico"] #btn-toggle-robo,
body[data-sb-theme="dark"] #btn-dark-toggle,
body[data-sb-theme="classico"] #btn-dark-toggle {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
border-radius: 8px;
}
body[data-sb-theme="dark"] .hdr-action-btn:hover,
body[data-sb-theme="classico"] .hdr-action-btn:hover,
body[data-sb-theme="dark"] #btn-toggle-robo:hover,
body[data-sb-theme="classico"] #btn-toggle-robo:hover,
body[data-sb-theme="dark"] #btn-dark-toggle:hover,
body[data-sb-theme="classico"] #btn-dark-toggle:hover { background: rgba(99,102,241,.10) !important; color: #4338ca; }
body[data-sb-theme="dark"] .hdr-actions,
body[data-sb-theme="classico"] .hdr-actions { gap: 4px; }
/* AGF-LOGO 07/10/2026 - logo cortada/sombra cortada na sidebar clara: o link da marca tinha overflow:hidden e,
recolhida, o gap de 10px do texto escondido empurrava a logo para fora da caixa de 40px. */
body[data-sb-theme="dark"] .sb-brand-link,
body[data-sb-theme="classico"] .sb-brand-link { overflow: visible; }
body[data-sb-theme="dark"] .sidebar--collapsed .sb-brand-link,
body[data-sb-theme="classico"] .sidebar--collapsed .sb-brand-link { gap: 0; }
body[data-sb-theme="dark"] .sb-brand-logo,
body[data-sb-theme="classico"] .sb-brand-logo { box-shadow: 0 1px 6px rgba(15,23,42,.22); }
/* AGF-SUAVE 07/10/2026 - contadores vermelhos (header e sidebar) mais suaves: rosa-avermelhado menos saturado,
sem o "pulo" de escala; só um respirar leve de opacidade. Para voltar: apagar este bloco. */
.hdr-badge, .sb-badge {
background: #f87171;
box-shadow: none;
animation: sb-pulse-suave 4s ease-in-out infinite;
}
.hdr-badge { min-width: 16px; height: 16px; font-size: 9.5px; font-weight: 600; }
@keyframes sb-pulse-suave {
0%, 100% { opacity: 1; }
50% { opacity: .72; }
}
@media (prefers-reduced-motion: reduce) { .hdr-badge, .sb-badge { animation: none; } }
/* AGF-HDR-COR 07/10/2026 - header claro: ícones/nome sem o preto pesado (índigo suave/cinza-azulado) e PDV com degradê.
REVERTER: apagar este bloco. */
body[data-sb-theme="dark"] .hdr-action-btn:not(#btn-toggle-robo),
body[data-sb-theme="classico"] .hdr-action-btn:not(#btn-toggle-robo),
body[data-sb-theme="dark"] #btn-dark-toggle,
body[data-sb-theme="classico"] #btn-dark-toggle { color: #6b73c9 !important; }
body[data-sb-theme="dark"] .hdr-action-btn:not(#btn-toggle-robo):hover,
body[data-sb-theme="classico"] .hdr-action-btn:not(#btn-toggle-robo):hover,
body[data-sb-theme="dark"] #btn-dark-toggle:hover,
body[data-sb-theme="classico"] #btn-dark-toggle:hover { color: #4338ca !important; }
body[data-sb-theme="dark"] .hdr-user-name,
body[data-sb-theme="classico"] .hdr-user-name { color: #5b6478; font-weight: 600; }
body[data-sb-theme="dark"] .hdr-user-btn .fa-chevron-down,
body[data-sb-theme="classico"] .hdr-user-btn .fa-chevron-down { color: #9aa3b8; }
body[data-sb-theme="dark"] #btn-abrir-pdv-global,
body[data-sb-theme="classico"] #btn-abrir-pdv-global {
background: linear-gradient(135deg, #5b9bf8 0%, #4f6df0 55%, #6d5ff0 100%) !important;
box-shadow: 0 2px 8px rgba(79,109,240,.30) !important;
}
body[data-sb-theme="dark"] #btn-abrir-pdv-global:hover,
body[data-sb-theme="classico"] #btn-abrir-pdv-global:hover { filter: brightness(1.06); }
/* AGF-ICONES-SUAVES 07/10/2026 - sidebar/submenu claros: ícones com cores pastel bem fracas (em vez de tudo cinza),
textos em cinza-azulado escuro (sem preto) e submenu seguindo a cor de destaque escolhida no Perfil.
Ícones com cor inline (ex.: Inbox verde) mantêm a deles. REVERTER: apagar este bloco. */
body[data-sb-theme="dark"] .sb-section > :nth-child(8n+2) .sb-item-icon, body[data-sb-theme="classico"] .sb-section > :nth-child(8n+2) .sb-item-icon { color: #6674e0; }
body[data-sb-theme="dark"] .sb-section > :nth-child(8n+3) .sb-item-icon, body[data-sb-theme="classico"] .sb-section > :nth-child(8n+3) .sb-item-icon { color: #44a5d0; }
body[data-sb-theme="dark"] .sb-section > :nth-child(8n+4) .sb-item-icon, body[data-sb-theme="classico"] .sb-section > :nth-child(8n+4) .sb-item-icon { color: #34ae8c; }
body[data-sb-theme="dark"] .sb-section > :nth-child(8n+5) .sb-item-icon, body[data-sb-theme="classico"] .sb-section > :nth-child(8n+5) .sb-item-icon { color: #dd9a3e; }
body[data-sb-theme="dark"] .sb-section > :nth-child(8n+6) .sb-item-icon, body[data-sb-theme="classico"] .sb-section > :nth-child(8n+6) .sb-item-icon { color: #d56aa6; }
body[data-sb-theme="dark"] .sb-section > :nth-child(8n+7) .sb-item-icon, body[data-sb-theme="classico"] .sb-section > :nth-child(8n+7) .sb-item-icon { color: #8366dc; }
body[data-sb-theme="dark"] .sb-section > :nth-child(8n+8) .sb-item-icon, body[data-sb-theme="classico"] .sb-section > :nth-child(8n+8) .sb-item-icon { color: #52b05f; }
body[data-sb-theme="dark"] .sb-section > :nth-child(8n+9) .sb-item-icon, body[data-sb-theme="classico"] .sb-section > :nth-child(8n+9) .sb-item-icon { color: #e2735f; }
body[data-sb-theme="dark"] .sb-section .sb-item--active .sb-item-icon, body[data-sb-theme="classico"] .sb-section .sb-item--active .sb-item-icon { color: var(--sb-accent); }
body[data-sb-theme="dark"] .sb-submenu > .sb-subitem:nth-of-type(6n+1) i, body[data-sb-theme="classico"] .sb-submenu > .sb-subitem:nth-of-type(6n+1) i { color: #6674e0; }
body[data-sb-theme="dark"] .sb-submenu > .sb-subitem:nth-of-type(6n+2) i, body[data-sb-theme="classico"] .sb-submenu > .sb-subitem:nth-of-type(6n+2) i { color: #44a5d0; }
body[data-sb-theme="dark"] .sb-submenu > .sb-subitem:nth-of-type(6n+3) i, body[data-sb-theme="classico"] .sb-submenu > .sb-subitem:nth-of-type(6n+3) i { color: #34ae8c; }
body[data-sb-theme="dark"] .sb-submenu > .sb-subitem:nth-of-type(6n+4) i, body[data-sb-theme="classico"] .sb-submenu > .sb-subitem:nth-of-type(6n+4) i { color: #dd9a3e; }
body[data-sb-theme="dark"] .sb-submenu > .sb-subitem:nth-of-type(6n+5) i, body[data-sb-theme="classico"] .sb-submenu > .sb-subitem:nth-of-type(6n+5) i { color: #d56aa6; }
body[data-sb-theme="dark"] .sb-submenu > .sb-subitem:nth-of-type(6n+6) i, body[data-sb-theme="classico"] .sb-submenu > .sb-subitem:nth-of-type(6n+6) i { color: #8366dc; }
body[data-sb-theme="dark"] .sb-subitem, body[data-sb-theme="classico"] .sb-subitem { color: var(--sb-text); }
body[data-sb-theme="dark"] .sb-subitem:hover, body[data-sb-theme="classico"] .sb-subitem:hover {
background: rgba(var(--sb-accent-rgb), 0.09); color: var(--sb-accent);
}
body[data-sb-theme="dark"] .sb-subitem--active, body[data-sb-theme="classico"] .sb-subitem--active {
background: rgba(var(--sb-accent-rgb), 0.14); border-left-color: var(--sb-accent); color: var(--sb-accent) !important;
}
body[data-sb-theme="dark"] .sb-flyout-title, body[data-sb-theme="classico"] .sb-flyout-title { color: var(--sb-accent); }
body[data-sb-theme="dark"] .sb-submenu > .sb-subitem > i, body[data-sb-theme="classico"] .sb-submenu > .sb-subitem > i { opacity: .95 !important; }
/* AGF-BUSCA 07/10/2026 - campo de pesquisa da sidebar clara: o fundo/atalho "Ctrl K" eram brancos translúcidos (sumiam).
REVERTER: apagar este bloco. */
body[data-sb-theme="dark"] .sb-search-btn, body[data-sb-theme="classico"] .sb-search-btn {
background: #f1f3f8; border-color: #dfe3ec; color: #475569;
}
body[data-sb-theme="dark"] .sb-search-btn:hover, body[data-sb-theme="classico"] .sb-search-btn:hover {
background: rgba(var(--sb-accent-rgb), 0.08); border-color: var(--sb-accent);
}
body[data-sb-theme="dark"] .sb-search-kbd, body[data-sb-theme="classico"] .sb-search-kbd {
background: #ffffff; border-color: #cfd5e2; color: #64748b; opacity: 1; font-weight: 600;
}
/* AGF-HDR-SEM-NOME 07/10/2026 - header: só avatar + setinha (o nome já aparece no topo do menu ao clicar). Fica só para leitor de tela.
REVERTER: apagar este bloco. */
.hdr-user-btn .hdr-user-name {
position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
/* AGF-BRAND-CENTRO 07/10/2026 - sidebar aberta: nome da marca centralizado no espaço ao lado da logo (não colado nela).
REVERTER: apagar este bloco. */
.sidebar:not(.sidebar--collapsed) .sb-brand-text,
.sidebar--collapsed.sidebar--hover-expanded .sb-brand-text { flex: 1; text-align: center; padding-right: 10px; }
/* AGF-BLOCO-BARRA 15/10/2026 - COMPONENTE PADRÃO de bloco da barra lateral (.sb-bloco): cartão arredondado com faixa lateral na cor do bloco
(--sb-bloco-cor, padrão âmbar), título, botão "?" e controle (botão que abre menu). Texto sempre em var(--sb-text), que cada um dos ~28 temas
já define legível; o tom da cor só entra dentro do @supports (Chrome < 111/Win7 não conhece color-mix e apagaria o fallback). Bloco NOVO =
reusar estas classes (.sb-bloco, .sb-bloco-titulo, .sb-bloco-ajuda, .sb-bloco-controle, .sb-bloco-mini*), não criar estilo paralelo. */
.sb-bloco { --sb-bloco-cor: #f59e0b; padding: 10px 12px 12px; margin: 6px 8px; border-radius: 12px; background: rgba(245,158,11,.1); border: 1px solid rgba(245,158,11,.25); border-left: 3px solid var(--sb-bloco-cor); transition: background .18s, border-color .18s; }
.sb-bloco--ativo { background: rgba(245,158,11,.18); border-color: rgba(245,158,11,.5); }
.sb-bloco--carregando { opacity: .7; cursor: progress; }
.sb-bloco--carregando * { pointer-events: none; }
.sb-bloco-titulo { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 10px; font-weight: 700; letter-spacing: .3px; margin-bottom: 8px; text-transform: uppercase; line-height: 1.25; color: var(--sb-text); }
.sb-bloco-titulo > span { min-width: 0; }
.sb-bloco-ajuda { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border: 0; border-radius: 50%; background: rgba(245,158,11,.2); color: inherit; padding: 0; font-size: 12px; line-height: 1; cursor: pointer; transition: background .18s; }
.sb-bloco-ajuda:hover, .sb-bloco-ajuda:focus-visible { background: rgba(245,158,11,.38); outline: none; }
.sb-bloco-controle { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; height: 36px; padding: 0 12px; border-radius: 10px; border: 1px solid rgba(245,158,11,.45); background: rgba(127,127,127,.1); color: var(--sb-text); font: inherit; font-size: 12.5px; font-weight: 500; text-align: left; cursor: pointer; transition: border-color .18s, box-shadow .18s, background .18s; }
.sb-bloco-controle-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-bloco-controle-seta { flex-shrink: 0; font-size: 11px; opacity: .75; transition: transform .18s; }
.sb-bloco-controle[aria-expanded="true"] .sb-bloco-controle-seta { transform: rotate(180deg); }
.sb-bloco-controle:hover { border-color: rgba(245,158,11,.75); }
.sb-bloco-controle:focus-visible { outline: none; border-color: var(--sb-bloco-cor); box-shadow: 0 0 0 3px rgba(245,158,11,.32); }
.sb-bloco--ativo .sb-bloco-controle { font-weight: 700; background: rgba(245,158,11,.18); }
@supports (background: color-mix(in srgb, #fff 50%, #000)) {
.sb-bloco-titulo, .sb-bloco-ajuda { color: color-mix(in srgb, var(--sb-bloco-cor) 22%, var(--sb-text)); }
.sb-bloco-mini-btn { color: color-mix(in srgb, var(--sb-bloco-cor) 22%, var(--sb-text)); }
}
/* Barra recolhida (68px) é só trilho de ícones: o bloco inteiro não cabe (título quebrava letra a letra) e dá lugar ao ícone .sb-bloco-mini.
O ícone abre o mesmo menu (.sb-ramo-pop, movido para o pelo JS) ao lado. Ao expandir por hover o bloco volta inteiro. */
.sb-bloco-mini { display: none; }
.sidebar--collapsed:not(.sidebar--hover-expanded) .sb-bloco { display: none; }
.sidebar--collapsed:not(.sidebar--hover-expanded) .sb-bloco-mini { display: flex; justify-content: center; margin: 4px 8px; }
.sb-bloco-mini-btn { position: relative; width: 44px; height: 40px; border-radius: 10px; border: 1px solid rgba(245,158,11,.45); background: rgba(245,158,11,.12); color: var(--sb-text); font-size: 15px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background .18s, border-color .18s; }
.sb-bloco-mini-btn:hover, .sb-bloco-mini-btn[aria-expanded="true"] { background: rgba(245,158,11,.24); border-color: rgba(245,158,11,.75); }
.sb-bloco-mini-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(245,158,11,.32); }
.sb-bloco-mini-ponto { position: absolute; top: 5px; right: 6px; width: 8px; height: 8px; border-radius: 50%; background: #f59e0b; box-shadow: 0 0 0 2px rgba(127,127,127,.4); }
.sb-bloco-mini-ponto[hidden] { display: none; }
/* Menu do ramo (barra aberta E recolhida): escuro em qualquer tema, no , acima de tudo. */
.sb-ramo-pop { position: fixed; z-index: 14000; min-width: 230px; max-width: 300px; overflow-y: auto; padding: 6px; border-radius: 12px; background: #1e293b; border: 1px solid rgba(245,158,11,.4); box-shadow: 0 10px 28px rgba(0,0,0,.35); animation: sb-pop-entra .14s ease-out; }
.sb-ramo-pop--cima { animation-name: sb-pop-entra-cima; }
.sb-ramo-pop[hidden] { display: none; }
@keyframes sb-pop-entra { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes sb-pop-entra-cima { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .sb-ramo-pop { animation: none; } .sb-bloco, .sb-bloco-controle, .sb-bloco-controle-seta { transition: none; } }
.sb-ramo-pop-titulo { padding: 4px 10px 6px; font-size: 10px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: #fbbf24; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sb-ramo-pop-atalho { padding: 1px 5px; border-radius: 5px; background: rgba(255,255,255,.08); color: #94a3b8; font-family: inherit; font-size: 9.5px; font-weight: 600; line-height: 1.4; letter-spacing: 0; text-transform: none; white-space: nowrap; }
@media (hover: none) { .sb-ramo-pop-atalho { display: none; } } /* sem teclado físico o atalho não serve */
.sb-ramo-pop-op { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 5px 10px; border: 0; border-radius: 8px; background: transparent; color: #e2e8f0; font-size: 12.5px; cursor: pointer; }
.sb-ramo-pop-nome { flex: 1; min-width: 0; }
.sb-ramo-pop-n { flex-shrink: 0; min-width: 22px; padding: 1px 7px; border-radius: 999px; background: rgba(255,255,255,.1); color: #cbd5e1; font-size: 10.5px; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }
.sb-ramo-pop-n:empty { visibility: hidden; } /* reserva o espaço do número: o menu não muda de altura quando a contagem chega */
.sb-ramo-pop-n:empty::before { content: "0"; }
.sb-ramo-pop-op--vazio .sb-ramo-pop-nome { opacity: .6; }
.sb-ramo-pop-chk { flex-shrink: 0; width: 12px; color: #fbbf24; font-size: 11px; visibility: hidden; }
.sb-ramo-pop-op[aria-checked="true"] .sb-ramo-pop-chk { visibility: visible; }
.sb-ramo-pop-op:hover { background: rgba(245,158,11,.14); }
.sb-ramo-pop-op[aria-checked="true"] { background: rgba(245,158,11,.24); font-weight: 700; }
.sb-ramo-pop-op:focus-visible, .sb-ramo-pop-link:focus-visible { outline: none; background: rgba(245,158,11,.22); box-shadow: inset 0 0 0 2px #fbbf24; }
.sb-ramo-pop-link { display: flex; align-items: center; gap: 8px; margin-top: 4px; padding: 9px 10px; border-top: 1px solid rgba(255,255,255,.1); border-radius: 0 0 8px 8px; color: #fbbf24; font-size: 12px; font-weight: 600; text-decoration: none; }
.sb-ramo-pop-link:hover { background: rgba(245,158,11,.14); color: #fcd34d; text-decoration: none; }
.sb-ramo-pop-link { width: 100%; background: transparent; border-left: 0; border-right: 0; border-bottom: 0; text-align: left; cursor: pointer; font-family: inherit; }
.sb-ramo-pop-link .sb-ramo-pop-atalho { margin-left: auto; }
.sb-ramo-pop-link:disabled { opacity: .45; cursor: not-allowed; }
.sb-ramo-pop-link:disabled:hover { background: transparent; color: #fbbf24; }
.sb-ramo-pop-link { padding: 6px 10px; }
.sb-ramo-pop-link + .sb-ramo-pop-link { margin-top: 0; border-top: 0; border-radius: 0 0 8px 8px; }
/* Ramo ativo no topo (só celular/tablet, onde a barra lateral fica escondida na gaveta) */
.hdr-ramo-chip { display: none; align-items: center; gap: 6px; max-width: 150px; margin-left: 8px; padding: 6px 10px; border-radius: 8px; border: 1px solid rgba(245,158,11,.55); background: rgba(245,158,11,.14); color: #b45309; font-size: 12px; font-weight: 700; cursor: pointer; font-family: inherit; }
.hdr-ramo-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hdr-ramo-chip:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(245,158,11,.4); }
.dark-mode .hdr-ramo-chip { color: #fbbf24; }
@media (max-width: 1023px) { .hdr-ramo-chip:not([hidden]) { display: inline-flex; } }
/* ==== REGRA DA BARRA RECOLHIDA (convenção, 15/10/2026) ====
Todo bloco NOVO da barra lateral que não seja .sb-item precisa dizer o que faz com ela recolhida (68px):
marcar com data-sb-bloco="nome" e ter, neste arquivo, uma regra `.sidebar--collapsed:not(.sidebar--hover-expanded) ` (esconder ou virar ícone).
O agflex-lint avisa quando falta. As ~39 regras antigas espalhadas por este arquivo seguem onde estão (mexer na cascata é risco sem ganho). ==== */
/* Header discreto (08/10): só o PDV tem destaque; Nova OS, Lista OS, Produtos e Recebimento ficam sem fundo e sem borda
(cor do texto do tema), com um cinza suave só ao passar o mouse. */
body[data-sb-theme] .hdr-nav-btn{
background:transparent !important; border:1px solid transparent !important;
color:var(--hdr-text) !important; font-weight:600 !important; box-shadow:none !important;
}
body[data-sb-theme] .hdr-nav-btn > i{ color:inherit; opacity:.7; }
body[data-sb-theme] .hdr-nav-btn:hover{ background:rgba(100,116,139,.14) !important; border-color:transparent !important; }
body[data-sb-theme] .hdr-nav-btn:hover > i{ opacity:1; }
/* Chrome < 111 (Win7) não conhece color-mix: uma declaração com var() dentro é aceita no parse e vira "inicial" (transparente) na
hora de calcular, apagando o fallback acima (botão PDV sumia). Por isso o color-mix fica só dentro do @supports. */
@supports (background: color-mix(in srgb, #fff 50%, #000)) {
body[data-sb-theme="dark"] .hdr-nav-btn,
body[data-sb-theme="classico"] .hdr-nav-btn {
background: color-mix(in srgb, var(--hdr-accent, #6366f1) 9%, #fff) !important;
color: color-mix(in srgb, var(--hdr-accent, #6366f1) 80%, #000) !important;
border-color: color-mix(in srgb, var(--hdr-accent, #6366f1) 16%, #fff) !important;
}
body[data-sb-theme="dark"] .hdr-nav-btn:hover,
body[data-sb-theme="classico"] .hdr-nav-btn:hover {
background: color-mix(in srgb, var(--hdr-accent, #6366f1) 17%, #fff) !important;
border-color: color-mix(in srgb, var(--hdr-accent, #6366f1) 30%, #fff) !important;
}
body[data-sb-theme="dark"] .hdr-action-btn,
body[data-sb-theme="classico"] .hdr-action-btn,
body[data-sb-theme="dark"] .hdr-action-btn:not(#btn-toggle-robo),
body[data-sb-theme="classico"] .hdr-action-btn:not(#btn-toggle-robo),
body[data-sb-theme="dark"] #btn-dark-toggle,
body[data-sb-theme="classico"] #btn-dark-toggle { color: color-mix(in srgb, var(--hdr-accent, #6366f1) 80%, #fff) !important; }
body[data-sb-theme="dark"] .hdr-action-btn:not(#btn-toggle-robo):hover,
body[data-sb-theme="classico"] .hdr-action-btn:not(#btn-toggle-robo):hover,
body[data-sb-theme="dark"] #btn-dark-toggle:hover,
body[data-sb-theme="classico"] #btn-dark-toggle:hover { color: color-mix(in srgb, var(--hdr-accent, #6366f1) 85%, #000) !important; }
body[data-sb-theme="dark"] #btn-abrir-pdv-global,
body[data-sb-theme="classico"] #btn-abrir-pdv-global {
background: linear-gradient(135deg, color-mix(in srgb, var(--hdr-accent, #4f6df0) 70%, #fff) 0%, var(--hdr-accent, #4f6df0) 60%, color-mix(in srgb, var(--hdr-accent, #4f6df0) 85%, #000) 100%) !important;
box-shadow: 0 2px 8px color-mix(in srgb, var(--hdr-accent, #4f6df0) 32%, transparent) !important;
}
}
/* Toque (celular/app): sem varredura de hover (::after animando width) nem hover "grudado" após o toque — o clique piscava
(varredura + fundo + ondulação). Retorno do toque = fundo instantâneo no :active (André, 22/10/2026). */
@media (hover: none) {
.sb-item::after { display: none; }
.sb-item:hover:not(.sb-item--active) { background: transparent; }
.sb-item:active:not(.sb-item--active), .sb-subitem:active { background: var(--sb-bg-hover); transition: none; }
}
/* ── Menu "Mais" no celular (≤1023px; desktop intocado) — 22/10/2026 ──────────────────────────────
alvo de toque ≥44px nos itens/subitens; "Produtividade 360" não parece marcada quando não é a página;
seções recolhíveis (estado lembrado em localStorage por sidebar.js). Sem :has/dvh/color-mix (WebView Chrome 104). */
@media (max-width: 1023px) {
.sidebar .sb-item, .sidebar .sb-subitem { min-height: 44px; }
.sidebar .sb-subitem { display: flex; align-items: center; }
.sidebar .sb-item--destaque:not(.sb-item--active) { border-left-color: transparent !important; }
.sidebar .sb-item--destaque:not(.sb-item--active) .sb-item-text { font-weight: inherit; }
.sidebar .sb-section-title[data-sb-colapsa] { display: flex; align-items: center; justify-content: space-between; min-height: 36px; padding-right: 12px; cursor: pointer; }
.sidebar .sb-section-title[data-sb-colapsa] i { font-size: 10px; transition: transform .15s; }
.sidebar .sb-section--fechada > .sb-section-title i { transform: rotate(-90deg); }
.sidebar .sb-section--fechada > *:not(.sb-section-title) { display: none !important; }
/* sobram só Robô e Perfil nos atalhos: 2 colunas, ícone ao lado do texto (devolve ~30px de lista ao menu) */
.sidebar .sb-mob-btns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sidebar .sb-mob-btn { flex-direction: row; gap: 8px; min-height: 44px; padding: 6px 8px; font-size: 12px; }
}
@media (max-width: 1023px) and (hover: none) { .sidebar .sb-search-kbd { display: none; } } /* Ctrl+K não existe no toque */
/* Menu do dono: categorias recolhíveis e frase curta por ferramenta (22/10/2026). Sem :has/dvh/color-mix (Chrome 104). */
.sb-cat { margin: 2px 0; }
.sb-cat-t { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 36px; padding: 6px 10px; border: 0; border-radius: 8px; background: rgba(148,163,184,.12); color: inherit; font: inherit; font-size: 12px; font-weight: 700; letter-spacing: .02em; text-align: left; cursor: pointer; }
.sb-cat-t > span { flex: 1 1 auto; min-width: 0; }
.sb-cat-t:focus-visible { outline: 2px solid rgba(99,102,241,.7); outline-offset: 1px; }
.sb-cat-seta { font-size: 10px; opacity: .7; transition: transform .15s ease; }
.sb-cat--aberta > .sb-cat-t .sb-cat-seta { transform: rotate(180deg); }
.sb-cat-b { display: none; padding: 2px 0 4px 6px; }
.sb-cat--aberta > .sb-cat-b { display: block; }
.sb-cat-b .sb-subitem { flex-wrap: wrap; }
.sb-sub-desc { flex: 0 0 100%; display: block; margin: 1px 0 0 0; font-size: 11px; font-weight: 400; line-height: 1.3; opacity: .72; white-space: normal; }
@media (max-width: 1023px) {
/* menu "Mais": os grupos do dono abrem NO LUGAR (acordeão), não como balão fixo que passava por baixo da barra; rolam com o menu */
.sidebar--mobile-open .sb-group--dono > .sb-submenu { position: static; transform: none; min-width: 0; max-width: none; max-height: none; overflow: visible; box-shadow: none; border: 0; background: transparent; padding: 2px 0 6px 8px; opacity: 1; visibility: visible; pointer-events: auto; display: none; }
.sidebar--mobile-open .sb-group--dono.sb-group--open > .sb-submenu { display: block; }
}
/* Categorias nos demais grupos (24/10/2026): mesmas cores/tema do grupo (variáveis --sb-*); sem :has/dvh/color-mix (Chrome 104). */
.sb-cat--grp > .sb-cat-t { color: var(--sb-text, inherit); background: var(--sb-bg-hover, rgba(148,163,184,.12)); }
.sb-cat--grp > .sb-cat-t:hover { background: var(--sb-bg-active, rgba(148,163,184,.2)); }
.sb-cat--grp .sb-cat-ic { width: 16px; text-align: center; font-size: 12px; opacity: .85; }
.sb-cat--grp > .sb-cat-b { border-left: 1px solid var(--sb-border, rgba(148,163,184,.25)); margin-left: 10px; padding-left: 4px; }
.sb-cat--plano-vazio { display: none !important; }
@media (max-width: 1023px) { .sb-cat-t { min-height: 42px; } }
/* MENU-M (24/10/2026): linha "Abrir " no topo do submenu, só no celular (o submenu segue abrindo AO LADO, como sempre). Sem :has/dvh/color-mix/nesting (Chrome 104). */
.sb-subitem--abrir { display: none; }
body:not(.pdv-layout) .sidebar--mobile-open .sb-subitem--abrir { display: flex; align-items: center; gap: 8px; font-weight: 700; border-bottom: 1px solid var(--sb-border, rgba(148,163,184,.25)); margin-bottom: 2px; }
body:not(.pdv-layout) .sidebar--mobile-open .sb-subitem--abrir i { font-size: .75rem; opacity: .8; }
/* perf app (26/10/2026): lateral FECHADA no celular nao e desenhada (era ~1000 caixas = ~1,2 s de estilo a 4x CPU em TODA pagina); sidebar.js poe .sidebar--pronta no 1o abrir e dai em diante o comportamento e o de antes */
@media (max-width: 768px) {
.sidebar:not(.sidebar--mobile-open):not(.sidebar--pronta) { display: none; }
}
/* 28/10/2026: menu do perfil no celular/app: o balão tinha overflow:visible e o texto passava do fundo branco; agora rola dentro do balão (sem a setinha, que seria cortada). */
@media (max-width: 1023px) {
#hdr-user-dropdown-wrap .hdr-dropdown-menu.hdr-user-menu { overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
#hdr-user-dropdown-wrap .hdr-dropdown-menu.hdr-user-menu::before { display: none; }
}