/* Botones principales */
.btn-main, button[type="submit"], .save-btn {
  font-size: 1em;
  padding: 7px 18px;
  background: #009e5c;
  color: #fff;
  border: none;
  border-radius: 5px;
  font-weight: 600;
  box-shadow: 0 1px 4px #009e5c22;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s;
}
.btn-main:hover, button[type="submit"]:hover, .save-btn:hover {
  background: #007a47;
  box-shadow: 0 2px 8px #009e5c33;
}

/* Botón Back */
.back-btn {
  font-size: 1em;
  padding: 7px 18px;
  background: #e0e0e0;
  color: #222;
  border: none;
  border-radius: 5px;
  font-weight: 600;
  box-shadow: 0 1px 4px #8882;
  cursor: pointer;
  margin-left: 8px;
  transition: background 0.2s, box-shadow 0.2s;
}
.back-btn:hover {
  background: #bdbdbd;
  box-shadow: 0 2px 8px #8883;
}

/* Botones compactos para acciones en la tabla */
.edit-btn {
  font-size: 0.78em;
  padding: 3px 10px;
  background: #1976d2;
  color: #fff;
  border: 1px solid #115293;
  border-radius: 4px;
  font-weight: 600;
  box-shadow: 0 1px 4px #1976d222;
  cursor: pointer;
  min-width: 56px;
  transition: background 0.2s, box-shadow 0.2s;
}
.edit-btn:hover {
  background: #115293;
  box-shadow: 0 2px 8px #1976d233;
}
.delete-btn {
  font-size: 0.78em;
  padding: 3px 10px;
  background: #d32f2f;
  color: #fff;
  border: 1px solid #a31515;
  border-radius: 4px;
  font-weight: 600;
  box-shadow: 0 1px 4px #d32f2f22;
  cursor: pointer;
  min-width: 56px;
  transition: background 0.2s, box-shadow 0.2s;
}
.delete-btn:hover {
  background: #a31515;
  box-shadow: 0 2px 8px #d32f2f33;
}
.add-option-btn {
  font-size: 0.78em;
  padding: 3px 10px;
  background: #009e5c;
  color: #fff;
  border: 1px solid #007a47;
  border-radius: 4px;
  font-weight: 600;
  box-shadow: 0 1px 4px #009e5c22;
  cursor: pointer;
  min-width: 56px;
  max-width: 120px;
  width: 120px;
  height: 28px;
  line-height: 1.2;
  transition: background 0.2s, box-shadow 0.2s;
  display: inline-block;
  margin-left: 0;
}
.add-option-btn:hover {
  background: #007a47;
  box-shadow: 0 2px 8px #009e5c33;
}

/* Botón Upload Image */
.upload-image-btn {
  font-size: 1em;
  padding: 7px 18px;
  background: #1976d2;
  color: #fff;
  border: none;
  border-radius: 5px;
  font-weight: 600;
  box-shadow: 0 1px 4px #1976d222;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s;
}
.upload-image-btn:hover {
  background: #115293;
  box-shadow: 0 2px 8px #1976d233;
}

/* Estilos globales para ordenación */
.sort-arrow {
  cursor: pointer;
  color: #888;
  font-size: 1em;
  transition: color 0.2s;
}
.sort-arrow.active {
  color: #2ecc40;
}
.sort-num {
  font-size: 0.7em;
  margin-left: 2px;
  color: #222;
}
.sort-remove {
  margin-left: 2px;
  cursor: pointer;
  color: #e74c3c;
  font-size: 0.9em;
}

.toggle-password-btn {
  background: none;
  border: none;
  position: absolute;
  right: 8px;
  cursor: pointer;
  font-size: 1.2em;
  font-family: monospace;
  padding: 0;
  color: #888;
  transition: color 0.2s;
}
.toggle-password-btn:focus {
  outline: 2px solid #1976d2;
}