/* =====================================================
   ICONOS.CSS - IMPORTACIÓN Y ESTILOS DE FONT AWESOME
   Sistema centralizado de iconografía
   ===================================================== */

/* Importar Font Awesome */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css');

/* ===== ICONOS DE CATEGORÍAS POR RUBRO ===== */
.icon-ferreteria::before { content: '\f6e3'; /* fa-hammer */ }
.icon-barraca::before { content: '\f482'; /* fa-pallet */ }
.icon-supermercado::before { content: '\f07a'; /* fa-shopping-cart */ }
.icon-farmacia::before { content: '\f484'; /* fa-pills */ }
.icon-restaurant::before { content: '\f2e7'; /* fa-utensils */ }
.icon-musico::before { content: '\f001'; /* fa-music */ }
.icon-ropa::before { content: '\f553'; /* fa-tshirt */ }
.icon-servicio::before { content: '\f0ad'; /* fa-wrench */ }
.icon-default::before { content: '\f54e'; /* fa-store */ }

/* ===== ICONOS MUNICIPALES ===== */
.icon-comisaria::before { content: '\f3ed'; /* fa-shield-alt */ }
.icon-bomberos::before { content: '\f84c'; /* fa-fire-extinguisher */ }
.icon-salud::before { content: '\f7f2'; /* fa-hospital-user */ }
.icon-escuela::before { content: '\f549'; /* fa-school */ }

/* ===== ICONOS DE CANALES Y EVENTOS ===== */
.icon-canal-tv::before { content: '\f26c'; /* fa-tv */ }
.icon-evento-cultural::before { content: '\f630'; /* fa-masks-theater */ }
.icon-evento-deportivo::before { content: '\f091'; /* fa-trophy */ }

/* ===== ICONOS DE REDES SOCIALES ===== */
.icon-whatsapp::before { content: '\f232'; /* fa-whatsapp */ }
.icon-facebook::before { content: '\f09a'; /* fa-facebook-f */ }
.icon-twitter::before { content: '\e61b'; /* fa-x-twitter */ }
.icon-telegram::before { content: '\f2c6'; /* fa-telegram */ }
.icon-instagram::before { content: '\f16d'; /* fa-instagram */ }

/* ===== ICONOS DE INTERFAZ ===== */
.icon-search::before { content: '\f002'; /* fa-search */ }
.icon-filter::before { content: '\f0b0'; /* fa-filter */ }
.icon-close::before { content: '\f00d'; /* fa-times */ }
.icon-menu::before { content: '\f0c9'; /* fa-bars */ }
.icon-location::before { content: '\f3c5'; /* fa-map-marker-alt */ }
.icon-phone::before { content: '\f095'; /* fa-phone */ }
.icon-email::before { content: '\f0e0'; /* fa-envelope */ }

/* ===== ESTILOS COMUNES PARA ICONOS ===== */
.icon,
.fas,
.fab,
.far {
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Tamaños de iconos */
.icon-xs { font-size: 0.75rem; }
.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; }

/* Colores de iconos */
.icon-primary { color: #3b82f6; }
.icon-success { color: #10b981; }
.icon-warning { color: #f59e0b; }
.icon-danger { color: #ef4444; }
.icon-white { color: #ffffff; }
.icon-gray { color: #6b7280; }

/* Efectos de iconos */
.icon-spin {
    animation: icon-spin 2s 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; }
}

/* Shadow para iconos */
.icon-shadow {
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
}

/* Iconos en botones */
button .icon,
.btn .icon {
    margin-right: 0.5rem;
}

button .icon:last-child,
.btn .icon:last-child {
    margin-right: 0;
    margin-left: 0.5rem;
}

/* Iconos en marcadores del mapa */
.marker-base i,
.custom-marker-compact i {
    color: white !important;
    font-size: 20px;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.4));
}

@media (max-width: 768px) {
    .marker-base i,
    .custom-marker-compact i {
        font-size: 16px;
    }
}