/* Botón estándar */
.btn {
  padding: 6px 12px;
  border-radius: 6px;
  border: none;
  background: linear-gradient(180deg,#5c5c5c 0%,#3b3b3b 100%);
  color: #f0f0f0;
  cursor: pointer;
}

/* Select */
select {
  padding: 6px 10px;
  border-radius: 6px;
  border: none;
  background: #d6d6d6;
  color: #111;
}

select option {
  background: #d6d6d6;
  color: #111;
}

/* Color picker */
.color-panel {
  width: 60px;
  height: 30px;
  border-radius: 6px;
  cursor: pointer;
  padding: 0;
}

/* Área de texto */
#input {
  width: 100%;
  height: 100%;
  background: rgba(20,20,20,0.6);
  color: #eee;
  border: 1px solid #444;
  border-radius: 8px;
  padding: 12px;
  resize: none;
  font-size: 16px;
  outline: none;
  box-sizing: border-box;
}

#input::placeholder {
  color: #aaa;
}

/* Estilo grafito */
select,
input,
textarea {
  background: var(--grafito-02);
  border: var(--borde-grafito);
  color: #fff;
}

select:hover,
input:hover,
textarea:hover {
  background: var(--grafito-03);
}
/* selector idioma */
.idioma-selector { position: relative; }

.idioma-btn {
  padding: 6px 12px;
  background: linear-gradient(180deg,#5c5c5c 0%,#3b3b3b 100%);
  border-radius: 6px;
  border: none;
  color: #f0f0f0;
  cursor: pointer;
  font-size: 14px;
}

.idioma-menu {
  position: absolute;
  top: 36px;
  right: 0;
  background: #2a2a2a;
  border: 1px solid #444;
  border-radius: 6px;
  padding: 4px 0;
  min-width: 140px;
  z-index: 999;
}

.idioma-menu div {
  padding: 8px 12px;
  color: #eee;
  cursor: pointer;
  white-space: nowrap;
}

.idioma-menu div:hover { background: #555; }

.oculto { display: none; }