/* ========================================================================
   ICONOS FALLBACK - Enercore
   ========================================================================
   Este archivo proporciona iconos SVG alternativos cuando la fuente icomoon
   no se carga correctamente. Todos los iconos usan SVG inline como data-URI
   para máxima compatibilidad y rendimiento.
   
   VERSIÓN: 1.0.0
   ACTUALIZACIÓN: 2026-01-15
   
   CÓMO USAR:
   1. Guarda este archivo como 'icons-fallback.css'
   2. Cárgalo en tu HTML:
      <link href="https://enercore.kummerk.com/css/icons-fallback.css" rel="stylesheet"/>
   3. Se recomienda cargarlo DESPUÉS de los CSS principales
   
   NOTA: Los iconos mantienen el color #134fae (azul Enercore) por defecto
   ======================================================================== */

/* ============================================
   CONFIGURACIÓN BASE
   ============================================ */

[class^="icon-"]:not(.no-fallback),
[class*=" icon-"]:not(.no-fallback) {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    position: relative;
}

[class^="icon-"]:not(.no-fallback):before,
[class*=" icon-"]:not(.no-fallback):before {
    content: none !important;
    display: none !important;
}

/* ============================================
   ÍCONOS DE NAVEGACIÓN Y BÚSQUEDA
   ============================================ */

/* icon-search - Lupa para búsqueda
   Uso: barra de búsqueda del header */
.icon-search {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
}

.icon-search:hover {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23134fae' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
}

/* icon-arrow-left - Flecha izquierda
   Uso: botones de volver, navegación de carruseles */
.icon-arrow-left {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23134fae' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E");
}

/* icon-arrow-right - Flecha derecha
   Uso: navegación de carruseles, botones de siguiente */
.icon-arrow-right {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23134fae' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E");
}

/* icon-arrow-down - Flecha abajo
   Uso: menús desplegables, acordeones, selectores */
.icon-arrow-down {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23134fae' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

/* icon-cross - Cerrar/eliminar
   Uso: botones de cierre de modales, ventanas, eliminación de elementos */
.icon-cross,
.icon-close {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23134fae' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E");
}

/* icon-check - Confirmación
   Uso: checkboxes, mensajes de éxito, verificación */
.icon-check {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23134fae' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}

/* icon-plus - Añadir/más
   Uso: botones de añadir, expandir contenido */
.icon-plus {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23134fae' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E");
}

/* icon-minus - Quitar/menos
   Uso: botones de quitar, colapsar contenido */
.icon-minus {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23134fae' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E");
}

/* icon-menu - Menú hamburguesa
   Uso: botón del menú móvil */
.icon-menu,
.icon-hamburger {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23134fae' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='3' y1='12' x2='21' y2='12'/%3E%3Cline x1='3' y1='6' x2='21' y2='6'/%3E%3Cline x1='3' y1='18' x2='21' y2='18'/%3E%3C/svg%3E");
}

/* ============================================
   ÍCONOS DE USUARIO Y CUENTA
   ============================================ */

/* icon-user - Usuario/perfil
   Uso: avatar, acceso a cuenta, perfil de usuario */
.icon-user {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23134fae' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
}

/* icon-avatar - Avatar (alias de icon-user) */
.icon-avatar {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23134fae' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
}

/* icon-login - Iniciar sesión
   Uso: botones de acceso, panel de cliente */
.icon-login {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23134fae' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4'/%3E%3Cpolyline points='10 17 15 12 10 7'/%3E%3Cline x1='15' y1='12' x2='3' y2='12'/%3E%3C/svg%3E");
}

/* icon-logout - Cerrar sesión
   Uso: botones de salida, deslogueo */
.icon-logout {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23134fae' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpolyline points='16 17 21 12 16 7'/%3E%3Cline x1='21' y1='12' x2='9' y2='12'/%3E%3C/svg%3E");
}

/* ============================================
   ÍCONOS DE CONTACTO Y COMUNICACIÓN
   ============================================ */

/* icon-phone - Teléfono
   Uso: números de contacto, botón de llamada */
.icon-phone {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23134fae' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.127.96.362 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.338 1.85.573 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
}

/* icon-email - Correo electrónico
   Uso: direcciones de email, botón de contacto por email */
.icon-email,
.icon-mail {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23134fae' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/%3E%3Cpolyline points='22,6 12,13 2,6'/%3E%3C/svg%3E");
}

/* icon-whatsapp - WhatsApp
   Uso: link a WhatsApp, chat de soporte */
.icon-whatsapp {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='%23134fae'%3E%3Cpath d='M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.45 1.32 4.95L2 22l5.25-1.45c1.45.84 3.1 1.32 4.79 1.32 5.46 0 9.91-4.45 9.91-9.91S17.5 2 12.04 2zM12.1 18.7c-1.5 0-2.98-.4-4.27-1.16l-.76-.45-3.12.86.84-3.08-.5-.8c-.8-1.3-1.23-2.82-1.23-4.36 0-4.62 3.77-8.38 8.4-8.38 4.62 0 8.38 3.76 8.38 8.38 0 4.61-3.76 8.37-8.38 8.37z'/%3E%3Cpath d='M16.4 13.8c-.27-.14-1.6-.8-1.85-.88-.25-.08-.43-.14-.6.13-.17.27-.68.88-.83 1.06-.15.18-.3.2-.56.07-1.04-.52-2.27-1.57-3.03-2.7-.23-.34.24-.35.64-1.1.07-.12.03-.22-.02-.3-.05-.1-.6-1.45-.82-1.98-.22-.55-.45-.44-.6-.44-.16 0-.33-.02-.51-.02-.28 0-.74.1-1.13.52-.5.5-.92 1.28-.92 2.17 0 1.14.85 2.48 1.1 2.77.25.3 2.05 3.48 4.97 4.54 1.28.46 2.2.55 2.98.52.98-.03 1.85-.6 2.18-1.18.34-.6.23-1.12.15-1.23-.07-.1-.26-.16-.53-.3z'/%3E%3C/svg%3E");
}

/* icon-send - Enviar
   Uso: botones de formularios, envío de mensajes */
.icon-send {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23134fae' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='22' y1='2' x2='11' y2='13'/%3E%3Cpolygon points='22 2 15 22 11 13 2 9 22 2'/%3E%3C/svg%3E");
}

/* ============================================
   ÍCONOS DE UBICACIÓN Y NAVEGACIÓN
   ============================================ */

/* icon-location - Ubicación
   Uso: direcciones, mapas, sedes y oficinas */
.icon-location,
.icon-pin {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23134fae' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
}

/* icon-map - Mapa
   Uso: acceso a mapas, ver ubicaciones */
.icon-map {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23134fae' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='1 6 1 22 8 18 16 22 23 18 23 2 16 6 8 2 1 6'/%3E%3Cline x1='8' y1='2' x2='8' y2='18'/%3E%3Cline x1='16' y1='6' x2='16' y2='22'/%3E%3C/svg%3E");
}

/* icon-compass - Compass/direcciones
   Uso: orientación, encontrar estaciones de servicio */
.icon-compass,
.icon-direction {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23134fae' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolygon points='16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76'/%3E%3C/svg%3E");
}

/* ============================================
   ÍCONOS DE REDES SOCIALES
   ============================================ */

/* icon-facebook - Facebook */
.icon-facebook {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='%23134fae'%3E%3Cpath d='M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z'/%3E%3C/svg%3E");
}

/* icon-twitter - Twitter/X */
.icon-twitter {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='%23134fae'%3E%3Cpath d='M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z'/%3E%3C/svg%3E");
}

/* icon-instagram - Instagram */
.icon-instagram {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23134fae' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='2' width='20' height='20' rx='5' ry='5'/%3E%3Cpath d='M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z'/%3E%3Cline x1='17.5' y1='6.5' x2='17.51' y2='6.5'/%3E%3C/svg%3E");
}

/* icon-youtube - YouTube */
.icon-youtube {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='%23134fae'%3E%3Cpath d='M22.54 6.42a2.78 2.78 0 0 0-1.94-2C18.88 4 12 4 12 4s-6.88 0-8.6.46a2.78 2.78 0 0 0-1.94 2A29 29 0 0 0 1 11.75a29 29 0 0 0 .46 5.33A2.78 2.78 0 0 0 3.4 19c1.72.46 8.6.46 8.6.46s6.88 0 8.6-.46a2.78 2.78 0 0 0 1.94-2 29 29 0 0 0 .46-5.25 29 29 0 0 0-.46-5.33z'/%3E%3Cpolygon points='9.75 15.02 15.5 11.75 9.75 8.48 9.75 15.02'/%3E%3C/svg%3E");
}

/* icon-linkedin - LinkedIn */
.icon-linkedin {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='%23134fae'%3E%3Cpath d='M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z'/%3E%3Crect x='2' y='9' width='4' height='12'/%3E%3Ccircle cx='4' cy='4' r='2'/%3E%3C/svg%3E");
}

/* ============================================
   ÍCONOS DE ENERGÍA Y COMBUSTIBLE
   ============================================ */

/* icon-fuel - Combustible/gasolina
   Uso: productos de combustibles, estaciones de servicio */
.icon-fuel,
.icon-gasolina,
.icon-diesel {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23134fae' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 22h12'/%3E%3Cpath d='M4 22v-8a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v8'/%3E%3Cpath d='M14 10V4a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v6'/%3E%3Cline x1='17' y1='15' x2='20' y2='15'/%3E%3Cpath d='M20 15v5a2 2 0 0 0 2 2'/%3E%3C/svg%3E");
}

/* icon-station - Estación de servicio
   Uso: información de estaciones, buscador de gasolineras */
.icon-station {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23134fae' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='2' width='16' height='20' rx='2' ry='2'/%3E%3Cline x1='8' y1='6' x2='16' y2='6'/%3E%3Cline x1='8' y1='10' x2='16' y2='10'/%3E%3Cline x1='8' y1='14' x2='12' y2='14'/%3E%3C/svg%3E");
}

/* icon-truck - Camión/pipa
   Uso: logística, entregas, flotilla de transporte */
.icon-truck,
.icon-pipa {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23134fae' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1' y='4' width='15' height='13' rx='2'/%3E%3Cpolygon points='16 8 20 8 23 11 23 17 16 17 16 8'/%3E%3Ccircle cx='5.5' cy='17.5' r='2.5'/%3E%3Ccircle cx='18.5' cy='17.5' r='2.5'/%3E%3C/svg%3E");
}

/* icon-oil - Aceite/industrial
   Uso: productos industriales, lubricantes */
.icon-oil {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23134fae' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2v4M12 6l-3 3h6l-3-3z'/%3E%3Cpath d='M9 9v8a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2V9'/%3E%3Ccircle cx='12' cy='19' r='2'/%3E%3C/svg%3E");
}

/* ============================================
   ÍCONOS DE DOCUMENTOS Y HERRAMIENTAS
   ============================================ */

/* icon-download - Descargar
   Uso: descarga de documentos, reportes, facturas */
.icon-download {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23134fae' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3Cline x1='12' y1='15' x2='12' y2='3'/%3E%3C/svg%3E");
}

/* icon-upload - Subir
   Uso: subida de documentos, adjuntar archivos */
.icon-upload {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23134fae' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='17 8 12 3 7 8'/%3E%3Cline x1='12' y1='3' x2='12' y2='15'/%3E%3C/svg%3E");
}

/* icon-pdf - Documento PDF
   Uso: archivos PDF, documentos descargables */
.icon-pdf {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23134fae' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cpath d='M12 18v-4M9 16h6'/%3E%3C/svg%3E");
}

/* icon-edit - Editar
   Uso: edición de perfiles, formularios editables */
.icon-edit,
.icon-pen {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23134fae' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z'/%3E%3C/svg%3E");
}

/* icon-trash - Eliminar/borrar
   Uso: eliminación de elementos, basurero */
.icon-trash {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23134fae' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 6 5 6 21 6'/%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3C/svg%3E");
}

/* icon-file - Archivo/documento
   Uso: documentos, reportes, facturas */
.icon-file,
.icon-document {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23134fae' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z'/%3E%3Cpolyline points='13 2 13 9 20 9'/%3E%3C/svg%3E");
}

/* icon-save - Guardar
   Uso: guardar cambios, confirmaciones */
.icon-save {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23134fae' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z'/%3E%3Cpolyline points='17 21 17 13 7 13 7 21'/%3E%3Cpolyline points='7 3 7 8 15 8'/%3E%3C/svg%3E");
}

/* ============================================
   ÍCONOS DE TIEMPO Y FECHAS
   ============================================ */

/* icon-time - Tiempo/reloj
   Uso: horarios, tiempos de entrega, citas */
.icon-time,
.icon-clock {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23134fae' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E");
}

/* icon-calendar - Calendario
   Uso: fechas, eventos, programaciones */
.icon-calendar,
.icon-date {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23134fae' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
}

/* ============================================
   ÍCONOS DE FINANZAS Y TRANSACCIONES
   ============================================ */

/* icon-credit-card - Tarjeta de crédito
   Uso: pagos, métodos de pago, línea de crédito */
.icon-credit-card,
.icon-payment,
.icon-wallet {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23134fae' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1' y='4' width='22' height='16' rx='2' ry='2'/%3E%3Cline x1='1' y1='10' x2='23' y2='10'/%3E%3C/svg%3E");
}

/* icon-calculator - Calculadora
   Uso: cotizaciones, cálculos de precios */
.icon-calculator {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23134fae' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='2' width='16' height='20' rx='2' ry='2'/%3E%3Cline x1='8' y1='6' x2='16' y2='6'/%3E%3Cline x1='16' y1='14' x2='16' y2='18'/%3E%3Cline x1='12' y1='14' x2='12' y2='18'/%3E%3Cline x1='8' y1='14' x2='8' y2='18'/%3E%3C/svg%3E");
}

/* icon-chart - Gráfico/reporte
   Uso: reportes de consumo, estadísticas, rendimiento */
.icon-chart,
.icon-graph {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23134fae' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='20' x2='18' y2='10'/%3E%3Cline x1='12' y1='20' x2='12' y2='4'/%3E%3Cline x1='6' y1='20' x2='6' y2='14'/%3E%3C/svg%3E");
}

/* icon-ticket - Factura/comprobante
   Uso: facturas, recibos, comprobantes */
.icon-ticket,
.icon-bill {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23134fae' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cline x1='16' y1='13' x2='8' y2='13'/%3E%3Cline x1='16' y1='17' x2='8' y2='17'/%3E%3Cpolyline points='10 9 9 9 8 9'/%3E%3C/svg%3E");
}

/* ============================================
   ÍCONOS DE NOTIFICACIONES Y ALERTAS
   ============================================ */

/* icon-bell - Notificaciones
   Uso: alertas, notificaciones, mensajes */
.icon-bell {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23134fae' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9'/%3E%3Cpath d='M13.73 21a2 2 0 0 1-3.46 0'/%3E%3C/svg%3E");
}

/* icon-info - Información
   Uso: tooltips, información adicional, ayuda */
.icon-info {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23134fae' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='16' x2='12' y2='12'/%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'/%3E%3C/svg%3E");
}

/* icon-alert - Alerta/advertencia
   Uso: mensajes de advertencia, errores */
.icon-alert,
.icon-warning {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23134fae' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2L1 21h22L12 2z'/%3E%3Cline x1='12' y1='9' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E");
}

/* ============================================
   ÍCONOS DE SERVICIOS Y COMODIDADES (Enercore)
   ============================================ */

/* icon-coffee - Cafetería
   Uso: servicios complementarios en estaciones */
.icon-coffee {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23134fae' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8h1a4 4 0 0 1 0 8h-1'/%3E%3Cpath d='M2 8h16v9a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4V8z'/%3E%3Cline x1='6' y1='1' x2='6' y2='4'/%3E%3Cline x1='10' y1='1' x2='10' y2='4'/%3E%3Cline x1='14' y1='1' x2='14' y2='4'/%3E%3C/svg%3E");
}

/* icon-shop - Tienda/minimarket
   Uso: servicios de tienda en estaciones */
.icon-shop,
.icon-market {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23134fae' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpolyline points='9 22 9 12 15 12 15 22'/%3E%3C/svg%3E");
}

/* icon-car-wash - Lavado de autos
   Uso: servicios de lavado */
.icon-car-wash {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23134fae' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11l2-6h14l2 6'/%3E%3Ccircle cx='7' cy='17' r='2'/%3E%3Ccircle cx='17' cy='17' r='2'/%3E%3Cpath d='M5 17h14'/%3E%3C/svg%3E");
}

/* icon-restroom - Baño/sanitario
   Uso: servicios sanitarios */
.icon-restroom,
.icon-toilet {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23134fae' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='11' r='3'/%3E%3Cpath d='M12 3a3 3 0 0 0-3 3v3h6V6a3 3 0 0 0-3-3z'/%3E%3Cpath d='M9 14h6v6a2 2 0 0 1-2 2h-2a2 2 0 0 1-2-2v-6z'/%3E%3C/svg%3E");
}

/* ============================================
   AJUSTES DE POSICIÓN Y TAMAÑO
   ============================================ */

/* Ajustes para contenedores de iconos en elementos específicos */

/* Barra de búsqueda */
.search-box .search-button,
.search-box .search-tablet {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
}

.search-box .search-button em,
.search-box .search-tablet em {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Menú de usuario */
.user-menu .avatar {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.user-menu .avatar .custom-icon {
    width: 24px !important;
    height: 24px !important;
}

/* Botones sociales en footer */
.footer-sosyal a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
}

.footer-sosyal a em {
    width: 20px !important;
    height: 20px !important;
}

/* Botones de navegación de carruseles */
.swiper-button-prev,
.swiper-button-next {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ============================================
   SOPORTE PARA HOVER Y ESTADOS ACTIVOS
   ============================================ */

/* Efectos hover generales */
[class^="icon-"]:not(.no-fallback):hover,
[class*=" icon-"]:not(.no-fallback):hover {
    opacity: 0.8;
    transition: opacity 0.2s ease;
}

/* Iconos azules que cambian a amarillo en hover (Enercore) */
.icon-arrow-left:hover,
.icon-arrow-right:hover,
.icon-arrow-down:hover,
.icon-user:hover,
.icon-phone:hover,
.icon-location:hover {
    filter: brightness(0) saturate(100%) invert(84%) sepia(65%) saturate(1574%) hue-rotate(340deg) brightness(103%) contrast(104%);
}

/* ============================================
   EXCEPCIONES - Para elementos que usan su propio CSS
   ============================================ */

/* Si algún elemento necesita mantener el estilo original, usar esta clase */
.no-fallback,
[class*="icon-"].no-fallback {
    background-image: none !important;
}

.no-fallback:before,
[class*="icon-"].no-fallback:before {
    display: inline-block !important;
    content: "" !important;
}

/* ============================================
   FIN DEL iconos CSS basicos
   ============================================ */
/* ============================================
   ELIMINAR RECUADRO INDESEADO EN CAMPANAS
   ============================================ */

/* Eliminar cualquier pseudo-elemento que genere el recuadro */
.campaign-area .campaign-arrow::before,
.campaign-area .campaign-arrow::after {
    display: none !important;
    content: none !important;
    background: none !important;
}

/* Forzar que SOLO se vea la flecha SVG */
.campaign-arrow {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

.campaign-arrow .icon-arrow-right {
    display: inline-block !important;
    width: 20px !important;
    height: 20px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23134fae' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E") !important;
}

/* Eliminar background de círculo si no lo quieres */
.campaign-arrow {
    background-color: transparent !important;
}

/* Opcional: Si QUIERES mantener el círculo, usa esto en lugar de la línea anterior */
/* .campaign-arrow {
    background-color: rgba(19, 79, 174, 0.1) !important;
} */

/* Asegurar que el ícono no herede estilos no deseados */
.campaign-arrow .icon-arrow-right::before,
.campaign-arrow .icon-arrow-right::after {
    display: none !important;
    content: none !important;
}