/* ===== LAYOUT FIX PARA SKILLS - QUEBRA DE LINHA ===== */

/* Força o layout correto das skills */
.skill-list li {
  display: block !important;
  padding: 16px 0 !important;
  border-bottom: 1px solid var(--light-gray);
  transition: all 0.3s ease;
}

.skill-list li:last-child {
  border-bottom: none;
}

/* Container da skill na primeira linha */
.skill-item-container {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 12px !important;
  width: 100% !important;
  gap: 12px !important;
}

/* Ícone da skill */
.skill-icon {
  color: var(--primary) !important;
  font-size: 1.1rem !important;
  width: 20px !important;
  flex-shrink: 0 !important;
  text-align: center !important;
}

/* Nome da skill (entre ícone e nível) */
.skill-name {
  flex: 1 !important;
  font-weight: 500 !important;
  color: var(--text-light) !important;
  text-align: left !important;
}

/* Badge do nível */
.skill-level {
  background: var(--primary) !important;
  color: white !important;
  padding: 4px 8px !important;
  border-radius: 12px !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
}

/* Barras de progresso */
.skill-progress-container {
  width: 100% !important;
  margin-top: 0 !important;
}

.skill-progress {
  width: 100% !important;
  height: 8px !important;
  background: var(--light-gray) !important;
  border-radius: 4px !important;
  overflow: hidden !important;
  position: relative !important;
}

.skill-progress-bar {
  height: 100% !important;
  border-radius: 4px !important;
  transition: width 1.5s ease !important;
  position: relative !important;
}

.skill-progress-bar::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent) !important;
  animation: shimmer 2s infinite !important;
}

@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* Cores por categoria */
.skill-progress-bar.backend { 
  background: linear-gradient(90deg, #4CAF50, #8BC34A) !important; 
}

.skill-progress-bar.frontend { 
  background: linear-gradient(90deg, #2196F3, #03A9F4) !important; 
}

.skill-progress-bar.data { 
  background: linear-gradient(90deg, #FF9800, #FFC107) !important; 
}

.skill-progress-bar.ai { 
  background: linear-gradient(90deg, #9C27B0, #E91E63) !important; 
}

/* Hover effects */
.skill-list li:hover {
  background: rgba(255,255,255,0.05) !important;
  border-radius: 8px !important;
  padding-left: 12px !important;
  padding-right: 12px !important;
  margin-left: -12px !important;
  margin-right: -12px !important;
}

.skill-list li:hover .skill-progress-bubble {
  transform: translateY(-50%) scale(1.2) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4) !important;
}

/* Responsividade */
@media (max-width: 768px) {
  .skill-item-container {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }
  
  .skill-level {
    align-self: flex-end !important;
  }
  
  .skill-progress-container {
    width: 100% !important;
  }
}

@media (max-width: 480px) {
  .skill-list li {
    padding: 12px 0 !important;
  }
  
  .skill-item-container {
    gap: 6px !important;
  }
  
  .skill-level {
    font-size: 0.7rem !important;
    padding: 3px 6px !important;
  }
}

/* Progress bubble indicator */
.skill-progress-bubble {
  position: absolute !important;
  right: -6px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 12px !important;
  height: 12px !important;
  background: #fff !important;
  border-radius: 50% !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
  z-index: 3 !important;
  pointer-events: none !important;
  transition: all 0.3s ease !important;
}

.skill-progress-bubble::before {
  content: '' !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 6px !important;
  height: 6px !important;
  background: inherit !important;
  border-radius: 50% !important;
  background: var(--primary) !important;
}

.skill-progress-bar {
  position: relative !important;
}