/**
 * Iconos Inline - Reemplazo de FontAwesome
 * Solo los iconos necesarios en formato SVG para máximo rendimiento
 * Ahorro: ~410ms de carga de FontAwesome
 */

/* ========== ICONOS BASE ========== */

.icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    fill: currentColor;
}

.icon-sm {
    width: 0.875em;
    height: 0.875em;
}

.icon-lg {
    width: 1.25em;
    height: 1.25em;
}

.icon-xl {
    width: 1.5em;
    height: 1.5em;
}

/* ========== ICONOS SVG INLINE ========== */

/* Reemplazos para FontAwesome usando CSS puro */

/* fa-bolt (rayo) */
.fa-bolt::before,
.fas.fa-bolt::before {
    content: '⚡';
    font-style: normal;
}

/* fa-cloud-sun (clima) */
.fa-cloud-sun::before,
.fas.fa-cloud-sun::before {
    content: '🌤️';
    font-style: normal;
}

/* fa-sun (sol) */
.fa-sun::before,
.fas.fa-sun::before {
    content: '☀️';
    font-style: normal;
}

/* fa-money-bill-wave (dinero) */
.fa-money-bill-wave::before,
.fas.fa-money-bill-wave::before {
    content: '💵';
    font-style: normal;
}

/* fa-newspaper (periódico) */
.fa-newspaper::before,
.fas.fa-newspaper::before {
    content: '📰';
    font-style: normal;
}

/* fa-fire (fuego) */
.fa-fire::before,
.fas.fa-fire::before {
    content: '🔥';
    font-style: normal;
}

/* fa-clock (reloj) */
.fa-clock::before,
.far.fa-clock::before {
    content: '🕐';
    font-style: normal;
}

/* ========== ALTERNATIVA: SÍMBOLOS UNICODE ========== */

/* Si prefieres símbolos más simples sin emojis */
.icon-text .fa-bolt::before {
    content: '⚡';
}

.icon-text .fa-cloud-sun::before {
    content: '☁';
}

.icon-text .fa-sun::before {
    content: '☀';
}

.icon-text .fa-money-bill-wave::before {
    content: '$';
}

.icon-text .fa-newspaper::before {
    content: '📄';
}

.icon-text .fa-fire::before {
    content: '★';
}

.icon-text .fa-clock::before {
    content: '⏰';
}

/* ========== ICONOS SVG DATA URI (Más control) ========== */

/* Para iconos que necesitan más control visual */
.fa-bolt-svg::before {
    content: '';
    display: inline-block;
    width: 1em;
    height: 1em;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath fill='currentColor' d='M240.5 224H352C365.3 224 377.3 232.3 381.1 244.7C384.9 257.1 379.8 270.7 368.8 278.9L144.8 470.9C133.7 479.1 118.2 479.3 106.1 471.6C95.9 463.9 91.01 450.2 95.53 437.8L150.4 288H48C34.75 288 22.75 279.7 18.93 267.3C15.11 254.9 20.21 241.3 31.23 233.1L255.2 41.13C266.3 32.88 281.8 32.66 293.9 40.37C304.1 48.08 308.1 61.76 304.5 74.2L240.5 224z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: -0.125em;
}

/* ========== FALLBACK PARA NAVEGADORES ANTIGUOS ========== */

/* Si el navegador no soporta emojis, usar texto */
@supports not (content: '⚡') {
    .fa-bolt::before {
        content: '[!]';
    }

    .fa-cloud-sun::before {
        content: '[☁]';
    }

    .fa-sun::before {
        content: '[☀]';
    }

    .fa-money-bill-wave::before {
        content: '[$]';
    }

    .fa-newspaper::before {
        content: '[📄]';
    }

    .fa-fire::before {
        content: '[*]';
    }

    .fa-clock::before {
        content: '[⏰]';
    }
}

/* ========== ESTILOS PARA COMPATIBILIDAD ========== */

/* Mantener compatibilidad con clases de FontAwesome */
.fas,
.far,
.fab {
    font-family: inherit;
    font-weight: inherit;
    font-style: normal;
}

.fas::before,
.far::before,
.fab::before {
    display: inline-block;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}

/* Espaciado como FontAwesome */
.me-1 {
    margin-right: 0.25rem;
}

.me-2 {
    margin-right: 0.5rem;
}

/* ========== ANIMACIONES OPCIONALES ========== */

/* Animación para el sol */
@keyframes spin-slow {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.fa-sun {
    display: inline-block;
    animation: spin-slow 20s linear infinite;
}

/* Pulso para el fuego */
@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.7;
    }
}

.fa-fire {
    animation: pulse 2s ease-in-out infinite;
}


/* ========== PRINT STYLES ========== */

@media print {

    /* Ocultar iconos decorativos al imprimir */
    .fa-bolt,
    .fa-fire {
        display: none;
    }
}