/* AgroFaz — Dock Bar com FAB central Aprovado: Opção 4 (Material 3 / Chrome bottom bar). Uso (HTML mínimo):

Personalizar cor por subsistema: */ .ag-dock-wrap { position: fixed; bottom: 18px; left: 0; right: 0; display: flex; justify-content: center; z-index: 50; pointer-events: none; padding: 0 12px; } .ag-dock-bar { background: var(--dock-card, #fff); border: 1px solid var(--dock-border, #e5e7eb); border-radius: 999px; padding: 6px 14px 6px 70px; display: inline-flex; align-items: center; gap: 6px; box-shadow: 0 12px 32px rgba(15,23,42,.16), 0 4px 10px rgba(15,23,42,.08); position: relative; height: 52px; pointer-events: auto; max-width: calc(100vw - 24px); overflow: visible; } .ag-dock-fab { position: absolute; left: 6px; top: 50%; transform: translateY(-50%); width: 56px; height: 56px; background: linear-gradient(135deg, var(--dock-cor, #2563EB), var(--dock-cor-dark, #1d4ed8)); color: #fff; border: 4px solid var(--dock-card, #fff); border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1.45rem; box-shadow: 0 6px 18px var(--dock-cor-shadow, rgba(37,99,235,.45)); transition: transform .15s, box-shadow .2s; text-decoration: none; z-index: 1; } .ag-dock-fab:hover { transform: translateY(-50%) scale(1.06); box-shadow: 0 10px 26px var(--dock-cor-shadow, rgba(37,99,235,.55)); } .ag-dock-fab:active { transform: translateY(-50%) scale(.96); } .ag-dock-icon { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--dock-muted, #64748b); cursor: pointer; transition: background .14s, color .14s, transform .14s; font-size: .92rem; text-decoration: none; flex-shrink: 0; border: none; background: transparent; } .ag-dock-icon:hover { color: var(--dock-cor, #2563EB); background: var(--dock-cor-soft, rgba(37,99,235,.1)); } .ag-dock-icon.ativo { color: var(--dock-cor, #2563EB); background: var(--dock-cor-soft, rgba(37,99,235,.1)); } .ag-dock-divider { width: 1px; height: 22px; background: var(--dock-border, #e5e7eb); flex-shrink: 0; margin: 0 4px; } .ag-dock-label { font-size: .8rem; font-weight: 700; color: var(--dock-muted, #64748b); padding: 0 8px; white-space: nowrap; } /* Tooltip ao passar o mouse */ .ag-dock-icon[title]::after { content: attr(title); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); background: #0f172a; color: #fff; padding: 4px 9px; border-radius: 5px; font-size: .72rem; font-weight: 700; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .15s; } .ag-dock-icon[title]:hover::after { opacity: 1; } .ag-dock-icon { position: relative; } /* Dark-friendly: usa cores do tema dark se body tiver atributo */ html[data-theme="dark"] .ag-dock-bar, html[data-theme="dark-blue"] .ag-dock-bar, body[data-theme="dark"] .ag-dock-bar { background: rgba(30,41,59,.95); border-color: rgba(255,255,255,.1); box-shadow: 0 12px 32px rgba(0,0,0,.4); } html[data-theme="dark"] .ag-dock-fab, html[data-theme="dark-blue"] .ag-dock-fab { border-color: rgba(30,41,59,.95); } html[data-theme="dark"] .ag-dock-icon, html[data-theme="dark-blue"] .ag-dock-icon { color: #94a3b8; } /* Mobile: empurra mais pra baixo, FAB um pouco menor */ @media (max-width: 640px) { .ag-dock-wrap { bottom: 12px; } .ag-dock-bar { padding: 5px 12px 5px 64px; height: 48px; gap: 4px; } .ag-dock-fab { width: 50px; height: 50px; font-size: 1.3rem; left: 5px; } .ag-dock-icon { width: 34px; height: 34px; font-size: .85rem; } .ag-dock-icon[title]::after { display: none; } /* sem hover em touch */ } /* Container body precisa de padding-bottom pra não cobrir conteúdo */ body.com-dock { padding-bottom: 88px !important; } /* Esconde dock e FABs flutuantes em impressão (regra global) */ @media print { .ag-dock-wrap, .ag-dock-bar, .ag-dock, .ag-dock-fab, .ag-dock-icon, .ag-fab { display: none !important; } body.com-dock { padding-bottom: 0 !important; } }