/* ========================================================================== Botões flutuantes (FAB) — atalhos "+ Pedido" e "+ OS" Consumido por: templates/includes/_botoes_flutuantes.html (via base.html). ========================================================================== */ .fab-stack { position: fixed; bottom: 1.5rem; display: flex; flex-direction: column; align-items: flex-start; gap: 0.75rem; /* ⚠️ Canto inferior ESQUERDO, logo depois do sidebar — que é `position: fixed`, tem z-index 1030 (acima deste) e largura variável. Ancorar em `--sidebar-width` é o que mantém o atalho visível: um `left` fixo o esconderia atrás do menu. A variável também é reescrita pelo arrastar da alça (#sidebarResizer, 200–480px), então o botão acompanha o redimensionamento sem JS. */ left: calc(var(--sidebar-width) + 1.5rem); right: auto; /* Acima do conteúdo, ABAIXO de sidebar (1030), header (1040) e do modal do Bootstrap (backdrop 1050): com um modal aberto, o atalho tem de ficar atrás do backdrop, e não flutuando por cima do diálogo. */ z-index: 1020; /* `left` acompanha a mesma duração do `margin-left` do .content-wrapper: assim o atalho desliza junto com o menu ao recolher, em vez de saltar. */ transition: opacity 0.2s ease, transform 0.2s ease, left var(--transition-speed); } /* Sidebar recolhido. O .fab-stack vive DENTRO do .content-wrapper, então basta o descendente — não é preciso alcançar o irmão `.sidebar.collapsed`. */ .content-wrapper.expanded .fab-stack { left: calc(var(--sidebar-collapsed-width) + 1.5rem); } /* Espelho do pré-paint (anti-flash de navegação): o script do seta html[data-sidebar-collapsed] antes do 1º frame e o JS do sidebar.html troca pelas classes no DOMContentLoaded. Sem este espelho o atalho nasce na posição do menu aberto e salta ao carregar. Manter alinhado com o bloco equivalente do style.css. */ @media (min-width: 992px) { html[data-sidebar-collapsed] .content-wrapper:not(.content-wrapper-full) .fab-stack { left: calc(var(--sidebar-collapsed-width) + 1.5rem); } } /* Estado aplicado pelo JS do partial ao rolar para baixo. Continua ocupando o espaço (sem `display:none`) para a transição existir e o foco não saltar. */ .fab-stack--oculto { opacity: 0; transform: translateY(1rem); pointer-events: none; } .fab-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.7rem 1.15rem; border-radius: var(--radius-full, 9999px); box-shadow: var(--shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.2)); color: #fff; font-weight: 600; font-size: 0.9rem; line-height: 1; text-decoration: none; white-space: nowrap; transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease; } .fab-btn:hover, .fab-btn:focus { color: #fff; text-decoration: none; transform: translateY(-2px); filter: brightness(1.08); } .fab-btn:active { transform: translateY(0); } /* Foco visível preservado (navegação por teclado). */ .fab-btn:focus-visible { outline: 3px solid rgba(255, 255, 255, 0.65); outline-offset: 2px; } .fab-btn i { font-size: 1rem; } /* ⚠️ CORES EM HEX FIXO, e isso é acessibilidade — não capricho. `--color-accent-primary` CLAREIA no dark (#5A4FE8 → #8B7FFF) e o texto branco sobre ele cai para ~3,2:1, reprovando o WCAG AA (mín. 4,5:1). É a mesma armadilha já documentada no `--tab-active-bg` das abas. Os dois valores abaixo passam nos DOIS temas por serem fixos: indigo #5A4FE8 → ~5,2:1 com branco (Pedido — acento do sistema) teal #0F766E → ~5,9:1 com branco (OS — cor distinta, para diferenciar) */ .fab-btn--pedido { background-color: #5A4FE8; } .fab-btn--os { background-color: #0F766E; } /* Só desktop: no mobile a barra de navegação inferior ocupa esta área. */ @media (max-width: 991.98px) { .fab-stack { display: none; } } /* Telas baixas: encosta um pouco mais no canto para não comer conteúdo. */ @media (max-height: 700px) { .fab-stack { left: calc(var(--sidebar-width) + 1rem); bottom: 1rem; gap: 0.5rem; } .content-wrapper.expanded .fab-stack { left: calc(var(--sidebar-collapsed-width) + 1rem); } } /* Respeita quem pediu menos animação no sistema operacional. */ @media (prefers-reduced-motion: reduce) { .fab-stack, .fab-btn { transition: none; } .fab-btn:hover, .fab-btn:focus { transform: none; } } /* Nunca imprimir os atalhos. */ @media print { .fab-stack { display: none !important; } }