/* Estilos para el selector de idioma */
#language-selector {
  position: relative;
  margin-left: 15px;
}

.language-dropdown {
  position: relative;
}

.language-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--color-default);
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s ease;
  min-width: 80px;
  justify-content: space-between;
}

.language-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--color-primary);
}

.language-options {
  position: absolute;
  top: 100%;
  right: 0;
  background: var(--color-white);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 6px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  min-width: 140px;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.3s ease;
}

.language-options.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.language-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 15px;
  cursor: pointer;
  transition: background-color 0.2s ease;
  color: var(--color-default);
  font-size: 14px;
}

.language-option:hover {
  background-color: var(--color-light);
}

.language-option:first-child {
  border-radius: 6px 6px 0 0;
}

.language-option:last-child {
  border-radius: 0 0 6px 6px;
}

/* Banderas */
.flag {
  width: 20px;
  height: 15px;
  border-radius: 2px;
  display: inline-block;
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
}

.flag-es {
  background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNzUwIiBoZWlnaHQ9IjUwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cmVjdCB3aWR0aD0iNzUwIiBoZWlnaHQ9IjUwMCIgZmlsbD0iI0FBMTUxQiIvPgogIDxyZWN0IHdpZHRoPSI3NTAiIGhlaWdodD0iMjUwIiB5PSIxMjUiIGZpbGw9IiNGMUJGMDAiLz4KPC9zdmc+');
}

.flag-en {
  background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIwMCIgaGVpZ2h0PSI2MDAiIHZpZXdCb3g9IjAgMCAxMjAwIDYwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cmVjdCB3aWR0aD0iMTIwMCIgaGVpZ2h0PSI2MDAiIGZpbGw9IiMwMTI0NjkiLz4KICA8ZyBmaWxsPSIjRkZGIj4KICAgIDxwYXRoIGQ9Im0wLDAgbDEyMDAsNjAwIG0wLC02MDAgbC0xMjAwLDYwMCIgc3Ryb2tlPSIjRkZGIiBzdHJva2Utd2lkdGg9IjEwMCIvPgogICAgPHBhdGggZD0ibTAsMCBsMTIwMCw2MDAgbTAsLTYwMCBsLTEyMDAsNjAwIiBzdHJva2U9IiNDRjE0MkIiIHN0cm9rZS13aWR0aD0iNjAiLz4KICAgIDxwYXRoIGQ9Im02MDAsMCB2NjAwIG0tNjAwLC0zMDAgaDEyMDAiIHN0cm9rZT0iI0ZGRiIgc3Ryb2tlLXdpZHRoPSIxNjAiLz4KICAgIDxwYXRoIGQ9Im02MDAsMCB2NjAwIG0tNjAwLC0zMDAgaDEyMDAiIHN0cm9rZT0iI0NGMTQyQiIgc3Ryb2tlLXdpZHRoPSIxMDAiLz4KICA8L2c+Cjwvc3ZnPg==');
}

.flag-fr {
  background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOTAwIiBoZWlnaHQ9IjYwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cmVjdCB3aWR0aD0iMzAwIiBoZWlnaHQ9IjYwMCIgZmlsbD0iIzAwMjM5NSIvPgogIDxyZWN0IHdpZHRoPSIzMDAiIGhlaWdodD0iNjAwIiB4PSIzMDAiIGZpbGw9IiNGRkYiLz4KICA8cmVjdCB3aWR0aD0iMzAwIiBoZWlnaHQ9IjYwMCIgeD0iNjAwIiBmaWxsPSIjRUQyOTM5Ii8+Cjwvc3ZnPg==');
}

/* Responsive */
@media (max-width: 768px) {
  #language-selector {
    margin-left: 10px;
  }
  
  .language-btn {
    padding: 6px 10px;
    font-size: 13px;
    min-width: 70px;
  }
  
  .language-options {
    min-width: 120px;
  }
  
  .flag {
    width: 18px;
    height: 13px;
  }
}

/* Modo oscuro */
body.dark .language-btn {
  border-color: rgba(255, 255, 255, 0.3);
  color: var(--color-white);
}

body.dark .language-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

body.dark .language-options {
  background: var(--color-secondary);
  border-color: rgba(255, 255, 255, 0.1);
}

body.dark .language-option {
  color: var(--color-white);
}

body.dark .language-option:hover {
  background-color: rgba(255, 255, 255, 0.1);
}