/* ╔══════════════════════════════════════════════════════════════════════════╗
║ BOOTSTRAP ICONS - SUPER PREMIUM CONFIGURATION v2.0 ║
║ Versao: 1.13.1 | Janeiro 2026 | ERP DotCompany ║
║ Design System de Classe Mundial para Icones ║
║ ║
║ RECURSOS: ║
║ • Variáveis CSS centralizadas ║
║ • GPU-accelerated animations (60fps) ║
║ • Auto dark/light mode ║
║ • Contexto inteligente de cores ║
║ • Animações semânticas por ícone ║
║ • Acessibilidade WCAG 2.1 AA ║
║ • Print-optimized ║
║ • RTL support ║
║ • High contrast mode ║
╚══════════════════════════════════════════════════════════════════════════╝ */
/* ═══════════════════════════════════════════════════════════════════════════
🎯 CONTROLE CENTRALIZADO DE ÍCONES - VARIÁVEIS CSS
═══════════════════════════════════════════════════════════════════════════
╔══════════════════════════════════════════════════════════════════════════╗
║ AJUSTE TODOS OS TAMANHOS AQUI - ÚNICO LUGAR PARA CONFIGURAR ║
╠══════════════════════════════════════════════════════════════════════════╣
║ Para alterar qualquer tamanho de ícone, modifique APENAS as variáveis ║
║ abaixo. Todos os ícones do sistema serão atualizados automaticamente. ║
╚══════════════════════════════════════════════════════════════════════════╝
ESCALA DE REFERÊNCIA:
- 0.75rem = 12px - 1.25rem = 20px
- 0.875rem = 14px - 1.5rem = 24px
- 1rem = 16px - 2rem = 32px
═══════════════════════════════════════════════════════════════════════════ */
:root {
/* ── TAMANHO PADRÃO GLOBAL ─────────────────────────────────────────────── */
--icon-size-global: 1rem; /* 16px - Tamanho padrão de TODOS os ícones */
/* ── TAMANHOS DO MENU LATERAL ──────────────────────────────────────────── */
--icon-size-menu: 1rem; /* 16px - Ícones do menu principal */
--icon-size-submenu: 0.875rem; /* 14px - Ícones de submenus */
/* ── TAMANHOS DO HEADER/TOPO ───────────────────────────────────────────── */
--icon-size-header: 1rem; /* 16px - Ícones do cabeçalho */
/* ── TAMANHOS DE BOTÕES E AÇÕES ────────────────────────────────────────── */
--icon-size-button: 1rem; /* 16px - Ícones em botões */
--icon-size-action: 1.125rem; /* 18px - Ícones de ações rápidas */
/* ── COR PADRÃO DO MENU ────────────────────────────────────────────────── */
--icon-color-menu: #B8C5D6; /* Cor dos ícones do menu */
}
/* Dark mode - mesmos tamanhos, cores podem variar */
.dark {
--icon-color-menu: #9CA3AF;
}
/* ╔══════════════════════════════════════════════════════════════════════════╗
║ 🛡️ CLASSES DE ESCAPE - OPT-OUT DE CORES FORÇADAS ║
║ ║
║ Use estas classes quando o sistema automático de cores não funcionar: ║
║ ║
║ .icon-adaptive - No ícone individual, herda cor do contexto ║
║ .icons-adaptive - No container, permite filhos usarem suas cores ║
║ ║
║ Exemplos: ║
║ ║
║ ║
║ ║
║
║
╚══════════════════════════════════════════════════════════════════════════╝ */
/* Ícone individual com cor adaptativa - respeita text-* e currentColor */
.bi.icon-adaptive,
i.bi.icon-adaptive,
[class*="bi-"].icon-adaptive {
color: currentColor !important;
filter: none !important;
}
/* Ícone com classe text-* explícita dentro de container adaptativo */
.icons-adaptive .bi[class*="text-"],
.icons-adaptive i.bi[class*="text-"] {
filter: none !important;
}
/* Container adaptativo - filhos herdam cor do contexto */
.icons-adaptive .bi:not([class*="text-"]),
.icons-adaptive i.bi:not([class*="text-"]) {
color: currentColor !important;
filter: none !important;
}
/* ╔══════════════════════════════════════════════════════════════════════════╗
║ 🛡️ ABORDAGEM SEGURA - SEM AUTO-DETECÇÃO DE BACKGROUNDS ║
║ ║
║ PRINCÍPIO: Ícones herdam cor do pai (currentColor) por padrão. ║
║ Para mudar a cor, use classes EXPLÍCITAS: ║
║ - text-white, text-red-500, etc (Tailwind) ║
║ - .icon-white (utilitário para fundo escuro) ║
║ - .icon-glow (branco com sombra) ║
║ ║
║ REMOVIDO: Auto-detecção de gradientes que causava conflitos. ║
╚══════════════════════════════════════════════════════════════════════════╝ */
/* ═══════════════════════════════════════════════════════════════════════════
1. CLASSES UTILITÁRIAS EXPLÍCITAS - OPT-IN (Desenvolvedor escolhe)
═══════════════════════════════════════════════════════════════════════════ */
/* Ícone branco para fundos escuros - USE EXPLICITAMENTE */
.bi.icon-white,
i.bi.icon-white,
.icon-white .bi,
.icon-white i.bi {
color: #ffffff !important;
opacity: 1 !important;
}
/* Ícone branco com glow/sombra para destaque */
.bi.icon-glow,
i.bi.icon-glow,
.icon-glow > .bi,
.icon-glow > i.bi {
color: #ffffff !important;
opacity: 1 !important;
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3)) !important;
}
/* Ícone que herda cor do contexto (reset explícito) */
.bi.icon-inherit,
i.bi.icon-inherit {
color: currentColor !important;
filter: none !important;
}
/* ═══════════════════════════════════════════════════════════════════════════
2. CLASSES TAILWIND text-* TÊM PRIORIDADE ABSOLUTA
═══════════════════════════════════════════════════════════════════════════ */
/* Garantir que ícones com classe text-* explícita usem a cor definida */
.bi[class*="text-"],
i.bi[class*="text-"] {
filter: none !important;
opacity: 1 !important;
}
/* Override explícito para .text-white */
.bi.text-white,
i.bi.text-white {
color: #ffffff !important;
}
/* Container com .text-white aplica aos filhos */
.text-white .bi:not([class*="text-"]),
.text-white i.bi:not([class*="text-"]) {
color: #ffffff !important;
}
/* ═══════════════════════════════════════════════════════════════════════════
3. COMPONENTES ESPECÍFICOS (Escopos bem definidos)
═══════════════════════════════════════════════════════════════════════════ */
/* Stat cards - SOMENTE se tiver classe .stat-card-dark */
.stat-card-dark .bi:not([class*="text-"]),
.stat-card-dark i.bi:not([class*="text-"]) {
color: #ffffff !important;
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3)) !important;
}
/* Dashboard icon glow - componente específico */
.dashboard-icon-glow .bi:not([class*="text-"]),
.dashboard-icon-glow i.bi:not([class*="text-"]) {
color: #ffffff !important;
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3)) !important;
}
/* Header de modal/card com gradiente escuro - USE .modal-header-dark */
.modal-header-dark .bi:not([class*="text-"]),
.modal-header-dark i.bi:not([class*="text-"]),
.card-header-dark .bi:not([class*="text-"]),
.card-header-dark i.bi:not([class*="text-"]) {
color: #ffffff !important;
filter: drop-shadow(0 1px 2px rgba(0,0,0,0.2)) !important;
}
/* ═══════════════════════════════════════════════════════════════════════════
4. BOTÕES - Ícones seguem a cor do texto do botão
═══════════════════════════════════════════════════════════════════════════ */
/* Botões Bootstrap - ícones herdam cor do botão */
.btn .bi,
.btn i.bi,
button .bi,
button i.bi {
color: currentColor;
}
/* Botões primários/coloridos - ícone branco SOMENTE se o botão tiver texto branco */
.btn-primary .bi:not([class*="text-"]),
.btn-danger .bi:not([class*="text-"]),
.btn-success .bi:not([class*="text-"]),
.btn-warning .bi:not([class*="text-"]),
.btn-info .bi:not([class*="text-"]) {
color: currentColor;
}
/* ═══════════════════════════════════════════════════════════════════════════
5. ÍCONES EM BACKGROUNDS ESCUROS - SOMENTE COM CLASSE EXPLÍCITA
═══════════════════════════════════════════════════════════════════════════ */
/* Containers que QUEREM ícones brancos devem usar .icons-white */
.icons-white .bi:not([class*="text-"]),
.icons-white i.bi:not([class*="text-"]) {
color: #ffffff !important;
opacity: 1 !important;
}
/* Containers que QUEREM ícones com glow devem usar .icons-glow */
.icons-glow .bi:not([class*="text-"]),
.icons-glow i.bi:not([class*="text-"]) {
color: #ffffff !important;
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.25)) !important;
}
/* ═══════════════════════════════════════════════════════════════════════════
6. REGRA PADRÃO - Ícones herdam cor do contexto
═══════════════════════════════════════════════════════════════════════════ */
/* Regra base: sem cor forçada, herda do pai */
.bi,
[class^="bi-"],
[class*=" bi-"] {
opacity: 1;
/* NÃO definir color aqui - deixa herdar de currentColor */
}
/* ═══════════════════════════════════════════════════════════════════════════
7. COMPATIBILIDADE RETROATIVA (legado)
═══════════════════════════════════════════════════════════════════════════ */
/* Stat-card legado - converte para nova abordagem
NOTA: Adicione .stat-card-dark ao HTML se quiser ícones brancos */
.stat-card .bi:not([class*="text-"]):not(.icon-inherit) {
/* Herda cor do contexto por padrão */
color: currentColor;
}
/* ═══════════════════════════════════════════════════════════════════════════
REGRA BASE GLOBAL - Aplica tamanho padrão a TODOS os ícones Bootstrap
═══════════════════════════════════════════════════════════════════════════ */
.bi,
[class^="bi-"],
[class*=" bi-"] {
font-size: var(--icon-size-global) !important;
line-height: 1;
color: currentColor; /* Usar currentColor para herdar cor do contexto */
}
/* Garantir que ícones com classe de cor Tailwind usem a cor definida */
.bi.text-purple-600, i.bi.text-purple-600, [class*="bi-"].text-purple-600 { color: #9333ea !important; }
.bi.text-purple-500, i.bi.text-purple-500, [class*="bi-"].text-purple-500 { color: #a855f7 !important; }
.bi.text-blue-600, i.bi.text-blue-600, [class*="bi-"].text-blue-600 { color: #2563eb !important; }
.bi.text-blue-500, i.bi.text-blue-500, [class*="bi-"].text-blue-500 { color: #3b82f6 !important; }
.bi.text-green-600, i.bi.text-green-600, [class*="bi-"].text-green-600 { color: #16a34a !important; }
.bi.text-green-500, i.bi.text-green-500, [class*="bi-"].text-green-500 { color: #22c55e !important; }
.bi.text-red-600, i.bi.text-red-600, [class*="bi-"].text-red-600 { color: #dc2626 !important; }
.bi.text-red-500, i.bi.text-red-500, [class*="bi-"].text-red-500 { color: #ef4444 !important; }
.bi.text-yellow-600, i.bi.text-yellow-600, [class*="bi-"].text-yellow-600 { color: #ca8a04 !important; }
.bi.text-yellow-500, i.bi.text-yellow-500, [class*="bi-"].text-yellow-500 { color: #eab308 !important; }
.bi.text-yellow-700, i.bi.text-yellow-700, [class*="bi-"].text-yellow-700 { color: #a16207 !important; }
.bi.text-amber-600, i.bi.text-amber-600, [class*="bi-"].text-amber-600 { color: #d97706 !important; }
.bi.text-orange-600, i.bi.text-orange-600, [class*="bi-"].text-orange-600 { color: #ea580c !important; }
.bi.text-pink-600, i.bi.text-pink-600, [class*="bi-"].text-pink-600 { color: #db2777 !important; }
.bi.text-indigo-600, i.bi.text-indigo-600, [class*="bi-"].text-indigo-600 { color: #4f46e5 !important; }
.bi.text-cyan-600, i.bi.text-cyan-600, [class*="bi-"].text-cyan-600 { color: #0891b2 !important; }
.bi.text-teal-600, i.bi.text-teal-600, [class*="bi-"].text-teal-600 { color: #0d9488 !important; }
.bi.text-gray-600, i.bi.text-gray-600, [class*="bi-"].text-gray-600 { color: #4b5563 !important; }
.bi.text-gray-500, i.bi.text-gray-500, [class*="bi-"].text-gray-500 { color: #6b7280 !important; }
.bi.text-white, i.bi.text-white, [class*="bi-"].text-white { color: #ffffff !important; }
/* ╔══════════════════════════════════════════════════════════════════════════╗
║ 🎨 ÍCONES EM BOTÕES - ABORDAGEM SIMPLIFICADA v4.0 ║
║ ║
║ PRINCÍPIO: Ícones herdam cor do texto do botão (currentColor) ║
║ Se o botão tem texto branco, o ícone será branco automaticamente. ║
║ ║
║ CLASSES DISPONÍVEIS: ║
║ • .icon-white → Força ícone branco ║
║ • .icon-black → Força ícone preto ║
║ • .icon-[cor] → Força cor específica ║
║ • text-[cor] → Usa cor Tailwind ║
╚══════════════════════════════════════════════════════════════════════════╝ */
/* ═══════════════════════════════════════════════════════════════════════════
REGRA PRINCIPAL: Ícones em botões herdam cor do contexto
(SEM auto-detecção de backgrounds - essa abordagem causava bugs)
═══════════════════════════════════════════════════════════════════════════ */
button .bi,
button i.bi,
a.btn .bi,
a.btn i.bi,
.btn .bi,
.btn i.bi {
color: currentColor;
filter: none;
}
/* Botões Bootstrap com texto branco nativo - ícones também brancos */
.btn-primary .bi,
.btn-danger .bi,
.btn-success .bi,
.btn-info .bi {
color: currentColor; /* Herda cor do botão, que geralmente é branco */
}
/* btn-warning tem texto escuro por padrão */
.btn-warning .bi {
color: currentColor;
}
/* ═══════════════════════════════════════════════════════════════════════════
CONTAINERS COM GRADIENTE/FUNDO ESCURO - Ícones brancos + GLOW PREMIUM
Vence .text-gray-800 .bi (que não tem mais !important desde 2026-03-17).
Cobre: botões premium, section icons (imp-sec-icon, crm-sec-icon, etc.),
wizard steps, badges com gradiente, e qualquer container gradient.
EFEITO PREMIUM: Ícone branco com drop-shadow na cor accent do tema ativo.
Usa --accent-btn-shadow-rgb que muda automaticamente por tema:
Verde=#d4a825(ouro) | Dark=#3b82f6(azul) | Light=#06b6d4(cyan)
Roxo=#ec4899(fuchsia) | Bordô=#f59e0b(amber) | Malva=#e0a872(rose gold)
Oliva=#ea580c(laranja) | Névoa=#0d9488(teal) | Taupe=#c49a6c(gold quente)
═══════════════════════════════════════════════════════════════════════════ */
/* --- Section icons com gradiente (padrão *-sec-icon em TODOS os módulos) --- */
[class*="-sec-icon"] .bi,
[class*="-sec-icon"] i.bi,
[class*="-sec-icon"] i {
color: #ffffff !important;
filter: drop-shadow(0 0 4px rgba(var(--accent-btn-shadow-rgb, 212,168,37), 0.65)) !important;
opacity: 1 !important;
transition: filter 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
/* Hover: glow intensifica quando card pai recebe hover */
*:hover > [class*="-sec-icon"] .bi,
*:hover > [class*="-sec-icon"] i.bi,
*:hover > [class*="-sec-icon"] i,
[class*="-sec-icon"]:hover .bi,
[class*="-sec-icon"]:hover i {
filter: drop-shadow(0 0 7px rgba(var(--accent-btn-shadow-rgb, 212,168,37), 0.9))
drop-shadow(0 0 14px rgba(var(--accent-btn-shadow-rgb, 212,168,37), 0.35)) !important;
}
/* --- Botões premium e gradiente --- */
.imp-btn-primary .bi,
.imp-btn-primary i.bi,
[class*="btn-premium"] .bi,
[class*="btn-cta-premium"] .bi,
button[class*="bg-gradient"] .bi,
a[class*="bg-gradient"] .bi {
color: #ffffff !important;
filter: drop-shadow(0 0 3px rgba(var(--accent-btn-shadow-rgb, 212,168,37), 0.5)) !important;
opacity: 1 !important;
transition: filter 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.imp-btn-primary:hover .bi,
.imp-btn-primary:hover i.bi,
[class*="btn-premium"]:hover .bi,
[class*="btn-cta-premium"]:hover .bi {
filter: drop-shadow(0 0 6px rgba(var(--accent-btn-shadow-rgb, 212,168,37), 0.85))
drop-shadow(0 0 12px rgba(var(--accent-btn-shadow-rgb, 212,168,37), 0.3)) !important;
}
/* --- Wizard steps e badges com gradiente --- */
[class*="imp-step-"] .bi,
[class*="imp-step-"] i,
[class*="imp-step-"] span,
[class*="imp-badge-"] .bi,
[class*="imp-badge-"] i,
[class*="imp-badge-"] span {
color: #ffffff !important;
text-shadow: 0 0 5px rgba(var(--accent-btn-shadow-rgb, 212,168,37), 0.6);
filter: none !important;
}
/* --- prefers-reduced-motion: desabilitar glow animado --- */
@media (prefers-reduced-motion: reduce) {
[class*="-sec-icon"] .bi,
[class*="-sec-icon"] i,
.imp-btn-primary .bi,
[class*="btn-premium"] .bi,
[class*="btn-cta-premium"] .bi {
transition: none !important;
}
}
/* ═══════════════════════════════════════════════════════════════════════════
CLASSES DE COR FORÇADA - Use no ícone para personalizar
═══════════════════════════════════════════════════════════════════════════ */
.bi.icon-white, i.icon-white { color: #ffffff !important; }
.bi.icon-black, i.icon-black { color: #000000 !important; }
.bi.icon-red, i.icon-red { color: #ef4444 !important; }
.bi.icon-blue, i.icon-blue { color: #3b82f6 !important; }
.bi.icon-green, i.icon-green { color: #22c55e !important; }
.bi.icon-yellow, i.icon-yellow { color: #eab308 !important; }
.bi.icon-orange, i.icon-orange { color: #f97316 !important; }
.bi.icon-purple, i.icon-purple { color: #a855f7 !important; }
.bi.icon-pink, i.icon-pink { color: #ec4899 !important; }
.bi.icon-cyan, i.icon-cyan { color: #06b6d4 !important; }
.bi.icon-teal, i.icon-teal { color: #14b8a6 !important; }
.bi.icon-gray, i.icon-gray { color: #6b7280 !important; }
.bi.icon-current, i.icon-current { color: currentColor !important; }
/* ═══════════════════════════════════════════════════════════════════════════
CLASSE DE ESCAPE: .no-icon-fix - Herda cor do pai
═══════════════════════════════════════════════════════════════════════════ */
.no-icon-fix .bi,
button.no-icon-fix .bi,
a.no-icon-fix .bi,
.bi.no-auto,
i.no-auto {
color: inherit !important;
filter: none !important;
}
/* ═══════════════════════════════════════════════════════════════════════════
5. CENTRALIZAÇÃO UNIVERSAL - Ícones SEMPRE centralizados (sem :has())
IMPORTANTE - Funciona em TODOS os navegadores:
• Ícones em botões/links ficam centralizados automaticamente
• Reset completo: margin, padding, line-height
• Use .no-center no ícone para desativar
═══════════════════════════════════════════════════════════════════════════ */
/* RESET UNIVERSAL - Todos os ícones Bootstrap Icons */
.bi,
[class^="bi-"],
[class*=" bi-"] {
margin: 0 !important;
padding: 0 !important;
line-height: 1 !important;
vertical-align: middle;
}
/* Ícones dentro de botões - centralização PERFEITA */
button .bi,
a .bi,
.btn .bi,
[class*="bg-"] .bi {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
flex-shrink: 0;
margin: 0 !important;
padding: 0 !important;
line-height: 1 !important;
}
/* Ícone com texto ao lado - adiciona espaço */
button .bi + span,
button .bi + span,
a .bi + span,
.btn .bi + span {
margin-left: 0.375rem;
}
/* Texto antes do ícone */
button span + .bi,
a span + .bi,
.btn span + .bi {
margin-left: 0.375rem;
}
/* ESCAPE: .no-center - Desativa centralização */
.bi.no-center,
.no-center .bi {
display: inline !important;
vertical-align: baseline !important;
}
/* POSIÇÃO: .icon-left - Alinha à esquerda */
.icon-left {
text-align: left;
}
/* POSIÇÃO: .icon-right - Ícone após texto */
.icon-right .bi {
order: 1;
}
/* ═══════════════════════════════════════════════════════════════════════════
6. CLASSE UTILITÁRIA: .btn-icon-only - Botão quadrado só com ícone
═══════════════════════════════════════════════════════════════════════════ */
.btn-icon-only {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0.5rem !important;
min-width: 2.5rem !important;
min-height: 2.5rem !important;
}
.btn-icon-only .bi {
margin: 0 !important;
}
/* ═══════════════════════════════════════════════════════════════════════════
6. FUNDOS CLAROS - Ícones podem ser coloridos (não força branco)
═══════════════════════════════════════════════════════════════════════════ */
button[class*="bg-gray-1"] .bi,
button[class*="bg-gray-2"] .bi,
button[class*="bg-slate-1"] .bi,
button[class*="bg-slate-2"] .bi,
button[class*="bg-white"] .bi {
filter: none !important;
/* Mantém cor definida ou herda do contexto */
}
/* ---------------------------------------------------------------------------
HERANÇA DE COR - Ícones DENTRO de elementos com classes de cor Tailwind
Garante que ícones herdem a cor do texto do elemento pai
--------------------------------------------------------------------------- */
.text-purple-600 .bi, .text-purple-600 i[class*="bi-"] { color: #9333ea !important; }
.text-purple-500 .bi, .text-purple-500 i[class*="bi-"] { color: #a855f7 !important; }
.text-purple-700 .bi, .text-purple-700 i[class*="bi-"] { color: #7e22ce !important; }
.text-blue-600 .bi, .text-blue-600 i[class*="bi-"] { color: #2563eb !important; }
.text-blue-500 .bi, .text-blue-500 i[class*="bi-"] { color: #3b82f6 !important; }
.text-blue-700 .bi, .text-blue-700 i[class*="bi-"] { color: #1d4ed8 !important; }
.text-green-600 .bi, .text-green-600 i[class*="bi-"] { color: #16a34a !important; }
.text-green-500 .bi, .text-green-500 i[class*="bi-"] { color: #22c55e !important; }
.text-green-700 .bi, .text-green-700 i[class*="bi-"] { color: #15803d !important; }
.text-red-600 .bi, .text-red-600 i[class*="bi-"] { color: #dc2626 !important; }
.text-red-500 .bi, .text-red-500 i[class*="bi-"] { color: #ef4444 !important; }
.text-red-700 .bi, .text-red-700 i[class*="bi-"] { color: #b91c1c !important; }
.text-yellow-600 .bi, .text-yellow-600 i[class*="bi-"] { color: #ca8a04 !important; }
.text-yellow-500 .bi, .text-yellow-500 i[class*="bi-"] { color: #eab308 !important; }
.text-yellow-700 .bi, .text-yellow-700 i[class*="bi-"] { color: #a16207 !important; }
.text-yellow-800 .bi, .text-yellow-800 i[class*="bi-"] { color: #854d0e !important; }
.text-amber-600 .bi, .text-amber-600 i[class*="bi-"] { color: #d97706 !important; }
.text-amber-700 .bi, .text-amber-700 i[class*="bi-"] { color: #b45309 !important; }
.text-orange-600 .bi, .text-orange-600 i[class*="bi-"] { color: #ea580c !important; }
.text-orange-700 .bi, .text-orange-700 i[class*="bi-"] { color: #c2410c !important; }
.text-pink-600 .bi, .text-pink-600 i[class*="bi-"] { color: #db2777 !important; }
.text-indigo-600 .bi, .text-indigo-600 i[class*="bi-"] { color: #4f46e5 !important; }
.text-cyan-600 .bi, .text-cyan-600 i[class*="bi-"] { color: #0891b2 !important; }
.text-teal-600 .bi, .text-teal-600 i[class*="bi-"] { color: #0d9488 !important; }
.text-gray-600 .bi, .text-gray-600 i[class*="bi-"] { color: #4b5563 !important; }
.text-gray-500 .bi, .text-gray-500 i[class*="bi-"] { color: #6b7280 !important; }
.text-gray-700 .bi, .text-gray-700 i[class*="bi-"] { color: #374151 !important; }
/* CRÍTICO: text-gray-800 está no — NÃO usar !important aqui!
Com !important, esta regra (specificity 0,2,0) vence QUALQUER regra local
como .imp-sec-icon i { color: white !important } (specificity 0,1,1).
Sem !important, ícones herdam #1f2937 normalmente via cascade,
mas qualquer regra local com !important vence corretamente.
Ref: docs/Importante-validador-leiaute-bonito.txt seção 2 */
.text-gray-800 .bi, .text-gray-800 i[class*="bi-"] { color: #1f2937; }
.text-white .bi, .text-white i[class*="bi-"] { color: #ffffff !important; }
/* Dark mode - cores claras */
.dark .text-yellow-400 .bi, .dark .text-yellow-400 i[class*="bi-"] { color: #facc15 !important; }
.dark .text-green-400 .bi, .dark .text-green-400 i[class*="bi-"] { color: #4ade80 !important; }
.dark .text-red-400 .bi, .dark .text-red-400 i[class*="bi-"] { color: #f87171 !important; }
.dark .text-blue-400 .bi, .dark .text-blue-400 i[class*="bi-"] { color: #60a5fa !important; }
.dark .text-purple-400 .bi, .dark .text-purple-400 i[class*="bi-"] { color: #c084fc !important; }
.dark .text-gray-400 .bi, .dark .text-gray-400 i[class*="bi-"] { color: #9ca3af !important; }
.dark .text-gray-300 .bi, .dark .text-gray-300 i[class*="bi-"] { color: #d1d5db !important; }
/* ═══════════════════════════════════════════════════════════════════════════
🎨 REGRAS SIMPLIFICADAS DE CORES (SEM AUTO-DETECÇÃO)
FILOSOFIA: Ícones herdam cor do contexto (currentColor) por padrão.
Para ícones brancos, use classes EXPLÍCITAS:
- .text-white no ícone
- .icon-white no ícone
- .icons-white no container
REMOVIDO: Toda auto-detecção de backgrounds que causava conflitos.
═══════════════════════════════════════════════════════════════════════════ */
/* Ícones com classe text-* são respeitados - sem override */
i.bi[class*="text-"] {
/* Deixa Tailwind controlar a cor */
}
/* Garantir que .text-white funcione */
i.bi.text-white,
.bi.text-white {
color: #ffffff !important;
}
/* Componentes específicos que PRECISAM de ícones brancos */
.stat-card-dark .bi:not([class*="text-"]),
.dashboard-icon-glow .bi:not([class*="text-"]) {
color: #ffffff !important;
}
/* ═══════════════════════════════════════════════════════════════════════════
CONTEXTOS ESPECÍFICOS - Sobrescrevem o tamanho global quando necessário
═══════════════════════════════════════════════════════════════════════════ */
/* Ícones do Menu Lateral - APENAS dentro do nav/aside do menu */
nav.sidebar .bi, aside.sidebar .bi,
.menu-lateral .bi, .menu-item .bi {
font-size: var(--icon-size-menu) !important;
}
/* Ícones de Submenus - classe específica apenas */
.submenu-icon {
font-size: var(--icon-size-submenu) !important;
color: var(--icon-color-menu) !important;
display: inline-block !important;
}
/* Ícones do Header/Topo */
header .bi {
font-size: var(--icon-size-header) !important;
}
/* Ícones em Botões */
button .bi, .btn .bi, a.btn .bi {
font-size: var(--icon-size-button) !important;
}
/* ═══════════════════════════════════════════════════════════════════════════
TAMANHOS PREMIUM - Escala Harmonica (Font-based)
Compativel com sistema anterior Lucide
═══════════════════════════════════════════════════════════════════════════ */
.bi.icon-2xs, .icon-2xs .bi, .icon-2xs[class^="bi-"], .icon-2xs[class*=" bi-"] {
font-size: 0.75rem !important; /* 12px */
}
.bi.icon-xs, .icon-xs .bi, .icon-xs[class^="bi-"], .icon-xs[class*=" bi-"] {
font-size: 0.875rem !important; /* 14px */
}
.bi.icon-sm, .icon-sm .bi, .icon-sm[class^="bi-"], .icon-sm[class*=" bi-"] {
font-size: 1rem !important; /* 16px */
}
.bi.icon-md, .icon-md .bi, .icon-md[class^="bi-"], .icon-md[class*=" bi-"] {
font-size: 1.25rem !important; /* 20px */
}
.bi.icon-base, .icon-base .bi, .icon-base[class^="bi-"], .icon-base[class*=" bi-"] {
font-size: 1.5rem !important; /* 24px */
}
.bi.icon-lg, .icon-lg .bi, .icon-lg[class^="bi-"], .icon-lg[class*=" bi-"] {
font-size: 1.75rem !important; /* 28px */
}
.bi.icon-xl, .icon-xl .bi, .icon-xl[class^="bi-"], .icon-xl[class*=" bi-"] {
font-size: 2rem !important; /* 32px */
}
.bi.icon-2xl, .icon-2xl .bi, .icon-2xl[class^="bi-"], .icon-2xl[class*=" bi-"] {
font-size: 2.5rem !important; /* 40px */
}
.bi.icon-3xl, .icon-3xl .bi, .icon-3xl[class^="bi-"], .icon-3xl[class*=" bi-"] {
font-size: 3rem !important; /* 48px */
}
.bi.icon-4xl, .icon-4xl .bi, .icon-4xl[class^="bi-"], .icon-4xl[class*=" bi-"] {
font-size: 4rem !important; /* 64px */
}
.bi.icon-hero, .icon-hero .bi, .icon-hero[class^="bi-"], .icon-hero[class*=" bi-"] {
font-size: 5rem !important; /* 80px */
}
/* ═══════════════════════════════════════════════════════════════════════════
CORES PREMIUM - Paleta Semantica
Mantida identica ao sistema Lucide
═══════════════════════════════════════════════════════════════════════════ */
.bi.icon-success, .icon-success .bi { color: #10b981; }
.bi.icon-danger, .icon-danger .bi { color: #ef4444; }
.bi.icon-warning, .icon-warning .bi { color: #f59e0b; }
.bi.icon-info, .icon-info .bi { color: #3b82f6; }
.bi.icon-primary, .icon-primary .bi { color: var(--color-primary-600); }
.bi.icon-secondary, .icon-secondary .bi { color: #6b7280; }
.bi.icon-whatsapp, .icon-whatsapp .bi { color: #25D366; }
/* ═══════════════════════════════════════════════════════════════════════════
ESTILOS PREMIUM - Variantes Visuais
═══════════════════════════════════════════════════════════════════════════ */
/* Icone com fundo circular */
.bi.icon-circled, .icon-circled .bi {
padding: 0.35em;
background: currentColor;
border-radius: 50%;
color: white;
}
.bi.icon-circled::before, .icon-circled .bi::before {
color: white;
}
/* Icone outlined (apenas borda) */
.bi.icon-outlined, .icon-outlined .bi {
-webkit-text-stroke: 0.5px currentColor;
-webkit-text-fill-color: transparent;
}
/* ═══════════════════════════════════════════════════════════════════════════
EFEITOS VISUAIS PREMIUM
═══════════════════════════════════════════════════════════════════════════ */
/* Sombra sutil para destaque */
.bi.icon-shadow, .icon-shadow .bi {
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.15));
}
/* Sombra colorida (herda a cor do icone) */
.bi.icon-glow, .icon-glow .bi {
filter: drop-shadow(0 0 3px currentColor);
}
/* Efeito glass/blur */
.bi.icon-glass, .icon-glass .bi {
filter: drop-shadow(0 1px 1px rgba(255, 255, 255, 0.3))
drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}
/* ═══════════════════════════════════════════════════════════════════════════
ANIMACOES PREMIUM (60fps - GPU Accelerated)
Transicoes suaves com cubic-bezier profissional
═══════════════════════════════════════════════════════════════════════════ */
/* SPIN - Rotacao continua (para loading) */
.bi.icon-spin,
.bi.animate-spin,
.icon-spin .bi,
.animate-spin .bi {
animation: biIconSpin 1.5s linear infinite;
}
/* PULSE - Pulsacao elegante (para notificacoes) */
.bi.icon-pulse,
.bi.animate-pulse,
.icon-pulse .bi,
.animate-pulse .bi {
animation: biIconPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
/* BOUNCE - Pulo suave (para destaque) */
.bi.icon-bounce,
.icon-bounce .bi {
animation: biIconBounce 1s ease infinite;
}
/* SHAKE - Tremor para alertas */
.bi.icon-shake,
.icon-shake .bi {
animation: biIconShake 0.5s ease-in-out;
}
/* PING - Efeito sonar (para notificacoes) */
.bi.icon-ping,
.icon-ping .bi {
animation: biIconPing 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;
}
/* FLOAT - Flutuacao decorativa */
.bi.icon-float,
.icon-float .bi {
animation: biIconFloat 3s ease-in-out infinite;
}
/* ═══════════════════════════════════════════════════════════════════════════
KEYFRAMES - Animacoes Otimizadas para GPU
Usando transform e opacity para 60fps garantidos
═══════════════════════════════════════════════════════════════════════════ */
@keyframes biIconSpin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes biIconPulse {
0%, 100% {
opacity: 1;
transform: scale(1);
}
50% {
opacity: 0.7;
transform: scale(0.95);
}
}
@keyframes biIconBounce {
0%, 100% {
transform: translateY(0);
}
25% {
transform: translateY(-3px);
}
75% {
transform: translateY(1px);
}
}
@keyframes biIconShake {
0%, 100% {
transform: translateX(0);
}
20%, 60% {
transform: translateX(-2px);
}
40%, 80% {
transform: translateX(2px);
}
}
@keyframes biIconPing {
0% {
transform: scale(1);
opacity: 1;
}
75%, 100% {
transform: scale(1.5);
opacity: 0;
}
}
@keyframes biIconFloat {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-5px);
}
}
/* ═══════════════════════════════════════════════════════════════════════════
INTERACOES & HOVER EFFECTS
Movimentos sutis e profissionais
═══════════════════════════════════════════════════════════════════════════ */
/* Hover elegante em elementos clicaveis */
button:hover .bi,
a:hover .bi,
[role="button"]:hover .bi,
.clickable:hover .bi,
button:hover [class^="bi-"],
a:hover [class^="bi-"],
[role="button"]:hover [class^="bi-"],
.clickable:hover [class^="bi-"] {
transform: scale(1.08);
filter: brightness(1.1);
}
/* Hover com rotacao sutil */
.icon-hover-rotate:hover .bi,
.bi.icon-hover-rotate:hover,
.icon-hover-rotate:hover [class^="bi-"] {
transform: rotate(8deg) scale(1.05);
}
/* Hover com bounce */
.icon-hover-bounce:hover .bi,
.bi.icon-hover-bounce:hover,
.icon-hover-bounce:hover [class^="bi-"] {
animation: biIconBounce 0.4s ease;
}
/* Hover premium com translateY - Flutuacao suave */
.bi-premium-hover,
.icon-premium-hover .bi {
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.bi-premium-hover:hover,
.icon-premium-hover:hover .bi {
transform: translateY(-5px) scale(1.1);
color: var(--color-primary-600);
}
/* Active state - feedback visual */
button:active .bi,
a:active .bi,
button:active [class^="bi-"],
a:active [class^="bi-"] {
transform: scale(0.95);
transition-duration: 0.1s;
}
/* Focus state para acessibilidade */
button:focus-visible .bi,
a:focus-visible .bi {
outline: 2px solid currentColor;
outline-offset: 2px;
border-radius: 2px;
}
/* ═══════════════════════════════════════════════════════════════════════════
DARK MODE SUPPORT
Mantido identico ao sistema Lucide
═══════════════════════════════════════════════════════════════════════════ */
.dark .bi,
.dark [class^="bi-"],
.dark [class*=" bi-"] {
filter: brightness(1.1);
}
.dark .bi.icon-success, .dark .icon-success .bi { color: #6ee7b7; }
.dark .bi.icon-danger, .dark .icon-danger .bi { color: #fca5a5; }
.dark .bi.icon-warning, .dark .icon-warning .bi { color: #fcd34d; }
.dark .bi.icon-info, .dark .icon-info .bi { color: #93c5fd; }
.dark .bi.icon-primary, .dark .icon-primary .bi { color: #a5b4fc; }
.dark .bi.icon-secondary, .dark .icon-secondary .bi { color: #9ca3af; }
.dark .bi.icon-whatsapp, .dark .icon-whatsapp .bi { color: #4ade80; }
.dark .bi.icon-shadow, .dark .icon-shadow .bi {
filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.4));
}
.dark .bi.icon-glow, .dark .icon-glow .bi {
filter: drop-shadow(0 0 4px currentColor);
}
/* Dark mode em headings */
.dark h1 .bi, .dark h1 [class^="bi-"] { color: #a5b4fc; }
.dark h2 .bi, .dark h2 [class^="bi-"] { color: #c4b5fd; }
.dark h3 .bi, .dark h3 [class^="bi-"] { color: #a5b4fc; }
.dark h4 .bi, .dark h4 [class^="bi-"] { color: #93c5fd; }
.dark h5 .bi, .dark h5 [class^="bi-"] { color: #67e8f9; }
.dark h6 .bi, .dark h6 [class^="bi-"] { color: #9ca3af; }
/* Dark mode em labels */
.dark label .bi,
.dark .form-label .bi {
color: #a5b4fc;
}
/* ═══════════════════════════════════════════════════════════════════════════
RESPONSIVE - Ajustes Mobile
Area de toque minima 24px para acessibilidade
═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
/* Ícones em botões e links - área de toque mínima para acessibilidade */
button .bi,
a .bi,
button [class^="bi-"],
a [class^="bi-"] {
min-width: 24px;
min-height: 24px;
}
}
/* ═══════════════════════════════════════════════════════════════════════════
ACESSIBILIDADE
Respeita preferencia do usuario por movimento reduzido
═══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
.bi.icon-spin,
.bi.icon-pulse,
.bi.icon-bounce,
.bi.icon-shake,
.bi.icon-ping,
.bi.icon-float,
.bi.animate-spin,
.bi.animate-pulse,
.icon-spin .bi,
.icon-pulse .bi,
.icon-bounce .bi,
.animate-spin .bi,
.animate-pulse .bi {
animation: none !important;
}
.bi,
[class^="bi-"],
[class*=" bi-"] {
transition: none !important;
}
button:hover .bi,
a:hover .bi {
transform: none !important;
}
}
/* ═══════════════════════════════════════════════════════════════════════════
UTILITY CLASSES
Classes auxiliares para posicionamento e alinhamento
═══════════════════════════════════════════════════════════════════════════ */
.bi.icon-inline, .icon-inline .bi {
vertical-align: middle;
margin-right: 0.375em;
}
.bi.icon-right, .icon-right .bi {
margin-left: 0.375em;
margin-right: 0;
}
.bi.icon-center, .icon-center .bi {
display: block;
margin: 0 auto;
}
.bi.icon-static, .icon-static .bi {
transition: none !important;
animation: none !important;
}
/* ═══════════════════════════════════════════════════════════════════════════
CORES AUTOMATICAS INTELIGENTES
Aplica cores semanticas baseado no contexto
═══════════════════════════════════════════════════════════════════════════ */
label .bi,
.form-label .bi,
.label .bi {
color: var(--color-primary-600);
opacity: 0.9;
}
h1 .bi, h1 [class^="bi-"] { color: var(--color-primary-600); }
h2 .bi, h2 [class^="bi-"] { color: var(--color-primary-500); }
h3 .bi, h3 [class^="bi-"] { color: var(--color-primary-600); }
h4 .bi, h4 [class^="bi-"] { color: #3b82f6; }
h5 .bi, h5 [class^="bi-"] { color: #0ea5e9; }
h6 .bi, h6 [class^="bi-"] { color: #6b7280; }
.card-header .bi,
.card-title .bi {
color: var(--color-primary-600);
}
.alert-success .bi { color: #10b981; }
.alert-danger .bi { color: #ef4444; }
.alert-warning .bi { color: #f59e0b; }
.alert-info .bi { color: #3b82f6; }
nav .bi,
.breadcrumb .bi {
color: #6b7280;
opacity: 0.8;
}
/* Ícones em elementos interativos herdam cor (sem !important para permitir override por background) */
button .bi,
.btn .bi,
a .bi {
color: inherit;
}
/* Ícones em tabelas herdam cor do pai */
table .bi {
color: inherit;
}
th .bi {
color: inherit;
}
/* Ações de lista - garantir que ícones herdem a cor dos botões/links pai */
td a .bi,
td button .bi,
.flex.items-center.justify-end a .bi,
.flex.items-center.justify-end button .bi,
[class*="space-x"] a .bi,
[class*="space-x"] button .bi {
color: inherit;
}
/* ═══════════════════════════════════════════════════════════════════════════
LOTTIEFILES INTEGRATION READY
Classes preparadas para integracao com animacoes JSON
═══════════════════════════════════════════════════════════════════════════ */
.bi-lottie-container {
display: inline-flex;
align-items: center;
justify-content: center;
}
.bi-lottie-container .bi {
display: none; /* Esconde icone quando Lottie ativo */
}
.bi-lottie-container.lottie-fallback .bi {
display: inline-block; /* Mostra icone se Lottie falhar */
}
/* ═══════════════════════════════════════════════════════════════════════════
VARIANTES DE PREENCHIMENTO (Bootstrap Icons -fill)
Suporte para versoes preenchidas dos icones
═══════════════════════════════════════════════════════════════════════════ */
.bi.icon-filled {
/* Bootstrap Icons ja tem versoes -fill */
/* Esta classe e para compatibilidade com codigo Lucide */
}
/* Duo-tone effect (simulado) */
.bi.icon-duo {
position: relative;
opacity: 0.85;
}
.bi.icon-duo::after {
content: attr(data-icon);
position: absolute;
left: 0;
top: 0;
opacity: 0.15;
z-index: -1;
}
/* ═══════════════════════════════════════════════════════════════════════════
PULSE GLOW - Efeito premium com box-shadow animado
Usado em icones de status importantes
═══════════════════════════════════════════════════════════════════════════ */
.bi.icon-pulse-glow,
.icon-pulse-glow .bi {
animation: biIconPulseGlow 2s ease-in-out infinite;
}
@keyframes biIconPulseGlow {
0%, 100% {
filter: drop-shadow(0 0 2px currentColor);
}
50% {
filter: drop-shadow(0 0 8px currentColor) drop-shadow(0 0 12px currentColor);
}
}
/* ═══════════════════════════════════════════════════════════════════════════
SKELETON LOADING STATE
Para icones em estado de carregamento
═══════════════════════════════════════════════════════════════════════════ */
.bi.icon-skeleton,
.icon-skeleton .bi {
color: transparent !important;
background: linear-gradient(90deg, #e5e7eb 25%, #f3f4f6 50%, #e5e7eb 75%);
background-size: 200% 100%;
animation: biIconSkeleton 1.5s ease-in-out infinite;
border-radius: 4px;
}
@keyframes biIconSkeleton {
0% {
background-position: 200% 0;
}
100% {
background-position: -200% 0;
}
}
/* ═══════════════════════════════════════════════════════════════════════════
FAB (Floating Action Button) STYLES
Estilos para botoes flutuantes com icones
═══════════════════════════════════════════════════════════════════════════ */
.fab .bi,
.floating-action-button .bi {
font-size: 1.5rem;
}
.fab:hover .bi,
.floating-action-button:hover .bi {
transform: scale(1.15);
}
.fab.fab-pulse .bi {
animation: biIconFabPulse 2s ease-in-out infinite;
}
@keyframes biIconFabPulse {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
}
/* ═══════════════════════════════════════════════════════════════════════════
PRINT STYLES
Otimizacoes para impressao
═══════════════════════════════════════════════════════════════════════════ */
@media print {
.bi,
[class^="bi-"],
[class*=" bi-"] {
color: #000 !important;
filter: none !important;
animation: none !important;
transition: none !important;
}
.bi.icon-spin,
.bi.icon-pulse,
.bi.icon-bounce {
animation: none !important;
}
}
/* ═══════════════════════════════════════════════════════════════════════════
ICONES "VIVOS" - Animacoes OPT-IN (adicione .icon-living para ativar)
Cada icone tem sua animacao logica e intuitiva
═══════════════════════════════════════════════════════════════════════════ */
/* Sino que balanca - USE: class="icon-living" no icone bell */
.bi-bell.icon-living,
.bi-bell-fill.icon-living {
animation: biBellSwing 2s ease-in-out infinite;
transform-origin: top center;
}
@keyframes biBellSwing {
0%, 100% { transform: rotate(0deg); }
10% { transform: rotate(8deg); }
20% { transform: rotate(-8deg); }
30% { transform: rotate(6deg); }
40% { transform: rotate(-6deg); }
50% { transform: rotate(0deg); }
}
/* Coracao que pulsa - USE: class="icon-living" */
.bi-heart.icon-living,
.bi-heart-fill.icon-living {
animation: biHeartPulse 1.5s ease-in-out infinite;
color: #ef4444;
}
@keyframes biHeartPulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.15); }
}
/* Estrela que brilha - USE: class="icon-living" */
.bi-star.icon-living,
.bi-star-fill.icon-living {
animation: biStarTwinkle 2s ease-in-out infinite;
color: #fbbf24;
}
@keyframes biStarTwinkle {
0%, 100% { opacity: 1; filter: brightness(1); }
50% { opacity: 0.8; filter: brightness(1.3); }
}
/* Raio/Lightning com energia - USE: class="icon-living" */
.bi-lightning-charge.icon-living,
.bi-lightning-charge-fill.icon-living {
animation: biZapEnergy 1.5s ease-in-out infinite;
color: #f59e0b;
}
@keyframes biZapEnergy {
0%, 100% { filter: brightness(1); }
50% { filter: brightness(1.4) drop-shadow(0 0 3px currentColor); }
}
/* Loader girando - AUTOMATICO (icones de loading devem girar) */
.bi-arrow-clockwise:not(.icon-static),
.bi-arrow-repeat:not(.icon-static) {
animation: biIconSpin 1.5s linear infinite;
}
/* WiFi pulsando - USE: class="icon-living" */
.bi-wifi.icon-living {
animation: biWifiPulse 2s ease-in-out infinite;
color: #10b981;
}
@keyframes biWifiPulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
/* ═══════════════════════════════════════════════════════════════════════════
ANIMACOES HOVER INTELIGENTES - Cada icone tem sua animacao logica
Efeitos premium que respondem ao hover do usuario
═══════════════════════════════════════════════════════════════════════════ */
/* Base: todos os icones clicaveis ganham transicao suave */
a .bi, a [class^="bi-"],
button .bi, button [class^="bi-"],
[role="button"] .bi,
.cursor-pointer .bi,
.clickable .bi {
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
color 0.2s ease,
filter 0.2s ease;
}
/* Engrenagem/Settings - Roda suavemente */
a:hover .bi-gear, button:hover .bi-gear,
a:hover .bi-gear-fill, button:hover .bi-gear-fill,
a:hover .bi-gears, button:hover .bi-gears {
transform: rotate(90deg);
color: var(--color-primary-600);
}
/* Lupa/Search - Aumenta como se aproximando */
a:hover .bi-search, button:hover .bi-search {
transform: scale(1.15) rotate(-5deg);
color: #3b82f6;
}
/* Coracao - Pulsa com amor */
a:hover .bi-heart, button:hover .bi-heart,
a:hover .bi-heart-fill, button:hover .bi-heart-fill {
transform: scale(1.2);
color: #ef4444;
filter: drop-shadow(0 0 8px rgba(239, 68, 68, 0.5));
}
/* Sino - Balanca */
a:hover .bi-bell, button:hover .bi-bell,
a:hover .bi-bell-fill, button:hover .bi-bell-fill {
animation: biHoverBellSwing 0.5s ease-in-out;
color: #f59e0b;
}
@keyframes biHoverBellSwing {
0%, 100% { transform: rotate(0deg); }
20% { transform: rotate(15deg); }
40% { transform: rotate(-15deg); }
60% { transform: rotate(10deg); }
80% { transform: rotate(-5deg); }
}
/* Olho - Pisca */
a:hover .bi-eye, button:hover .bi-eye,
a:hover .bi-eye-fill, button:hover .bi-eye-fill {
animation: biHoverEyeBlink 0.4s ease-in-out;
color: var(--color-primary-500);
}
@keyframes biHoverEyeBlink {
0%, 100% { transform: scaleY(1); }
50% { transform: scaleY(0.1); }
}
/* Lixeira - Treme (cuidado!) */
a:hover .bi-trash, button:hover .bi-trash,
a:hover .bi-trash-fill, button:hover .bi-trash-fill,
a:hover .bi-trash2, button:hover .bi-trash2,
a:hover .bi-trash2-fill, button:hover .bi-trash2-fill,
a:hover .bi-trash3, button:hover .bi-trash3,
a:hover .bi-trash3-fill, button:hover .bi-trash3-fill {
animation: biHoverTrashShake 0.4s ease-in-out;
color: #ef4444;
}
@keyframes biHoverTrashShake {
0%, 100% { transform: translateX(0) rotate(0deg); }
25% { transform: translateX(-3px) rotate(-5deg); }
50% { transform: translateX(3px) rotate(5deg); }
75% { transform: translateX(-2px) rotate(-3deg); }
}
/* Download - Desce */
a:hover .bi-download, button:hover .bi-download,
a:hover .bi-cloud-download, button:hover .bi-cloud-download,
a:hover .bi-cloud-arrow-down, button:hover .bi-cloud-arrow-down {
animation: biHoverDownload 0.4s ease-in-out;
color: #10b981;
}
@keyframes biHoverDownload {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(4px); }
}
/* Upload - Sobe */
a:hover .bi-upload, button:hover .bi-upload,
a:hover .bi-cloud-upload, button:hover .bi-cloud-upload,
a:hover .bi-cloud-arrow-up, button:hover .bi-cloud-arrow-up {
animation: biHoverUpload 0.4s ease-in-out;
color: #3b82f6;
}
@keyframes biHoverUpload {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-4px); }
}
/* Refresh/Sync - Roda */
a:hover .bi-arrow-clockwise, button:hover .bi-arrow-clockwise,
a:hover .bi-arrow-counterclockwise, button:hover .bi-arrow-counterclockwise,
a:hover .bi-arrow-repeat, button:hover .bi-arrow-repeat {
animation: biHoverSpin 0.6s ease-in-out;
color: var(--color-primary-600);
}
@keyframes biHoverSpin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Check - Bounce de confirmacao */
a:hover .bi-check, button:hover .bi-check,
a:hover .bi-check-lg, button:hover .bi-check-lg,
a:hover .bi-check-circle, button:hover .bi-check-circle,
a:hover .bi-check-circle-fill, button:hover .bi-check-circle-fill,
a:hover .bi-check2, button:hover .bi-check2,
a:hover .bi-check2-circle, button:hover .bi-check2-circle {
animation: biHoverCheckBounce 0.4s ease-out;
color: #10b981;
}
@keyframes biHoverCheckBounce {
0% { transform: scale(1); }
50% { transform: scale(1.3); }
100% { transform: scale(1); }
}
/* X/Close - Roda levemente */
a:hover .bi-x, button:hover .bi-x,
a:hover .bi-x-lg, button:hover .bi-x-lg,
a:hover .bi-x-circle, button:hover .bi-x-circle,
a:hover .bi-x-circle-fill, button:hover .bi-x-circle-fill {
transform: rotate(90deg);
color: #ef4444;
}
/* Plus/Add - Roda 90deg (vira X) */
a:hover .bi-plus, button:hover .bi-plus,
a:hover .bi-plus-lg, button:hover .bi-plus-lg,
a:hover .bi-plus-circle, button:hover .bi-plus-circle,
a:hover .bi-plus-circle-fill, button:hover .bi-plus-circle-fill {
transform: rotate(90deg) scale(1.1);
color: #10b981;
}
/* Edit/Pencil - Inclina como escrevendo */
a:hover .bi-pencil, button:hover .bi-pencil,
a:hover .bi-pencil-fill, button:hover .bi-pencil-fill,
a:hover .bi-pencil-square, button:hover .bi-pencil-square {
transform: rotate(-15deg) translateY(-2px);
color: #f59e0b;
}
/* Mail/Envelope - Abre levemente */
a:hover .bi-envelope, button:hover .bi-envelope,
a:hover .bi-envelope-fill, button:hover .bi-envelope-fill,
a:hover .bi-envelope-open, button:hover .bi-envelope-open {
transform: translateY(-3px) scale(1.05);
color: #3b82f6;
filter: drop-shadow(0 4px 6px rgba(59, 130, 246, 0.3));
}
/* User/Person - Pula levemente */
a:hover .bi-person, button:hover .bi-person,
a:hover .bi-person-fill, button:hover .bi-person-fill,
a:hover .bi-people, button:hover .bi-people,
a:hover .bi-people-fill, button:hover .bi-people-fill,
a:hover .bi-person-plus, button:hover .bi-person-plus {
animation: biHoverUserJump 0.3s ease-out;
color: var(--color-primary-500);
}
@keyframes biHoverUserJump {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-4px); }
}
/* Home/House - Pulsa acolhedor */
a:hover .bi-house, button:hover .bi-house,
a:hover .bi-house-fill, button:hover .bi-house-fill,
a:hover .bi-house-door, button:hover .bi-house-door {
transform: scale(1.1);
color: var(--color-primary-600);
filter: drop-shadow(0 0 8px rgba(99, 102, 241, 0.4));
}
/* Star - Brilha */
a:hover .bi-star, button:hover .bi-star,
a:hover .bi-star-fill, button:hover .bi-star-fill {
transform: scale(1.2) rotate(15deg);
color: #fbbf24;
filter: drop-shadow(0 0 10px rgba(251, 191, 36, 0.6));
}
/* Lightning/Zap - Energia */
a:hover .bi-lightning-charge, button:hover .bi-lightning-charge,
a:hover .bi-lightning-charge-fill, button:hover .bi-lightning-charge-fill {
transform: scale(1.15);
color: #f59e0b;
filter: drop-shadow(0 0 8px rgba(245, 158, 11, 0.6));
}
/* Shield - Protege */
a:hover .bi-shield, button:hover .bi-shield,
a:hover .bi-shield-fill, button:hover .bi-shield-fill,
a:hover .bi-shield-check, button:hover .bi-shield-check {
transform: scale(1.08);
color: #10b981;
filter: drop-shadow(0 0 6px rgba(16, 185, 129, 0.4));
}
/* Lock - Trava */
a:hover .bi-lock, button:hover .bi-lock,
a:hover .bi-lock-fill, button:hover .bi-lock-fill {
transform: translateY(-2px);
color: #6b7280;
}
/* Unlock - Abre */
a:hover .bi-unlock, button:hover .bi-unlock,
a:hover .bi-unlock-fill, button:hover .bi-unlock-fill {
transform: translateY(-2px);
color: #10b981;
}
/* Copy/Clipboard - Efeito duplicata */
a:hover .bi-clipboard, button:hover .bi-clipboard,
a:hover .bi-clipboard-fill, button:hover .bi-clipboard-fill,
a:hover .bi-clipboard-check, button:hover .bi-clipboard-check,
a:hover .bi-copy, button:hover .bi-copy {
transform: translate(2px, -2px);
color: var(--color-primary-600);
filter: drop-shadow(-3px 3px 0 rgba(99, 102, 241, 0.3));
}
/* Save/Floppy - Pulsa para baixo */
a:hover .bi-save, button:hover .bi-save,
a:hover .bi-save-fill, button:hover .bi-save-fill,
a:hover .bi-floppy, button:hover .bi-floppy {
animation: biHoverSave 0.4s ease-out;
color: #10b981;
}
@keyframes biHoverSave {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(3px) scale(1.05); }
}
/* Setas direcionais - Movem na direcao */
a:hover .bi-arrow-right, button:hover .bi-arrow-right,
a:hover .bi-chevron-right, button:hover .bi-chevron-right {
transform: translateX(4px);
color: #3b82f6;
}
a:hover .bi-arrow-left, button:hover .bi-arrow-left,
a:hover .bi-chevron-left, button:hover .bi-chevron-left {
transform: translateX(-4px);
color: #3b82f6;
}
a:hover .bi-arrow-up, button:hover .bi-arrow-up,
a:hover .bi-chevron-up, button:hover .bi-chevron-up {
transform: translateY(-4px);
color: #3b82f6;
}
a:hover .bi-arrow-down, button:hover .bi-arrow-down,
a:hover .bi-chevron-down, button:hover .bi-chevron-down {
transform: translateY(4px);
color: #3b82f6;
}
/* Dispositivos - Brilham */
a:hover .bi-phone, button:hover .bi-phone,
a:hover .bi-tablet, button:hover .bi-tablet,
a:hover .bi-display, button:hover .bi-display,
a:hover .bi-laptop, button:hover .bi-laptop {
transform: scale(1.1);
filter: drop-shadow(0 0 8px rgba(99, 102, 241, 0.5));
color: var(--color-primary-600);
}
/* Pasta/Folder - Abre */
a:hover .bi-folder, button:hover .bi-folder,
a:hover .bi-folder-fill, button:hover .bi-folder-fill,
a:hover .bi-folder2-open, button:hover .bi-folder2-open {
transform: scale(1.05) translateY(-2px);
color: #f59e0b;
}
/* Arquivo/File - Levanta */
a:hover .bi-file-earmark, button:hover .bi-file-earmark,
a:hover .bi-file-earmark-text, button:hover .bi-file-earmark-text,
a:hover .bi-file-text, button:hover .bi-file-text {
transform: translateY(-3px) rotate(-3deg);
color: var(--color-primary-600);
filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.15));
}
/* Impressora - Pulsa */
a:hover .bi-printer, button:hover .bi-printer,
a:hover .bi-printer-fill, button:hover .bi-printer-fill {
animation: biHoverPrint 0.5s ease-in-out;
color: var(--color-primary-600);
}
@keyframes biHoverPrint {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.1) translateY(-2px); }
}
/* Carrinho de compras - Avanca */
a:hover .bi-cart, button:hover .bi-cart,
a:hover .bi-cart-fill, button:hover .bi-cart-fill,
a:hover .bi-bag, button:hover .bi-bag,
a:hover .bi-bag-fill, button:hover .bi-bag-fill {
animation: biHoverCart 0.4s ease-out;
color: #10b981;
}
@keyframes biHoverCart {
0%, 100% { transform: translateX(0); }
50% { transform: translateX(5px); }
}
/* Cartao/Pagamento - Desliza */
a:hover .bi-credit-card, button:hover .bi-credit-card,
a:hover .bi-credit-card-fill, button:hover .bi-credit-card-fill {
transform: translateX(3px) rotateY(10deg);
color: var(--color-primary-600);
}
/* Ferramentas - Giram */
a:hover .bi-wrench, button:hover .bi-wrench,
a:hover .bi-tools, button:hover .bi-tools {
transform: rotate(-30deg);
color: #6b7280;
}
/* Pacote/Box - Abre */
a:hover .bi-box, button:hover .bi-box,
a:hover .bi-boxes, button:hover .bi-boxes {
transform: translateY(-3px) scale(1.05);
color: #f59e0b;
filter: drop-shadow(0 4px 8px rgba(245, 158, 11, 0.3));
}
/* Rocket - Decola! */
a:hover .bi-rocket, button:hover .bi-rocket,
a:hover .bi-rocket-takeoff, button:hover .bi-rocket-takeoff {
animation: biHoverRocket 0.5s ease-out forwards;
color: var(--color-primary-600);
}
@keyframes biHoverRocket {
0% { transform: translate(0, 0) rotate(0deg); }
100% { transform: translate(5px, -5px) rotate(-10deg); }
}
/* Sparkles/Stars - Brilha muito */
a:hover .bi-stars, button:hover .bi-stars,
a:hover .bi-balloon, button:hover .bi-balloon {
animation: biHoverSparkle 0.5s ease-in-out;
color: #fbbf24;
filter: drop-shadow(0 0 12px rgba(251, 191, 36, 0.8));
}
@keyframes biHoverSparkle {
0%, 100% { transform: scale(1) rotate(0deg); }
50% { transform: scale(1.2) rotate(10deg); }
}
/* Volume/Som - Pulsa ondas */
a:hover .bi-volume-up, button:hover .bi-volume-up,
a:hover .bi-volume-up-fill, button:hover .bi-volume-up-fill {
animation: biHoverVolume 0.4s ease-out;
color: var(--color-primary-600);
}
@keyframes biHoverVolume {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.15); }
}
/* Mute - Cruz vermelha */
a:hover .bi-volume-mute, button:hover .bi-volume-mute,
a:hover .bi-volume-mute-fill, button:hover .bi-volume-mute-fill {
color: #ef4444;
}
/* Pin/Map - Crava */
a:hover .bi-pin, button:hover .bi-pin,
a:hover .bi-pin-fill, button:hover .bi-pin-fill,
a:hover .bi-geo-alt, button:hover .bi-geo-alt,
a:hover .bi-geo-alt-fill, button:hover .bi-geo-alt-fill {
animation: biHoverPin 0.3s ease-out;
color: #ef4444;
}
@keyframes biHoverPin {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-5px); }
75% { transform: translateY(2px); }
}
/* Calendario - Destaque */
a:hover .bi-calendar, button:hover .bi-calendar,
a:hover .bi-calendar-fill, button:hover .bi-calendar-fill,
a:hover .bi-calendar-check, button:hover .bi-calendar-check,
a:hover .bi-calendar-event, button:hover .bi-calendar-event {
transform: scale(1.08);
color: var(--color-primary-600);
}
/* Clock - Pulsa tempo */
a:hover .bi-clock, button:hover .bi-clock,
a:hover .bi-clock-fill, button:hover .bi-clock-fill,
a:hover .bi-clock-history, button:hover .bi-clock-history {
transform: scale(1.1);
color: #f59e0b;
}
/* Trending up - Sobe verde */
a:hover .bi-graph-up-arrow, button:hover .bi-graph-up-arrow,
a:hover .bi-arrow-up-right, button:hover .bi-arrow-up-right {
transform: translateY(-3px) scale(1.1);
color: #10b981;
}
/* Trending down - Alerta vermelho */
a:hover .bi-graph-down-arrow, button:hover .bi-graph-down-arrow {
transform: translateY(3px) scale(1.1);
color: #ef4444;
}
/* Hourglass/Timer - Vira */
a:hover .bi-hourglass, button:hover .bi-hourglass,
a:hover .bi-hourglass-split, button:hover .bi-hourglass-split,
a:hover .bi-stopwatch, button:hover .bi-stopwatch {
animation: biHoverHourglass 0.6s ease-in-out;
color: #f59e0b;
}
@keyframes biHoverHourglass {
0%, 100% { transform: rotate(0deg); }
50% { transform: rotate(180deg); }
}
/* History - Rebobina */
a:hover .bi-clock-history, button:hover .bi-clock-history {
animation: biHoverHistory 0.5s ease-out;
color: var(--color-primary-600);
}
@keyframes biHoverHistory {
0% { transform: rotate(0deg); }
100% { transform: rotate(-360deg); }
}
/* Inbox/Archive - Recebe */
a:hover .bi-inbox, button:hover .bi-inbox,
a:hover .bi-inbox-fill, button:hover .bi-inbox-fill,
a:hover .bi-archive, button:hover .bi-archive {
animation: biHoverInbox 0.4s ease-out;
color: var(--color-primary-600);
}
@keyframes biHoverInbox {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(3px); }
}
/* Hash/Numero - Pulsa */
a:hover .bi-hash, button:hover .bi-hash {
transform: scale(1.15);
color: var(--color-primary-500);
}
/* List - Organiza */
a:hover .bi-list, button:hover .bi-list,
a:hover .bi-list-ul, button:hover .bi-list-ul,
a:hover .bi-list-ol, button:hover .bi-list-ol,
a:hover .bi-list-check, button:hover .bi-list-check {
transform: translateX(3px);
color: var(--color-primary-600);
}
/* Calculator - Digita */
a:hover .bi-calculator, button:hover .bi-calculator,
a:hover .bi-calculator-fill, button:hover .bi-calculator-fill {
animation: biHoverCalculator 0.3s ease-out;
color: var(--color-primary-600);
}
@keyframes biHoverCalculator {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.1); }
}
/* Phone/Telephone - Vibra */
a:hover .bi-telephone, button:hover .bi-telephone,
a:hover .bi-telephone-fill, button:hover .bi-telephone-fill {
animation: biHoverPhone 0.4s ease-in-out;
color: #10b981;
}
@keyframes biHoverPhone {
0%, 100% { transform: rotate(0deg); }
20% { transform: rotate(15deg); }
40% { transform: rotate(-15deg); }
60% { transform: rotate(10deg); }
80% { transform: rotate(-5deg); }
}
/* WhatsApp - Destaque verde */
a:hover .bi-whatsapp, button:hover .bi-whatsapp {
transform: scale(1.15);
color: #25D366;
filter: drop-shadow(0 0 8px rgba(37, 211, 102, 0.5));
}
/* Chat/Message - Pulsa */
a:hover .bi-chat, button:hover .bi-chat,
a:hover .bi-chat-fill, button:hover .bi-chat-fill,
a:hover .bi-chat-dots, button:hover .bi-chat-dots,
a:hover .bi-chat-left, button:hover .bi-chat-left,
a:hover .bi-chat-left-text, button:hover .bi-chat-left-text {
transform: scale(1.1) translateY(-2px);
color: var(--color-primary-600);
}
/* Send - Dispara */
a:hover .bi-send, button:hover .bi-send,
a:hover .bi-send-fill, button:hover .bi-send-fill {
animation: biHoverSend 0.4s ease-out forwards;
color: #3b82f6;
}
@keyframes biHoverSend {
0% { transform: translate(0, 0); }
100% { transform: translate(4px, -4px); }
}
/* Wand/Magic - Brilha magia */
a:hover .bi-magic, button:hover .bi-magic {
animation: biHoverWand 0.5s ease-out;
color: var(--color-primary-500);
filter: drop-shadow(0 0 8px rgba(139, 92, 246, 0.6));
}
@keyframes biHoverWand {
0% { transform: rotate(0deg); }
25% { transform: rotate(-20deg); }
50% { transform: rotate(10deg); }
100% { transform: rotate(0deg); }
}
/* Filter/Funnel - Expande */
a:hover .bi-funnel, button:hover .bi-funnel,
a:hover .bi-funnel-fill, button:hover .bi-funnel-fill {
transform: scale(1.1);
color: var(--color-primary-600);
}
/* Toggle - Alterna */
a:hover .bi-toggle-off, button:hover .bi-toggle-off {
color: #6b7280;
}
a:hover .bi-toggle-on, button:hover .bi-toggle-on {
color: #10b981;
filter: drop-shadow(0 0 6px rgba(16, 185, 129, 0.5));
}
/* Headphones/Mic - Vibra som */
a:hover .bi-headset, button:hover .bi-headset,
a:hover .bi-mic, button:hover .bi-mic,
a:hover .bi-mic-fill, button:hover .bi-mic-fill {
animation: biHoverAudio 0.3s ease-in-out;
color: var(--color-primary-500);
}
@keyframes biHoverAudio {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.1); }
}
/* Radio/Broadcast - Sintoniza */
a:hover .bi-broadcast, button:hover .bi-broadcast,
a:hover .bi-broadcast-pin, button:hover .bi-broadcast-pin {
animation: biHoverRadio 0.5s ease-in-out;
color: var(--color-primary-600);
}
@keyframes biHoverRadio {
0%, 100% { filter: brightness(1); }
25%, 75% { filter: brightness(1.2); }
50% { filter: brightness(1.4); }
}
/* Map/Globe/Compass - Explora */
a:hover .bi-map, button:hover .bi-map,
a:hover .bi-globe, button:hover .bi-globe,
a:hover .bi-compass, button:hover .bi-compass {
transform: scale(1.1) rotate(5deg);
color: #3b82f6;
}
/* Database/Server - Processa */
a:hover .bi-database, button:hover .bi-database,
a:hover .bi-server, button:hover .bi-server,
a:hover .bi-hdd, button:hover .bi-hdd {
animation: biHoverServer 0.4s ease-in-out;
color: var(--color-primary-600);
}
@keyframes biHoverServer {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); filter: brightness(1.1); }
}
/* QR/Barcode - Flash */
a:hover .bi-qr-code, button:hover .bi-qr-code,
a:hover .bi-qr-code-scan, button:hover .bi-qr-code-scan,
a:hover .bi-upc, button:hover .bi-upc,
a:hover .bi-upc-scan, button:hover .bi-upc-scan {
animation: biHoverScan 0.4s ease-out;
color: var(--color-primary-600);
}
@keyframes biHoverScan {
0%, 100% { filter: brightness(1); }
50% { filter: brightness(1.5); }
}
/* Camera/Image - Emoldura */
a:hover .bi-camera, button:hover .bi-camera,
a:hover .bi-camera-fill, button:hover .bi-camera-fill,
a:hover .bi-image, button:hover .bi-image,
a:hover .bi-images, button:hover .bi-images {
transform: scale(1.08);
color: #ec4899;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
}
/* Graduation Cap - Joga pro alto */
a:hover .bi-mortarboard, button:hover .bi-mortarboard,
a:hover .bi-mortarboard-fill, button:hover .bi-mortarboard-fill {
animation: biHoverGraduation 0.5s ease-out;
color: var(--color-primary-600);
}
@keyframes biHoverGraduation {
0%, 100% { transform: translateY(0) rotate(0deg); }
50% { transform: translateY(-8px) rotate(-5deg); }
}
/* Book - Abre */
a:hover .bi-book, button:hover .bi-book,
a:hover .bi-book-fill, button:hover .bi-book-fill,
a:hover .bi-journal, button:hover .bi-journal {
transform: scale(1.05) rotateY(-10deg);
color: var(--color-primary-600);
}
/* Truck/Vehicle - Move */
a:hover .bi-truck, button:hover .bi-truck,
a:hover .bi-car-front, button:hover .bi-car-front,
a:hover .bi-bus-front, button:hover .bi-bus-front,
a:hover .bi-bicycle, button:hover .bi-bicycle {
animation: biHoverVehicle 0.4s ease-out;
color: var(--color-primary-600);
}
@keyframes biHoverVehicle {
0%, 100% { transform: translateX(0); }
50% { transform: translateX(6px); }
}
/* Fuel - Enche */
a:hover .bi-fuel-pump, button:hover .bi-fuel-pump,
a:hover .bi-fuel-pump-fill, button:hover .bi-fuel-pump-fill {
transform: scale(1.1);
color: #f59e0b;
}
/* Trophy/Award - Brilha */
a:hover .bi-trophy, button:hover .bi-trophy,
a:hover .bi-trophy-fill, button:hover .bi-trophy-fill,
a:hover .bi-award, button:hover .bi-award,
a:hover .bi-award-fill, button:hover .bi-award-fill {
transform: scale(1.15) rotate(-5deg);
color: #fbbf24;
filter: drop-shadow(0 0 10px rgba(251, 191, 36, 0.6));
}
/* Currency/Money - Destaque */
a:hover .bi-currency-dollar, button:hover .bi-currency-dollar,
a:hover .bi-cash, button:hover .bi-cash,
a:hover .bi-cash-coin, button:hover .bi-cash-coin,
a:hover .bi-coin, button:hover .bi-coin,
a:hover .bi-wallet, button:hover .bi-wallet,
a:hover .bi-wallet-fill, button:hover .bi-wallet-fill {
transform: scale(1.1);
color: #10b981;
filter: drop-shadow(0 0 6px rgba(16, 185, 129, 0.4));
}
/* Info/Question/Help - Destaque azul */
a:hover .bi-info-circle, button:hover .bi-info-circle,
a:hover .bi-info-circle-fill, button:hover .bi-info-circle-fill,
a:hover .bi-question-circle, button:hover .bi-question-circle,
a:hover .bi-question-circle-fill, button:hover .bi-question-circle-fill {
transform: scale(1.1);
color: #3b82f6;
}
/* Warning/Exclamation - Alerta */
a:hover .bi-exclamation-triangle, button:hover .bi-exclamation-triangle,
a:hover .bi-exclamation-triangle-fill, button:hover .bi-exclamation-triangle-fill,
a:hover .bi-exclamation-circle, button:hover .bi-exclamation-circle {
animation: biHoverWarning 0.4s ease-in-out;
color: #f59e0b;
}
@keyframes biHoverWarning {
0%, 100% { transform: scale(1); }
25%, 75% { transform: scale(1.1); }
50% { transform: scale(1.15); }
}
/* Flag - Ondula */
a:hover .bi-flag, button:hover .bi-flag,
a:hover .bi-flag-fill, button:hover .bi-flag-fill {
animation: biHoverFlag 0.5s ease-in-out;
color: #ef4444;
}
@keyframes biHoverFlag {
0%, 100% { transform: rotate(0deg); }
25% { transform: rotate(3deg); }
75% { transform: rotate(-3deg); }
}
/* Building/Company - Destaque */
a:hover .bi-building, button:hover .bi-building,
a:hover .bi-buildings, button:hover .bi-buildings,
a:hover .bi-shop, button:hover .bi-shop {
transform: scale(1.05) translateY(-2px);
color: var(--color-primary-600);
}
/* Eye-slash - Esconde */
a:hover .bi-eye-slash, button:hover .bi-eye-slash,
a:hover .bi-eye-slash-fill, button:hover .bi-eye-slash-fill {
color: #6b7280;
opacity: 0.7;
}
/* Power - Liga/Desliga */
a:hover .bi-power, button:hover .bi-power {
transform: scale(1.1);
color: #10b981;
filter: drop-shadow(0 0 6px rgba(16, 185, 129, 0.5));
}
/* Log out - Sai */
a:hover .bi-box-arrow-left, button:hover .bi-box-arrow-left,
a:hover .bi-box-arrow-right, button:hover .bi-box-arrow-right {
animation: biHoverLogout 0.4s ease-out;
color: #ef4444;
}
@keyframes biHoverLogout {
0%, 100% { transform: translateX(0); }
50% { transform: translateX(4px); }
}
/* External link - Abre */
a:hover .bi-box-arrow-up-right, button:hover .bi-box-arrow-up-right {
transform: translate(2px, -2px);
color: #3b82f6;
}
/* Receipt - Destaque */
a:hover .bi-receipt, button:hover .bi-receipt {
transform: translateY(-2px);
color: var(--color-primary-600);
}
/* ═══════════════════════════════════════════════════════════════════════════
EFEITOS HOVER ADICIONAIS - COBERTURA COMPLETA
100+ ícones com animações premium únicas
═══════════════════════════════════════════════════════════════════════════ */
/* -------------------------------------------------------------------------
COMUNICAÇÃO E SOCIAL
------------------------------------------------------------------------- */
/* Megaphone/Anúncio - Amplifica */
a:hover .bi-megaphone, button:hover .bi-megaphone,
a:hover .bi-megaphone-fill, button:hover .bi-megaphone-fill {
animation: biHoverMegaphone 0.5s ease-out;
color: #f59e0b;
filter: drop-shadow(0 0 8px rgba(245, 158, 11, 0.5));
}
@keyframes biHoverMegaphone {
0%, 100% { transform: scale(1) rotate(0deg); }
25% { transform: scale(1.1) rotate(-5deg); }
50% { transform: scale(1.15) rotate(5deg); }
75% { transform: scale(1.1) rotate(-3deg); }
}
/* Bell-slash - Silencia */
a:hover .bi-bell-slash, button:hover .bi-bell-slash,
a:hover .bi-bell-slash-fill, button:hover .bi-bell-slash-fill {
transform: scale(1.1);
color: #6b7280;
opacity: 0.8;
}
/* Broadcast/Radio - Transmite ondas */
a:hover .bi-broadcast, button:hover .bi-broadcast,
a:hover .bi-broadcast-pin, button:hover .bi-broadcast-pin {
animation: biHoverBroadcast 0.6s ease-in-out;
color: #ec4899;
filter: drop-shadow(0 0 10px rgba(236, 72, 153, 0.5));
}
@keyframes biHoverBroadcast {
0%, 100% { transform: scale(1); filter: brightness(1); }
50% { transform: scale(1.15); filter: brightness(1.3); }
}
/* Share - Compartilha */
a:hover .bi-share, button:hover .bi-share,
a:hover .bi-share-fill, button:hover .bi-share-fill {
animation: biHoverShare 0.4s ease-out forwards;
color: #3b82f6;
}
@keyframes biHoverShare {
0% { transform: translate(0, 0); }
100% { transform: translate(3px, -3px); }
}
/* Reply - Responde */
a:hover .bi-reply, button:hover .bi-reply,
a:hover .bi-reply-fill, button:hover .bi-reply-fill,
a:hover .bi-reply-all, button:hover .bi-reply-all {
transform: translateX(-4px);
color: var(--color-primary-600);
}
/* Forward - Encaminha */
a:hover .bi-forward, button:hover .bi-forward,
a:hover .bi-forward-fill, button:hover .bi-forward-fill {
transform: translateX(4px);
color: #3b82f6;
}
/* At/Mention - Destaque */
a:hover .bi-at, button:hover .bi-at {
animation: biHoverAt 0.4s ease-in-out;
color: #3b82f6;
}
@keyframes biHoverAt {
0%, 100% { transform: scale(1) rotate(0deg); }
50% { transform: scale(1.2) rotate(15deg); }
}
/* -------------------------------------------------------------------------
DOCUMENTOS E ARQUIVOS
------------------------------------------------------------------------- */
/* File-earmark variants - Levanta documento */
a:hover .bi-file-earmark-pdf, button:hover .bi-file-earmark-pdf,
a:hover .bi-file-earmark-pdf-fill, button:hover .bi-file-earmark-pdf-fill {
transform: translateY(-3px) rotate(-3deg);
color: #ef4444;
filter: drop-shadow(0 4px 6px rgba(239, 68, 68, 0.3));
}
a:hover .bi-file-earmark-excel, button:hover .bi-file-earmark-excel,
a:hover .bi-file-earmark-excel-fill, button:hover .bi-file-earmark-excel-fill {
transform: translateY(-3px) rotate(-3deg);
color: #10b981;
filter: drop-shadow(0 4px 6px rgba(16, 185, 129, 0.3));
}
a:hover .bi-file-earmark-word, button:hover .bi-file-earmark-word,
a:hover .bi-file-earmark-word-fill, button:hover .bi-file-earmark-word-fill {
transform: translateY(-3px) rotate(-3deg);
color: #3b82f6;
filter: drop-shadow(0 4px 6px rgba(59, 130, 246, 0.3));
}
a:hover .bi-file-earmark-image, button:hover .bi-file-earmark-image,
a:hover .bi-file-earmark-image-fill, button:hover .bi-file-earmark-image-fill {
transform: translateY(-3px) rotate(-3deg);
color: #ec4899;
filter: drop-shadow(0 4px 6px rgba(236, 72, 153, 0.3));
}
a:hover .bi-file-earmark-zip, button:hover .bi-file-earmark-zip,
a:hover .bi-file-earmark-zip-fill, button:hover .bi-file-earmark-zip-fill {
transform: translateY(-3px) scale(0.95);
color: #f59e0b;
}
a:hover .bi-file-earmark-code, button:hover .bi-file-earmark-code,
a:hover .bi-file-earmark-code-fill, button:hover .bi-file-earmark-code-fill {
transform: translateY(-3px) rotate(-3deg);
color: var(--color-primary-500);
filter: drop-shadow(0 4px 6px rgba(139, 92, 246, 0.3));
}
/* Filetype icons */
a:hover .bi-filetype-pdf, button:hover .bi-filetype-pdf {
color: #ef4444;
transform: scale(1.1);
}
a:hover .bi-filetype-xlsx, button:hover .bi-filetype-xlsx,
a:hover .bi-filetype-xls, button:hover .bi-filetype-xls {
color: #10b981;
transform: scale(1.1);
}
a:hover .bi-filetype-docx, button:hover .bi-filetype-docx,
a:hover .bi-filetype-doc, button:hover .bi-filetype-doc {
color: #3b82f6;
transform: scale(1.1);
}
a:hover .bi-filetype-json, button:hover .bi-filetype-json,
a:hover .bi-filetype-xml, button:hover .bi-filetype-xml {
color: #f59e0b;
transform: scale(1.1);
}
a:hover .bi-filetype-html, button:hover .bi-filetype-html,
a:hover .bi-filetype-css, button:hover .bi-filetype-css,
a:hover .bi-filetype-js, button:hover .bi-filetype-js {
color: var(--color-primary-500);
transform: scale(1.1);
}
/* Paperclip/Attachment - Balança */
a:hover .bi-paperclip, button:hover .bi-paperclip {
animation: biHoverPaperclip 0.4s ease-in-out;
color: #6b7280;
}
@keyframes biHoverPaperclip {
0%, 100% { transform: rotate(0deg); }
25% { transform: rotate(10deg); }
75% { transform: rotate(-10deg); }
}
/* Journal/Diary - Abre */
a:hover .bi-journal-text, button:hover .bi-journal-text,
a:hover .bi-journal-check, button:hover .bi-journal-check,
a:hover .bi-journal-code, button:hover .bi-journal-code {
transform: scale(1.05) rotateY(-10deg);
color: var(--color-primary-600);
}
/* -------------------------------------------------------------------------
SEGURANÇA E AUTENTICAÇÃO
------------------------------------------------------------------------- */
/* Key - Gira */
a:hover .bi-key, button:hover .bi-key,
a:hover .bi-key-fill, button:hover .bi-key-fill {
animation: biHoverKey 0.5s ease-out;
color: #f59e0b;
}
@keyframes biHoverKey {
0% { transform: rotate(0deg); }
50% { transform: rotate(-30deg); }
100% { transform: rotate(-20deg); }
}
/* Fingerprint - Pulsa */
a:hover .bi-fingerprint, button:hover .bi-fingerprint {
animation: biHoverFingerprint 0.5s ease-in-out;
color: #10b981;
}
@keyframes biHoverFingerprint {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.1); opacity: 0.8; }
}
/* Shield variants - Protege */
a:hover .bi-shield-exclamation, button:hover .bi-shield-exclamation {
animation: biHoverShieldWarn 0.4s ease-in-out;
color: #f59e0b;
}
a:hover .bi-shield-lock, button:hover .bi-shield-lock,
a:hover .bi-shield-lock-fill, button:hover .bi-shield-lock-fill {
transform: scale(1.08);
color: var(--color-primary-600);
filter: drop-shadow(0 0 6px rgba(99, 102, 241, 0.4));
}
a:hover .bi-shield-slash, button:hover .bi-shield-slash {
color: #ef4444;
opacity: 0.8;
}
@keyframes biHoverShieldWarn {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.15); }
}
/* Patch-check - Verifica */
a:hover .bi-patch-check, button:hover .bi-patch-check,
a:hover .bi-patch-check-fill, button:hover .bi-patch-check-fill {
animation: biHoverPatchCheck 0.4s ease-out;
color: #10b981;
filter: drop-shadow(0 0 8px rgba(16, 185, 129, 0.5));
}
@keyframes biHoverPatchCheck {
0% { transform: scale(1) rotate(0deg); }
50% { transform: scale(1.2) rotate(10deg); }
100% { transform: scale(1) rotate(0deg); }
}
/* Incognito - Misterioso */
a:hover .bi-incognito, button:hover .bi-incognito {
transform: translateY(-2px);
color: #374151;
filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}
/* -------------------------------------------------------------------------
TEMPO E CALENDÁRIO
------------------------------------------------------------------------- */
/* Calendar variants - Destaca */
a:hover .bi-calendar2, button:hover .bi-calendar2,
a:hover .bi-calendar2-check, button:hover .bi-calendar2-check,
a:hover .bi-calendar2-event, button:hover .bi-calendar2-event,
a:hover .bi-calendar2-week, button:hover .bi-calendar2-week,
a:hover .bi-calendar2-date, button:hover .bi-calendar2-date {
transform: scale(1.08);
color: var(--color-primary-600);
}
a:hover .bi-calendar-plus, button:hover .bi-calendar-plus,
a:hover .bi-calendar-plus-fill, button:hover .bi-calendar-plus-fill {
transform: scale(1.1);
color: #10b981;
}
a:hover .bi-calendar-minus, button:hover .bi-calendar-minus,
a:hover .bi-calendar-minus-fill, button:hover .bi-calendar-minus-fill {
transform: scale(1.1);
color: #ef4444;
}
a:hover .bi-calendar-x, button:hover .bi-calendar-x,
a:hover .bi-calendar-x-fill, button:hover .bi-calendar-x-fill {
animation: biHoverCalendarX 0.3s ease-out;
color: #ef4444;
}
@keyframes biHoverCalendarX {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.1) rotate(5deg); }
}
/* Alarm/Timer - Toca */
a:hover .bi-alarm, button:hover .bi-alarm,
a:hover .bi-alarm-fill, button:hover .bi-alarm-fill {
animation: biHoverAlarm 0.4s ease-in-out;
color: #f59e0b;
}
@keyframes biHoverAlarm {
0%, 100% { transform: rotate(0deg); }
20% { transform: rotate(10deg); }
40% { transform: rotate(-10deg); }
60% { transform: rotate(5deg); }
80% { transform: rotate(-5deg); }
}
/* Stopwatch - Cronometra */
a:hover .bi-stopwatch, button:hover .bi-stopwatch,
a:hover .bi-stopwatch-fill, button:hover .bi-stopwatch-fill {
animation: biHoverStopwatch 0.5s ease-out;
color: #ef4444;
}
@keyframes biHoverStopwatch {
0% { transform: scale(1); }
50% { transform: scale(1.15); }
100% { transform: scale(1.1); }
}
/* -------------------------------------------------------------------------
MÍDIA E ENTRETENIMENTO
------------------------------------------------------------------------- */
/* Play - Inicia */
a:hover .bi-play, button:hover .bi-play,
a:hover .bi-play-fill, button:hover .bi-play-fill,
a:hover .bi-play-circle, button:hover .bi-play-circle,
a:hover .bi-play-circle-fill, button:hover .bi-play-circle-fill {
transform: scale(1.15);
color: #10b981;
filter: drop-shadow(0 0 8px rgba(16, 185, 129, 0.5));
}
/* Pause - Pausa */
a:hover .bi-pause, button:hover .bi-pause,
a:hover .bi-pause-fill, button:hover .bi-pause-fill,
a:hover .bi-pause-circle, button:hover .bi-pause-circle {
transform: scale(1.1);
color: #f59e0b;
}
/* Stop - Para */
a:hover .bi-stop, button:hover .bi-stop,
a:hover .bi-stop-fill, button:hover .bi-stop-fill,
a:hover .bi-stop-circle, button:hover .bi-stop-circle {
transform: scale(1.1);
color: #ef4444;
}
/* Skip - Avança */
a:hover .bi-skip-forward, button:hover .bi-skip-forward,
a:hover .bi-skip-forward-fill, button:hover .bi-skip-forward-fill {
transform: translateX(3px);
color: #3b82f6;
}
a:hover .bi-skip-backward, button:hover .bi-skip-backward,
a:hover .bi-skip-backward-fill, button:hover .bi-skip-backward-fill {
transform: translateX(-3px);
color: #3b82f6;
}
/* Record - Grava */
a:hover .bi-record, button:hover .bi-record,
a:hover .bi-record-fill, button:hover .bi-record-fill,
a:hover .bi-record-circle, button:hover .bi-record-circle {
animation: biHoverRecord 1s ease-in-out infinite;
color: #ef4444;
}
@keyframes biHoverRecord {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.6; transform: scale(1.1); }
}
/* Music/Audio - Vibra */
a:hover .bi-music-note, button:hover .bi-music-note,
a:hover .bi-music-note-beamed, button:hover .bi-music-note-beamed,
a:hover .bi-music-note-list, button:hover .bi-music-note-list {
animation: biHoverMusic 0.5s ease-in-out;
color: var(--color-primary-500);
}
@keyframes biHoverMusic {
0%, 100% { transform: rotate(0deg); }
25% { transform: rotate(-10deg); }
75% { transform: rotate(10deg); }
}
/* Film/Video - Roda */
a:hover .bi-film, button:hover .bi-film,
a:hover .bi-camera-video, button:hover .bi-camera-video,
a:hover .bi-camera-video-fill, button:hover .bi-camera-video-fill,
a:hover .bi-camera-reels, button:hover .bi-camera-reels {
transform: scale(1.1);
color: #ec4899;
}
/* -------------------------------------------------------------------------
FINANÇAS E PAGAMENTOS
------------------------------------------------------------------------- */
/* Credit card variants */
a:hover .bi-credit-card-2-front, button:hover .bi-credit-card-2-front,
a:hover .bi-credit-card-2-front-fill, button:hover .bi-credit-card-2-front-fill,
a:hover .bi-credit-card-2-back, button:hover .bi-credit-card-2-back {
transform: translateX(3px) rotateY(15deg);
color: var(--color-primary-600);
}
/* Bank - Destaque */
a:hover .bi-bank, button:hover .bi-bank,
a:hover .bi-bank2, button:hover .bi-bank2 {
transform: scale(1.08) translateY(-2px);
color: var(--color-primary-600);
filter: drop-shadow(0 4px 8px rgba(99, 102, 241, 0.3));
}
/* Piggy bank - Economiza */
a:hover .bi-piggy-bank, button:hover .bi-piggy-bank,
a:hover .bi-piggy-bank-fill, button:hover .bi-piggy-bank-fill {
animation: biHoverPiggy 0.4s ease-out;
color: #ec4899;
}
@keyframes biHoverPiggy {
0%, 100% { transform: rotate(0deg); }
25% { transform: rotate(-5deg); }
75% { transform: rotate(5deg); }
}
/* Safe - Protege */
a:hover .bi-safe, button:hover .bi-safe,
a:hover .bi-safe-fill, button:hover .bi-safe-fill,
a:hover .bi-safe2, button:hover .bi-safe2 {
transform: scale(1.05);
color: #374151;
filter: drop-shadow(0 0 6px rgba(55, 65, 81, 0.4));
}
/* Percent - Desconto */
a:hover .bi-percent, button:hover .bi-percent {
animation: biHoverPercent 0.4s ease-out;
color: #10b981;
}
@keyframes biHoverPercent {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.2); }
}
/* Tags - Etiqueta */
a:hover .bi-tag, button:hover .bi-tag,
a:hover .bi-tag-fill, button:hover .bi-tag-fill,
a:hover .bi-tags, button:hover .bi-tags,
a:hover .bi-tags-fill, button:hover .bi-tags-fill {
transform: rotate(-10deg) translateY(-2px);
color: #f59e0b;
}
/* Ticket - Apresenta */
a:hover .bi-ticket, button:hover .bi-ticket,
a:hover .bi-ticket-fill, button:hover .bi-ticket-fill,
a:hover .bi-ticket-perforated, button:hover .bi-ticket-perforated {
transform: translateX(3px) rotate(-5deg);
color: var(--color-primary-500);
}
/* -------------------------------------------------------------------------
NAVEGAÇÃO E UI
------------------------------------------------------------------------- */
/* Menu/Hamburger - Abre */
a:hover .bi-list, button:hover .bi-list {
transform: scale(1.1);
color: #374151;
}
a:hover .bi-three-dots, button:hover .bi-three-dots,
a:hover .bi-three-dots-vertical, button:hover .bi-three-dots-vertical {
transform: scale(1.15);
color: #6b7280;
}
/* Grid - Expande */
a:hover .bi-grid, button:hover .bi-grid,
a:hover .bi-grid-fill, button:hover .bi-grid-fill,
a:hover .bi-grid-3x3, button:hover .bi-grid-3x3,
a:hover .bi-grid-3x3-gap, button:hover .bi-grid-3x3-gap {
transform: scale(1.1);
color: var(--color-primary-600);
}
/* View list - Alterna */
a:hover .bi-view-list, button:hover .bi-view-list,
a:hover .bi-view-stacked, button:hover .bi-view-stacked {
transform: scale(1.1);
color: #3b82f6;
}
/* Sliders - Ajusta */
a:hover .bi-sliders, button:hover .bi-sliders,
a:hover .bi-sliders2, button:hover .bi-sliders2,
a:hover .bi-sliders2-vertical, button:hover .bi-sliders2-vertical {
transform: translateY(-2px);
color: var(--color-primary-600);
}
/* Columns/Layout - Organiza */
a:hover .bi-columns, button:hover .bi-columns,
a:hover .bi-columns-gap, button:hover .bi-columns-gap,
a:hover .bi-layout-sidebar, button:hover .bi-layout-sidebar,
a:hover .bi-layout-split, button:hover .bi-layout-split {
transform: scale(1.05);
color: var(--color-primary-500);
}
/* Sort icons - Ordena */
a:hover .bi-sort-down, button:hover .bi-sort-down,
a:hover .bi-sort-down-alt, button:hover .bi-sort-down-alt {
transform: translateY(2px);
color: #3b82f6;
}
a:hover .bi-sort-up, button:hover .bi-sort-up,
a:hover .bi-sort-up-alt, button:hover .bi-sort-up-alt {
transform: translateY(-2px);
color: #3b82f6;
}
a:hover .bi-sort-alpha-down, button:hover .bi-sort-alpha-down,
a:hover .bi-sort-alpha-up, button:hover .bi-sort-alpha-up,
a:hover .bi-sort-numeric-down, button:hover .bi-sort-numeric-down,
a:hover .bi-sort-numeric-up, button:hover .bi-sort-numeric-up {
transform: scale(1.1);
color: var(--color-primary-600);
}
/* Chevron expand - Expande */
a:hover .bi-chevron-expand, button:hover .bi-chevron-expand,
a:hover .bi-chevron-bar-expand, button:hover .bi-chevron-bar-expand {
transform: scaleY(1.2);
color: #3b82f6;
}
a:hover .bi-chevron-contract, button:hover .bi-chevron-contract,
a:hover .bi-chevron-bar-contract, button:hover .bi-chevron-bar-contract {
transform: scaleY(0.9);
color: #6b7280;
}
/* -------------------------------------------------------------------------
NATUREZA E CLIMA
------------------------------------------------------------------------- */
/* Sun - Brilha */
a:hover .bi-sun, button:hover .bi-sun,
a:hover .bi-sun-fill, button:hover .bi-sun-fill,
a:hover .bi-brightness-high, button:hover .bi-brightness-high,
a:hover .bi-brightness-high-fill, button:hover .bi-brightness-high-fill {
animation: biHoverSun 0.6s ease-in-out;
color: #f59e0b;
filter: drop-shadow(0 0 12px rgba(245, 158, 11, 0.6));
}
@keyframes biHoverSun {
0%, 100% { transform: rotate(0deg) scale(1); }
50% { transform: rotate(180deg) scale(1.2); }
}
/* Moon - Brilho suave */
a:hover .bi-moon, button:hover .bi-moon,
a:hover .bi-moon-fill, button:hover .bi-moon-fill,
a:hover .bi-moon-stars, button:hover .bi-moon-stars,
a:hover .bi-moon-stars-fill, button:hover .bi-moon-stars-fill {
transform: scale(1.1) rotate(-15deg);
color: var(--color-primary-600);
filter: drop-shadow(0 0 10px rgba(99, 102, 241, 0.5));
}
/* Cloud - Flutua */
a:hover .bi-cloud, button:hover .bi-cloud,
a:hover .bi-cloud-fill, button:hover .bi-cloud-fill,
a:hover .bi-clouds, button:hover .bi-clouds,
a:hover .bi-clouds-fill, button:hover .bi-clouds-fill {
animation: biHoverCloud 0.6s ease-in-out;
color: #64748b;
}
@keyframes biHoverCloud {
0%, 100% { transform: translateX(0); }
50% { transform: translateX(5px) translateY(-2px); }
}
/* Rain - Cai */
a:hover .bi-cloud-rain, button:hover .bi-cloud-rain,
a:hover .bi-cloud-rain-fill, button:hover .bi-cloud-rain-fill,
a:hover .bi-cloud-rain-heavy, button:hover .bi-cloud-rain-heavy {
animation: biHoverRain 0.5s ease-in-out;
color: #3b82f6;
}
@keyframes biHoverRain {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(3px); }
}
/* Snow - Gela */
a:hover .bi-snow, button:hover .bi-snow,
a:hover .bi-snow2, button:hover .bi-snow2,
a:hover .bi-snow3, button:hover .bi-snow3 {
animation: biHoverSnow 0.6s ease-in-out;
color: #38bdf8;
}
@keyframes biHoverSnow {
0%, 100% { transform: rotate(0deg); }
50% { transform: rotate(45deg); }
}
/* Lightning/Thunder - Clareia */
a:hover .bi-cloud-lightning, button:hover .bi-cloud-lightning,
a:hover .bi-cloud-lightning-fill, button:hover .bi-cloud-lightning-fill,
a:hover .bi-cloud-lightning-rain, button:hover .bi-cloud-lightning-rain {
animation: biHoverThunder 0.3s ease-out;
color: #f59e0b;
}
@keyframes biHoverThunder {
0%, 100% { filter: brightness(1); }
50% { filter: brightness(1.5); }
}
/* Wind - Sopra */
a:hover .bi-wind, button:hover .bi-wind {
animation: biHoverWind 0.5s ease-in-out;
color: #6b7280;
}
@keyframes biHoverWind {
0%, 100% { transform: translateX(0) scaleX(1); }
50% { transform: translateX(5px) scaleX(1.1); }
}
/* Tree/Plant - Cresce */
a:hover .bi-tree, button:hover .bi-tree,
a:hover .bi-tree-fill, button:hover .bi-tree-fill {
transform: scale(1.1) translateY(-2px);
color: #10b981;
}
a:hover .bi-flower1, button:hover .bi-flower1,
a:hover .bi-flower2, button:hover .bi-flower2,
a:hover .bi-flower3, button:hover .bi-flower3 {
animation: biHoverFlower 0.5s ease-out;
color: #ec4899;
}
@keyframes biHoverFlower {
0%, 100% { transform: scale(1) rotate(0deg); }
50% { transform: scale(1.15) rotate(15deg); }
}
/* -------------------------------------------------------------------------
PESSOAS E USUÁRIOS (EXTENSÃO)
------------------------------------------------------------------------- */
/* Person variants */
a:hover .bi-person-check, button:hover .bi-person-check,
a:hover .bi-person-check-fill, button:hover .bi-person-check-fill {
animation: biHoverPersonCheck 0.4s ease-out;
color: #10b981;
}
@keyframes biHoverPersonCheck {
0% { transform: scale(1); }
50% { transform: scale(1.15); }
100% { transform: scale(1.1); }
}
a:hover .bi-person-x, button:hover .bi-person-x,
a:hover .bi-person-x-fill, button:hover .bi-person-x-fill,
a:hover .bi-person-dash, button:hover .bi-person-dash {
color: #ef4444;
transform: scale(1.05);
}
a:hover .bi-person-plus-fill, button:hover .bi-person-plus-fill {
animation: biHoverPersonPlus 0.4s ease-out;
color: #10b981;
}
@keyframes biHoverPersonPlus {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.15); }
}
a:hover .bi-person-badge, button:hover .bi-person-badge,
a:hover .bi-person-badge-fill, button:hover .bi-person-badge-fill {
transform: translateY(-2px);
color: var(--color-primary-600);
}
a:hover .bi-person-circle, button:hover .bi-person-circle {
transform: scale(1.1);
color: var(--color-primary-500);
}
a:hover .bi-person-workspace, button:hover .bi-person-workspace {
transform: scale(1.05);
color: #3b82f6;
}
a:hover .bi-person-gear, button:hover .bi-person-gear {
animation: biHoverPersonGear 0.5s ease-in-out;
color: var(--color-primary-600);
}
@keyframes biHoverPersonGear {
0%, 100% { transform: rotate(0deg); }
50% { transform: rotate(10deg); }
}
/* -------------------------------------------------------------------------
OBJETOS E FERRAMENTAS
------------------------------------------------------------------------- */
/* Scissors - Corta */
a:hover .bi-scissors, button:hover .bi-scissors {
animation: biHoverScissors 0.4s ease-in-out;
color: #6b7280;
}
@keyframes biHoverScissors {
0%, 100% { transform: rotate(0deg); }
50% { transform: rotate(-20deg); }
}
/* Ruler - Mede */
a:hover .bi-rulers, button:hover .bi-rulers {
transform: scale(1.05) rotate(5deg);
color: #f59e0b;
}
/* Palette - Colore */
a:hover .bi-palette, button:hover .bi-palette,
a:hover .bi-palette-fill, button:hover .bi-palette-fill,
a:hover .bi-palette2, button:hover .bi-palette2 {
animation: biHoverPalette 0.5s ease-in-out;
filter: brightness(1.1);
}
@keyframes biHoverPalette {
0%, 100% { transform: rotate(0deg); }
25% { transform: rotate(-5deg); }
75% { transform: rotate(5deg); }
}
/* Brush/Pen - Pinta */
a:hover .bi-brush, button:hover .bi-brush,
a:hover .bi-brush-fill, button:hover .bi-brush-fill {
transform: rotate(-20deg) translateY(-2px);
color: #ec4899;
}
a:hover .bi-pen, button:hover .bi-pen,
a:hover .bi-pen-fill, button:hover .bi-pen-fill {
transform: rotate(-20deg) translateY(-2px);
color: #3b82f6;
}
/* Lightbulb - Ilumina */
a:hover .bi-lightbulb, button:hover .bi-lightbulb,
a:hover .bi-lightbulb-fill, button:hover .bi-lightbulb-fill {
animation: biHoverLightbulb 0.4s ease-out;
color: #f59e0b;
filter: drop-shadow(0 0 12px rgba(245, 158, 11, 0.6));
}
@keyframes biHoverLightbulb {
0%, 100% { transform: scale(1); filter: brightness(1); }
50% { transform: scale(1.15); filter: brightness(1.3); }
}
/* Magnet - Atrai */
a:hover .bi-magnet, button:hover .bi-magnet,
a:hover .bi-magnet-fill, button:hover .bi-magnet-fill {
animation: biHoverMagnet 0.4s ease-in-out;
color: #ef4444;
}
@keyframes biHoverMagnet {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-5px); }
}
/* Puzzle - Encaixa */
a:hover .bi-puzzle, button:hover .bi-puzzle,
a:hover .bi-puzzle-fill, button:hover .bi-puzzle-fill {
transform: rotate(15deg) scale(1.1);
color: var(--color-primary-500);
}
/* Gem/Diamond - Brilha */
a:hover .bi-gem, button:hover .bi-gem {
animation: biHoverGem 0.5s ease-in-out;
color: #06b6d4;
filter: drop-shadow(0 0 10px rgba(6, 182, 212, 0.6));
}
@keyframes biHoverGem {
0%, 100% { transform: scale(1); filter: brightness(1); }
50% { transform: scale(1.2); filter: brightness(1.4); }
}
/* Gift - Apresenta */
a:hover .bi-gift, button:hover .bi-gift,
a:hover .bi-gift-fill, button:hover .bi-gift-fill {
animation: biHoverGift 0.5s ease-out;
color: #ec4899;
}
@keyframes biHoverGift {
0%, 100% { transform: scale(1) rotate(0deg); }
25% { transform: scale(1.1) rotate(-5deg); }
75% { transform: scale(1.1) rotate(5deg); }
}
/* Balloon - Flutua */
a:hover .bi-balloon-fill, button:hover .bi-balloon-fill,
a:hover .bi-balloon-heart, button:hover .bi-balloon-heart,
a:hover .bi-balloon-heart-fill, button:hover .bi-balloon-heart-fill {
animation: biHoverBalloon 0.6s ease-in-out;
color: #ec4899;
}
@keyframes biHoverBalloon {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-8px); }
}
/* Box/Package variants */
a:hover .bi-box-seam, button:hover .bi-box-seam,
a:hover .bi-box-seam-fill, button:hover .bi-box-seam-fill {
animation: biHoverBoxSeam 0.4s ease-out;
color: #f59e0b;
}
@keyframes biHoverBoxSeam {
0%, 100% { transform: translateY(0) scale(1); }
50% { transform: translateY(-4px) scale(1.05); }
}
a:hover .bi-box-arrow-in-down, button:hover .bi-box-arrow-in-down,
a:hover .bi-box-arrow-in-up, button:hover .bi-box-arrow-in-up {
animation: biHoverBoxIn 0.4s ease-out;
color: var(--color-primary-600);
}
@keyframes biHoverBoxIn {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.1); }
}
/* -------------------------------------------------------------------------
GRÁFICOS E DADOS
------------------------------------------------------------------------- */
/* Graph/Chart variants */
a:hover .bi-graph-up, button:hover .bi-graph-up,
a:hover .bi-graph-up-arrow, button:hover .bi-graph-up-arrow {
transform: translateY(-3px) scale(1.1);
color: #10b981;
}
a:hover .bi-graph-down, button:hover .bi-graph-down,
a:hover .bi-graph-down-arrow, button:hover .bi-graph-down-arrow {
transform: translateY(3px) scale(1.1);
color: #ef4444;
}
a:hover .bi-bar-chart, button:hover .bi-bar-chart,
a:hover .bi-bar-chart-fill, button:hover .bi-bar-chart-fill,
a:hover .bi-bar-chart-line, button:hover .bi-bar-chart-line,
a:hover .bi-bar-chart-line-fill, button:hover .bi-bar-chart-line-fill {
animation: biHoverBarChart 0.4s ease-out;
color: var(--color-primary-600);
}
@keyframes biHoverBarChart {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.1) translateY(-2px); }
}
a:hover .bi-pie-chart, button:hover .bi-pie-chart,
a:hover .bi-pie-chart-fill, button:hover .bi-pie-chart-fill {
animation: biHoverPieChart 0.5s ease-in-out;
color: var(--color-primary-500);
}
@keyframes biHoverPieChart {
0%, 100% { transform: rotate(0deg); }
50% { transform: rotate(15deg); }
}
/* Activity - Pulsa */
a:hover .bi-activity, button:hover .bi-activity {
animation: biHoverActivity 0.5s ease-in-out;
color: #10b981;
}
@keyframes biHoverActivity {
0%, 100% { transform: scaleX(1); }
50% { transform: scaleX(1.15); }
}
/* Speedometer - Acelera */
a:hover .bi-speedometer, button:hover .bi-speedometer,
a:hover .bi-speedometer2, button:hover .bi-speedometer2 {
animation: biHoverSpeedometer 0.4s ease-out;
color: #f59e0b;
}
@keyframes biHoverSpeedometer {
0% { transform: rotate(0deg); }
100% { transform: rotate(20deg); }
}
/* -------------------------------------------------------------------------
ALERTAS E STATUS (EXTENSÃO)
------------------------------------------------------------------------- */
/* Exclamation variants */
a:hover .bi-exclamation, button:hover .bi-exclamation,
a:hover .bi-exclamation-lg, button:hover .bi-exclamation-lg {
animation: biHoverExclamation 0.4s ease-in-out;
color: #f59e0b;
}
@keyframes biHoverExclamation {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.3); }
}
a:hover .bi-exclamation-octagon, button:hover .bi-exclamation-octagon,
a:hover .bi-exclamation-octagon-fill, button:hover .bi-exclamation-octagon-fill {
animation: biHoverOctagon 0.4s ease-in-out;
color: #ef4444;
}
@keyframes biHoverOctagon {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.15) rotate(5deg); }
}
a:hover .bi-exclamation-square, button:hover .bi-exclamation-square,
a:hover .bi-exclamation-square-fill, button:hover .bi-exclamation-square-fill {
animation: biHoverWarning 0.4s ease-in-out;
color: #f59e0b;
}
a:hover .bi-exclamation-diamond, button:hover .bi-exclamation-diamond,
a:hover .bi-exclamation-diamond-fill, button:hover .bi-exclamation-diamond-fill {
animation: biHoverDiamond 0.4s ease-in-out;
color: #f59e0b;
}
@keyframes biHoverDiamond {
0%, 100% { transform: scale(1) rotate(0deg); }
50% { transform: scale(1.15) rotate(45deg); }
}
/* Radioactive - Perigoso */
a:hover .bi-radioactive, button:hover .bi-radioactive {
animation: biHoverRadioactive 0.6s ease-in-out;
color: #f59e0b;
filter: drop-shadow(0 0 8px rgba(245, 158, 11, 0.6));
}
@keyframes biHoverRadioactive {
0%, 100% { transform: rotate(0deg); opacity: 1; }
50% { transform: rotate(60deg); opacity: 0.8; }
}
/* Biohazard - Alerta máximo */
a:hover .bi-biohazard, button:hover .bi-biohazard {
animation: biHoverBiohazard 0.5s ease-in-out;
color: #ef4444;
filter: drop-shadow(0 0 10px rgba(239, 68, 68, 0.6));
}
@keyframes biHoverBiohazard {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.2); }
}
/* -------------------------------------------------------------------------
TRANSPORTE (EXTENSÃO)
------------------------------------------------------------------------- */
/* Airplane - Decola */
a:hover .bi-airplane, button:hover .bi-airplane,
a:hover .bi-airplane-fill, button:hover .bi-airplane-fill {
animation: biHoverAirplane 0.5s ease-out forwards;
color: #3b82f6;
}
@keyframes biHoverAirplane {
0% { transform: translate(0, 0) rotate(0deg); }
100% { transform: translate(8px, -8px) rotate(-15deg); }
}
/* Train - Move */
a:hover .bi-train-front, button:hover .bi-train-front,
a:hover .bi-train-front-fill, button:hover .bi-train-front-fill {
animation: biHoverTrain 0.4s ease-out;
color: var(--color-primary-600);
}
@keyframes biHoverTrain {
0%, 100% { transform: translateX(0); }
50% { transform: translateX(5px); }
}
/* Scooter/Bike */
a:hover .bi-scooter, button:hover .bi-scooter {
animation: biHoverScooter 0.4s ease-out;
color: #10b981;
}
@keyframes biHoverScooter {
0%, 100% { transform: translateX(0); }
50% { transform: translateX(6px); }
}
/* Taxi */
a:hover .bi-taxi-front, button:hover .bi-taxi-front,
a:hover .bi-taxi-front-fill, button:hover .bi-taxi-front-fill {
animation: biHoverTaxi 0.4s ease-out;
color: #f59e0b;
}
@keyframes biHoverTaxi {
0%, 100% { transform: translateX(0); }
50% { transform: translateX(4px); }
}
/* -------------------------------------------------------------------------
COMIDA E BEBIDA
------------------------------------------------------------------------- */
/* Cup/Coffee - Fuma */
a:hover .bi-cup, button:hover .bi-cup,
a:hover .bi-cup-fill, button:hover .bi-cup-fill,
a:hover .bi-cup-hot, button:hover .bi-cup-hot,
a:hover .bi-cup-hot-fill, button:hover .bi-cup-hot-fill {
animation: biHoverCup 0.5s ease-in-out;
color: #92400e;
}
@keyframes biHoverCup {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-4px); }
}
/* Egg - Balança */
a:hover .bi-egg, button:hover .bi-egg,
a:hover .bi-egg-fill, button:hover .bi-egg-fill,
a:hover .bi-egg-fried, button:hover .bi-egg-fried {
animation: biHoverEgg 0.4s ease-in-out;
color: #f59e0b;
}
@keyframes biHoverEgg {
0%, 100% { transform: rotate(0deg); }
25% { transform: rotate(-5deg); }
75% { transform: rotate(5deg); }
}
/* -------------------------------------------------------------------------
ESPORTES E JOGOS
------------------------------------------------------------------------- */
/* Controller - Joga */
a:hover .bi-controller, button:hover .bi-controller {
animation: biHoverController 0.4s ease-in-out;
color: var(--color-primary-500);
}
@keyframes biHoverController {
0%, 100% { transform: rotate(0deg); }
25% { transform: rotate(-5deg); }
75% { transform: rotate(5deg); }
}
/* Dice - Rola */
a:hover .bi-dice-1, button:hover .bi-dice-1,
a:hover .bi-dice-2, button:hover .bi-dice-2,
a:hover .bi-dice-3, button:hover .bi-dice-3,
a:hover .bi-dice-4, button:hover .bi-dice-4,
a:hover .bi-dice-5, button:hover .bi-dice-5,
a:hover .bi-dice-6, button:hover .bi-dice-6 {
animation: biHoverDice 0.5s ease-in-out;
color: var(--color-primary-600);
}
@keyframes biHoverDice {
0%, 100% { transform: rotate(0deg); }
25% { transform: rotate(-15deg); }
75% { transform: rotate(15deg); }
}
/* -------------------------------------------------------------------------
SÍMBOLOS E SINAIS
------------------------------------------------------------------------- */
/* Infinity - Loop */
a:hover .bi-infinity, button:hover .bi-infinity {
animation: biHoverInfinity 1s ease-in-out infinite;
color: var(--color-primary-500);
}
@keyframes biHoverInfinity {
0%, 100% { transform: scaleX(1); }
50% { transform: scaleX(1.1); }
}
/* Yin-yang - Gira */
a:hover .bi-yin-yang, button:hover .bi-yin-yang {
animation: biHoverYinYang 0.8s ease-in-out;
color: #374151;
}
@keyframes biHoverYinYang {
0%, 100% { transform: rotate(0deg); }
50% { transform: rotate(180deg); }
}
/* Peace - Pulsa */
a:hover .bi-peace, button:hover .bi-peace,
a:hover .bi-peace-fill, button:hover .bi-peace-fill {
transform: scale(1.15);
color: var(--color-primary-500);
}
/* Vinyl/Record - Gira */
a:hover .bi-vinyl, button:hover .bi-vinyl,
a:hover .bi-vinyl-fill, button:hover .bi-vinyl-fill {
animation: biHoverVinyl 1s linear infinite;
color: #374151;
}
@keyframes biHoverVinyl {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Cursor/Pointer - Clica */
a:hover .bi-cursor, button:hover .bi-cursor,
a:hover .bi-cursor-fill, button:hover .bi-cursor-fill {
animation: biHoverCursor 0.3s ease-out;
color: #374151;
}
@keyframes biHoverCursor {
0%, 100% { transform: translate(0, 0); }
50% { transform: translate(2px, 2px); }
}
/* Hand/Touch */
a:hover .bi-hand-index, button:hover .bi-hand-index,
a:hover .bi-hand-index-fill, button:hover .bi-hand-index-fill,
a:hover .bi-hand-index-thumb, button:hover .bi-hand-index-thumb {
animation: biHoverHand 0.3s ease-out;
color: #f59e0b;
}
@keyframes biHoverHand {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-3px); }
}
a:hover .bi-hand-thumbs-up, button:hover .bi-hand-thumbs-up,
a:hover .bi-hand-thumbs-up-fill, button:hover .bi-hand-thumbs-up-fill {
transform: scale(1.15) rotate(-10deg);
color: #10b981;
}
a:hover .bi-hand-thumbs-down, button:hover .bi-hand-thumbs-down,
a:hover .bi-hand-thumbs-down-fill, button:hover .bi-hand-thumbs-down-fill {
transform: scale(1.15) rotate(10deg);
color: #ef4444;
}
/* Emoji faces */
a:hover .bi-emoji-smile, button:hover .bi-emoji-smile,
a:hover .bi-emoji-smile-fill, button:hover .bi-emoji-smile-fill,
a:hover .bi-emoji-laughing, button:hover .bi-emoji-laughing,
a:hover .bi-emoji-laughing-fill, button:hover .bi-emoji-laughing-fill {
transform: scale(1.2);
color: #fbbf24;
}
a:hover .bi-emoji-frown, button:hover .bi-emoji-frown,
a:hover .bi-emoji-frown-fill, button:hover .bi-emoji-frown-fill {
transform: scale(1.1);
color: #6b7280;
}
a:hover .bi-emoji-heart-eyes, button:hover .bi-emoji-heart-eyes,
a:hover .bi-emoji-heart-eyes-fill, button:hover .bi-emoji-heart-eyes-fill {
transform: scale(1.2);
color: #ef4444;
filter: drop-shadow(0 0 6px rgba(239, 68, 68, 0.4));
}
/* -------------------------------------------------------------------------
CÓDIGO E DESENVOLVIMENTO
------------------------------------------------------------------------- */
/* Terminal/Code */
a:hover .bi-terminal, button:hover .bi-terminal,
a:hover .bi-terminal-fill, button:hover .bi-terminal-fill {
transform: scale(1.08);
color: #10b981;
filter: drop-shadow(0 0 6px rgba(16, 185, 129, 0.4));
}
a:hover .bi-code, button:hover .bi-code,
a:hover .bi-code-slash, button:hover .bi-code-slash,
a:hover .bi-code-square, button:hover .bi-code-square {
transform: scale(1.1);
color: var(--color-primary-500);
}
a:hover .bi-braces, button:hover .bi-braces,
a:hover .bi-braces-asterisk, button:hover .bi-braces-asterisk {
transform: scaleX(1.15);
color: #f59e0b;
}
/* Bug - Rasteja */
a:hover .bi-bug, button:hover .bi-bug,
a:hover .bi-bug-fill, button:hover .bi-bug-fill {
animation: biHoverBug 0.4s ease-in-out;
color: #ef4444;
}
@keyframes biHoverBug {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-2px) rotate(-5deg); }
75% { transform: translateX(2px) rotate(5deg); }
}
/* Git/Branch */
a:hover .bi-git, button:hover .bi-git {
transform: scale(1.1);
color: #f97316;
}
a:hover .bi-github, button:hover .bi-github {
transform: scale(1.15);
color: #374151;
filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.3));
}
/* Diagram - Organiza */
a:hover .bi-diagram-2, button:hover .bi-diagram-2,
a:hover .bi-diagram-2-fill, button:hover .bi-diagram-2-fill,
a:hover .bi-diagram-3, button:hover .bi-diagram-3,
a:hover .bi-diagram-3-fill, button:hover .bi-diagram-3-fill {
transform: scale(1.08);
color: var(--color-primary-600);
}
/* =============================================================================
CORES INTELIGENTES DE CONTEXTO
Ícones herdam cores automaticamente baseadas no elemento pai
============================================================================= */
/* ---------------------------------------------------------------------------
CARDS COM BACKGROUND COLORIDO
IMPORTANTE: Ícones com classe text-* explícita NÃO são afetados por estas
regras. Use text-white, text-yellow-400, etc. para sobrescrever.
--------------------------------------------------------------------------- */
/* 🛡️ PROTEÇÃO: Classes text-* explícitas TÊM PRIORIDADE MÁXIMA */
[class*="bg-blue-"] .bi[class*="text-"],
[class*="bg-green-"] .bi[class*="text-"],
[class*="bg-emerald-"] .bi[class*="text-"],
[class*="bg-red-"] .bi[class*="text-"],
[class*="bg-purple-"] .bi[class*="text-"],
[class*="bg-violet-"] .bi[class*="text-"],
[class*="bg-indigo-"] .bi[class*="text-"],
[class*="bg-yellow-"] .bi[class*="text-"],
[class*="bg-amber-"] .bi[class*="text-"],
[class*="bg-orange-"] .bi[class*="text-"],
[class*="bg-cyan-"] .bi[class*="text-"],
[class*="bg-teal-"] .bi[class*="text-"],
[class*="bg-pink-"] .bi[class*="text-"],
[class*="bg-rose-"] .bi[class*="text-"],
[class*="bg-gray-"] .bi[class*="text-"],
[class*="bg-slate-"] .bi[class*="text-"],
[class*="bg-gradient"] .bi[class*="text-"],
[class*="from-["] .bi[class*="text-"] {
color: unset; /* Deixa a classe text-* controlar — sem !important para text-white ganhe */
}
/* Cards Azul - cores com alta visibilidade */
[class*="bg-blue-50"] .bi,
[class*="bg-blue-100"] .bi,
[class*="bg-blue-50"] [class*="bi-"],
[class*="bg-blue-100"] [class*="bi-"] {
color: #1e40af !important;
}
[class*="bg-blue-500"] .bi,
[class*="bg-blue-600"] .bi,
[class*="bg-blue-700"] .bi,
[class*="bg-blue-500"] [class*="bi-"],
[class*="bg-blue-600"] [class*="bi-"],
[class*="bg-blue-700"] [class*="bi-"] {
color: #ffffff !important;
}
/* Cards Verde - cores com alta visibilidade */
[class*="bg-green-50"] .bi,
[class*="bg-green-100"] .bi,
[class*="bg-emerald-50"] .bi,
[class*="bg-emerald-100"] .bi,
[class*="bg-green-50"] [class*="bi-"],
[class*="bg-green-100"] [class*="bi-"],
[class*="bg-emerald-50"] [class*="bi-"],
[class*="bg-emerald-100"] [class*="bi-"] {
color: #065f46 !important;
}
[class*="bg-green-500"] .bi,
[class*="bg-green-600"] .bi,
[class*="bg-emerald-500"] .bi,
[class*="bg-emerald-600"] .bi,
[class*="bg-green-500"] [class*="bi-"],
[class*="bg-green-600"] [class*="bi-"],
[class*="bg-emerald-500"] [class*="bi-"],
[class*="bg-emerald-600"] [class*="bi-"] {
color: #ffffff !important;
}
/* Cards Roxo/Violet - cores com alta visibilidade */
[class*="bg-purple-50"] .bi,
[class*="bg-purple-100"] .bi,
[class*="bg-violet-50"] .bi,
[class*="bg-violet-100"] .bi,
[class*="bg-indigo-50"] .bi,
[class*="bg-indigo-100"] .bi,
[class*="bg-purple-50"] [class*="bi-"],
[class*="bg-purple-100"] [class*="bi-"],
[class*="bg-violet-50"] [class*="bi-"],
[class*="bg-violet-100"] [class*="bi-"],
[class*="bg-indigo-50"] [class*="bi-"],
[class*="bg-indigo-100"] [class*="bi-"] {
color: #5b21b6 !important;
}
[class*="bg-purple-500"] .bi,
[class*="bg-purple-600"] .bi,
[class*="bg-violet-500"] .bi,
[class*="bg-violet-600"] .bi,
[class*="bg-indigo-500"] .bi,
[class*="bg-indigo-600"] .bi,
[class*="bg-purple-500"] [class*="bi-"],
[class*="bg-purple-600"] [class*="bi-"],
[class*="bg-violet-500"] [class*="bi-"],
[class*="bg-violet-600"] [class*="bi-"],
[class*="bg-indigo-500"] [class*="bi-"],
[class*="bg-indigo-600"] [class*="bi-"] {
color: #ffffff !important;
}
/* Cards Vermelho - cores com alta visibilidade */
[class*="bg-red-50"] .bi,
[class*="bg-red-100"] .bi,
[class*="bg-red-50"] [class*="bi-"],
[class*="bg-red-100"] [class*="bi-"] {
color: #991b1b !important;
}
[class*="bg-red-500"] .bi,
[class*="bg-red-600"] .bi,
[class*="bg-red-500"] [class*="bi-"],
[class*="bg-red-600"] [class*="bi-"] {
color: #ffffff !important;
}
/* Cards Amarelo/Orange - cores com alta visibilidade e contraste */
[class*="bg-yellow-50"] .bi,
[class*="bg-yellow-100"] .bi,
[class*="bg-amber-50"] .bi,
[class*="bg-amber-100"] .bi,
[class*="bg-yellow-50"] [class*="bi-"],
[class*="bg-yellow-100"] [class*="bi-"],
[class*="bg-amber-50"] [class*="bi-"],
[class*="bg-amber-100"] [class*="bi-"] {
color: #92400e !important;
}
[class*="bg-orange-50"] .bi,
[class*="bg-orange-100"] .bi,
[class*="bg-orange-50"] [class*="bi-"],
[class*="bg-orange-100"] [class*="bi-"] {
color: #9a3412 !important;
}
[class*="bg-yellow-500"] .bi,
[class*="bg-amber-500"] .bi,
[class*="bg-orange-500"] .bi,
[class*="bg-yellow-500"] [class*="bi-"],
[class*="bg-amber-500"] [class*="bi-"],
[class*="bg-orange-500"] [class*="bi-"] {
color: #ffffff !important;
}
/* Cards Cinza - usar inherit para permitir que botões/links definam suas cores */
[class*="bg-gray-50"] .bi,
[class*="bg-gray-100"] .bi,
[class*="bg-slate-50"] .bi,
[class*="bg-slate-100"] .bi {
color: inherit;
}
[class*="bg-gray-700"] .bi,
[class*="bg-gray-800"] .bi,
[class*="bg-gray-900"] .bi,
[class*="bg-slate-700"] .bi,
[class*="bg-slate-800"] .bi,
[class*="bg-slate-900"] .bi {
color: inherit;
}
/* Cards Cyan/Teal - cores com alta visibilidade */
[class*="bg-cyan-50"] .bi,
[class*="bg-cyan-100"] .bi,
[class*="bg-teal-50"] .bi,
[class*="bg-teal-100"] .bi,
[class*="bg-cyan-50"] [class*="bi-"],
[class*="bg-cyan-100"] [class*="bi-"],
[class*="bg-teal-50"] [class*="bi-"],
[class*="bg-teal-100"] [class*="bi-"] {
color: #0e7490 !important;
}
[class*="bg-cyan-500"] .bi,
[class*="bg-cyan-600"] .bi,
[class*="bg-teal-500"] .bi,
[class*="bg-teal-600"] .bi,
[class*="bg-cyan-500"] [class*="bi-"],
[class*="bg-cyan-600"] [class*="bi-"],
[class*="bg-teal-500"] [class*="bi-"],
[class*="bg-teal-600"] [class*="bi-"] {
color: #ffffff !important;
}
/* Cards Pink/Rose - cores com alta visibilidade */
[class*="bg-pink-50"] .bi,
[class*="bg-pink-100"] .bi,
[class*="bg-rose-50"] .bi,
[class*="bg-rose-100"] .bi,
[class*="bg-pink-50"] [class*="bi-"],
[class*="bg-pink-100"] [class*="bi-"],
[class*="bg-rose-50"] [class*="bi-"],
[class*="bg-rose-100"] [class*="bi-"] {
color: #9d174d !important;
}
[class*="bg-pink-500"] .bi,
[class*="bg-pink-600"] .bi,
[class*="bg-rose-500"] .bi,
[class*="bg-rose-600"] .bi,
[class*="bg-pink-500"] [class*="bi-"],
[class*="bg-pink-600"] [class*="bi-"],
[class*="bg-rose-500"] [class*="bi-"],
[class*="bg-rose-600"] [class*="bi-"] {
color: #ffffff !important;
}
/* ---------------------------------------------------------------------------
ALERTAS BOOTSTRAP/TAILWIND
--------------------------------------------------------------------------- */
/* Alert Success */
.alert-success .bi,
[class*="bg-success"] .bi,
.text-success .bi {
color: #059669;
}
/* Alert Danger */
.alert-danger .bi,
[class*="bg-danger"] .bi,
.text-danger .bi {
color: #dc2626;
}
/* Alert Warning */
.alert-warning .bi,
[class*="bg-warning"] .bi,
.text-warning .bi {
color: #d97706;
}
/* Alert Info */
.alert-info .bi,
[class*="bg-info"] .bi,
.text-info .bi {
color: #0891b2;
}
/* Alert Primary */
.alert-primary .bi,
[class*="bg-primary"] .bi,
.text-primary .bi {
color: var(--color-primary-600);
}
/* Alert Secondary */
.alert-secondary .bi,
[class*="bg-secondary"] .bi {
color: #6b7280;
}
/* ---------------------------------------------------------------------------
BADGES E LABELS
--------------------------------------------------------------------------- */
.badge .bi,
.label .bi,
.tag .bi {
font-size: 0.85em;
vertical-align: middle;
}
.badge-success .bi,
.badge-green .bi,
.bg-success .bi {
color: inherit;
}
.badge-danger .bi,
.badge-red .bi,
.bg-danger .bi {
color: inherit;
}
.badge-warning .bi,
.badge-yellow .bi,
.bg-warning .bi {
color: inherit;
}
.badge-info .bi,
.badge-blue .bi,
.bg-info .bi {
color: inherit;
}
/* ---------------------------------------------------------------------------
BOTÕES COM CONTEXTO
--------------------------------------------------------------------------- */
.btn-success .bi {
color: inherit;
}
.btn-danger .bi {
color: inherit;
}
.btn-warning .bi {
color: inherit;
}
.btn-info .bi {
color: inherit;
}
.btn-primary .bi {
color: inherit;
}
.btn-secondary .bi {
color: inherit;
}
.btn-outline-success .bi {
color: #10b981;
}
.btn-outline-success:hover .bi {
color: #ffffff;
}
.btn-outline-danger .bi {
color: #ef4444;
}
.btn-outline-danger:hover .bi {
color: #ffffff;
}
.btn-outline-warning .bi {
color: #f59e0b;
}
.btn-outline-warning:hover .bi {
color: #ffffff;
}
.btn-outline-info .bi {
color: #3b82f6;
}
.btn-outline-info:hover .bi {
color: #ffffff;
}
.btn-outline-primary .bi {
color: var(--color-primary-600);
}
.btn-outline-primary:hover .bi {
color: #ffffff;
}
/* ---------------------------------------------------------------------------
TABELAS
--------------------------------------------------------------------------- */
.table .bi {
vertical-align: middle;
}
.table-success .bi,
tr.table-success .bi,
td.table-success .bi {
color: #059669;
}
.table-danger .bi,
tr.table-danger .bi,
td.table-danger .bi {
color: #dc2626;
}
.table-warning .bi,
tr.table-warning .bi,
td.table-warning .bi {
color: #d97706;
}
.table-info .bi,
tr.table-info .bi,
td.table-info .bi {
color: #0891b2;
}
/* ---------------------------------------------------------------------------
SIDEBAR / NAVEGAÇÃO
--------------------------------------------------------------------------- */
.sidebar .bi,
.nav-sidebar .bi,
.side-menu .bi {
color: inherit;
transition: color 0.2s ease, transform 0.2s ease;
}
.sidebar .nav-link:hover .bi,
.nav-sidebar .nav-link:hover .bi,
.side-menu a:hover .bi {
transform: translateX(3px);
}
.sidebar .nav-link.active .bi,
.nav-sidebar .nav-link.active .bi,
.side-menu a.active .bi {
color: var(--color-primary-600);
}
/* ---------------------------------------------------------------------------
MODAIS E DROPDOWNS
--------------------------------------------------------------------------- */
.modal-header .bi {
color: inherit;
}
.dropdown-item .bi {
color: #6b7280;
margin-right: 0.5rem;
transition: color 0.15s ease;
}
.dropdown-item:hover .bi {
color: #374151;
}
.dropdown-item.text-danger .bi,
.dropdown-item.text-red-500 .bi,
.dropdown-item.text-red-600 .bi {
color: #ef4444;
}
.dropdown-item.text-success .bi,
.dropdown-item.text-green-500 .bi,
.dropdown-item.text-green-600 .bi {
color: #10b981;
}
/* ---------------------------------------------------------------------------
FORMULÁRIOS
--------------------------------------------------------------------------- */
.input-group-text .bi {
color: #6b7280;
}
.form-label .bi {
color: inherit;
margin-right: 0.25rem;
}
.form-text .bi,
.help-text .bi {
color: #9ca3af;
}
.invalid-feedback .bi,
.form-error .bi {
color: #ef4444;
}
.valid-feedback .bi,
.form-success .bi {
color: #10b981;
}
/* ---------------------------------------------------------------------------
CARDS ESPECÍFICOS DO DASHBOARD
--------------------------------------------------------------------------- */
/* Card de Vendas */
.card-vendas .bi,
[data-card="vendas"] .bi {
color: #10b981;
}
/* Card de Clientes */
.card-clientes .bi,
[data-card="clientes"] .bi {
color: #3b82f6;
}
/* Card de Produtos */
.card-produtos .bi,
[data-card="produtos"] .bi {
color: var(--color-primary-500);
}
/* Card de Financeiro */
.card-financeiro .bi,
[data-card="financeiro"] .bi {
color: #f59e0b;
}
/* Card de Pedidos */
.card-pedidos .bi,
[data-card="pedidos"] .bi {
color: var(--color-primary-600);
}
/* Card de Estoque */
.card-estoque .bi,
[data-card="estoque"] .bi {
color: #14b8a6;
}
/* ---------------------------------------------------------------------------
LISTAS E ITENS
--------------------------------------------------------------------------- */
.list-group-item .bi {
color: inherit;
}
.list-group-item-success .bi {
color: #059669;
}
.list-group-item-danger .bi {
color: #dc2626;
}
.list-group-item-warning .bi {
color: #d97706;
}
.list-group-item-info .bi {
color: #0891b2;
}
/* ---------------------------------------------------------------------------
TOAST / NOTIFICAÇÕES
--------------------------------------------------------------------------- */
.toast-success .bi {
color: #ffffff;
}
.toast-error .bi,
.toast-danger .bi {
color: #ffffff;
}
.toast-warning .bi {
color: #ffffff;
}
.toast-info .bi {
color: #ffffff;
}
/* ---------------------------------------------------------------------------
ESTADOS ESPECIAIS
--------------------------------------------------------------------------- */
/* Desabilitado */
.disabled .bi,
[disabled] .bi,
.btn:disabled .bi {
opacity: 0.5;
cursor: not-allowed;
}
/* Loading */
.loading .bi,
.is-loading .bi {
animation: biSpin 1s linear infinite;
}
/* Selecionado */
.selected .bi,
.is-selected .bi,
.active .bi {
color: inherit;
}
/* ---------------------------------------------------------------------------
DARK MODE - CORES DE CONTEXTO
FIX: Removido @media (prefers-color-scheme: dark) - usar .dark class
para respeitar tema selecionado pelo usuario (tema verde != dark mode)
Regras equivalentes ja existem abaixo com seletor .dark [...]
--------------------------------------------------------------------------- */
/* Dark class override (Tailwind dark:) - cores com alta visibilidade */
.dark [class*="bg-blue-50"] .bi,
.dark [class*="bg-blue-100"] .bi,
.dark [class*="bg-blue-50"] [class*="bi-"],
.dark [class*="bg-blue-100"] [class*="bi-"] {
color: #93c5fd !important;
}
.dark [class*="bg-green-50"] .bi,
.dark [class*="bg-green-100"] .bi,
.dark [class*="bg-emerald-50"] .bi,
.dark [class*="bg-emerald-100"] .bi,
.dark [class*="bg-green-50"] [class*="bi-"],
.dark [class*="bg-green-100"] [class*="bi-"],
.dark [class*="bg-emerald-50"] [class*="bi-"],
.dark [class*="bg-emerald-100"] [class*="bi-"] {
color: #6ee7b7 !important;
}
.dark [class*="bg-purple-50"] .bi,
.dark [class*="bg-purple-100"] .bi,
.dark [class*="bg-violet-50"] .bi,
.dark [class*="bg-violet-100"] .bi,
.dark [class*="bg-indigo-50"] .bi,
.dark [class*="bg-indigo-100"] .bi,
.dark [class*="bg-purple-50"] [class*="bi-"],
.dark [class*="bg-purple-100"] [class*="bi-"],
.dark [class*="bg-violet-50"] [class*="bi-"],
.dark [class*="bg-violet-100"] [class*="bi-"],
.dark [class*="bg-indigo-50"] [class*="bi-"],
.dark [class*="bg-indigo-100"] [class*="bi-"] {
color: #c4b5fd !important;
}
.dark [class*="bg-red-50"] .bi,
.dark [class*="bg-red-100"] .bi,
.dark [class*="bg-red-50"] [class*="bi-"],
.dark [class*="bg-red-100"] [class*="bi-"] {
color: #fca5a5 !important;
}
.dark [class*="bg-yellow-50"] .bi,
.dark [class*="bg-yellow-100"] .bi,
.dark [class*="bg-amber-50"] .bi,
.dark [class*="bg-amber-100"] .bi,
.dark [class*="bg-yellow-50"] [class*="bi-"],
.dark [class*="bg-yellow-100"] [class*="bi-"],
.dark [class*="bg-amber-50"] [class*="bi-"],
.dark [class*="bg-amber-100"] [class*="bi-"] {
color: #fcd34d !important;
}
.dark [class*="bg-orange-50"] .bi,
.dark [class*="bg-orange-100"] .bi,
.dark [class*="bg-orange-50"] [class*="bi-"],
.dark [class*="bg-orange-100"] [class*="bi-"] {
color: #fdba74 !important;
}
.dark [class*="bg-gray-50"] .bi,
.dark [class*="bg-gray-100"] .bi,
.dark [class*="bg-slate-50"] .bi,
.dark [class*="bg-slate-100"] .bi,
.dark [class*="bg-gray-50"] [class*="bi-"],
.dark [class*="bg-gray-100"] [class*="bi-"],
.dark [class*="bg-slate-50"] [class*="bi-"],
.dark [class*="bg-slate-100"] [class*="bi-"] {
color: #9ca3af !important;
}
.dark [class*="bg-cyan-50"] .bi,
.dark [class*="bg-cyan-100"] .bi,
.dark [class*="bg-teal-50"] .bi,
.dark [class*="bg-teal-100"] .bi,
.dark [class*="bg-cyan-50"] [class*="bi-"],
.dark [class*="bg-cyan-100"] [class*="bi-"],
.dark [class*="bg-teal-50"] [class*="bi-"],
.dark [class*="bg-teal-100"] [class*="bi-"] {
color: #67e8f9 !important;
}
.dark [class*="bg-pink-50"] .bi,
.dark [class*="bg-pink-100"] .bi,
.dark [class*="bg-rose-50"] .bi,
.dark [class*="bg-rose-100"] .bi,
.dark [class*="bg-pink-50"] [class*="bi-"],
.dark [class*="bg-pink-100"] [class*="bi-"],
.dark [class*="bg-rose-50"] [class*="bi-"],
.dark [class*="bg-rose-100"] [class*="bi-"] {
color: #f9a8d4 !important;
}
.dark .alert-success .bi {
color: #34d399;
}
.dark .alert-danger .bi {
color: #f87171;
}
.dark .alert-warning .bi {
color: #fbbf24;
}
.dark .alert-info .bi {
color: #38bdf8;
}
.dark .input-group-text .bi {
color: #9ca3af;
}
.dark .dropdown-item .bi {
color: #9ca3af;
}
.dark .dropdown-item:hover .bi {
color: #e5e7eb;
}
/* ---------------------------------------------------------------------------
GRADIENTES E BACKGROUNDS ESPECIAIS
--------------------------------------------------------------------------- */
/* Gradient backgrounds */
[class*="bg-gradient"] .bi {
color: inherit;
}
/* ---------------------------------------------------------------------------
DARK MODE - BACKGROUNDS ESCUROS COM OPACIDADE (bg-color-900/xx)
Usados em cards do dark mode como dark:bg-yellow-900/30
--------------------------------------------------------------------------- */
.dark [class*="bg-yellow-900"] .bi,
.dark [class*="bg-amber-900"] .bi,
.dark [class*="bg-yellow-900"] [class*="bi-"],
.dark [class*="bg-amber-900"] [class*="bi-"] {
color: #fcd34d !important;
}
.dark [class*="bg-green-900"] .bi,
.dark [class*="bg-emerald-900"] .bi,
.dark [class*="bg-green-900"] [class*="bi-"],
.dark [class*="bg-emerald-900"] [class*="bi-"] {
color: #6ee7b7 !important;
}
.dark [class*="bg-red-900"] .bi,
.dark [class*="bg-rose-900"] .bi,
.dark [class*="bg-red-900"] [class*="bi-"],
.dark [class*="bg-rose-900"] [class*="bi-"] {
color: #fca5a5 !important;
}
.dark [class*="bg-blue-900"] .bi,
.dark [class*="bg-blue-900"] [class*="bi-"] {
color: #93c5fd !important;
}
.dark [class*="bg-purple-900"] .bi,
.dark [class*="bg-violet-900"] .bi,
.dark [class*="bg-indigo-900"] .bi,
.dark [class*="bg-purple-900"] [class*="bi-"],
.dark [class*="bg-violet-900"] [class*="bi-"],
.dark [class*="bg-indigo-900"] [class*="bi-"] {
color: #c4b5fd !important;
}
.dark [class*="bg-cyan-900"] .bi,
.dark [class*="bg-teal-900"] .bi,
.dark [class*="bg-cyan-900"] [class*="bi-"],
.dark [class*="bg-teal-900"] [class*="bi-"] {
color: #67e8f9 !important;
}
.dark [class*="bg-orange-900"] .bi,
.dark [class*="bg-orange-900"] [class*="bi-"] {
color: #fdba74 !important;
}
.dark [class*="bg-pink-900"] .bi,
.dark [class*="bg-pink-900"] [class*="bi-"] {
color: #f9a8d4 !important;
}
/* Glass effect backgrounds */
[class*="backdrop-blur"] .bi,
.glass .bi {
color: inherit;
}
/* Cards com sombra colorida */
[class*="shadow-blue"] .bi {
color: #3b82f6;
}
[class*="shadow-green"] .bi {
color: #10b981;
}
[class*="shadow-purple"] .bi {
color: var(--color-primary-500);
}
[class*="shadow-red"] .bi {
color: #ef4444;
}
/* ---------------------------------------------------------------------------
ÍCONES EM CÍRCULOS/QUADRADOS COLORIDOS
--------------------------------------------------------------------------- */
/* Círculo de ícone com background */
.icon-circle .bi,
.icon-square .bi,
.icon-rounded .bi {
color: inherit;
}
.icon-circle-blue .bi,
.icon-square-blue .bi {
color: #3b82f6;
}
.icon-circle-green .bi,
.icon-square-green .bi {
color: #10b981;
}
.icon-circle-red .bi,
.icon-square-red .bi {
color: #ef4444;
}
.icon-circle-yellow .bi,
.icon-square-yellow .bi {
color: #f59e0b;
}
.icon-circle-purple .bi,
.icon-square-purple .bi {
color: var(--color-primary-500);
}
/* Círculos com background sólido (ícone branco) */
.icon-circle-blue-solid .bi,
.icon-square-blue-solid .bi {
color: #ffffff;
}
.icon-circle-green-solid .bi,
.icon-square-green-solid .bi {
color: #ffffff;
}
.icon-circle-red-solid .bi,
.icon-square-red-solid .bi {
color: #ffffff;
}
/* ---------------------------------------------------------------------------
UTILITÁRIOS DE COR DIRETA
--------------------------------------------------------------------------- */
/* Para override manual quando necessário */
.bi.text-white { color: #ffffff !important; }
.bi.text-black { color: #000000 !important; }
.bi.text-current { color: currentColor !important; }
.bi.text-inherit { color: inherit !important; }
/* ═══════════════════════════════════════════════════════════════════════════════════
🎨 DASHBOARD PREMIUM - ÍCONES GRANDES E ANIMAÇÕES
Sistema de cores harmonioso com contraste perfeito
Teoria de cores: Complementares, Análogas, Triádicas
═══════════════════════════════════════════════════════════════════════════════════ */
/* ---------------------------------------------------------------------------
TAMANHOS PREMIUM PARA KPI CARDS
Ícones maiores e mais impactantes nos dashboards
--------------------------------------------------------------------------- */
/* KPI Card Icon - Tamanho base grande */
.kpi-card .bi,
.dashboard-card .bi,
.stat-card .bi,
[class*="bg-gradient"] .rounded-lg .bi,
[class*="bg-gradient"] .rounded-xl .bi {
font-size: 1.75rem; /* 28px */
}
@media (min-width: 640px) {
.kpi-card .bi,
.dashboard-card .bi,
.stat-card .bi,
[class*="bg-gradient"] .rounded-lg .bi,
[class*="bg-gradient"] .rounded-xl .bi {
font-size: 2.25rem; /* 36px */
}
}
@media (min-width: 1024px) {
.kpi-card .bi,
.dashboard-card .bi,
.stat-card .bi {
font-size: 2.5rem; /* 40px */
}
}
/* Ícone dentro de container bg-white/20 ou similar (header de card) */
.bg-white\/20 .bi,
.bg-white\/10 .bi,
[class*="bg-white/"] .bi {
font-size: 1.5rem;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}
@media (min-width: 640px) {
.bg-white\/20 .bi,
.bg-white\/10 .bi,
[class*="bg-white/"] .bi {
font-size: 2rem;
}
}
/* ---------------------------------------------------------------------------
ANIMAÇÕES PREMIUM PARA DASHBOARD CARDS
Cada cor de gradiente tem sua animação única
--------------------------------------------------------------------------- */
/* Base: Todos os ícones em cards gradientes têm transição suave */
[class*="bg-gradient"] .bi {
transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
filter 0.3s ease,
opacity 0.3s ease;
will-change: transform;
}
/* Hover no card = animação no ícone */
[class*="bg-gradient"]:hover .bi {
transform: scale(1.15);
filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.4));
}
/* ═══════════════════════════════════════════════════════════════════════════
ANIMAÇÕES POR COR - Cada gradiente tem animação lógica
═══════════════════════════════════════════════════════════════════════════ */
/* CYAN - Raio/Lightning Pulse (Energia, Velocidade) */
[class*="from-cyan"]:hover .bi-lightning-charge,
[class*="from-cyan"]:hover .bi-lightning-charge-fill {
animation: dashIconLightning 0.6s ease-in-out infinite;
}
[class*="from-cyan"]:hover .bi-file-earmark-text,
[class*="from-cyan"]:hover .bi-receipt {
animation: dashIconDocSlide 0.5s ease-out;
}
@keyframes dashIconLightning {
0%, 100% {
transform: scale(1.15);
filter: brightness(1) drop-shadow(0 0 8px rgba(255, 255, 255, 0.3));
}
50% {
transform: scale(1.25);
filter: brightness(1.3) drop-shadow(0 0 20px rgba(255, 255, 255, 0.6));
}
}
@keyframes dashIconDocSlide {
0% { transform: translateY(0) scale(1.15); }
50% { transform: translateY(-4px) scale(1.2); }
100% { transform: translateY(0) scale(1.15); }
}
/* TEAL - Impressora/PDV (Impressão fluida) */
[class*="from-teal"]:hover .bi-printer,
[class*="from-teal"]:hover .bi-printer-fill {
animation: dashIconPrint 0.6s ease-in-out;
}
@keyframes dashIconPrint {
0%, 100% { transform: scale(1.15); }
25% { transform: scale(1.15) translateY(3px); }
50% { transform: scale(1.2) translateY(0); }
75% { transform: scale(1.15) translateY(-3px); }
}
/* EMERALD/GREEN - Briefcase/Serviços (Crescimento) */
[class*="from-emerald"]:hover .bi-briefcase,
[class*="from-emerald"]:hover .bi-briefcase-fill,
[class*="from-green"]:hover .bi-briefcase {
animation: dashIconBriefcase 0.5s ease-out;
}
[class*="from-emerald"]:hover .bi-currency-dollar,
[class*="from-green"]:hover .bi-currency-dollar,
[class*="from-emerald"]:hover .bi-cash,
[class*="from-green"]:hover .bi-cash {
animation: dashIconMoney 0.6s ease-in-out;
}
@keyframes dashIconBriefcase {
0% { transform: scale(1.15) rotate(0deg); }
25% { transform: scale(1.2) rotate(-5deg); }
75% { transform: scale(1.2) rotate(5deg); }
100% { transform: scale(1.15) rotate(0deg); }
}
@keyframes dashIconMoney {
0%, 100% {
transform: scale(1.15);
filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.3));
}
50% {
transform: scale(1.3);
filter: drop-shadow(0 0 16px rgba(255, 255, 255, 0.5));
}
}
/* AMBER/YELLOW - Caminhão/Transporte (Movimento) */
[class*="from-amber"]:hover .bi-truck,
[class*="from-yellow"]:hover .bi-truck {
animation: dashIconTruck 0.6s ease-in-out;
}
@keyframes dashIconTruck {
0%, 100% { transform: translateX(0) scale(1.15); }
50% { transform: translateX(8px) scale(1.15); }
}
/* INDIGO/PURPLE - Inbox/Recebimento (Chegada) */
[class*="from-indigo"]:hover .bi-inbox,
[class*="from-indigo"]:hover .bi-inbox-fill,
[class*="from-purple"]:hover .bi-inbox {
animation: dashIconInbox 0.5s ease-out;
}
[class*="from-indigo"]:hover .bi-bell,
[class*="from-purple"]:hover .bi-bell {
animation: dashIconBellRing 0.5s ease-in-out;
}
@keyframes dashIconInbox {
0%, 100% { transform: scale(1.15) translateY(0); }
50% { transform: scale(1.2) translateY(4px); }
}
@keyframes dashIconBellRing {
0%, 100% { transform: scale(1.15) rotate(0deg); }
20% { transform: scale(1.15) rotate(15deg); }
40% { transform: scale(1.2) rotate(-15deg); }
60% { transform: scale(1.15) rotate(10deg); }
80% { transform: scale(1.15) rotate(-5deg); }
}
/* BLUE - Calendário/Planejamento (Organização) */
[class*="from-blue"]:hover .bi-calendar,
[class*="from-blue"]:hover .bi-calendar-check,
[class*="from-blue"]:hover .bi-calendar-event {
animation: dashIconCalendar 0.4s ease-out;
}
[class*="from-blue"]:hover .bi-people,
[class*="from-blue"]:hover .bi-person {
animation: dashIconPeople 0.5s ease-out;
}
@keyframes dashIconCalendar {
0%, 100% { transform: scale(1.15); }
50% { transform: scale(1.25) rotate(5deg); }
}
@keyframes dashIconPeople {
0%, 100% { transform: scale(1.15) translateY(0); }
50% { transform: scale(1.2) translateY(-5px); }
}
/* RED/ROSE - Alerta/Urgência (Atenção) */
[class*="from-red"]:hover .bi,
[class*="from-rose"]:hover .bi {
animation: dashIconAlert 0.4s ease-in-out;
}
@keyframes dashIconAlert {
0%, 100% { transform: scale(1.15); }
25%, 75% { transform: scale(1.2); }
50% { transform: scale(1.25); }
}
/* PINK - Coração/Favoritos (Amor) */
[class*="from-pink"]:hover .bi-heart,
[class*="from-pink"]:hover .bi-heart-fill {
animation: dashIconHeart 0.6s ease-in-out infinite;
}
@keyframes dashIconHeart {
0%, 100% { transform: scale(1.15); }
50% { transform: scale(1.3); }
}
/* GRAY/SLATE - Configurações/Sistema (Engrenagem) */
[class*="from-gray"]:hover .bi-gear,
[class*="from-slate"]:hover .bi-gear {
animation: dashIconGear 1s linear infinite;
}
@keyframes dashIconGear {
0% { transform: scale(1.15) rotate(0deg); }
100% { transform: scale(1.15) rotate(360deg); }
}
/* ═══════════════════════════════════════════════════════════════════════════
SISTEMA DE CORES HARMONIOSO - Teoria de Cores Premium
Contraste perfeito: fundo ↔ ícone/texto
═══════════════════════════════════════════════════════════════════════════ */
/* ---------------------------------------------------------------------------
PALETAS DE CORES PREMIUM - CSS Variables para Containers
IMPORTANTE: Auto-detecção de gradientes foi REMOVIDA para evitar bugs.
Ícones em gradientes devem usar classes explícitas:
- .text-white ou .icon-white para ícones brancos
- .icon-glow para ícone branco com sombra
As regras de cores para backgrounds SÓLIDOS (bg-*-50, bg-*-500) estão
mais acima no arquivo e funcionam corretamente.
--------------------------------------------------------------------------- */
.palette-cyan {
--bg-primary: linear-gradient(135deg, #06b6d4, #0891b2);
--bg-secondary: #ecfeff;
--text-on-gradient: #ffffff;
--text-subtle: #a5f3fc;
--accent: #fbbf24; /* Complementar quente */
--icon-glow: rgba(6, 182, 212, 0.5);
}
/* ═══════════════════════════════════════════════════════════════════════════
ÍCONES ANIMADOS AUTOMÁTICOS EM DASHBOARDS
Classe .dashboard-icon-animated para animação contínua sutil
═══════════════════════════════════════════════════════════════════════════ */
/* Animação contínua sutil para destaque */
.dashboard-icon-animated .bi,
.icon-dashboard-pulse .bi {
animation: dashboardIconPulse 3s ease-in-out infinite;
}
@keyframes dashboardIconPulse {
0%, 100% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(1.05);
opacity: 0.9;
}
}
/* Glow sutil para ícones importantes */
.dashboard-icon-glow .bi {
animation: dashboardIconGlow 2s ease-in-out infinite;
}
@keyframes dashboardIconGlow {
0%, 100% {
filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.3));
}
50% {
filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.6));
}
}
/* Float suave para cards de destaque */
.dashboard-icon-float .bi {
animation: dashboardIconFloat 4s ease-in-out infinite;
}
@keyframes dashboardIconFloat {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-6px); }
}
/* ═══════════════════════════════════════════════════════════════════════════
HARMONIZAÇÃO DE CORES - COMBINAÇÕES PERFEITAS
Regras de contraste WCAG AAA (7:1) para acessibilidade máxima
═══════════════════════════════════════════════════════════════════════════ */
/* Combinação: Gradiente Escuro + Ícone Branco + Glow Colorido */
[class*="bg-gradient"][class*="from-cyan"] .bg-white\/20 .bi {
filter: drop-shadow(0 0 8px rgba(34, 211, 238, 0.4));
}
[class*="bg-gradient"][class*="from-teal"] .bg-white\/20 .bi {
filter: drop-shadow(0 0 8px rgba(20, 184, 166, 0.4));
}
[class*="bg-gradient"][class*="from-emerald"] .bg-white\/20 .bi {
filter: drop-shadow(0 0 8px rgba(16, 185, 129, 0.4));
}
[class*="bg-gradient"][class*="from-amber"] .bg-white\/20 .bi {
filter: drop-shadow(0 0 8px rgba(245, 158, 11, 0.4));
}
[class*="bg-gradient"][class*="from-indigo"] .bg-white\/20 .bi {
filter: drop-shadow(0 0 8px rgba(99, 102, 241, 0.4));
}
[class*="bg-gradient"][class*="from-blue"] .bg-white\/20 .bi {
filter: drop-shadow(0 0 8px rgba(59, 130, 246, 0.4));
}
[class*="bg-gradient"][class*="from-purple"] .bg-white\/20 .bi {
filter: drop-shadow(0 0 8px rgba(168, 85, 247, 0.4));
}
[class*="bg-gradient"][class*="from-pink"] .bg-white\/20 .bi {
filter: drop-shadow(0 0 8px rgba(236, 72, 153, 0.4));
}
[class*="bg-gradient"][class*="from-red"] .bg-white\/20 .bi {
filter: drop-shadow(0 0 8px rgba(239, 68, 68, 0.4));
}
[class*="bg-gradient"][class*="from-orange"] .bg-white\/20 .bi {
filter: drop-shadow(0 0 8px rgba(249, 115, 22, 0.4));
}
/* ═══════════════════════════════════════════════════════════════════════════
RESPONSIVIDADE - Ajustes para Mobile
═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
/* Ícones um pouco menores no mobile para caber */
[class*="bg-gradient"] .bi {
font-size: 1.25rem;
}
.bg-white\/20 .bi,
[class*="bg-white/"] .bi {
font-size: 1.125rem;
}
/* Animações mais sutis no mobile (performance) */
[class*="bg-gradient"]:hover .bi {
transform: scale(1.1);
}
}
/* ═══════════════════════════════════════════════════════════════════════════
DARK MODE - Ajustes de cores para dashboards
═══════════════════════════════════════════════════════════════════════════ */
/* FIX: Removido @media (prefers-color-scheme: dark) duplicado - usar .dark class */
.dark [class*="bg-gradient"] .bi {
filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3));
}
.dark [class*="bg-gradient"]:hover .bi {
filter: drop-shadow(0 0 16px rgba(255, 255, 255, 0.5));
}
/* ═══════════════════════════════════════════════════════════════════════════════════
🎯 REGRAS DE MÁXIMA PRIORIDADE - ÍCONES EM CARDS COLORIDOS
═══════════════════════════════════════════════════════════════════════════════════
IMPORTANTE: Estas regras DEVEM ficar no FINAL do arquivo para ter máxima prioridade.
Elas garantem que ícones Bootstrap em cards com backgrounds coloridos tenham
cores com alto contraste, independentemente de outras regras CSS.
Teoria de cores aplicada:
- Background claro (50-200) → Ícone escuro (700-900)
- Background escuro (700-900) → Ícone claro (200-400)
EXCEÇÃO: Ícones com classe text-* explícita NÃO são afetados (desenvolvedor escolhe).
═══════════════════════════════════════════════════════════════════════════════════ */
/* 🛡️ PROTEÇÃO FINAL: Classes text-* SEMPRE ganham (máxima prioridade) */
[class*="bg-yellow-"] .bi[class*="text-"],
[class*="bg-amber-"] .bi[class*="text-"],
[class*="bg-green-"] .bi[class*="text-"],
[class*="bg-emerald-"] .bi[class*="text-"],
[class*="bg-red-"] .bi[class*="text-"],
[class*="bg-rose-"] .bi[class*="text-"],
[class*="bg-blue-"] .bi[class*="text-"],
[class*="bg-purple-"] .bi[class*="text-"],
[class*="bg-violet-"] .bi[class*="text-"],
[class*="bg-indigo-"] .bi[class*="text-"],
[class*="bg-cyan-"] .bi[class*="text-"],
[class*="bg-teal-"] .bi[class*="text-"],
[class*="bg-pink-"] .bi[class*="text-"],
[class*="bg-orange-"] .bi[class*="text-"],
.dark [class*="bg-"] .bi[class*="text-"] {
color: unset; /* Respeita a classe text-* do desenvolvedor — sem !important */
}
/* ---------------------------------------------------------------------------
AMARELO/AMBER - Alto contraste com marrom escuro
--------------------------------------------------------------------------- */
[class*="bg-yellow-50"] .bi,
[class*="bg-yellow-100"] .bi,
[class*="bg-yellow-200"] .bi,
[class*="bg-amber-50"] .bi,
[class*="bg-amber-100"] .bi,
[class*="bg-amber-200"] .bi,
[class*="bg-yellow-50"] i[class*="bi-"],
[class*="bg-yellow-100"] i[class*="bi-"],
[class*="bg-yellow-200"] i[class*="bi-"],
[class*="bg-amber-50"] i[class*="bi-"],
[class*="bg-amber-100"] i[class*="bi-"],
[class*="bg-amber-200"] i[class*="bi-"],
[class*="bg-yellow-50"] .bi::before,
[class*="bg-yellow-100"] .bi::before,
[class*="bg-amber-50"] .bi::before,
[class*="bg-amber-100"] .bi::before {
color: #92400e !important; /* amber-800 - marrom escuro */
}
/* Dark mode - amarelo em fundo escuro */
.dark [class*="bg-yellow-900"] .bi,
.dark [class*="bg-yellow-800"] .bi,
.dark [class*="bg-amber-900"] .bi,
.dark [class*="bg-amber-800"] .bi,
.dark [class*="bg-yellow-900"] i[class*="bi-"],
.dark [class*="bg-amber-900"] i[class*="bi-"] {
color: #fcd34d !important; /* amber-300 - amarelo claro */
}
/* ---------------------------------------------------------------------------
VERDE/EMERALD - Alto contraste com verde escuro
--------------------------------------------------------------------------- */
[class*="bg-green-50"] .bi,
[class*="bg-green-100"] .bi,
[class*="bg-green-200"] .bi,
[class*="bg-emerald-50"] .bi,
[class*="bg-emerald-100"] .bi,
[class*="bg-emerald-200"] .bi,
[class*="bg-green-50"] i[class*="bi-"],
[class*="bg-green-100"] i[class*="bi-"],
[class*="bg-emerald-50"] i[class*="bi-"],
[class*="bg-emerald-100"] i[class*="bi-"],
[class*="bg-green-50"] .bi::before,
[class*="bg-green-100"] .bi::before,
[class*="bg-emerald-50"] .bi::before,
[class*="bg-emerald-100"] .bi::before {
color: #065f46 !important; /* emerald-800 - verde escuro */
}
/* Dark mode - verde em fundo escuro */
.dark [class*="bg-green-900"] .bi,
.dark [class*="bg-green-800"] .bi,
.dark [class*="bg-emerald-900"] .bi,
.dark [class*="bg-emerald-800"] .bi,
.dark [class*="bg-green-900"] i[class*="bi-"],
.dark [class*="bg-emerald-900"] i[class*="bi-"] {
color: #6ee7b7 !important; /* emerald-300 - verde claro */
}
/* ---------------------------------------------------------------------------
VERMELHO/ROSE - Alto contraste com vermelho escuro
--------------------------------------------------------------------------- */
[class*="bg-red-50"] .bi,
[class*="bg-red-100"] .bi,
[class*="bg-red-200"] .bi,
[class*="bg-rose-50"] .bi,
[class*="bg-rose-100"] .bi,
[class*="bg-rose-200"] .bi,
[class*="bg-red-50"] i[class*="bi-"],
[class*="bg-red-100"] i[class*="bi-"],
[class*="bg-rose-50"] i[class*="bi-"],
[class*="bg-rose-100"] i[class*="bi-"],
[class*="bg-red-50"] .bi::before,
[class*="bg-red-100"] .bi::before,
[class*="bg-rose-50"] .bi::before,
[class*="bg-rose-100"] .bi::before {
color: #991b1b !important; /* red-800 - vermelho escuro */
}
/* Dark mode - vermelho em fundo escuro */
.dark [class*="bg-red-900"] .bi,
.dark [class*="bg-red-800"] .bi,
.dark [class*="bg-rose-900"] .bi,
.dark [class*="bg-rose-800"] .bi,
.dark [class*="bg-red-900"] i[class*="bi-"],
.dark [class*="bg-rose-900"] i[class*="bi-"] {
color: #fca5a5 !important; /* red-300 - vermelho claro */
}
/* ---------------------------------------------------------------------------
AZUL - Alto contraste com azul escuro
--------------------------------------------------------------------------- */
[class*="bg-blue-50"] .bi,
[class*="bg-blue-100"] .bi,
[class*="bg-blue-200"] .bi,
[class*="bg-blue-50"] i[class*="bi-"],
[class*="bg-blue-100"] i[class*="bi-"],
[class*="bg-blue-50"] .bi::before,
[class*="bg-blue-100"] .bi::before {
color: #1e40af !important; /* blue-800 - azul escuro */
}
/* Dark mode - azul em fundo escuro */
.dark [class*="bg-blue-900"] .bi,
.dark [class*="bg-blue-800"] .bi,
.dark [class*="bg-blue-900"] i[class*="bi-"] {
color: #93c5fd !important; /* blue-300 - azul claro */
}
/* ---------------------------------------------------------------------------
ROXO/PURPLE/VIOLET/INDIGO - Alto contraste
--------------------------------------------------------------------------- */
[class*="bg-purple-50"] .bi,
[class*="bg-purple-100"] .bi,
[class*="bg-violet-50"] .bi,
[class*="bg-violet-100"] .bi,
[class*="bg-indigo-50"] .bi,
[class*="bg-indigo-100"] .bi,
[class*="bg-purple-50"] i[class*="bi-"],
[class*="bg-purple-100"] i[class*="bi-"],
[class*="bg-violet-50"] i[class*="bi-"],
[class*="bg-violet-100"] i[class*="bi-"],
[class*="bg-indigo-50"] i[class*="bi-"],
[class*="bg-indigo-100"] i[class*="bi-"] {
color: #5b21b6 !important; /* violet-800 - roxo escuro */
}
/* Dark mode - roxo em fundo escuro */
.dark [class*="bg-purple-900"] .bi,
.dark [class*="bg-purple-800"] .bi,
.dark [class*="bg-violet-900"] .bi,
.dark [class*="bg-indigo-900"] .bi,
.dark [class*="bg-purple-900"] i[class*="bi-"],
.dark [class*="bg-violet-900"] i[class*="bi-"],
.dark [class*="bg-indigo-900"] i[class*="bi-"] {
color: #c4b5fd !important; /* violet-300 - roxo claro */
}
/* ---------------------------------------------------------------------------
LARANJA - Alto contraste com laranja escuro
--------------------------------------------------------------------------- */
[class*="bg-orange-50"] .bi,
[class*="bg-orange-100"] .bi,
[class*="bg-orange-200"] .bi,
[class*="bg-orange-50"] i[class*="bi-"],
[class*="bg-orange-100"] i[class*="bi-"] {
color: #9a3412 !important; /* orange-800 - laranja escuro */
}
/* Dark mode - laranja em fundo escuro */
.dark [class*="bg-orange-900"] .bi,
.dark [class*="bg-orange-800"] .bi,
.dark [class*="bg-orange-900"] i[class*="bi-"] {
color: #fdba74 !important; /* orange-300 - laranja claro */
}
/* ---------------------------------------------------------------------------
CYAN/TEAL - Alto contraste
--------------------------------------------------------------------------- */
[class*="bg-cyan-50"] .bi,
[class*="bg-cyan-100"] .bi,
[class*="bg-teal-50"] .bi,
[class*="bg-teal-100"] .bi,
[class*="bg-cyan-50"] i[class*="bi-"],
[class*="bg-cyan-100"] i[class*="bi-"],
[class*="bg-teal-50"] i[class*="bi-"],
[class*="bg-teal-100"] i[class*="bi-"] {
color: #0e7490 !important; /* cyan-700 - ciano escuro */
}
/* Dark mode - cyan em fundo escuro */
.dark [class*="bg-cyan-900"] .bi,
.dark [class*="bg-cyan-800"] .bi,
.dark [class*="bg-teal-900"] .bi,
.dark [class*="bg-cyan-900"] i[class*="bi-"],
.dark [class*="bg-teal-900"] i[class*="bi-"] {
color: #67e8f9 !important; /* cyan-300 - ciano claro */
}
/* ---------------------------------------------------------------------------
PINK - Alto contraste
--------------------------------------------------------------------------- */
[class*="bg-pink-50"] .bi,
[class*="bg-pink-100"] .bi,
[class*="bg-pink-50"] i[class*="bi-"],
[class*="bg-pink-100"] i[class*="bi-"] {
color: #9d174d !important; /* pink-800 - rosa escuro */
}
/* Dark mode - pink em fundo escuro */
.dark [class*="bg-pink-900"] .bi,
.dark [class*="bg-pink-800"] .bi,
.dark [class*="bg-pink-900"] i[class*="bi-"] {
color: #f9a8d4 !important; /* pink-300 - rosa claro */
}
/* ---------------------------------------------------------------------------
CINZA - Preservar herança mas com fallback
--------------------------------------------------------------------------- */
[class*="bg-gray-50"] .bi,
[class*="bg-gray-100"] .bi,
[class*="bg-slate-50"] .bi,
[class*="bg-slate-100"] .bi {
color: #374151 !important; /* gray-700 */
}
.dark [class*="bg-gray-800"] .bi,
.dark [class*="bg-gray-900"] .bi,
.dark [class*="bg-slate-800"] .bi,
.dark [class*="bg-slate-900"] .bi {
color: #d1d5db !important; /* gray-300 */
}
/* ---------------------------------------------------------------------------
BACKGROUNDS ESCUROS (500-700) - Ícones brancos
--------------------------------------------------------------------------- */
[class*="bg-blue-500"] .bi,
[class*="bg-blue-600"] .bi,
[class*="bg-blue-700"] .bi,
[class*="bg-green-500"] .bi,
[class*="bg-green-600"] .bi,
[class*="bg-green-700"] .bi,
[class*="bg-red-500"] .bi,
[class*="bg-red-600"] .bi,
[class*="bg-red-700"] .bi,
[class*="bg-yellow-500"] .bi,
[class*="bg-yellow-600"] .bi,
[class*="bg-amber-500"] .bi,
[class*="bg-amber-600"] .bi,
[class*="bg-purple-500"] .bi,
[class*="bg-purple-600"] .bi,
[class*="bg-violet-500"] .bi,
[class*="bg-violet-600"] .bi,
[class*="bg-indigo-500"] .bi,
[class*="bg-indigo-600"] .bi,
[class*="bg-pink-500"] .bi,
[class*="bg-pink-600"] .bi,
[class*="bg-orange-500"] .bi,
[class*="bg-orange-600"] .bi,
[class*="bg-cyan-500"] .bi,
[class*="bg-cyan-600"] .bi,
[class*="bg-teal-500"] .bi,
[class*="bg-teal-600"] .bi,
[class*="bg-emerald-500"] .bi,
[class*="bg-emerald-600"] .bi,
[class*="bg-rose-500"] .bi,
[class*="bg-rose-600"] .bi,
[class*="bg-blue-500"] i[class*="bi-"],
[class*="bg-blue-600"] i[class*="bi-"],
[class*="bg-green-500"] i[class*="bi-"],
[class*="bg-green-600"] i[class*="bi-"],
[class*="bg-red-500"] i[class*="bi-"],
[class*="bg-red-600"] i[class*="bi-"],
[class*="bg-purple-500"] i[class*="bi-"],
[class*="bg-purple-600"] i[class*="bi-"] {
color: #ffffff !important;
}
/* ---------------------------------------------------------------------------
GRADIENTES - REMOVIDO AUTO-DETECÇÃO (causava ícones brancos em fundos claros)
Use classes explícitas em vez de auto-detecção:
- .text-white no ícone
- .icon-white no ícone
- .icons-white no container
--------------------------------------------------------------------------- */
/* ═══════════════════════════════════════════════════════════════════════════
🆕 RECURSOS AVANÇADOS v2.0 - NOVAS FUNCIONALIDADES
═══════════════════════════════════════════════════════════════════════════ */
/* ---------------------------------------------------------------------------
1. PERFORMANCE - GPU Acceleration com will-change
Melhora animações em dispositivos móveis
--------------------------------------------------------------------------- */
.bi.icon-spin,
.bi.icon-pulse,
.bi.icon-bounce,
.bi.icon-float,
.bi.animate-spin,
.bi.animate-pulse,
.bi-arrow-clockwise:not(.icon-static),
.bi-arrow-repeat:not(.icon-static) {
will-change: transform;
}
.bi.icon-glow,
.bi.icon-pulse-glow {
will-change: filter;
}
/* ---------------------------------------------------------------------------
2. ICON BADGES - Contadores e notificações
Uso: 5
--------------------------------------------------------------------------- */
.icon-badge {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
}
.icon-badge .badge,
.icon-badge .icon-counter {
position: absolute;
top: -6px;
right: -8px;
min-width: 18px;
height: 18px;
padding: 0 5px;
font-size: 0.65rem;
font-weight: 600;
line-height: 18px;
text-align: center;
color: #fff;
background: #ef4444;
border-radius: 9999px;
border: 2px solid #fff;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.icon-badge .badge.badge-success,
.icon-badge .icon-counter.success { background: #10b981; }
.icon-badge .badge.badge-warning,
.icon-badge .icon-counter.warning { background: #f59e0b; }
.icon-badge .badge.badge-info,
.icon-badge .icon-counter.info { background: #3b82f6; }
/* Badge com animação de pulso */
.icon-badge .badge.badge-pulse,
.icon-badge .icon-counter.pulse {
animation: biBadgePulse 2s ease-in-out infinite;
}
@keyframes biBadgePulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.1); }
}
/* Badge como ponto (sem número) */
.icon-badge .badge-dot {
position: absolute;
top: -2px;
right: -2px;
width: 10px;
height: 10px;
background: #ef4444;
border-radius: 50%;
border: 2px solid #fff;
}
.icon-badge .badge-dot.online { background: #10b981; }
.icon-badge .badge-dot.offline { background: #6b7280; }
.icon-badge .badge-dot.busy { background: #f59e0b; }
/* Dark mode badges */
.dark .icon-badge .badge,
.dark .icon-badge .icon-counter {
border-color: #1f2937;
}
/* ---------------------------------------------------------------------------
3. STATE CLASSES - Estados do ícone
--------------------------------------------------------------------------- */
/* Disabled - Ícone desabilitado */
.bi.icon-disabled,
.icon-disabled .bi,
.disabled .bi,
[disabled] .bi,
:disabled .bi {
opacity: 0.4 !important;
cursor: not-allowed !important;
pointer-events: none !important;
filter: grayscale(100%) !important;
}
/* Loading - Ícone em carregamento */
.bi.icon-loading,
.icon-loading .bi {
animation: biIconSpin 1s linear infinite !important;
opacity: 0.7;
}
/* Success state - Feedback positivo */
.bi.icon-state-success,
.icon-state-success .bi {
color: #10b981 !important;
animation: biStateSuccess 0.5s ease-out;
}
@keyframes biStateSuccess {
0% { transform: scale(0); opacity: 0; }
50% { transform: scale(1.2); }
100% { transform: scale(1); opacity: 1; }
}
/* Error state - Feedback negativo */
.bi.icon-state-error,
.icon-state-error .bi {
color: #ef4444 !important;
animation: biStateError 0.4s ease-out;
}
@keyframes biStateError {
0%, 100% { transform: translateX(0); }
20%, 60% { transform: translateX(-4px); }
40%, 80% { transform: translateX(4px); }
}
/* Warning state */
.bi.icon-state-warning,
.icon-state-warning .bi {
color: #f59e0b !important;
animation: biIconPulse 1.5s ease-in-out infinite;
}
/* ---------------------------------------------------------------------------
4. RTL SUPPORT - Suporte para idiomas direita-esquerda
--------------------------------------------------------------------------- */
[dir="rtl"] .bi.icon-inline,
[dir="rtl"] .icon-inline .bi {
margin-right: 0;
margin-left: 0.375em;
}
[dir="rtl"] .bi.icon-right,
[dir="rtl"] .icon-right .bi {
margin-left: 0;
margin-right: 0.375em;
}
/* Flip horizontal icons that have direction */
[dir="rtl"] .bi-arrow-right,
[dir="rtl"] .bi-chevron-right,
[dir="rtl"] .bi-arrow-left,
[dir="rtl"] .bi-chevron-left,
[dir="rtl"] .bi-arrow-bar-right,
[dir="rtl"] .bi-arrow-bar-left,
[dir="rtl"] .bi-box-arrow-right,
[dir="rtl"] .bi-box-arrow-left,
[dir="rtl"] .bi-reply,
[dir="rtl"] .bi-reply-fill,
[dir="rtl"] .bi-forward,
[dir="rtl"] .bi-forward-fill {
transform: scaleX(-1);
}
/* ---------------------------------------------------------------------------
5. HIGH CONTRAST MODE - Windows/macOS high contrast
--------------------------------------------------------------------------- */
@media (forced-colors: active) {
.bi,
[class^="bi-"],
[class*=" bi-"] {
forced-color-adjust: auto;
}
/* Garantir visibilidade em high contrast */
.bi.icon-glow,
.bi.icon-shadow {
filter: none !important;
}
}
@media (prefers-contrast: high) {
.bi,
[class^="bi-"],
[class*=" bi-"] {
filter: contrast(1.2) !important;
}
/* Aumentar espessura visual */
.bi.icon-outlined {
-webkit-text-stroke-width: 1px;
}
}
/* ---------------------------------------------------------------------------
6. DARK THEME - Ajustes para tema escuro (classe .dark)
FIX: Convertido de prefers-color-scheme para .dark class
--------------------------------------------------------------------------- */
.dark {
--icon-color-menu: #9CA3AF;
}
.dark .bi {
filter: brightness(1.05);
}
/* ---------------------------------------------------------------------------
7. ICON STACKING - Combinar múltiplos ícones
Uso:
--------------------------------------------------------------------------- */
.icon-stack {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 2em;
height: 2em;
vertical-align: middle;
}
.icon-stack .bi,
.icon-stack [class^="bi-"] {
position: absolute;
}
.icon-stack .icon-stack-bg {
font-size: 2em;
color: currentColor;
opacity: 0.15;
}
.icon-stack .icon-stack-fg {
font-size: 1em;
z-index: 1;
}
/* Stack com círculo de fundo */
.icon-stack-circle {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.5em;
height: 2.5em;
background: currentColor;
border-radius: 50%;
opacity: 0.1;
}
.icon-stack-circle .bi {
position: absolute;
color: currentColor;
opacity: 1;
}
/* ---------------------------------------------------------------------------
8. RESPONSIVE ICONS - Tamanhos responsivos com clamp()
--------------------------------------------------------------------------- */
.bi.icon-responsive,
.icon-responsive .bi {
font-size: clamp(0.875rem, 2vw, 1.25rem);
}
.bi.icon-responsive-lg,
.icon-responsive-lg .bi {
font-size: clamp(1rem, 3vw, 2rem);
}
.bi.icon-responsive-xl,
.icon-responsive-xl .bi {
font-size: clamp(1.5rem, 4vw, 3rem);
}
/* ---------------------------------------------------------------------------
9. TRANSITION PRESETS - Curvas de animação reutilizáveis
--------------------------------------------------------------------------- */
.bi.ease-spring,
.ease-spring .bi {
transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
}
.bi.ease-bounce,
.ease-bounce .bi {
transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.bi.ease-smooth,
.ease-smooth .bi {
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
/* ---------------------------------------------------------------------------
10. FOCUS IMPROVEMENTS - Melhor acessibilidade
--------------------------------------------------------------------------- */
/* Focus visível mais evidente */
:focus-visible .bi,
button:focus-visible .bi,
a:focus-visible .bi {
outline: 2px solid currentColor;
outline-offset: 3px;
border-radius: 3px;
}
/* Skip link icons */
.skip-link .bi,
.sr-only:focus .bi {
outline: 3px solid #3b82f6;
}
/* ---------------------------------------------------------------------------
11. MORPHING ICONS - Transição suave entre ícones
Uso: Altere a classe do ícone e a transição será suave
--------------------------------------------------------------------------- */
.bi.icon-morph,
.icon-morph .bi {
transition: transform 0.3s ease, opacity 0.2s ease;
}
.icon-morph .bi.hidden {
transform: scale(0.5) rotate(90deg);
opacity: 0;
}
/* ---------------------------------------------------------------------------
12. ICON TEXT ALIGNMENT - Alinhamento perfeito com texto
--------------------------------------------------------------------------- */
.bi.icon-text-top {
vertical-align: text-top;
}
.bi.icon-text-bottom {
vertical-align: text-bottom;
}
.bi.icon-baseline {
vertical-align: baseline;
}
/* Gap automático em flex containers */
.flex .bi + span,
.inline-flex .bi + span,
.flex span + .bi,
.inline-flex span + .bi {
margin-left: 0.375em;
}
/* ---------------------------------------------------------------------------
13. SEMANTIC ICON GROUPS - Grupos semânticos
--------------------------------------------------------------------------- */
/* Ícones de status em uma linha */
.icon-status-group {
display: inline-flex;
align-items: center;
gap: 0.25em;
}
.icon-status-group .bi {
font-size: 0.75em;
}
/* Ícones de ação em uma linha */
.icon-action-group {
display: inline-flex;
align-items: center;
gap: 0.5em;
}
.icon-action-group .bi {
cursor: pointer;
transition: transform 0.2s ease, color 0.2s ease;
}
.icon-action-group .bi:hover {
transform: scale(1.15);
}
/* ---------------------------------------------------------------------------
14. UTILITY: NO ANIMATION - Desabilitar animações globalmente
--------------------------------------------------------------------------- */
.no-animation .bi,
.no-animation [class^="bi-"],
.no-animation [class*=" bi-"] {
animation: none !important;
transition: none !important;
}
/* ---------------------------------------------------------------------------
15. THEME VARIABLES EXTENSION - Variáveis extras para temas
--------------------------------------------------------------------------- */
:root {
/* Cores semânticas para ícones */
--icon-color-success: #10b981;
--icon-color-danger: #ef4444;
--icon-color-warning: #f59e0b;
--icon-color-info: #3b82f6;
--icon-color-primary: var(--color-primary-600);
--icon-color-secondary: #6b7280;
/* Animações */
--icon-transition-fast: 0.15s;
--icon-transition-normal: 0.3s;
--icon-transition-slow: 0.5s;
/* Hover scale */
--icon-hover-scale: 1.08;
--icon-active-scale: 0.95;
}
/* Aplicar variáveis */
.bi.icon-success { color: var(--icon-color-success); }
.bi.icon-danger { color: var(--icon-color-danger); }
.bi.icon-warning { color: var(--icon-color-warning); }
.bi.icon-info { color: var(--icon-color-info); }
.bi.icon-primary { color: var(--icon-color-primary); }
.bi.icon-secondary { color: var(--icon-color-secondary); }
/* ═══════════════════════════════════════════════════════════════════════════
🔓 SISTEMA DE OVERRIDE FLEXÍVEL
Permite customizações locais SEM conflitos com as configurações globais
═══════════════════════════════════════════════════════════════════════════
COMO USAR:
1. ESCOPO CUSTOMIZADO - Use .icon-custom no container pai
2. DATA ATTRIBUTES - Override inline sem CSS
3. RESET TOTAL - Remove TODOS os estilos premium
4. TAMANHOS INLINE - Classes de tamanho específico
5. ESCOPO DE FORMULÁRIO - Variáveis CSS no form
═══════════════════════════════════════════════════════════════════════════ */
/* ---------------------------------------------------------------------------
1. ICON-CUSTOM SCOPE - Container com controle total
Todos os ícones dentro herdam as variáveis locais SEM !important
--------------------------------------------------------------------------- */
.icon-custom {
--icon-size: var(--icon-size-global, 1rem);
--icon-color: currentColor;
--icon-opacity: 1;
--icon-transition: 0.3s ease;
}
.icon-custom .bi,
.icon-custom [class^="bi-"],
.icon-custom [class*=" bi-"] {
font-size: var(--icon-size) !important;
color: var(--icon-color);
opacity: var(--icon-opacity);
transition: var(--icon-transition);
/* Remove animações automáticas */
animation: none;
}
/* Hover dentro de icon-custom usa variáveis locais */
.icon-custom a:hover .bi,
.icon-custom button:hover .bi {
transform: scale(var(--icon-hover-scale, 1.08));
color: var(--icon-color-hover, var(--icon-color));
}
/* ---------------------------------------------------------------------------
2. DATA ATTRIBUTES - Override inline via atributos HTML
Uso:
--------------------------------------------------------------------------- */
[data-icon-size] {
font-size: attr(data-icon-size) !important;
}
/* Fallback para navegadores que não suportam attr() para font-size */
.bi[data-icon-size="12px"], [data-icon-size="12px"] .bi { font-size: 12px !important; }
.bi[data-icon-size="14px"], [data-icon-size="14px"] .bi { font-size: 14px !important; }
.bi[data-icon-size="16px"], [data-icon-size="16px"] .bi { font-size: 16px !important; }
.bi[data-icon-size="18px"], [data-icon-size="18px"] .bi { font-size: 18px !important; }
.bi[data-icon-size="20px"], [data-icon-size="20px"] .bi { font-size: 20px !important; }
.bi[data-icon-size="24px"], [data-icon-size="24px"] .bi { font-size: 24px !important; }
.bi[data-icon-size="28px"], [data-icon-size="28px"] .bi { font-size: 28px !important; }
.bi[data-icon-size="32px"], [data-icon-size="32px"] .bi { font-size: 32px !important; }
.bi[data-icon-size="36px"], [data-icon-size="36px"] .bi { font-size: 36px !important; }
.bi[data-icon-size="40px"], [data-icon-size="40px"] .bi { font-size: 40px !important; }
.bi[data-icon-size="48px"], [data-icon-size="48px"] .bi { font-size: 48px !important; }
.bi[data-icon-size="56px"], [data-icon-size="56px"] .bi { font-size: 56px !important; }
.bi[data-icon-size="64px"], [data-icon-size="64px"] .bi { font-size: 64px !important; }
.bi[data-icon-size="72px"], [data-icon-size="72px"] .bi { font-size: 72px !important; }
.bi[data-icon-size="80px"], [data-icon-size="80px"] .bi { font-size: 80px !important; }
/* Tamanhos em rem */
.bi[data-icon-size="0.75rem"], [data-icon-size="0.75rem"] .bi { font-size: 0.75rem !important; }
.bi[data-icon-size="0.875rem"], [data-icon-size="0.875rem"] .bi { font-size: 0.875rem !important; }
.bi[data-icon-size="1rem"], [data-icon-size="1rem"] .bi { font-size: 1rem !important; }
.bi[data-icon-size="1.25rem"], [data-icon-size="1.25rem"] .bi { font-size: 1.25rem !important; }
.bi[data-icon-size="1.5rem"], [data-icon-size="1.5rem"] .bi { font-size: 1.5rem !important; }
.bi[data-icon-size="1.75rem"], [data-icon-size="1.75rem"] .bi { font-size: 1.75rem !important; }
.bi[data-icon-size="2rem"], [data-icon-size="2rem"] .bi { font-size: 2rem !important; }
.bi[data-icon-size="2.5rem"], [data-icon-size="2.5rem"] .bi { font-size: 2.5rem !important; }
.bi[data-icon-size="3rem"], [data-icon-size="3rem"] .bi { font-size: 3rem !important; }
.bi[data-icon-size="4rem"], [data-icon-size="4rem"] .bi { font-size: 4rem !important; }
.bi[data-icon-size="5rem"], [data-icon-size="5rem"] .bi { font-size: 5rem !important; }
/* ---------------------------------------------------------------------------
3. ICON-RESET - Remove TODOS os estilos premium
O ícone volta ao comportamento padrão do Bootstrap Icons
--------------------------------------------------------------------------- */
.bi.icon-reset,
.icon-reset .bi,
.icon-reset[class^="bi-"],
.icon-reset [class^="bi-"] {
font-size: inherit !important;
color: inherit !important;
opacity: 1 !important;
filter: none !important;
transform: none !important;
animation: none !important;
transition: none !important;
vertical-align: -0.125em;
}
/* ---------------------------------------------------------------------------
4. ICON-LOCAL - Usa variáveis CSS do container pai
Perfeito para formulários e seções específicas
--------------------------------------------------------------------------- */
.bi.icon-local,
.icon-local .bi {
font-size: var(--icon-size-local, var(--icon-size-global)) !important;
color: var(--icon-color-local, currentColor);
}
/* ---------------------------------------------------------------------------
5. OVERRIDE CLASSES - Tamanhos que SEMPRE funcionam (alta especificidade)
Use quando precisar garantir um tamanho específico
--------------------------------------------------------------------------- */
.bi.icon-force-xs { font-size: 0.75rem !important; } /* 12px */
.bi.icon-force-sm { font-size: 0.875rem !important; } /* 14px */
.bi.icon-force-md { font-size: 1rem !important; } /* 16px */
.bi.icon-force-lg { font-size: 1.25rem !important; } /* 20px */
.bi.icon-force-xl { font-size: 1.5rem !important; } /* 24px */
.bi.icon-force-2xl { font-size: 2rem !important; } /* 32px */
.bi.icon-force-3xl { font-size: 2.5rem !important; } /* 40px */
.bi.icon-force-4xl { font-size: 3rem !important; } /* 48px */
.bi.icon-force-5xl { font-size: 4rem !important; } /* 64px */
/* Cores forçadas */
.bi.icon-force-white { color: #ffffff !important; }
.bi.icon-force-black { color: #000000 !important; }
.bi.icon-force-inherit { color: inherit !important; }
.bi.icon-force-current { color: currentColor !important; }
/* ---------------------------------------------------------------------------
6. FORM-SCOPED ICONS - Escopo específico para formulários
Adicione a classe no
--------------------------------------------------------------------------- */
/* ═══════════════════════════════════════════════════════════════════════════
FIM DAS CONFIGURAÇÕES PREMIUM v2.1
Total: ~5400 linhas de CSS otimizado
RESUMO DE FLEXIBILIDADE:
• .icon-custom → Container com variáveis CSS locais
• data-icon-size → Override via atributo HTML
• .icon-reset → Remove todos os estilos premium
• .icon-local → Usa --icon-size-local do pai
• .icon-force-* → Tamanhos garantidos (alta especificidade)
• .icon-scope → Escopo para forms, cards, tables, modals
• style="..." → Inline style sempre disponível
═══════════════════════════════════════════════════════════════════════════ */