/**
 * Icons CSS - API Now v2
 * Sistema de ícones unificado com fallbacks
 */

/* Font Awesome CDN como fallback se não carregado localmente */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css');

/* Ícones personalizados com fallback para emojis */
.icon {
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}

/* Fallbacks para ícones específicos se Font Awesome falhar */
.icon-key::before { content: "\f084"; font-family: "Font Awesome 6 Free"; font-weight: 900; }
.icon-key::after { content: "🔑"; display: none; }

.icon-shield::before { content: "\f3ed"; font-family: "Font Awesome 6 Free"; font-weight: 900; }
.icon-shield::after { content: "🛡️"; display: none; }

.icon-clock::before { content: "\f017"; font-family: "Font Awesome 6 Free"; font-weight: 900; }
.icon-clock::after { content: "🕒"; display: none; }

.icon-code::before { content: "\f121"; font-family: "Font Awesome 6 Free"; font-weight: 900; }
.icon-code::after { content: "💻"; display: none; }

.icon-history::before { content: "\f1da"; font-family: "Font Awesome 6 Free"; font-weight: 900; }
.icon-history::after { content: "📜"; display: none; }

.icon-copy::before { content: "\f0c5"; font-family: "Font Awesome 6 Free"; font-weight: 900; }
.icon-copy::after { content: "📋"; display: none; }

.icon-eye::before { content: "\f06e"; font-family: "Font Awesome 6 Free"; font-weight: 900; }
.icon-eye::after { content: "👁️"; display: none; }

.icon-eye-slash::before { content: "\f070"; font-family: "Font Awesome 6 Free"; font-weight: 900; }
.icon-eye-slash::after { content: "🙈"; display: none; }

.icon-exclamation::before { content: "\f071"; font-family: "Font Awesome 6 Free"; font-weight: 900; }
.icon-exclamation::after { content: "⚠️"; display: none; }

.icon-sync::before { content: "\f021"; font-family: "Font Awesome 6 Free"; font-weight: 900; }
.icon-sync::after { content: "🔄"; display: none; }

.icon-info::before { content: "\f05a"; font-family: "Font Awesome 6 Free"; font-weight: 900; }
.icon-info::after { content: "ℹ️"; display: none; }

.icon-check::before { content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900; }
.icon-check::after { content: "✅"; display: none; }

.icon-user::before { content: "\f007"; font-family: "Font Awesome 6 Free"; font-weight: 900; }
.icon-user::after { content: "👤"; display: none; }

.icon-lock::before { content: "\f023"; font-family: "Font Awesome 6 Free"; font-weight: 900; }
.icon-lock::after { content: "🔒"; display: none; }

.icon-save::before { content: "\f0c7"; font-family: "Font Awesome 6 Free"; font-weight: 900; }
.icon-save::after { content: "💾"; display: none; }

/* Fallback para quando Font Awesome não carrega */
@font-face {
    font-family: 'Font Awesome 6 Free';
    src: url('nonexistent.woff2') format('woff2');
}

/* Mostrar emoji quando Font Awesome falha */
@supports not (font-family: "Font Awesome 6 Free") {
    .icon-key::before { display: none; }
    .icon-key::after { display: inline; }
    
    .icon-shield::before { display: none; }
    .icon-shield::after { display: inline; }
    
    .icon-clock::before { display: none; }
    .icon-clock::after { display: inline; }
    
    .icon-code::before { display: none; }
    .icon-code::after { display: inline; }
    
    .icon-history::before { display: none; }
    .icon-history::after { display: inline; }
    
    .icon-copy::before { display: none; }
    .icon-copy::after { display: inline; }
    
    .icon-eye::before { display: none; }
    .icon-eye::after { display: inline; }
    
    .icon-eye-slash::before { display: none; }
    .icon-eye-slash::after { display: inline; }
    
    .icon-exclamation::before { display: none; }
    .icon-exclamation::after { display: inline; }
    
    .icon-sync::before { display: none; }
    .icon-sync::after { display: inline; }
    
    .icon-info::before { display: none; }
    .icon-info::after { display: inline; }
    
    .icon-check::before { display: none; }
    .icon-check::after { display: inline; }
    
    .icon-user::before { display: none; }
    .icon-user::after { display: inline; }
    
    .icon-lock::before { display: none; }
    .icon-lock::after { display: inline; }
    
    .icon-save::before { display: none; }
    .icon-save::after { display: inline; }
}

/* Classes de tamanho */
.icon-sm { font-size: 0.875rem; }
.icon-md { font-size: 1rem; }
.icon-lg { font-size: 1.25rem; }
.icon-xl { font-size: 1.5rem; }
.icon-2xl { font-size: 2rem; }

/* Cores de ícones */
.icon-primary { color: hsl(180 100% 50%); }
.icon-success { color: hsl(120 100% 50%); }
.icon-warning { color: hsl(39 100% 50%); }
.icon-danger { color: hsl(0 100% 50%); }
.icon-info { color: hsl(220 100% 50%); }
.icon-white { color: white; }
.icon-muted { color: rgba(255, 255, 255, 0.6); }

/* Animações */
.icon-spin {
    animation: icon-spin 1s infinite linear;
}

@keyframes icon-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.icon-pulse {
    animation: icon-pulse 2s infinite;
}

@keyframes icon-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}