/* ===============================
   ICONOS CSS - INSOMNIA DEV
   =============================== */

/* Iconos personalizados usando Unicode y CSS */
/* Reemplaza Font Awesome para evitar problemas de CSP */

/* Iconos básicos */
.icon-home::before { content: "🏠"; }
.icon-cogs::before { content: "⚙️"; }
.icon-cube::before { content: "📦"; }
.icon-microchip::before { content: "🔧"; }
.icon-rocket::before { content: "🚀"; }
.icon-envelope::before { content: "📧"; }
.icon-phone::before { content: "📞"; }
.icon-user::before { content: "👤"; }
.icon-building::before { content: "🏢"; }
.icon-calendar::before { content: "📅"; }
.icon-comment::before { content: "💬"; }
.icon-dollar-sign::before { content: "💰"; }
.icon-globe::before { content: "🌐"; }
.icon-paint-brush::before { content: "🎨"; }
.icon-mobile-alt::before { content: "📱"; }
.icon-cloud::before { content: "☁️"; }
.icon-chart-line::before { content: "📈"; }
.icon-tools::before { content: "🔧"; }
.icon-balance-scale::before { content: "⚖️"; }
.icon-moon::before { content: "🌙"; }
.icon-calculator::before { content: "🧮"; }
.icon-play::before { content: "▶️"; }
.icon-info-circle::before { content: "ℹ️"; }
.icon-expand-alt::before { content: "🔍"; }
.icon-check::before { content: "✅"; }
.icon-map-marker-alt::before { content: "📍"; }
.icon-users::before { content: "👥"; }
.icon-shield-alt::before { content: "🛡️"; }
.icon-clock::before { content: "⏰"; }
.icon-sitemap::before { content: "🗺️"; }
.icon-code::before { content: "💻"; }
.icon-terminal::before { content: "💻"; }
.icon-paper-plane::before { content: "📤"; }
.icon-chevron-up::before { content: "⬆️"; }
.icon-arrow-up::before { content: "⬆️"; }
.icon-brain::before { content: "🧠"; }
.icon-shopping-cart::before { content: "🛒"; }
.icon-database::before { content: "🗄️"; }
.icon-eye::before { content: "👁️"; }
.icon-bullseye::before { content: "🎯"; }
.icon-palette::before { content: "🎨"; }
.icon-server::before { content: "🖥️"; }
.icon-desktop::before { content: "🖥️"; }

/* Iconos de redes sociales */
.icon-whatsapp::before { content: "📱"; }
.icon-instagram::before { content: "📸"; }
.icon-twitter::before { content: "🐦"; }
.icon-linkedin::before { content: "💼"; }
.icon-github::before { content: "🐙"; }
.icon-youtube::before { content: "📺"; }
.icon-facebook::before { content: "👥"; }
.icon-telegram::before { content: "📬"; }

/* Iconos de tecnologías */
.icon-php::before { content: "🐘"; }
.icon-nodejs::before { content: "🟢"; }
.icon-react::before { content: "⚛️"; }
.icon-vue::before { content: "💚"; }
.icon-angular::before { content: "🔴"; }
.icon-python::before { content: "🐍"; }
.icon-java::before { content: "☕"; }
.icon-docker::before { content: "🐳"; }
.icon-aws::before { content: "☁️"; }
.icon-azure::before { content: "☁️"; }
.icon-gcp::before { content: "☁️"; }
.icon-kubernetes::before { content: "⚓"; }
.icon-git::before { content: "📝"; }
.icon-html5::before { content: "🌐"; }
.icon-css3::before { content: "🎨"; }
.icon-javascript::before { content: "🟡"; }
.icon-typescript::before { content: "🔵"; }
.icon-mongodb::before { content: "🍃"; }
.icon-mysql::before { content: "🐬"; }
.icon-postgresql::before { content: "🐘"; }
.icon-redis::before { content: "🔴"; }
.icon-nginx::before { content: "🟢"; }
.icon-apache::before { content: "🦅"; }

/* Estilos para iconos */
[class^="icon-"] {
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  /* text-rendering: auto; - Removed for compatibility */
  line-height: 1;
  vertical-align: middle;
}

/* Tamaños de iconos */
.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;
}

.icon-3xl {
  font-size: 3rem;
}

/* Animaciones para iconos */
.icon-pulse {
  animation: icon-pulse 2s infinite;
}

@keyframes icon-pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

.icon-spin {
  animation: icon-spin 2s linear infinite;
}

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

.icon-bounce {
  animation: icon-bounce 1s infinite;
}

@keyframes icon-bounce {
  0%, 20%, 53%, 80%, 100% { transform: translate3d(0,0,0); }
  40%, 43% { transform: translate3d(0,-8px,0); }
  70% { transform: translate3d(0,-4px,0); }
  90% { transform: translate3d(0,-2px,0); }
}

/* Iconos con efectos neón */
.icon-neon {
  text-shadow: 0 0 10px currentColor;
  transition: all 0.3s ease;
}

.icon-neon:hover {
  text-shadow: 0 0 20px currentColor, 0 0 30px currentColor;
  transform: scale(1.1);
}

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

/* Iconos en navegación */
.nav-link .icon-sm,
.nav-link .icon-md {
  margin-right: 0.25rem;
}

/* Iconos en cards */
.service-icon .icon-2xl,
.service-icon .icon-3xl {
  color: var(--text-primary);
}

/* Iconos en terminal */
.terminal-body .icon-sm {
  margin-right: 0.5rem;
}

/* Iconos en timeline */
.timeline-content .icon-sm {
  margin-right: 0.5rem;
}

/* Iconos en footer */
.footer-links .icon-sm {
  margin-right: 0.5rem;
}

/* Iconos en contact channels */
.channel-icon .icon-2xl {
  color: var(--primary-cyan);
}

/* Iconos en social links */
.social-link .icon-lg {
  transition: all 0.3s ease;
}

.social-link:hover .icon-lg {
  transform: translateY(-2px);
}

/* Iconos en tech badges */
.tech-badge .icon-sm {
  margin-right: 0.25rem;
}

/* Iconos en stats */
.stat-item .icon-2xl {
  color: var(--primary-cyan);
  margin-bottom: 0.5rem;
}

/* Iconos en process steps */
.step-number .icon-sm {
  color: var(--text-primary);
}

/* Iconos en form labels */
.form-label .icon-sm {
  margin-right: 0.5rem;
  color: var(--primary-cyan);
}

/* Iconos en alerts */
.alert .icon-md {
  margin-right: 0.5rem;
}

.alert-success .icon-md {
  color: var(--text-success);
}

.alert-warning .icon-md {
  color: var(--text-warning);
}

.alert-info .icon-md {
  color: var(--text-info);
}

/* Iconos en modals */
.modal-header .icon-lg {
  margin-right: 0.5rem;
}

/* Iconos en tooltips */
.tooltip .icon-sm {
  margin-right: 0.25rem;
}

/* Iconos en breadcrumbs */
.breadcrumb .icon-sm {
  margin-right: 0.25rem;
}

/* Iconos en pagination */
.pagination .icon-sm {
  margin: 0 0.25rem;
}

/* Iconos en dropdowns */
.dropdown-toggle .icon-sm {
  margin-right: 0.5rem;
}

/* Iconos en tabs */
.nav-tabs .icon-sm {
  margin-right: 0.25rem;
}

/* Iconos en accordion */
.accordion-button .icon-sm {
  margin-right: 0.5rem;
  transition: transform 0.3s ease;
}

.accordion-button[aria-expanded="true"] .icon-sm {
  transform: rotate(90deg);
}

/* Iconos en carousel */
.carousel-control-prev .icon-lg,
.carousel-control-next .icon-lg {
  color: var(--text-primary);
}

/* Iconos en progress bars */
.progress-bar .icon-sm {
  margin-right: 0.5rem;
}

/* Iconos en badges */
.badge .icon-sm {
  margin-right: 0.25rem;
}

/* Iconos en list groups */
.list-group-item .icon-sm {
  margin-right: 0.5rem;
}

/* Iconos en cards de productos */
.product-feature .icon-sm {
  margin-right: 0.5rem;
  color: var(--primary-cyan);
}

/* Iconos en servicios */
.service-features .icon-sm {
  margin-right: 0.5rem;
  color: var(--text-success);
}

/* Iconos en tecnologías */
.tech-category .icon-lg {
  color: var(--primary-cyan);
  margin-bottom: 1rem;
}

/* Iconos en contact form */
.contact-form .icon-sm {
  margin-right: 0.5rem;
  color: var(--primary-cyan);
}

/* Iconos en footer sections */
.footer-section .icon-md {
  margin-right: 0.5rem;
  color: var(--primary-cyan);
}

/* Responsive iconos */
@media (max-width: 768px) {
  .icon-3xl {
    font-size: 2rem;
  }
  
  .icon-2xl {
    font-size: 1.5rem;
  }
  
  .icon-xl {
    font-size: 1.25rem;
  }
}

@media (max-width: 576px) {
  .icon-3xl {
    font-size: 1.75rem;
  }
  
  .icon-2xl {
    font-size: 1.25rem;
  }
  
  .icon-xl {
    font-size: 1rem;
  }
  
  .icon-lg {
    font-size: 0.875rem;
  }
}

/* Iconos con estados de carga */
.icon-loading {
  animation: icon-spin 1s linear infinite;
}

/* Iconos con estados de éxito */
.icon-success {
  color: var(--text-success);
}

/* Iconos con estados de error */
.icon-error {
  color: var(--text-danger);
}

/* Iconos con estados de advertencia */
.icon-warning {
  color: var(--text-warning);
}

/* Iconos con estados de información */
.icon-info {
  color: var(--text-info);
}

/* Iconos con gradientes */
.icon-gradient {
  background: var(--gradient-primary);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

/* Iconos con efectos de hover mejorados */
.icon-hover-glow:hover {
  text-shadow: 0 0 10px currentColor, 0 0 20px currentColor;
  transform: scale(1.1);
}

.icon-hover-bounce:hover {
  animation: icon-bounce 0.6s ease;
}

.icon-hover-pulse:hover {
  animation: icon-pulse 1s ease;
}

/* Iconos con efectos de entrada */
.icon-fade-in {
  animation: fadeInUp 0.6s ease-out;
}

.icon-slide-in {
  animation: slideInLeft 0.6s ease-out;
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Iconos con efectos de salida */
.icon-fade-out {
  animation: fadeOut 0.6s ease-in;
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* Iconos con efectos de rotación */
.icon-rotate-90 {
  transform: rotate(90deg);
}

.icon-rotate-180 {
  transform: rotate(180deg);
}

.icon-rotate-270 {
  transform: rotate(270deg);
}

/* Iconos con efectos de escala */
.icon-scale-up {
  transform: scale(1.1);
}

.icon-scale-down {
  transform: scale(0.9);
}

/* Iconos con efectos de traslación */
.icon-translate-up {
  transform: translateY(-5px);
}

.icon-translate-down {
  transform: translateY(5px);
}

.icon-translate-left {
  transform: translateX(-5px);
}

.icon-translate-right {
  transform: translateX(5px);
}

/* Iconos con efectos de sombra */
.icon-shadow {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.icon-shadow-lg {
  text-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5);
}

/* Iconos con efectos de borde */
.icon-border {
  border: 2px solid currentColor;
  border-radius: 50%;
  padding: 0.5rem;
}

.icon-border-lg {
  border: 3px solid currentColor;
  border-radius: 50%;
  padding: 0.75rem;
}

/* Iconos con efectos de fondo */
.icon-bg {
  background: var(--dark-card);
  border-radius: 50%;
  padding: 0.5rem;
}

.icon-bg-lg {
  background: var(--dark-card);
  border-radius: 50%;
  padding: 0.75rem;
}

/* Iconos con efectos de gradiente de fondo */
.icon-bg-gradient {
  background: var(--gradient-primary);
  border-radius: 50%;
  padding: 0.5rem;
  color: var(--text-primary);
}

.icon-bg-gradient-lg {
  background: var(--gradient-primary);
  border-radius: 50%;
  padding: 0.75rem;
  color: var(--text-primary);
}